Merge pull request #686 from amyspark/amyspark/animated-media-fix

Enable playback of animated media

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -52,8 +52,10 @@
           <el-button v-show="sensitive(message) && isShowAttachments(message)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
             <icon name="eye" class="hide"></icon>
           </el-button>
-          <div class="media" v-for="media in mediaAttachments(message)">
-            <img :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))" alt="Attached media" />
+          <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message)">
+            <img :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))"/>
+            <span class="media-label" v-if="media.type == 'gifv'">GIF</span>
+            <span class="media-label" v-else-if="media.type == 'video'">VIDEO</span>
           </div>
         </div>
         <div class="clearfix"></div>
@@ -355,7 +357,7 @@ export default {
         'TimelineSpace/Modals/ImageViewer/openModal',
         {
           currentIndex: currentIndex,
-          mediaList: mediaList
+          mediaList: rawMediaList
         })
     },
     openUser (account) {
@@ -564,6 +566,16 @@ export default {
           max-height: 200px;
           border-radius: 8px;
         }
+
+        .media-label {
+          position: absolute;
+          bottom: 8px;
+          left: 8px;
+          color: #fff;
+          background: rgba(0, 0, 0, 0.5);
+          font-size: 0.8rem;
+          border-radius: 2px;
+        }
       }
     }
 

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

@@ -7,7 +7,7 @@
       </div>
       <div class="image-content">
         <span class="button-area"><el-button type="text" v-show="showLeft" v-shortkey="['arrowleft']" @shortkey.native="decrementIndex()"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
-        <Media :src="imageURL"></Media>
+        <Media :src="imageURL" :type="imageType"></Media>
         <span class="button-area"><el-button type="text" v-show="showRight" v-shortkey="['arrowright']" @shortkey.native="incrementIndex()"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>
       </div>
     </div>
@@ -31,6 +31,9 @@ export default {
     imageURL () {
       return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageURL']
     },
+    imageType () {
+      return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageType']
+    },
     showLeft () {
       return this.$store.getters['TimelineSpace/Modals/ImageViewer/showLeft']
     },

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

@@ -1,5 +1,6 @@
 <template>
   <video :src="src" v-if="isMovieFile()" controls></video>
+  <video :src="src" v-else-if="isGIF()" autoplay loop></video>
   <img :src="src" v-else>
 </template>
 
@@ -9,14 +10,18 @@ export default {
     src: {
       type: String,
       default: ''
+    },
+    type: {
+      type: String,
+      default: ''
     }
   },
   methods: {
-    file_ext () {
-      return this.src.split('.').pop().toLowerCase()
-    },
     isMovieFile () {
-      return ['mp4'].indexOf(this.file_ext()) >= 0
+      return ['video'].includes(this.type)
+    },
+    isGIF () {
+      return ['gifv'].includes(this.type)
     }
   }
 }

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

@@ -2,7 +2,7 @@ const ImageViewer = {
   namespaced: true,
   state: {
     modalOpen: false,
-    currentIndex: 0,
+    currentIndex: -1,
     mediaList: []
   },
   mutations: {
@@ -30,7 +30,7 @@ const ImageViewer = {
     },
     closeModal ({ commit }) {
       commit('changeModal', false)
-      commit('changeCurrentIndex', 0)
+      commit('changeCurrentIndex', -1)
       commit('changeMedliaList', [])
     },
     incrementIndex ({ commit }) {
@@ -42,7 +42,14 @@ const ImageViewer = {
   },
   getters: {
     imageURL (state) {
-      return state.mediaList[state.currentIndex]
+      if (state.currentIndex >= 0) {
+        return state.mediaList[state.currentIndex].url
+      }
+    },
+    imageType (state) {
+      if (state.currentIndex >= 0) {
+        return state.mediaList[state.currentIndex].type
+      }
     },
     showLeft (state) {
       const notFirst = (state.currentIndex > 0)