fix/make-inline-video-playing-instance-configurable-default-true
parent
a51167fa72
commit
17735943d5
@ -0,0 +1,51 @@
|
||||
import StillImage from '../still-image/still-image.vue'
|
||||
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||
|
||||
const MediaModal = {
|
||||
data () {
|
||||
return {
|
||||
loopVideo: this.$store.state.config.loopVideo
|
||||
}
|
||||
},
|
||||
components: {
|
||||
StillImage
|
||||
},
|
||||
computed: {
|
||||
showing () {
|
||||
return this.$store.state.mediaViewer.activated
|
||||
},
|
||||
currentIndex () {
|
||||
return this.$store.state.mediaViewer.currentIndex
|
||||
},
|
||||
currentMedia () {
|
||||
return this.$store.state.mediaViewer.media[this.currentIndex]
|
||||
},
|
||||
type () {
|
||||
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hide () {
|
||||
this.$store.dispatch('closeMediaViewer')
|
||||
},
|
||||
onVideoDataLoad (e) {
|
||||
if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
|
||||
// non-zero if video has audio track
|
||||
if (e.srcElement.webkitAudioDecodedByteCount > 0) {
|
||||
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
|
||||
}
|
||||
} else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
|
||||
// true if video has audio track
|
||||
if (e.srcElement.mozHasAudio) {
|
||||
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
|
||||
}
|
||||
} else if (typeof e.srcElement.audioTracks !== 'undefined') {
|
||||
if (e.srcElement.audioTracks.length > 0) {
|
||||
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MediaModal
|
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="modal-view" v-if="showing" @click.prevent="hide">
|
||||
<img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
|
||||
<video
|
||||
class="modal-image"
|
||||
v-if="type === 'video'"
|
||||
:src="currentMedia.url"
|
||||
@click.stop=""
|
||||
controls autoplay
|
||||
:loop="loopVideo"
|
||||
@loadeddata="onVideoDataLoad">
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./media_modal.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.modal-view {
|
||||
z-index: 1005;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
@ -0,0 +1,40 @@
|
||||
import fileTypeService from '../services/file_type/file_type.service.js'
|
||||
|
||||
const mediaViewer = {
|
||||
state: {
|
||||
media: [],
|
||||
currentIndex: 0,
|
||||
activated: false
|
||||
},
|
||||
mutations: {
|
||||
setMedia (state, media) {
|
||||
state.media = media
|
||||
},
|
||||
setCurrent (state, index) {
|
||||
state.activated = true
|
||||
state.currentIndex = index
|
||||
},
|
||||
close (state) {
|
||||
state.activated = false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setMedia ({ commit }, attachments) {
|
||||
const media = attachments.filter(attachment => {
|
||||
const type = fileTypeService.fileType(attachment.mimetype)
|
||||
return type === 'image' || type === 'video'
|
||||
})
|
||||
commit('setMedia', media)
|
||||
},
|
||||
setCurrent ({ commit, state }, current) {
|
||||
const index = state.media.indexOf(current)
|
||||
console.log(index, current)
|
||||
commit('setCurrent', index || 0)
|
||||
},
|
||||
closeMediaViewer ({ commit }) {
|
||||
commit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default mediaViewer
|
Loading…
Reference in new issue