Add escape button support

This commit is contained in:
shpuld 2019-01-16 17:27:23 +02:00
parent 17735943d5
commit e1c3691a72
3 changed files with 15 additions and 6 deletions

View file

@ -24,24 +24,34 @@ const MediaModal = {
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
} }
}, },
created () {
document.addEventListener('keyup', e => {
if (e.keyCode === 27 && this.showing) { // escape
this.hide()
}
})
},
methods: { methods: {
hide () { hide () {
this.$store.dispatch('closeMediaViewer') this.$store.dispatch('closeMediaViewer')
}, },
onVideoDataLoad (e) { onVideoDataLoad (e) {
if (!e.srcElement) {
return
}
if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') { if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
// non-zero if video has audio track // non-zero if video has audio track
if (e.srcElement.webkitAudioDecodedByteCount > 0) { if (e.srcElement.webkitAudioDecodedByteCount > 0) {
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
} }
} else if (typeof e.srcElement.mozHasAudio !== 'undefined') { } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
// true if video has audio track // true if video has audio track
if (e.srcElement.mozHasAudio) { if (e.srcElement.mozHasAudio) {
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
} }
} else if (typeof e.srcElement.audioTracks !== 'undefined') { } else if (typeof e.srcElement.audioTracks !== 'undefined') {
if (e.srcElement.audioTracks.length > 0) { if (e.srcElement.audioTracks.length > 0) {
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
} }
} }
} }

View file

@ -7,8 +7,8 @@
:src="currentMedia.url" :src="currentMedia.url"
@click.stop="" @click.stop=""
controls autoplay controls autoplay
:loop="loopVideo" @loadeddata="onVideoDataLoad"
@loadeddata="onVideoDataLoad"> :loop="loopVideo">
</video> </video>
</div> </div>
</template> </template>

View file

@ -28,7 +28,6 @@ const mediaViewer = {
}, },
setCurrent ({ commit, state }, current) { setCurrent ({ commit, state }, current) {
const index = state.media.indexOf(current) const index = state.media.indexOf(current)
console.log(index, current)
commit('setCurrent', index || 0) commit('setCurrent', index || 0)
}, },
closeMediaViewer ({ commit }) { closeMediaViewer ({ commit }) {