From 79fb115259873f119c5c6628eea38683373070b5 Mon Sep 17 00:00:00 2001
From: Till <tgloeggl@uos.de>
Date: Wed, 30 Aug 2023 17:03:46 +0200
Subject: [PATCH] Courseware - fixes #741 (#781)

* working on some further courseware changes

* fix courseware inclusion
---
 OpenCast.class.php                            |   2 +-
 .../components/CoursewareVideoTable.vue       | 107 ++++++--
 courseware/vueapp/components/LtiAuth.vue      |  40 +++
 courseware/vueapp/components/Tag.vue          |  19 ++
 courseware/vueapp/components/VideoCard.vue    | 235 ++++++++++++++++++
 .../courseware-plugin-opencast-video.vue      |  94 +------
 lib/Routes/Config/SimpleConfigList.php        |   6 +-
 7 files changed, 400 insertions(+), 103 deletions(-)
 create mode 100644 courseware/vueapp/components/LtiAuth.vue
 create mode 100644 courseware/vueapp/components/Tag.vue
 create mode 100644 courseware/vueapp/components/VideoCard.vue

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 60ea42f43..f12382c2e 100644
--- a/courseware/vueapp/components/CoursewareVideoTable.vue
+++ b/courseware/vueapp/components/CoursewareVideoTable.vue
@@ -7,7 +7,7 @@
         </label>
         <div class="oc-cw-video-list" v-else>
             <PaginationButtons :paging="paging" @changePage="startPageChange"/>
-            
+
             <label>
                 <ul v-if="loadingVideos">
                     <li v-for="(n, index) in limit" :key="index">
@@ -16,7 +16,21 @@
                         <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"
+                        :simple_config_list="simple_config_list"
+                        @doAction="setVideo"
+                        @redirectAction="redirectAction"
+                        @setVideo="setVideo(event)"
+                    ></VideoCard>
+
+                    <!--
                     <li v-for="(video, index) in videos" :key="index" :class="{selected: selectedVideoId == video.id}" @click="setVideo(video)">
                         <div>
                             <strong>
@@ -24,23 +38,29 @@
                             </strong>
                             <div>
                                 {{ printDetails(video) }}
-                                <!-- {{ video.author }}
-                                <span v-if="video.created">
+                                {{ video.author }}
+                                <!- <span v-if="video.created">
                                     - {{ video.created }} Uhr
-                                </span> -->
+                                </span> ->
                             </div>
                         </div>
                     </li>
+                    -->
                 </ul>
             </label>
         </div>
+
+        <LtiAuth v-if="simple_config_list"
+            :simple_config_list="simple_config_list"
+        />
     </div>
 </template>
 
 <script>
 import PaginationButtons from './PaginationButtons.vue';
