nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-23 09:40:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

info sidebar refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-22 12:31:27 +01:00
parent ba05cdde83
commit 26bf65af88
9 changed files with 337 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/FilePreviewDetail.vue
+43 -53
View File
@@ -1,66 +1,56 @@
<template>
<div v-if="canBePreview" class="preview">
<img v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail" :src="singleFile.data.attributes.thumbnail.md" :alt="singleFile.data.attributes.name" />
<audio v-else-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls></audio>
<video v-else-if="singleFile.data.type === 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<div v-if="canBePreview" class="w-full block mb-4">
<!--Image-->
<img
v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail"
:src="singleFile.data.attributes.thumbnail.md"
:alt="singleFile.data.attributes.name"
class="rounded-lg overflow-hidden w-full object-cover shadow-lg"
/>
<!--Audio-->
<audio
v-else-if="singleFile.data.type === 'audio'"
:src="singleFile.data.attributes.file_url"
controlsList="nodownload"
controls
class="w-full"
>
</audio>
<!--Video-->
<video
class="w-full h-auto rounded-sm overflow-hidden"
v-else-if="singleFile.data.type === 'video'"
controlsList="nodownload"
disablePictureInPicture
playsinline
controls
>
<source :src="singleFile.data.attributes.file_url" type="video/mp4">
</video>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { includes } from 'lodash'
import {mapGetters} from 'vuex'
import {includes} from 'lodash'
export default {
name: 'FilePreview',
computed: {
...mapGetters([
export default {
name: 'FilePreview',
computed: {
...mapGetters([
'clipboard',
]),
singleFile() {
return this.clipboard[0]
return this.clipboard[0]
},
canBePreview() {
return this.singleFile && ! includes([
'folder', 'file'
], this.singleFile.data.type)
},
}
canBePreview() {
return this.singleFile && !includes([
'folder', 'file'
], this.singleFile.data.type)
},
}
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.preview {
width: 100%;
display: block;
margin-bottom: 7px;
img {
border-radius: 4px;
overflow: hidden;
width: 100%;
object-fit: cover;
}
audio {
width: 100%;
&::-webkit-media-controls-panel {
background-color: $light_background;
}
&::-webkit-media-controls-play-button {
color: $theme;
}
}
video {
width: 100%;
height: auto;
border-radius: 3px;
}
}
</style>
</script>