rudeshark.net/src/client/components/drive-file-thumbnail.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>