mirror of
https://codeberg.org/yeentown/barkey
synced 2024-12-02 20:27:26 +00:00
175 lines
4.1 KiB
Vue
175 lines
4.1 KiB
Vue
|
<template>
|
||
|
<div class="zdjebgpv" :class="{ detail }" ref="thumbnail" :style="`background-color: ${ background }`">
|
||
|
<img
|
||
|
:src="file.url"
|
||
|
:alt="file.name"
|
||
|
:title="file.name"
|
||
|
v-if="detail && is === 'image'"/>
|
||
|
<video
|
||
|
:src="file.url"
|
||
|
ref="volumectrl"
|
||
|
preload="metadata"
|
||
|
controls
|
||
|
v-else-if="detail && is === 'video'"/>
|
||
|
<img :src="file.thumbnailUrl" alt="" @load="onThumbnailLoaded" :style="`object-fit: ${ fit }`" v-else-if="isThumbnailAvailable"/>
|
||
|
<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'"/>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts">
|
||
|
import Vue from 'vue';
|
||
|
import anime from 'animejs';
|
||
|
import i18n from '../../../i18n';
|
||
|
import {
|
||
|
faFile,
|
||
|
faFileAlt,
|
||
|
faFileImage,
|
||
|
faMusic,
|
||
|
faFileVideo,
|
||
|
faFileCsv,
|
||
|
faFilePdf,
|
||
|
faFileArchive,
|
||
|
faFilm
|
||
|
} from '@fortawesome/free-solid-svg-icons';
|
||
|
|
||
|
export default Vue.extend({
|
||
|
props: {
|
||
|
file: {
|
||
|
type: Object,
|
||
|
required: true
|
||
|
},
|
||
|
fit: {
|
||
|
type: String,
|
||
|
required: true
|
||
|
},
|
||
|
detail: {
|
||
|
type: Boolean,
|
||
|
required: false,
|
||
|
default: false
|
||
|
}
|
||
|
},
|
||
|
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.endsWith('?thumbnail') ? (this.is === 'image' || this.is === 'video') : true;
|
||
|
},
|
||
|
background(): string {
|
||
|
return this.file.properties.avgColor && this.file.properties.avgColor.length == 3
|
||
|
? `rgb(${this.file.properties.avgColor.join(',')})`
|
||
|
: '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.file.properties.avgColor.length == 3) {
|
||
|
anime({
|
||
|
targets: this.$refs.thumbnail,
|
||
|
backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
|
||
|
duration: 100,
|
||
|
easing: 'linear'
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
volumechange() {
|
||
|
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
|
||
|
this.$store.commit('device/set', { key: 'mediaVolume', value: audioTag.volume });
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
</script>
|
||
|
|
||
|
<style lang="stylus" scoped>
|
||
|
.zdjebgpv
|
||
|
display flex
|
||
|
|
||
|
> img,
|
||
|
> .icon
|
||
|
pointer-events none
|
||
|
|
||
|
> img
|
||
|
height 100%
|
||
|
width 100%
|
||
|
margin auto
|
||
|
object-fit cover
|
||
|
|
||
|
> .icon
|
||
|
height 65%
|
||
|
width 65%
|
||
|
margin auto
|
||
|
|
||
|
> video,
|
||
|
> audio
|
||
|
width 100%
|
||
|
|
||
|
> .icon-sub
|
||
|
position absolute
|
||
|
width 30%
|
||
|
height auto
|
||
|
margin 0
|
||
|
right 4%
|
||
|
bottom 4%
|
||
|
|
||
|
&.detail
|
||
|
> .icon
|
||
|
height 100px
|
||
|
margin 16px auto
|
||
|
|
||
|
</style>
|