feat: Blurhash integration

Resolve #6559

src/client/components/drive-file-thumbnail.vue

@@ -1,36 +1,15 @@
 <template>
-<div class="zdjebgpv" :class="{ detail }" ref="thumbnail" :style="`background-color: ${ background }`">
-	<img
-		:src="file.url"
-		:alt="file.name"
-		:title="file.name"
-		@load="onThumbnailLoaded"
-		v-if="detail && is === 'image'"/>
-	<video
-		:src="file.url"
-		ref="volumectrl"
-		preload="metadata"
-		controls
-		v-else-if="detail && is === 'video'"/>
-	<img :src="file.thumbnailUrl" @load="onThumbnailLoaded" :style="`object-fit: ${ fit }`" v-else-if="isThumbnailAvailable"/>
+<div class="zdjebgpv" ref="thumbnail">
+	<img-with-blurhash 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'"/>
-
-	<audio
-		:src="file.url"
-		ref="volumectrl"
-		preload="metadata"
-		controls
-		v-else-if="detail && is === 'audio'"/>
 	<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="!detail && isThumbnailAvailable && is === 'video'"/>
+	<fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
 </div>
 </template>
 
@@ -47,8 +26,12 @@ import {
 	faFileArchive,
 	faFilm
 	} from '@fortawesome/free-solid-svg-icons';
+import ImgWithBlurhash from './img-with-blurhash.vue';
 
 export default Vue.extend({
+	components: {
+		ImgWithBlurhash
+	},
 	props: {
 		file: {
 			type: Object,
@@ -59,11 +42,6 @@ export default Vue.extend({
 			required: false,
 			default: 'cover'
 		},
-		detail: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
 	},
 	data() {
 		return {
@@ -108,20 +86,12 @@ export default Vue.extend({
 				? (this.is === 'image' || this.is === 'video')
 				: false;
 		},
-		background(): string {
-			return this.file.properties.avgColor || 'transparent';
-		}
 	},
 	mounted() {
 		const audioTag = this.$refs.volumectrl as HTMLAudioElement;
 		if (audioTag) audioTag.volume = this.$store.state.device.mediaVolume;
 	},
 	methods: {
-		onThumbnailLoaded() {
-			if (this.file.properties.avgColor) {
-				this.$refs.thumbnail.style.backgroundColor = 'transparent';
-			}
-		},
 		volumechange() {
 			const audioTag = this.$refs.volumectrl as HTMLAudioElement;
 			this.$store.commit('device/set', { key: 'mediaVolume', value: audioTag.volume });
@@ -132,14 +102,8 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .zdjebgpv {
-	display: flex;
 	position: relative;
 
-	> img,
-	> .icon {
-		pointer-events: none;
-	}
-
 	> .icon-sub {
 		position: absolute;
 		width: 30%;
@@ -153,37 +117,10 @@ export default Vue.extend({
 		margin: auto;
 	}
 
-	&:not(.detail) {
-		> img {
-			height: 100%;
-			width: 100%;
-			object-fit: cover;
-		}
-
-		> .icon {
-			height: 65%;
-			width: 65%;
-		}
-
-		> video,
-		> audio {
-			width: 100%;
-		}
-	}
-
-	&.detail {
-		> .icon {
-			height: 100px;
-			width: 100px;
-			margin: 16px;
-		}
-
-		> *:not(.icon) {
-			max-height: 300px;
-			max-width: 100%;
-			height: 100%;
-			object-fit: contain;
-		}
+	> .icon {
+		pointer-events: none;
+		height: 65%;
+		width: 65%;
 	}
 }
 </style>