reload images after succesfull LTI call

vueapp/components/Videos/VideoCard.vue

@@ -11,8 +11,8 @@
  >
  <span class="oc--previewimage">
  <img class="oc--previewimage"
- :src="event.preview.player ? event.preview.player : event.preview.search"
- @error="setDefaultImage(event)"
+ :src="getImageSrc"
+ @error="setDefaultImage()"
  height="200"
  :ref="event.id"
  />
@@ -181,8 +181,8 @@ export default {
  this.$emit('redirectAction', action);
  },
 
- setDefaultImage(event) {
- let image = this.$refs[event.id];
+ setDefaultImage() {
+ let image = this.$refs[this.event.id];
  image.src = window.OpencastPlugin.PLUGIN_ASSET_URL + '/images/default-preview.png';
  }
  },
@@ -192,9 +192,18 @@ export default {
  'playlist',
  'playlists',
  'downloadSetting',
- "videoSortMode",
+ 'videoSortMode',
+ 'isLTIAuthenticated'
  ]),
 
+ getImageSrc() {
+ if (this.isLTIAuthenticated[this.event.config_id]) {
+ return this.event.preview.player ? this.event.preview.player : this.event.preview.search;
+ } else {
+ return window.OpencastPlugin.PLUGIN_ASSET_URL + '/images/default-preview.png';
+ }
+ },
+
  downloadAllowed() {
  if (this.downloadSetting !== 'never') {
  if (this.canEdit) {

vueapp/components/Videos/VideosList.vue

@@ -131,21 +131,25 @@ export default {
  actionComponent: null,
  showActionDialog: false,
  selectedEvent: null,
- filters: []
+ filters: [],
+ interval: null,
+ interval_counter: 0
  }
  },
 
  computed: {
  ...mapGetters([
- "videos",
- "paging",
- "axios_running",
- "playlistForVideos",
- "cid",
+ 'videos',
+ 'paging',
+ 'axios_running',
+ 'playlistForVideos',
+ 'cid',
  'courseVideosToCopy',
  'playlists',
  'playlist',
- 'course_config'
+ 'course_config',
+ 'isLTIAuthenticated',
+ 'simple_config_list'
  ]),
 
  isCourse() {
@@ -336,7 +340,28 @@ export default {
  .then(() => { this.videos_loading = false });
  }
  })
+
  this.$store.dispatch('loadUserCourses');
+
+ // periodically check, if lti is authenticated
+ let view = this;
+
+ this.$store.dispatch('simpleConfigListRead').then(() => {
+ view.interval = setInterval(() => {
+ for (let id in view.simple_config_list['server']) {
+ if (!view.isLTIAuthenticated[id]) {
+ view.$store.dispatch('checkLTIAuthentication', view.simple_config_list['server'][id]);
+ }
+ }
+
+ view.interval_counter++;
+
+ // prevent spamming of oc server
+ if (view.interval_counter > 10) {
+ clearInterval(view.interval);
+ }
+ }, 2000);
+ });
  },
 
  watch: {

vueapp/store/opencast.module.js

@@ -1,4 +1,5 @@
 import ApiService from "@/common/api.service";
+import axios from "@/common/axios.service";
 
 const state = {
  series: [],
@@ -10,7 +11,8 @@ const state = {
  site: null,
  axios_running: false,
  userCourses: [],
- userList: []
+ userList: [],
+ isLTIAuthenticated: {}
 }
 
 const getters = {
@@ -43,6 +45,9 @@ const getters = {
  },
  userList(state) {
  return state.userList;
+ },
+ isLTIAuthenticated(state) {
+ return state.isLTIAuthenticated;
  }
 }
 
@@ -126,6 +131,31 @@ const actions = {
 
  setUpload({ commit }, data) {
  return ApiService.put('courses/' + data.cid + '/upload/' + data.upload);
+ },
+
+ checkLTIAuthentication({ commit }, 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) {
+ commit('setLTIStatus', {
+ server: server.id,
+ authenticated: true
+ });
+ } else {
+ commit('setLTIStatus', {
+ server: server.id,
+ authenticated: false
+ });
+ }
+ });
  }
 }
 
@@ -169,6 +199,10 @@ const mutations = {
  setUserList(state, data) {
  state.userList = data;
  },
+
+ setLTIStatus(state, params) {
+ state.isLTIAuthenticated[params.server] = params.authenticated;
+ }
 }