Merge pull request #722 from amyspark/enable-loading-spinner-in-media

Enable a vue-loading overlay for the media viewer

src/renderer/components/TimelineSpace/Modals/ImageViewer.vue

@@ -86,8 +86,7 @@ export default {
   }
 
   .image-content {
-    height: 100%;
-    width: 100%;
+    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;

src/renderer/components/TimelineSpace/Modals/Media.vue

@@ -1,10 +1,18 @@
 <template>
-  <video :src="src" v-if="isMovieFile()" controls></video>
-  <video :src="src" v-else-if="isGIF()" autoplay loop></video>
-  <img :src="src" v-else>
+  <div
+    id="current-media"
+    v-loading="loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
+    <video :src="src" v-if="isMovieFile()" controls v-on:loadstart="loaded()"></video>
+    <video :src="src" v-else-if="isGIF()" autoplay loop v-on:loadstart="loaded()"></video>
+    <img :src="src" v-else v-on:load="loaded()">
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   props: {
     src: {
@@ -16,22 +24,38 @@ export default {
       default: ''
     }
   },
+  computed: {
+    ...mapState({
+      loading: state => state.TimelineSpace.Modals.ImageViewer.loading
+    })
+  },
   methods: {
     isMovieFile () {
       return ['video'].includes(this.type)
     },
     isGIF () {
       return ['gifv'].includes(this.type)
+    },
+    async loaded () {
+      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/loaded')
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-img,
-video {
+#current-media {
   max-width: 80%;
-  max-height: 80%;
+  min-width: 10%;
+  height: 80%;
+  display: inline-flex;
+
+  img,
+  video {
+    max-height: 100%;
+    max-width: 100%;
+    align-self: center;
+  }
 }
 </style>
 

src/renderer/store/TimelineSpace/Modals/ImageViewer.js

@@ -3,7 +3,8 @@ const ImageViewer = {
   state: {
     modalOpen: false,
     currentIndex: -1,
-    mediaList: []
+    mediaList: [],
+    loading: false
   },
   mutations: {
     changeModal (state, value) {
@@ -20,6 +21,9 @@ const ImageViewer = {
     },
     decrementIndex (state) {
       state.currentIndex--
+    },
+    loading (state, value) {
+      state.loading = value
     }
   },
   actions: {
@@ -27,17 +31,24 @@ const ImageViewer = {
       commit('changeModal', true)
       commit('changeCurrentIndex', currentIndex)
       commit('changeMedliaList', mediaList)
+      commit('loading', true)
     },
     closeModal ({ commit }) {
       commit('changeModal', false)
       commit('changeCurrentIndex', -1)
       commit('changeMedliaList', [])
+      commit('loading', false)
     },
     incrementIndex ({ commit }) {
       commit('incrementIndex')
+      commit('loading', true)
     },
     decrementIndex ({ commit }) {
       commit('decrementIndex')
+      commit('loading', true)
+    },
+    async loaded ({ commit }) {
+      commit('loading', false)
     }
   },
   getters: {