nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-15 17:55:02 +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/components/FilePreview/FilePreviewMedia.vue
+1 -1
View File
@@ -21,7 +21,7 @@
<!--Show Audio, Video and Image-->
<div class="w-full h-full flex items-center justify-center">
<Audio v-if="isAudio" :file="currentFile"/>
<Video v-if="isVideo" :file="currentFile" />
<Video v-if="isVideo" :file="currentFile" class="max-w-[1080px] max-h-full self-center mx-auto" />
<ImageFile v-if="isImage" :file="currentFile" class="max-w-[100%] max-h-[100%] self-center mx-auto" />
</div>
</div>
resources/js/components/FilePreview/Media/Video.vue
+9 -11
View File
@@ -1,15 +1,13 @@
<template>
<div class="max-w-[1080px] max-h-full">
<video
:src="file.data.attributes.file_url"
class="video"
:class="{ 'file-shadow': !$isMobile() }"
controlsList="nodownload"
disablePictureInPicture
playsinline
controls
/>
</div>
<video
:src="file.data.attributes.file_url"
class="video"
:class="{ 'file-shadow': !$isMobile() }"
controlsList="nodownload"
disablePictureInPicture
playsinline
controls
/>
</template>
<script>
resources/js/components/Others/FilePreviewDetail.vue
+9 -2
View File
@@ -9,10 +9,10 @@
/>
<!--Audio-->
<audio v-else-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls class="w-full"></audio>
<audio v-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls class="w-full"></audio>
<!--Video-->
<video class="h-auto w-full overflow-hidden rounded-sm" v-else-if="singleFile.data.type === 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<video v-if="singleFile.data.type === 'video'" ref="video" class="h-auto w-full overflow-hidden rounded-sm" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="singleFile.data.attributes.file_url" type="video/mp4" />
</video>
</div>
@@ -33,5 +33,12 @@ export default {
return this.singleFile && !includes(['folder', 'file'], this.singleFile.data.type)
},
},
watch: {
'singleFile': function (val) {
if (val.data.type === 'video') {
this.$refs.video.load()
}
}
}
}
</script>
resources/js/views/Auth/Headline.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="mb-14">
<!--Custom content-->
<slot></slot>
<slot />
<!--Default application logo-->
<div v-if="!$slots.default">
resources/js/views/FileView/Components/NavigationSharePanel.vue
+11 -2
View File
@@ -24,7 +24,15 @@
</div>
<ContentGroup class="mt-auto">
<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="flex items-center cursor-pointer group">
<router-link v-if="! config.isAuthenticated" :to="{name: 'SignIn'}" class="flex items-center cursor-pointer group py-2.5">
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
<user-icon size="14" class="vue-feather group-hover-text-theme" />
</div>
<b class="text-xs group-hover-text-theme">
Sign In or Create Account
</b>
</router-link>
<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="flex items-center cursor-pointer group py-2.5">
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
<sun-icon v-if="isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
<moon-icon v-if="!isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
@@ -39,7 +47,7 @@
</template>
<script>
import { SunIcon, MoonIcon, ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import { UserIcon, SunIcon, MoonIcon, ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
import ContentGroup from '../../../components/Sidebar/ContentGroup'
@@ -52,6 +60,7 @@ export default {
TreeMenuNavigator,
ContentSidebar,
ContentGroup,
UserIcon,
SunIcon,
MoonIcon,
UploadCloudIcon,
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 {
resources/views/vuefilemanager/others/color-template.blade.php
+1 -3
View File
@@ -12,11 +12,9 @@
color: {{ $color }};
}
{{-- Group options --}}
.group:hover:not(.hover-disabled) .group-hover-text-theme {color: {{ $color }} !important;}
{{-- Single option --}}
.svg-color-theme {
fill: {{ $color }};
@@ -50,7 +48,7 @@
.hover-text-theme:hover {color: {{ $color }}}
.shadow-theme {box-shadow: 0 7px 16px 2px {{ $color }}40}
.shadow-theme {box-shadow: 0 10px 15px -3px {{ $color }}40}
.border-theme {border-color: {{ $color }}}
.border-top-theme {border-top-color: {{ $color }} !important;}