From 638a1a9a7238d65895a058ae1ca2f9cc926472e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Tue, 8 Feb 2022 17:34:07 +0100
Subject: [PATCH] video preview in shared single page

---
 .../FilePreview/FilePreviewMedia.vue          |  2 +-
 .../js/components/FilePreview/Media/Video.vue | 20 +++---
 .../components/Others/FilePreviewDetail.vue   | 11 +++-
 resources/js/views/Auth/Headline.vue          |  2 +-
 .../Components/NavigationSharePanel.vue       | 13 +++-
 resources/js/views/SharedSingleFile.vue       | 64 ++++++++++++++++++-
 .../others/color-template.blade.php           |  4 +-
 7 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/FilePreview/FilePreviewMedia.vue b/resources/js/components/FilePreview/FilePreviewMedia.vue
index 64e3bdb8..5d113d8e 100644
--- a/resources/js/components/FilePreview/FilePreviewMedia.vue
+++ b/resources/js/components/FilePreview/FilePreviewMedia.vue
@@ -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>
diff --git a/resources/js/components/FilePreview/Media/Video.vue b/resources/js/components/FilePreview/Media/Video.vue
index f7dafde5..65617fff 100644
--- a/resources/js/components/FilePreview/Media/Video.vue
+++ b/resources/js/components/FilePreview/Media/Video.vue
@@ -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>
diff --git a/resources/js/components/Others/FilePreviewDetail.vue b/resources/js/components/Others/FilePreviewDetail.vue
index 7b048693..8994357e 100644
--- a/resources/js/components/Others/FilePreviewDetail.vue
+++ b/resources/js/components/Others/FilePreviewDetail.vue
@@ -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>
diff --git a/resources/js/views/Auth/Headline.vue b/resources/js/views/Auth/Headline.vue
index 65ae0d98..a2ae4f43 100644
--- a/resources/js/views/Auth/Headline.vue
+++ b/resources/js/views/Auth/Headline.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="mb-14">
         <!--Custom content-->
-        <slot></slot>
+        <slot />
 
         <!--Default application logo-->
         <div v-if="!$slots.default">
diff --git a/resources/js/views/FileView/Components/NavigationSharePanel.vue b/resources/js/views/FileView/Components/NavigationSharePanel.vue
index 8107280b..2667f17e 100644
--- a/resources/js/views/FileView/Components/NavigationSharePanel.vue
+++ b/resources/js/views/FileView/Components/NavigationSharePanel.vue
@@ -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,
diff --git a/resources/js/views/SharedSingleFile.vue b/resources/js/views/SharedSingleFile.vue
index 0e65c03c..cead16e4 100644
--- a/resources/js/views/SharedSingleFile.vue
+++ b/resources/js/views/SharedSingleFile.vue
@@ -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 {
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
index 6439e252..e4e2ad2c 100644
--- a/resources/views/vuefilemanager/others/color-template.blade.php
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -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;}