From a32d26666acf7ee7254f179828a0e295d004e218 Mon Sep 17 00:00:00 2001
From: tgloeggl <tgloeggl@uos.de>
Date: Wed, 30 Aug 2023 17:00:31 +0200
Subject: [PATCH] fix courseware inclusion

---
 OpenCast.class.php                            |  2 +-
 .../components/CoursewareVideoTable.vue       | 55 ++++++++++++++++---
 courseware/vueapp/components/LtiAuth.vue      | 10 ++--
 courseware/vueapp/components/VideoCard.vue    | 37 +++----------
 .../courseware-plugin-opencast-video.vue      |  7 +--
 lib/Routes/Config/SimpleConfigList.php        |  5 +-
 6 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/OpenCast.class.php b/OpenCast.class.php
index 821befab7..41605be27 100644
--- a/OpenCast.class.php
+++ b/OpenCast.class.php
@@ -61,6 +61,7 @@ public function __construct()
         }
 
         $this->addStylesheet("assets/css/courseware.scss");
+        $this->addStylesheet("assets/css/opencast.scss");
         VersionHelper::get()->registerCoursewareBlock($this);
     }
 
@@ -265,7 +266,6 @@ public function perform($unconsumed_path)
             $app->group('/opencast/api', new RouteMap($app));
             $app->run();
         } else {
-            $this->addStylesheet("assets/css/opencast.scss");
             $css = VersionHelper::get()->getVersionSpecificStylesheet();
 
             if ($css) {
diff --git a/courseware/vueapp/components/CoursewareVideoTable.vue b/courseware/vueapp/components/CoursewareVideoTable.vue
index 6d715472f..f12382c2e 100644
--- a/courseware/vueapp/components/CoursewareVideoTable.vue
+++ b/courseware/vueapp/components/CoursewareVideoTable.vue
@@ -16,15 +16,18 @@
                         <div class="oc-cw-loadingbar"></div>
                     </li>
                 </ul>
-                <ul class="video-list" v-else>
+                <ul class="oc--episode-list--small" v-else>
                     <VideoCard
+                        v-if="simple_config_list"
                         v-for="event in videos"
+                        class="{selected: selectedVideoId == event.id}"
                         v-bind:event="event"
                         v-bind:key="event.token"
                         :isLTIAuthenticated="isLTIAuthenticated"
-                        :plugin_assets_url="plugin_assets_url"
+                        :simple_config_list="simple_config_list"
                         @doAction="setVideo"
                         @redirectAction="redirectAction"
+                        @setVideo="setVideo(event)"
                     ></VideoCard>
 
                     <!--
@@ -46,12 +49,17 @@
                 </ul>
             </label>
         </div>
+
+        <LtiAuth v-if="simple_config_list"
+            :simple_config_list="simple_config_list"
+        />
     </div>
 </template>
 
 <script>
 import PaginationButtons from './PaginationButtons.vue';
 import VideoCard from './VideoCard.vue';
+import LtiAuth from './LtiAuth.vue';
 import axios from 'axios';
 
 export default {
@@ -61,15 +69,17 @@ export default {
 
     components: {
         PaginationButtons,
-        VideoCard
+        VideoCard,
+        LtiAuth
+
     },
 
     data() {
         return {
             interval: null,
             interval_counter: 0,
-            plugin_assets_url: '',
-            isLTIAuthenticated: {}
+            isLTIAuthenticated: {},
+            simple_config_list: null
         }
     },
 
@@ -80,6 +90,32 @@ export default {
 
         setVideo(video) {
             this.$emit('doSelectVideo', video);
+        },
+
+        checkLTIAuthentication(server)
+        {
+            axios({
+                method: 'GET',
+                url: server.name + "/lti/info.json",
+                crossDomain: true,
+                withCredentials: true,
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
+                }
+            }).then((response) => {
+                if (response.status == 200 && response.data.user_id !== undefined) {
+                    this.$set(this.isLTIAuthenticated, server.id, true);
+                }
+            });
+        },
+
+        redirectAction(action) {
+            let redirectUrl = this.simple_config_list.redirect_url;
+
+            if (redirectUrl) {
+                redirectUrl = redirectUrl + action;
+                window.open(redirectUrl, '_blank');
+            }
         }
     },
 
@@ -88,13 +124,14 @@ export default {
 
         axios.get(STUDIP.ABSOLUTE_URI_STUDIP + 'plugins.php/opencast/api/config/simple')
             .then(({data}) => {
-                view.plugin_assets_url = data.plugin_assets_url;
-                console.log(data);
+                view.simple_config_list = data;
+
+                let server = data['server'];
 
                 view.interval = setInterval(() => {
-                    for (let id in data['server']) {
+                    for (let id in server) {
                         if (!view.isLTIAuthenticated[id]) {
-                            view.checkLTIAuthentication(data['server'][id]);
+                            view.checkLTIAuthentication(server[id]);
                         }
                     }
 
diff --git a/courseware/vueapp/components/LtiAuth.vue b/courseware/vueapp/components/LtiAuth.vue
index 18a4ceb0d..0c0455aab 100644
--- a/courseware/vueapp/components/LtiAuth.vue
+++ b/courseware/vueapp/components/LtiAuth.vue
@@ -20,17 +20,15 @@ import { mapGetters } from "vuex";
 export default {
     name: "LtiAuth",
 
-    computed: {
-        ...mapGetters(['simple_config_list', 'cid']),
-    },
+    props: ['simple_config_list'],
 
     methods: {
         authUrl(config_id, num) {
             // check, if we are in a course
-            if (this.cid) {
-                return window.OpencastPlugin.AUTH_URL + '/' + num + '?config_id=' + config_id + '&cid=' + this.cid;
+            if (this.simple_config_list.course_id) {
+                return this.simple_config_list.auth_url + '/' + num + '?config_id=' + config_id + '&cid=' + this.simple_config_list.course_id;
             } else {
-                return window.OpencastPlugin.AUTH_URL + '/' + num + '?config_id=' + config_id;
+                return this.simple_config_list.auth_url + '/' + num + '?config_id=' + config_id;
             }
         }
     },
diff --git a/courseware/vueapp/components/VideoCard.vue b/courseware/vueapp/components/VideoCard.vue
index 985b07118..c1774ce1c 100644
--- a/courseware/vueapp/components/VideoCard.vue
+++ b/courseware/vueapp/components/VideoCard.vue
@@ -1,6 +1,6 @@
 <template>
     <div name="oc--episode">
-        <li :key="event.id" class="oc--grid-episode">
+        <li :key="event.id" class="oc--grid-episode" @click="$emit('setVideo', event)">
             <div class="oc--flex-checkbox" v-if="playlistForVideos || playlistMode || isCourse">
                 <input type="checkbox" :checked="isChecked" @click.stop="toggleVideo">
             </div>
@@ -95,22 +95,23 @@ export default {
     props: {
         event: Object,
         isLTIAuthenticated: Object,
+        simple_config_list: Object
     },
 
     methods: {
         preview()
         {
-            return this.plugin_assets_url + '/images/default-preview.png';
+            return this.simple_config_list.plugin_assets_url + '/images/default-preview.png';
         },
 
         play()
         {
-            return this.plugin_assets_url + '/images/play.png';
+            return this.simple_config_list.plugin_assets_url + '/images/play.png';
         },
 
         cut()
         {
-            return this.plugin_assets_url + '/images/cut.png';
+            return this.simple_config_list.plugin_assets_url + '/images/cut.png';
         },
 
         removeVideo() {
@@ -136,33 +137,12 @@ export default {
         },
 
         setDefaultImage() {
-            if (this.plugin_assets_url) {
+            if (this.simple_config_list.plugin_assets_url) {
                 let image = this.$refs[this.event.id];
-                image.src = this.plugin_assets_url + '/images/default-preview.png';
+                image.src = this.simple_config_list.plugin_assets_url + '/images/default-preview.png';
             }
         },
 
-        checkLTIAuthentication(server)
-        {
-            let view = this;
-
-            axios({
-                method: 'GET',
-                url: server.name + "/lti/info.json",
-                crossDomain: true,
-                withCredentials: true,
-                headers: {
-                    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
-                }
-            }).then((response) => {
-                if (response.status == 200) {
-                    view.isLTIAuthenticated[server.id] = true;
-                } else {
-                    view.isLTIAuthenticated[server.id] = false;
-                }
-            });
-        },
-
         datetime(date) {
             if (date === null) {
                 return '';
@@ -190,12 +170,9 @@ export default {
         {
             this.plugin_assets_url;
 
-            console.log('getImageSrc', this.plugin_assets_url);
             if (this.isLTIAuthenticated[this.event.config_id]) {
-                console.log('getImageSrc->isLTIAuthenticated');
                 return this.event.preview.player ? this.event.preview.player : this.event.preview.search;
             } else {
-                console.log('getImageSrc->NOT LTIAuthenticated');
                 return this.plugin_assets_url + '/images/default-preview.png';
             }
         },
diff --git a/courseware/vueapp/courseware-plugin-opencast-video.vue b/courseware/vueapp/courseware-plugin-opencast-video.vue
index 326755cf6..383ffdd21 100644
--- a/courseware/vueapp/courseware-plugin-opencast-video.vue
+++ b/courseware/vueapp/courseware-plugin-opencast-video.vue
@@ -9,11 +9,8 @@
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
-            <LtiAuth />
-
             <template #content>
                 <div>
-
                     <span v-if="!currentEpisodeId" v-translate v-text="'Es wurde bisher kein Video ausgewählt'"></span>
                     <span v-else-if="!currentEpisodeURL" v-translate v-text="'Dieses Video hat keinen Veröffentlichungs-URL-Link'"></span>
                     <iframe v-else :src="currentEpisodeURL"
@@ -61,7 +58,6 @@ import axios from 'axios';
 import { mapActions, mapGetters } from 'vuex';
 import CoursewareSearchBar from './components/CoursewareSearchBar.vue';
 import CoursewareVideoTable from './components/CoursewareVideoTable.vue';
-import LtiAuth from './components/LtiAuth.vue';
 
 export default {
     name: "courseware-plugin-opencast-video",
@@ -69,8 +65,8 @@ export default {
     components: {
         CoursewareSearchBar,
         CoursewareVideoTable,
-        LtiAuth
     },
+
     props: {
         block: Object,
         canEdit: Boolean,
@@ -186,7 +182,6 @@ export default {
 
             let copied_from = get(this.block, "attributes.payload.copied_from", "");
             if (copied_from) {
-                console.log('copied_from: ', copied_from);
                 this.storeBlock();
             }
         },
diff --git a/lib/Routes/Config/SimpleConfigList.php b/lib/Routes/Config/SimpleConfigList.php
index c0fd9c1bc..f67f85508 100644
--- a/lib/Routes/Config/SimpleConfigList.php
+++ b/lib/Routes/Config/SimpleConfigList.php
@@ -49,7 +49,10 @@ public function __invoke(Request $request, Response $response, $args)
             'settings'  => $this->getGlobalConfig(),
             'workflows' => $workflows->toArray(),
             'workflow_configs' => $workflow_configs->toArray(),
-            'plugin_assets_url' => \PluginEngine::getPlugin('Opencast')->getAssetsUrl()
+            'plugin_assets_url' => \PluginEngine::getPlugin('Opencast')->getAssetsUrl(),
+            'auth_url'          => \PluginEngine::getURL('opencast', [], 'redirect/authenticate', true),
+            'redirect_url'      => \PluginEngine::getURL('opencast', [], 'redirect/perform', true),
+            'course_id'         => \Context::getId() ?: null
         ], $response);
     }