mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
|
<div v-if="canBePreview" class="mb-4 block w-full">
|
|
<!--Image-->
|
|
<img
|
|
v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail"
|
|
:src="singleFile.data.attributes.thumbnail.md"
|
|
:alt="singleFile.data.attributes.name"
|
|
class="w-full overflow-hidden rounded-lg object-cover shadow-lg"
|
|
/>
|
|
|
|
<!--Audio-->
|
|
<audio
|
|
v-if="singleFile.data.type === 'audio'"
|
|
:src="singleFile.data.attributes.file_url"
|
|
controlsList="nodownload"
|
|
controls
|
|
class="w-full"
|
|
></audio>
|
|
|
|
<!--Video-->
|
|
<video
|
|
v-if="singleFile.data.type === 'video'"
|
|
ref="video"
|
|
class="h-auto w-full overflow-hidden rounded-sm"
|
|
controlsList="nodownload"
|
|
disablePictureInPicture
|
|
playsinline
|
|
controls
|
|
>
|
|
<source :src="singleFile.data.attributes.file_url" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { includes } from 'lodash'
|
|
|
|
export default {
|
|
name: 'FilePreview',
|
|
computed: {
|
|
...mapGetters(['clipboard']),
|
|
singleFile() {
|
|
return this.clipboard[0]
|
|
},
|
|
canBePreview() {
|
|
return this.singleFile && !includes(['folder', 'file'], this.singleFile.data.type)
|
|
},
|
|
},
|
|
watch: {
|
|
singleFile: function (val) {
|
|
if (val.data.type === 'video') {
|
|
this.$refs.video.load()
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|