Merge pull request #315 from nasum/iss-312

close #312 show movie on imageviewer
This commit is contained in:
AkiraFukushima 2018-05-18 21:40:53 +09:00 committed by GitHub
commit e5d00f1727
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 6 deletions

View File

@ -7,7 +7,7 @@
</div>
<div class="image-content">
<span class="button-area"><el-button type="text" v-show="showLeft"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
<img :src="imageURL">
<Media :src="imageURL"></Media>
<span class="button-area"><el-button type="text" v-show="showRight"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>
</div>
</div>
@ -16,10 +16,14 @@
</template>
<script>
import Media from './Media'
import { mapState } from 'vuex'
export default {
name: 'image-viewer',
components: {
Media
},
computed: {
...mapState({
modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen
@ -82,11 +86,6 @@ export default {
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 80%;
max-height: 80%;
}
}
}

View File

@ -0,0 +1,36 @@
<template>
<div class="media">
<img :src="src" v-if="isImageFile()">
<video :src="src" v-else-if="isMovieFile()" controls></video>
</div>
</template>
<script>
export default {
props: {
src: String
},
methods: {
file_ext () {
return this.src.split('.').pop().toLowerCase()
},
isImageFile () {
return ['jpg', 'gif', 'png'].indexOf(this.file_ext()) >= 0
},
isMovieFile () {
return ['mp4'].indexOf(this.file_ext()) >= 0
}
}
}
</script>
<style lang="scss" scoped>
.media {
img, video {
max-width: 80%;
max-height: 80%;
}
}
</style>