fix courseware inclusion

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

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

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;
  }
  }
  },

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';
  }
  },

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,16 +58,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,
- 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();
  }
  },

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);
  }