Courseware - fixes #741

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) {

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,31 +16,51 @@
  <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>
  {{video.title}}
  </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>

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>

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>