Reload videos after upload (#810)

vueapp/components/Videos/VideoUpload.vue

@@ -430,6 +430,8 @@ export default {
  })
  }
  }
+ 
+ this.$store.dispatch('setVideosReload', true);
  });
  }
  });

vueapp/components/Videos/VideosList.vue

@@ -140,6 +140,7 @@ export default {
  computed: {
  ...mapGetters([
  'videos',
+ 'videosReload',
  'paging',
  'axios_running',
  'playlistForVideos',
@@ -170,20 +171,26 @@ export default {
  },
 
  methods: {
- changePage: async function(page) {
- await this.$store.dispatch('setPage', page)
-
+ loadVideos() {
  this.videos_loading = true;
  this.$store.commit('setVideos', {});
+
  if (this.isCourse) {
- let filters = this.filters;
- filters.token = this.playlist.token;
- this.$store.dispatch('loadPlaylistVideos', filters).then(() => { this.videos_loading = false });
+ this.$store.dispatch('loadPlaylistVideos', {
+ ...this.filters,
+ cid: this.cid,
+ token: this.playlist.token
+ }).then(() => { this.videos_loading = false });
  } else {
- await this.$store.dispatch('loadMyVideos', this.filters).then(() => { this.videos_loading = false });
+ this.$store.dispatch('loadMyVideos', this.filters).then(() => { this.videos_loading = false });
  }
  },
 
+ changePage: async function(page) {
+ await this.$store.dispatch('setPage', page);
+ this.loadVideos();
+ },
+
  toggleVideo(data) {
  if (data.checked === false) {
  let index = this.selectedVideos.indexOf(data.event_id);
@@ -211,19 +218,8 @@ export default {
 
  doSearch(filters) {
  this.filters = filters;
-
- this.videos_loading = true;
- this.$store.dispatch('setPage', 0)
- this.$store.commit('setVideos', {});
- if (this.isCourse) {
- this.$store.dispatch('loadPlaylistVideos', {
- ...this.filters,
- cid: this.cid,
- token: this.playlist.token
- }).then(() => { this.videos_loading = false });
- } else {
- this.$store.dispatch('loadMyVideos', this.filters).then(() => { this.videos_loading = false });
- }
+ this.$store.dispatch('setPage', 0);
+ this.loadVideos();
  },
 
  addVideosToPlaylist() {
@@ -261,17 +257,7 @@ export default {
  async doAfterAction(args) {
  this.clearAction();
  if (args == 'refresh') {
- this.videos_loading = true;
- this.$store.commit('setVideos', {});
- if (this.isCourse) {
- this.$store.dispatch('loadPlaylistVideos', {
- ...this.filters,
- cid: this.cid,
- token: this.playlist.token
- }).then(() => { this.videos_loading = false });
- } else {
- this.$store.dispatch('loadMyVideos', this.filters).then(() => { this.videos_loading = false });
- }
+ this.loadVideos();
  }
  },
 
@@ -315,29 +301,21 @@ export default {
  this.$store.commit('clearPaging');
  this.$store.commit('setVideos', {});
 
- let loadVideos = false;
- if (this.playlist != null) {
- loadVideos = true;
- }
+ let loadVideos = this.playlist !== null;
 
  await this.$store.dispatch('authenticateLti').then(() => {
  if (this.isCourse) {
  if (loadVideos) {
  this.$store.dispatch('setDefaultSortOrder', this.playlist).then(() => {
- this.$store.dispatch('loadPlaylistVideos', {
- ...this.filters,
- cid : this.cid,
- token: this.playlist.token
- }).then(() => { this.videos_loading = false });
- });
+ this.loadVideos();
+ })
  }
  }
  else {
  if (this.$route.name === 'videosTrashed') {
  this.filters.trashed = true;
  }
- this.$store.dispatch('loadMyVideos', this.filters)
- .then(() => { this.videos_loading = false });
+ this.loadVideos();
  }
  })
 
@@ -374,18 +352,20 @@ export default {
  // Catch every playlist change to handle video loading
  playlist(playlist) {
  if (this.isCourse && playlist !== null) {
- this.videos_loading = true;
  this.$store.commit('clearPaging');
- this.$store.commit('setVideos', {});
- this.$store.dispatch('setDefaultSortOrder', playlist).then(() => {
- this.$store.dispatch('loadPlaylistVideos', {
- ...this.filters,
- cid : this.cid,
- token: playlist.token
- }).then(() => { this.videos_loading = false });
+ this.$store.dispatch('setDefaultSortOrder', this.playlist).then(() => {
+ this.loadVideos();
  });
  }
- }
+ },
+
+ // Handle reloading Videos from outside of this component (e.g. used after VideoUpload)
+ videosReload(reload) {
+ if (reload) {
+ this.loadVideos();
+ this.$store.dispatch('setVideosReload', false);
+ }
+ } 
  },
 };
 </script>

vueapp/store/videos.module.js

@@ -22,6 +22,7 @@ const state = {
  videoShares: {},
  courseVideosToCopy: [],
  showCourseCopyDialog: false,
+ videosReload: false,
 }
 
 const getters = {
@@ -72,6 +73,10 @@ const getters = {
  showCourseCopyDialog(state) {
  return state.showCourseCopyDialog
  },
+
+ videosReload(state) {
+ return state.videosReload
+ },
 }
 
 const actions = {
@@ -222,6 +227,10 @@ const actions = {
 
  toggleCourseCopyDialog({dispatch, state, commit}, mode) {
  commit('setShowCourseCopyDialog', mode);
+ },
+
+ setVideosReload({commit}, mode) {
+ commit('setVideosReload', mode)
  }
 }
 
@@ -291,6 +300,10 @@ const mutations = {
  else {
  state.videoCaptions = {};
  }
+ },
+
+ setVideosReload(state, mode) {
+ state.videosReload = mode;
  }
 }