Fix courseware block (#1076)

* Courseware: Load lti authentication in block content * Courseware: Show opencast connection error after lti check is performed
elan-ev · Nov 25, 2024 · 503c15d · 503c15d
1 parent 8464a72
commit 503c15d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git 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
@@ -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,13 +65,15 @@
 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';
 
 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);
             });
         },
     },