mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-06 02:33:48 +00:00
107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex h-screen items-center justify-center p-4">
|
|
|
|
<!--App logo-->
|
|
<div v-if="file && !isVideo" class="fixed top-4 left-0 right-0">
|
|
<router-link :to="{name: 'SignIn'}" class="block">
|
|
<!--Image logo-->
|
|
<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
|
|
|
|
<!--Text logo if image isn't available-->
|
|
<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
|
|
{{ config.app_name }}
|
|
</b>
|
|
</router-link>
|
|
</div>
|
|
|
|
<!--File preview-->
|
|
<div v-if="file" class="w-full text-center">
|
|
|
|
<!--App logo-->
|
|
<router-link v-if="isVideo" :to="{name: 'SignIn'}" class="block">
|
|
<!--Image logo-->
|
|
<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
|
|
|
|
<!--Text logo if image isn't available-->
|
|
<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
|
|
{{ config.app_name }}
|
|
</b>
|
|
</router-link>
|
|
|
|
<!--File item-->
|
|
<ItemGrid v-if="! isVideo" :entry="file" :mobile-handler="false" class="mt-2" />
|
|
|
|
<!--Video preview-->
|
|
<div v-if="isVideo" class="mb-4">
|
|
|
|
<!--Video preview-->
|
|
<Video :file="file" class="w-full lg:max-w-xl xl:max-w-3xl 2xl:max-w-5xl self-center mx-auto my-10 shadow-xl rounded-lg"/>
|
|
|
|
<!--Item Info-->
|
|
<div class="text-center">
|
|
<!--Item Title-->
|
|
<b class="tracking-tight inline-block w-full text-sm md:px-6">
|
|
{{ file.data.attributes.name }}
|
|
</b>
|
|
|
|
<!--Item sub line-->
|
|
<div class="flex items-center justify-center">
|
|
|
|
<!--File & Image sub line-->
|
|
<small class="block text-xs text-gray-500 dark:text-gray-500">
|
|
{{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Download button-->
|
|
<ButtonBase @click.native="$downloadSelection(file)" button-style="theme" class="mx-auto">
|
|
{{ $t('page_shared.download_file') }}
|
|
</ButtonBase>
|
|
|
|
<!--Google Adsense banner-->
|
|
<div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mt-5 min-h-[120px]"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ButtonBase from '../components/FilesView/ButtonBase'
|
|
import Video from "../components/FilePreview/Media/Video"
|
|
import ItemGrid from '../components/FilesView/ItemGrid'
|
|
import { mapGetters } from 'vuex'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'SharedSingleItem',
|
|
components: {
|
|
ButtonBase,
|
|
ItemGrid,
|
|
Video,
|
|
},
|
|
computed: {
|
|
...mapGetters(['config']),
|
|
isVideo() {
|
|
return this.file.data.type === 'video'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
file: undefined,
|
|
}
|
|
},
|
|
mounted() {
|
|
axios
|
|
.get(`/api/browse/file/${this.$router.currentRoute.params.token}`)
|
|
.then((response) => {
|
|
this.file = response.data
|
|
})
|
|
.catch((error) => {
|
|
if (error.response.status === 403)
|
|
this.$router.push({ name: 'SharedAuthentication' })
|
|
})
|
|
},
|
|
}
|
|
</script>
|