Enable playback of animated media

This commit is contained in:
L. E. Segovia 2018-10-31 14:04:49 +00:00
parent d81f0acffa
commit 437458af79
No known key found for this signature in database
GPG Key ID: D5D1DC48B52B7AD5
4 changed files with 38 additions and 11 deletions

View File

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

View File

@ -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']
},

View File

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

View File

@ -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)