diff options
Diffstat (limited to 'src/client/components/drive-file-thumbnail.vue')
| -rw-r--r-- | src/client/components/drive-file-thumbnail.vue | 108 |
1 files changed, 0 insertions, 108 deletions
diff --git a/src/client/components/drive-file-thumbnail.vue b/src/client/components/drive-file-thumbnail.vue deleted file mode 100644 index 2cb1d98618..0000000000 --- a/src/client/components/drive-file-thumbnail.vue +++ /dev/null @@ -1,108 +0,0 @@ -<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 }`"/> - <i v-else-if="is === 'image'" class="fas fa-file-image icon"></i> - <i v-else-if="is === 'video'" class="fas fa-file-video icon"></i> - <i v-else-if="is === 'audio' || is === 'midi'" class="fas fa-music icon"></i> - <i v-else-if="is === 'csv'" class="fas fa-file-csv icon"></i> - <i v-else-if="is === 'pdf'" class="fas fa-file-pdf icon"></i> - <i v-else-if="is === 'textfile'" class="fas fa-file-alt icon"></i> - <i v-else-if="is === 'archive'" class="fas fa-file-archive icon"></i> - <i v-else class="fas fa-file icon"></i> - - <i v-if="isThumbnailAvailable && is === 'video'" class="fas fa-film icon-sub"></i> -</div> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import ImgWithBlurhash from '@client/components/img-with-blurhash.vue'; -import { ColdDeviceStorage } from '@client/store'; - -export default defineComponent({ - components: { - ImgWithBlurhash - }, - props: { - file: { - type: Object, - required: true - }, - fit: { - type: String, - required: false, - default: 'cover' - }, - }, - data() { - return { - isContextmenuShowing: false, - isDragging: false, - - }; - }, - 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 = ColdDeviceStorage.get('mediaVolume'); - }, - methods: { - volumechange() { - const audioTag = this.$refs.volumectrl as HTMLAudioElement; - ColdDeviceStorage.set('mediaVolume', 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> |