-import { format } from 'date-fns'
-import { de } from 'date-fns/locale'
+import VideoCard from './VideoCard.vue';
+import LtiAuth from './LtiAuth.vue';
+import axios from 'axios';
 
 export default {
     name: "CoursewareVideoTable",
@@ -49,7 +69,20 @@ export default {
 
     components: {
         PaginationButtons,
+        VideoCard,
+        LtiAuth
+
     },
+
+    data() {
+        return {
+            interval: null,
+            interval_counter: 0,
+            isLTIAuthenticated: {},
+            simple_config_list: null
+        }
+    },
+
     methods: {
         startPageChange(page) {
             this.$emit('doChangePage', page);
@@ -59,21 +92,57 @@ export default {
             this.$emit('doSelectVideo', video);
         },
 
-        printDetails(video) {
-            let details = [];
-            if (video?.author) {
-                details.push(video.author);
-            }
-            if (video?.created) {
-                let mydate = new Date(video.created);
-
-                if (mydate instanceof Date && !isNaN(mydate)) {
-                    details.push(format(mydate, "d. MMM, yyyy, HH:ii", {locale: de}));
+        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;
 
-            return details.join(' - ');
+            if (redirectUrl) {
+                redirectUrl = redirectUrl + action;
+                window.open(redirectUrl, '_blank');
+            }
         }
     },
+
+    mounted() {
+        let view = this;
+
+        axios.get(STUDIP.ABSOLUTE_URI_STUDIP + 'plugins.php/opencast/api/config/simple')
+            .then(({data}) => {
+                view.simple_config_list = data;
+
+                let server = data['server'];
+
+                view.interval = setInterval(() => {
+                    for (let id in server) {
+                        if (!view.isLTIAuthenticated[id]) {
+                            view.checkLTIAuthentication(server[id]);
+                        }
+                    }
+
+                    view.interval_counter++;
+
+                    // prevent spamming of oc server
+                    if (view.interval_counter > 10) {
+                        clearInterval(view.interval);
+                    }
+                }, 2000);
+            });
+    }
 }
 </script>
\ No newline at end of file
diff --git a/courseware/vueapp/components/LtiAuth.vue b/courseware/vueapp/components/LtiAuth.vue
new file mode 100644
index 000000000..0c0455aab
--- /dev/null
+++ b/courseware/vueapp/components/LtiAuth.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="oc--ltiauth">
+        <template
+            v-for="server in simple_config_list.server"
+        >
+            <!-- iterate over all opencast nodes for this server as well -->
+            <iframe
+                v-for="i in server.lti_num"
+                v-bind:key="i"
+                :src="authUrl(server.id, i - 1)">
+            </iframe>
+        </template>
+    </div>
+</template>
+
+<script>
+
+import { mapGetters } from "vuex";
+
+export default {
+    name: "LtiAuth",
+
+    props: ['simple_config_list'],
+
+    methods: {
+        authUrl(config_id, num) {
+            // check, if we are in a course
+            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 this.simple_config_list.auth_url + '/' + num + '?config_id=' + config_id;
+            }
+        }
+    },
+
+    mounted() {
+        this.$store.dispatch('simpleConfigListRead');
+    }
+}
+</script>
diff --git a/courseware/vueapp/components/Tag.vue b/courseware/vueapp/components/Tag.vue
new file mode 100644
index 000000000..bd43f8e04
--- /dev/null
+++ b/courseware/vueapp/components/Tag.vue
@@ -0,0 +1,19 @@
+<template>
+    <span>
+        <studip-icon shape="tag" role="info"/>
+        <span>{{ tag }}</span>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: 'Tag',
+
+    components: {
+
+    },
+
+    props: ['tag']
+}
+</script>
\ No newline at end of file
diff --git a/courseware/vueapp/components/VideoCard.vue b/courseware/vueapp/components/VideoCard.vue
new file mode 100644
index 000000000..c1774ce1c
--- /dev/null
+++ b/courseware/vueapp/components/VideoCard.vue
@@ -0,0 +1,235 @@
+<template>
+    <div name="oc--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>
+
+            <div class="oc--playercontainer">
+                <a v-if="event.publication && event.preview && event.available"
+                    @click="redirectAction(`/video/` + event.token)" target="_blank"
+                >
+                    <span class="oc--previewimage">
+                        <img class="oc--previewimage"
+                            :src="getImageSrc"
+                            @error="setDefaultImage()"
+                            height="200"
+                            :ref="event.id"
+                        />
+                        <studip-icon class="oc--image-button oc--play-button" shape="play" role="info_alt"></studip-icon>
+                        <span class="oc--views">
+                            <studip-icon shape="visibility-visible" role="info_alt"></studip-icon>
+                            {{ event.views }}
+                        </span>
+                        <span class="oc--duration">
+                            {{ getDuration }}
+                        </span>
+                    </span>
+                </a>
+                <span v-else-if="!event.available" class="oc--unavailable">
+                    {{ $gettext("Video nicht verfügbar") }}
+                </span>
+                <a v-else-if="event.state == 'cutting'"
+                    @click="redirectAction(`/editor/` + event.token)"
+                    :title="$gettext('Dieses Video wartet auf den Schnitt. Hier gelangen sie direkt zum Schnitteditor!')"
+                >
+                    <span class="oc--previewimage">
+                        <img class="oc--image-button" :src="cut">
+                    </span>
+                </a>
+                <span v-else-if="event.state == 'running'" class="oc--previewimage"
+                    :title="$gettext('Dieses Videos wird gerade von Opencast bearbeitet.')"
+                >
+                    <studip-icon class="oc--image-button" shape="admin" role="status-yellow"></studip-icon>
+                </span>
+                <span v-else-if="event.state == 'failed'" class="oc--previewimage"
+                    :title="$gettext('Dieses Video hatte einen Verarbeitungsfehler. Bitte wenden sie sich an den Support!')"
+                >
+                    <studip-icon class="oc--image-button" shape="exclaim" role="status-red"></studip-icon>
+                </span>
+                <span v-else class="oc--previewimage">
+                    <img class="oc--previewimage" :src="preview" height="200"/>
+                    <!-- <p>No video uploaded</p> -->
+                </span>
+            </div>
+
+            <div class="oc--metadata-title">
+                <h2>
+                    {{event.title}}
+                </h2>
+            </div>
+
+            <div v-if="event.created && datetime(event.created)" class="oc--date">
+                &nbsp;- {{ datetime(event.created) }} Uhr
+            </div>
+
+            <div class="oc--tooltip">
+                <div data-tooltip class="tooltip" v-if="getInfoText">
+                    <span class="tooltip-content" v-html="getInfoText"></span>
+                    <studip-icon shape="info-circle" role="active" :size="18"></studip-icon>
+                </div>
+            </div>
+
+            <div class="oc--tags oc--tags-video">
+                <Tag v-for="tag in event.tags" v-bind:key="tag.id" :tag="tag.tag" />
+            </div>
+        </li>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex"
+import { format } from 'date-fns'
+import { de } from 'date-fns/locale'
+
+
+import Tag from './Tag.vue'
+
+export default {
+    name: "VideoCard",
+
+    components: {
+        Tag
+    },
+
+    props: {
+        event: Object,
+        isLTIAuthenticated: Object,
+        simple_config_list: Object
+    },
+
+    methods: {
+        preview()
+        {
+            return this.simple_config_list.plugin_assets_url + '/images/default-preview.png';
+        },
+
+        play()
+        {
+            return this.simple_config_list.plugin_assets_url + '/images/play.png';
+        },
+
+        cut()
+        {
+            return this.simple_config_list.plugin_assets_url + '/images/cut.png';
+        },
+
+        removeVideo() {
+            let view = this;
+            this.$store.dispatch('deleteVideo', this.event.token)
+            .then(() => {
+                view.DeleteConfirmDialog = false;
+            });
+        },
+
+        toggleVideo(e) {
+            this.$emit("toggle", {
+                event_id: this.event.token,
+                checked: e.target.checked ? true : false
+            });
+        },
+        performAction(action) {
+            this.$emit('doAction', {event: JSON.parse(JSON.stringify(this.event)), actionComponent: action});
+        },
+        redirectAction(action) {
+            this.event.views++;
+            this.$emit('redirectAction', action);
+        },
+
+        setDefaultImage() {
+            if (this.simple_config_list.plugin_assets_url) {
+                let image = this.$refs[this.event.id];
+                image.src = this.simple_config_list.plugin_assets_url + '/images/default-preview.png';
+            }
+        },
+
+        datetime(date) {
+            if (date === null) {
+                return '';
+           }
+
+            let mydate = new Date(date);
+
+            if (mydate instanceof Date && !isNaN(mydate)) {
+                return format(mydate, "d. MMM, yyyy, HH:ii", { locale: de});
+            }
+
+            return false;
+        }
+    },
+
+    computed: {
+        ...mapGetters([
+            'playlist',
+            'playlists',
+            'downloadSetting',
+            'videoSortMode',
+        ]),
+
+        getImageSrc()
+        {
+            this.plugin_assets_url;
+
+            if (this.isLTIAuthenticated[this.event.config_id]) {
+                return this.event.preview.player ? this.event.preview.player : this.event.preview.search;
+            } else {
+                return this.plugin_assets_url + '/images/default-preview.png';
+            }
+        },
+
+        downloadAllowed() {
+            if (this.downloadSetting !== 'never') {
+                if (this.canEdit) {
+                    return true;
+                }
+                else if (this.playlist && this.playlist['allow_download']) {
+                    return this.playlist['allow_download'];
+                }
+                else {
+                    return this.downloadSetting === 'allow';
+                }
+            }
+            return false;
+        },
+
+        getDuration() {
+            let sec = parseInt(this.event.duration / 1000)
+            let min = parseInt(sec / 60)
+            let h = parseInt(min / 60)
+
+            let duration = '';
+            if (h && min) {
+                // if minutes AND hours are present, add a leading zero to minutes
+                duration = h + ":" + ("0" + min%60).substr(-2);
+            } else {
+                // if only minutes are present, to NOT add a leading zero
+                duration = min%60;
+            }
+
+            return duration + ":" + ("0" + sec%60).substr(-2);
+        },
+
+        isChecked() {
+            return this.selectedVideos.indexOf(this.event.token)
+                >= 0 ? true : false;
+        },
+
+        getInfoText() {
+            var txt = '';
+            if (this.event.author) {
+                txt += '<div>Author: ' + this.event.author + '</div>';
+            }
+            if (this.event.contributors) {
+                txt += '<div>Mitwirkende: ' + this.event.contributors + '</div>';
+            }
+            if (this.event.description) {
+                if (txt.length > 0) {
+                    txt += '<br>'
+                }
+                txt += '<div>' + this.event.description + '</div>';
+            }
+            return txt;
+        }
+    },
+}
+</script>
diff --git a/courseware/vueapp/courseware-plugin-opencast-video.vue b/courseware/vueapp/courseware-plugin-opencast-video.vue
index 76836f6ba..383ffdd21 100644
--- a/courseware/vueapp/courseware-plugin-opencast-video.vue
+++ b/courseware/vueapp/courseware-plugin-opencast-video.vue
@@ -11,24 +11,19 @@
         >
             <template #content>
                 <div>
-                  <div v-if="!lti_connected">
-                      <span v-translate v-text="'LTI Verbindung fehlgeschlagen'"></span>
-                  </div>
-                  <div v-else>
-                      <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"
+                    <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"
                         class="oc_cw_iframe"
                         allowfullscreen
                     ></iframe>
-                  </div>
 
-                  <div v-if="currentVisible == 'intern' && canEdit" class="messagebox messagebox_warning cw-canvasblock-text-info">
-                      <translate>
-                          Dieses Video ist für die Teilnehmenden dieser Veranstaltung nicht sichtbar!
-                          Korrigieren sie die Sichtbarkeitseinstellungen im Opencast-Reiter.
-                      </translate>
-                  </div>
+                    <div v-if="currentVisible == 'intern' && canEdit" class="messagebox messagebox_warning cw-canvasblock-text-info">
+                        <translate>
+                            Dieses Video ist für die Teilnehmenden dieser Veranstaltung nicht sichtbar!
+                            Korrigieren sie die Sichtbarkeitseinstellungen im Opencast-Reiter.
+                        </translate>
+                    </div>
                 </div>
             </template>
             <template v-if="canEdit" #edit>
@@ -69,8 +64,9 @@ export default {
 
     components: {
         CoursewareSearchBar,
-        CoursewareVideoTable
+        CoursewareVideoTable,
     },
+
     props: {
         block: Object,
         canEdit: Boolean,
@@ -93,8 +89,6 @@ export default {
             currentEpisodeId : null,
             currentEpisodeURL : null,
             currentVisible : '',
-            ltiConnections : [],
-            ltiConnected: false
         }
     },
 
@@ -112,15 +106,6 @@ export default {
                 }) ?? {}
             );
         },
