From 43020a8689af33f0d50605dff83b0bd828e76ebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Till=20Gl=C3=B6ggler?= <till@gundk.it>
Date: Wed, 30 Aug 2023 06:46:36 +0200
Subject: [PATCH 1/2] working on some further courseware changes

---
 .../components/CoursewareVideoTable.vue       |  74 +++--
 courseware/vueapp/components/LtiAuth.vue      |  42 +++
 courseware/vueapp/components/Tag.vue          |  19 ++
 courseware/vueapp/components/VideoCard.vue    | 258 ++++++++++++++++++
 .../courseware-plugin-opencast-video.vue      |  97 ++-----
 lib/Routes/Config/SimpleConfigList.php        |   3 +-
 6 files changed, 390 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/courseware/vueapp/components/CoursewareVideoTable.vue b/courseware/vueapp/components/CoursewareVideoTable.vue
index 60ea42f43..6d715472f 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">
@@ -17,6 +17,17 @@
                     </li>
                 </ul>
                 <ul class="video-list" v-else>
+                    <VideoCard
+                        v-for="event in videos"
+                        v-bind:event="event"
+                        v-bind:key="event.token"
+                        :isLTIAuthenticated="isLTIAuthenticated"
+                        :plugin_assets_url="plugin_assets_url"
+                        @doAction="setVideo"
+                        @redirectAction="redirectAction"
+                    ></VideoCard>
+
+                    <!--
                     <li v-for="(video, index) in videos" :key="index" :class="{selected: selectedVideoId == video.id}" @click="setVideo(video)">
                         <div>
                             <strong>
@@ -24,13 +35,14 @@
                             </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>
@@ -39,8 +51,8 @@
 
 <script>
 import PaginationButtons from './PaginationButtons.vue';
-import { format } from 'date-fns'
-import { de } from 'date-fns/locale'
+import VideoCard from './VideoCard.vue';
+import axios from 'axios';
 
 export default {
     name: "CoursewareVideoTable",
@@ -49,7 +61,18 @@ export default {
 
     components: {
         PaginationButtons,
+        VideoCard
     },
+
+    data() {
+        return {
+            interval: null,
+            interval_counter: 0,
+            plugin_assets_url: '',
+            isLTIAuthenticated: {}
+        }
+    },
+
     methods: {
         startPageChange(page) {
             this.$emit('doChangePage', page);
@@ -57,23 +80,32 @@ export default {
 
         setVideo(video) {
             this.$emit('doSelectVideo', video);
-        },
+        }
+    },
 
-        printDetails(video) {
-            let details = [];
-            if (video?.author) {
-                details.push(video.author);
-            }
-            if (video?.created) {
-                let mydate = new Date(video.created);
+    mounted() {
+        let view = this;
 
-                if (mydate instanceof Date && !isNaN(mydate)) {
-                    details.push(format(mydate, "d. MMM, yyyy, HH:ii", {locale: de}));
-                }
-            }
+        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);
 
-            return details.join(' - ');
-        }
-    },
+                view.interval = setInterval(() => {
+                    for (let id in data['server']) {
+                        if (!view.isLTIAuthenticated[id]) {
+                            view.checkLTIAuthentication(data['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..18a4ceb0d
--- /dev/null
+++ b/courseware/vueapp/components/LtiAuth.vue
@@ -0,0 +1,42 @@
+<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",
+
+    computed: {
+        ...mapGetters(['simple_config_list', 'cid']),
+    },
+
+    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;
+            } else {
+                return window.OpencastPlugin.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..985b07118
--- /dev/null
+++ b/courseware/vueapp/components/VideoCard.vue
@@ -0,0 +1,258 @@
+<template>
+    <div name="oc--episode">
+        <li :key="event.id" class="oc--grid-episode">
+            <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,
+    },
+
+    methods: {
+        preview()
+        {
+            return this.plugin_assets_url + '/images/default-preview.png';
+        },
+
+        play()
+        {
+            return this.plugin_assets_url + '/images/play.png';
+        },
+
+        cut()
+        {
+            return this.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.plugin_assets_url) {
+                let image = this.$refs[this.event.id];
+                image.src = this.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 '';
+           }
+
+            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;
+
+            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';
+            }
+        },
+
+        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..326755cf6 100644
--- a/courseware/vueapp/courseware-plugin-opencast-video.vue
+++ b/courseware/vueapp/courseware-plugin-opencast-video.vue
@@ -9,26 +9,24 @@
             @storeEdit="storeBlock"
             @closeEdit="initCurrentData"
         >
+            <LtiAuth />
+
             <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>
@@ -63,13 +61,15 @@ 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",
 
     components: {
         CoursewareSearchBar,
-        CoursewareVideoTable
+        CoursewareVideoTable,
+        LtiAuth
     },
     props: {
         block: Object,
@@ -93,8 +93,6 @@ export default {
             currentEpisodeId : null,
             currentEpisodeURL : null,
             currentVisible : '',
-            ltiConnections : [],
-            ltiConnected: false
         }
     },
 
@@ -112,15 +110,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 +164,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,
@@ -227,63 +216,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..c0fd9c1bc 100644
--- a/lib/Routes/Config/SimpleConfigList.php
+++ b/lib/Routes/Config/SimpleConfigList.php
@@ -48,7 +48,8 @@ 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()
         ], $response);
     }
 

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 2/2] 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);
     }