104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
id="current-media"
|
|
v-loading="loading"
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
>
|
|
<video
|
|
:src="src"
|
|
v-if="isMovieFile()"
|
|
autoplay
|
|
loop
|
|
controls
|
|
v-on:loadstart="loaded()"
|
|
></video>
|
|
<video
|
|
:src="src"
|
|
v-else-if="isGIF()"
|
|
autoplay
|
|
loop
|
|
v-on:loadstart="loaded()"
|
|
></video>
|
|
<video
|
|
:src="src"
|
|
v-else-if="isAudio()"
|
|
autoplay
|
|
loop
|
|
controls
|
|
v-on:loadstart="loaded()"
|
|
></video>
|
|
<img :src="imageSrc" v-else v-on:load="loaded()" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import exifImageUrl from '@/components/utils/exifImageUrl'
|
|
|
|
export default {
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
imageSrc: this.src,
|
|
}
|
|
},
|
|
watch: {
|
|
src: async function (newSrc, _oldSrc) {
|
|
this.imageSrc = newSrc
|
|
if (newSrc && !this.isMovieFile() && !this.isGIF()) {
|
|
try {
|
|
const transformed = await exifImageUrl(newSrc)
|
|
this.imageSrc = transformed
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
loading: (state) => state.TimelineSpace.Modals.ImageViewer.loading,
|
|
}),
|
|
},
|
|
methods: {
|
|
isMovieFile() {
|
|
return ['video'].includes(this.type)
|
|
},
|
|
isGIF() {
|
|
return ['gifv'].includes(this.type)
|
|
},
|
|
isAudio() {
|
|
return ['audio'].includes(this.type)
|
|
},
|
|
async loaded() {
|
|
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/loaded')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#current-media {
|
|
max-width: 80%;
|
|
min-width: 10%;
|
|
height: 80%;
|
|
display: inline-flex;
|
|
|
|
img,
|
|
video {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
align-self: center;
|
|
}
|
|
}
|
|
</style>
|