-
-        lti_connected() {
-            if (!this.currentEpisodeURL || this.ltiConnections.length == 0) {
-                return false;
-            }
-            let edpisode_url = new URL(this.currentEpisodeURL);
-            let lti_connection = this.ltiConnections.find(connection => connection.launch_url.includes(edpisode_url.hostname));
-            return lti_connection?.authenticated == true;
-        }
     },
 
     methods: {
@@ -175,7 +160,7 @@ export default {
             attributes.payload.episode_id = this.currentEpisodeId;
             attributes.payload.url = this.currentEpisodeURL;
             attributes.payload.visible = this.currentVisible;
-            
+
             if (this.container?.id && this.block?.id) {
                 return this.updateBlock({
                     attributes,
@@ -197,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();
             }
         },
@@ -227,63 +211,9 @@ export default {
                     view.loadingVideos = false;
                 })
         },
-
-        async runLTI() {
-            let view = this;
-            return axios.get(STUDIP.ABSOLUTE_URI_STUDIP + 'plugins.php/opencast/api/lti/launch_data/' + this.context.id)
-                .then(({data}) => {
-                    if (data.lti.length > 0) {
-                        data.lti.forEach(connection => view.ltiConnections.push({
-                            launch_url: JSON.parse(JSON.stringify(connection.launch_url)),
-                            launch_data: JSON.parse(JSON.stringify(connection.launch_data)),
-                            authenticated: false
-                        }));
-                        view.ltiConnections.forEach(connection => view.checkConnection(connection));
-                    } else {
-                        console.log('No LTI data found');
-                    }
-                });
-        },
-
-        async checkConnection(connection) {
-            let view = this;
-            return axios({
-                method: 'GET',
-                url: connection.launch_url,
-                crossDomain: true,
-                withCredentials: true,
-            }).then(({ data }) => {
-                if (!data.roles) {
-                    view.authenticateLTI(connection);
-                } else {
-                    connection.authenticated = true;
-                }
-            }).catch(() => {
-                view.authenticateLTI(connection);
-            });
-        },
-
-        async authenticateLTI(connection) {
-            return axios({
-                method: 'POST',
-                url: connection.launch_url,
-                data: new URLSearchParams(connection.launch_data),
-                crossDomain: true,
-                withCredentials: true,
-                headers: {
-                    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
-                }
-            }).then(() => {
-                connection.authenticated = true;
-            }).catch(() => {
-                console.log('LTI Authentication failed:', connection.launch_url);
-                connection.authenticated = false;
-            });
-        }
     },
 
     mounted() {
-        this.runLTI();
         this.initCurrentData();
         this.loadVideos();
     },
diff --git a/lib/Routes/Config/SimpleConfigList.php b/lib/Routes/Config/SimpleConfigList.php
index 88d0119d3..f67f85508 100644
--- a/lib/Routes/Config/SimpleConfigList.php
+++ b/lib/Routes/Config/SimpleConfigList.php
@@ -48,7 +48,11 @@ public function __invoke(Request $request, Response $response, $args)
             'server'    => $config_list ?: [],
             'settings'  => $this->getGlobalConfig(),
             'workflows' => $workflows->toArray(),
-            'workflow_configs' => $workflow_configs->toArray()
+            'workflow_configs' => $workflow_configs->toArray(),
+            '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);
     }