From 503c15d844f71595938c52c6f8aac7ae3a23ef4d Mon Sep 17 00:00:00 2001
From: Dennis Benz <dennis.benz@uni-osnabrueck.de>
Date: Mon, 25 Nov 2024 10:20:02 +0100
Subject: [PATCH] Fix courseware block (#1076)

* Courseware: Load lti authentication in block content

* Courseware: Show opencast connection error after lti check is performed
---
 .../components/CoursewareVideoTable.vue       |  4 --
 .../courseware-plugin-opencast-video.vue      | 37 ++++++++++++++-----
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/courseware/vueapp/components/CoursewareVideoTable.vue b/courseware/vueapp/components/CoursewareVideoTable.vue
index 86d43794..6590d9f8 100644
--- a/courseware/vueapp/components/CoursewareVideoTable.vue
+++ b/courseware/vueapp/components/CoursewareVideoTable.vue
@@ -65,10 +65,6 @@
                 </tbody>
             </table>
         </div>
-
-        <LtiAuth v-if="simple_config_list"
-            :simple_config_list="simple_config_list"
-        />
     </div>
 </template>
 
diff --git a/courseware/vueapp/courseware-plugin-opencast-video.vue b/courseware/vueapp/courseware-plugin-opencast-video.vue
index cac87b2b..40e25182 100644
--- a/courseware/vueapp/courseware-plugin-opencast-video.vue
+++ b/courseware/vueapp/courseware-plugin-opencast-video.vue
@@ -13,8 +13,8 @@
                 <div>
                     <span v-if="!currentVideoId" v-text="$gettext('Es wurde bisher kein Video ausgewählt')"></span>
                     <span v-else-if="!currentEpisodeURL" v-text="$gettext('Dieses Video hat keinen Veröffentlichungs-URL-Link')"></span>
-                    <span v-else-if="!isCurrentVideoLTIAuthenticated" v-text="$gettext('Es ist ein Verbindungsfehler zum Opencast Server aufgetreten. Das ausgewählte Video kann zurzeit nicht angezeigt werden.')"></span>
-                    <iframe v-else :src="currentEpisodeURL"
+                    <span v-else-if="isCurrentVideoLTIChecked && !isCurrentVideoLTIAuthenticated" v-text="$gettext('Es ist ein Verbindungsfehler zum Opencast Server aufgetreten. Das ausgewählte Video kann zurzeit nicht angezeigt werden.')"></span>
+                    <iframe v-else-if="isCurrentVideoLTIChecked" :src="currentEpisodeURL"
                         class="oc_cw_iframe"
                         allowfullscreen
                     ></iframe>
@@ -25,6 +25,10 @@
                             Korrigieren sie die Sichtbarkeitseinstellungen im Opencast-Reiter.
                         </translate>
                     </div>
+
+                    <LtiAuth v-if="simple_config_list"
+                        :simple_config_list="simple_config_list"
+                    />
                 </div>
             </template>
             <template v-if="canEdit" #edit>
@@ -61,6 +65,7 @@
 const get = window._.get.bind(window._);
 import axios from 'axios';
 import { mapActions, mapGetters } from 'vuex';
+import LtiAuth from "./components/LtiAuth.vue";
 import CoursewareSearchBar from './components/CoursewareSearchBar.vue';
 import CoursewareVideoTable from './components/CoursewareVideoTable.vue';
 
@@ -68,6 +73,7 @@ export default {
     name: "courseware-plugin-opencast-video",
 
     components: {
+        LtiAuth,
         CoursewareSearchBar,
         CoursewareVideoTable,
     },
@@ -105,7 +111,7 @@ export default {
                     lastPage: 0,
                     items: 0
                 },
-            videos: {},
+            videos: [],
             loadingVideos : false,
             currentVideoId : null,
             currentEpisodeURL : null,
@@ -130,15 +136,22 @@ export default {
             );
         },
 
+        currentVideo() {
+            return this.videos.find(video => video.token === this.currentVideoId);
+        },
+
+        isCurrentVideoLTIChecked() {
+            if (!this.currentVideo) {
+                return false;
+            }
+            return this.isLTIAuthenticated[this.currentVideo.config_id] !== undefined;
+        },
+
         isCurrentVideoLTIAuthenticated() {
-            if (this.videos.length > 0) {
-                let currentVideo = this.videos.find(video => video.token === this.currentVideoId);
-                if (!currentVideo) {
-                    return false;
-                }
-                return this.isLTIAuthenticated[currentVideo.config_id];
+            if (!this.currentVideo) {
+                return false;
             }
-            return false;
+            return this.isLTIAuthenticated[this.currentVideo.config_id] === true;
         }
     },
 
@@ -256,7 +269,11 @@ export default {
             }).then((response) => {
                 if (response.status == 200 && response.data.user_id !== undefined) {
                     this.$set(this.isLTIAuthenticated, server.id, true);
+                } else {
+                    this.$set(this.isLTIAuthenticated, server.id, false);
                 }
+            }).catch(() => {
+                this.$set(this.isLTIAuthenticated, server.id, false);
             });
         },
     },