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

video preview in shared single page

Browse Source
This commit is contained in:
Čarodej
2022-02-08 17:34:07 +01:00
parent 4df575f5e9
commit 638a1a9a72
7 changed files with 93 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/SharedSingleFile.vue
+61 -3
View File
@@ -1,8 +1,61 @@
<template>
<div class="flex h-screen items-center justify-center">
<div v-if="file" class="w-full text-center">
<ItemGrid :entry="file" :mobile-handler="false" />
<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">
{{ 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>
@@ -15,6 +68,7 @@
<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'
@@ -24,9 +78,13 @@ export default {
components: {
ButtonBase,
ItemGrid,
Video,
},
computed: {
...mapGetters(['config']),
isVideo() {
return this.file.data.type === 'video'
}
},
data() {
return {