127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<template>
|
|
<div class="zdjebgpv" ref="thumbnail">
|
|
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
|
|
<Fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
|
|
<Fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
|
|
<Fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
|
|
<Fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
|
|
<Fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
|
|
<Fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
|
|
<Fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
|
|
<Fa :icon="faFile" class="icon" v-else/>
|
|
<Fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import {
|
|
faFile,
|
|
faFileAlt,
|
|
faFileImage,
|
|
faMusic,
|
|
faFileVideo,
|
|
faFileCsv,
|
|
faFilePdf,
|
|
faFileArchive,
|
|
faFilm
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
import ImgWithBlurhash from './img-with-blurhash.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ImgWithBlurhash
|
|
},
|
|
props: {
|
|
file: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
fit: {
|
|
type: String,
|
|
required: false,
|
|
default: 'cover'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isContextmenuShowing: false,
|
|
isDragging: false,
|
|
|
|
faFile,
|
|
faFileAlt,
|
|
faFileImage,
|
|
faMusic,
|
|
faFileVideo,
|
|
faFileCsv,
|
|
faFilePdf,
|
|
faFileArchive,
|
|
faFilm
|
|
};
|
|
},
|
|
computed: {
|
|
is(): 'image' | 'video' | 'midi' | 'audio' | 'csv' | 'pdf' | 'textfile' | 'archive' | 'unknown' {
|
|
if (this.file.type.startsWith('image/')) return 'image';
|
|
if (this.file.type.startsWith('video/')) return 'video';
|
|
if (this.file.type === 'audio/midi') return 'midi';
|
|
if (this.file.type.startsWith('audio/')) return 'audio';
|
|
if (this.file.type.endsWith('/csv')) return 'csv';
|
|
if (this.file.type.endsWith('/pdf')) return 'pdf';
|
|
if (this.file.type.startsWith('text/')) return 'textfile';
|
|
if ([
|
|
"application/zip",
|
|
"application/x-cpio",
|
|
"application/x-bzip",
|
|
"application/x-bzip2",
|
|
"application/java-archive",
|
|
"application/x-rar-compressed",
|
|
"application/x-tar",
|
|
"application/gzip",
|
|
"application/x-7z-compressed"
|
|
].some(e => e === this.file.type)) return 'archive';
|
|
return 'unknown';
|
|
},
|
|
isThumbnailAvailable(): boolean {
|
|
return this.file.thumbnailUrl
|
|
? (this.is === 'image' || this.is === 'video')
|
|
: false;
|
|
},
|
|
},
|
|
mounted() {
|
|
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
|
|
if (audioTag) audioTag.volume = this.$store.state.device.mediaVolume;
|
|
},
|
|
methods: {
|
|
volumechange() {
|
|
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
|
|
this.$store.commit('device/set', { key: 'mediaVolume', value: audioTag.volume });
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zdjebgpv {
|
|
position: relative;
|
|
|
|
> .icon-sub {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: auto;
|
|
margin: 0;
|
|
right: 4%;
|
|
bottom: 4%;
|
|
}
|
|
|
|
> * {
|
|
margin: auto;
|
|
}
|
|
|
|
> .icon {
|
|
pointer-events: none;
|
|
height: 65%;
|
|
width: 65%;
|
|
}
|
|
}
|
|
</style>
|