From 843a1bc690a31658078f1aa068a19262049e0056 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Tue, 10 Aug 2021 11:14:04 +0200
Subject: [PATCH] single file preview in spotlight

---
 .../js/components/FilesView/FilePreview.vue   |   9 +-
 .../components/FilesView/FilePreviewMedia.vue | 105 ++++++++++--------
 .../FilesView/FilePreviewToolbar.vue          |  42 +++----
 .../js/components/Spotlight/Spotlight.vue     |   9 +-
 resources/js/store/modules/fileBrowser.js     |   9 +-
 resources/js/views/FilePages/Files.vue        |  16 +--
 6 files changed, 104 insertions(+), 86 deletions(-)

diff --git a/resources/js/components/FilesView/FilePreview.vue b/resources/js/components/FilesView/FilePreview.vue
index ffb37731..895401ce 100644
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/resources/js/components/FilesView/FilePreview.vue
@@ -32,6 +32,7 @@
         methods: {
             closeFilePreview() {
                 this.isFullPreview = false
+				this.$store.commit('FAST_PREVIEW_CLEAR')
             },
             next() {
                 events.$emit('file-preview:next')
@@ -46,12 +47,8 @@
             }
         },
         mounted() {
-            events.$on('file-preview:show', () => {
-                this.isFullPreview = true
-            })
-            events.$on('file-preview:hide', () => {
-                this.isFullPreview = false
-            })
+            events.$on('file-preview:show', () => this.isFullPreview = true)
+            events.$on('file-preview:hide', () => this.closeFilePreview())
         }
     }
 </script>
diff --git a/resources/js/components/FilesView/FilePreviewMedia.vue b/resources/js/components/FilesView/FilePreviewMedia.vue
index 06700680..fa2888f8 100644
--- a/resources/js/components/FilesView/FilePreviewMedia.vue
+++ b/resources/js/components/FilesView/FilePreviewMedia.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="media-full-preview" id="mediaPreview" v-if="clipboard[0]">
+	<div class="media-full-preview" id="mediaPreview" v-if="currentFile">
 
         <!--Arrow navigation-->
         <div v-if="files.length > 1" class="navigation-arrows">
@@ -17,7 +17,7 @@
 
             <!--Show PDF-->
             <div v-if="isPDF" id="pdf-wrapper" :style="{width: documentSize + '%'}">
-                <pdf :src="pdfdata" v-for="i in numPages" :key="i" :resize="true" :page="i" scale="page-width" style="width:100%; margin:0 auto 35px;" id="printable-file" class="pdf-file">
+                <pdf :src="pdfData" v-for="i in numPages" :key="i" :resize="true" :page="i" scale="page-width" style="width:100%; margin:0 auto 35px;" id="printable-file" class="pdf-file">
                     <template slot="loading">
                         <h1>loading content...</h1>
                     </template>
@@ -25,11 +25,11 @@
             </div>
 
             <!--Show Audio, Video and Image-->
-            <div v-if="!isPDF" class="file-wrapper">
+            <div v-if="isAudio || isImage || isVideo" class="file-wrapper">
 
 				<audio
                     v-if="isAudio"
-                    :class="{ 'file-shadow': !$isMobile() }"
+                    :class="{'file-shadow': ! $isMobile() }"
                     class="file audio"
                     :src="currentFile.file_url"
                     controls>
@@ -79,28 +79,37 @@ export default {
     },
     computed: {
         ...mapGetters([
+            'fastPreview',
             'clipboard',
             'entries',
         ]),
         currentFile() {
-            return this.files[Math.abs(this.currentIndex) % this.files.length]
+
+        	console.log(this.fastPreview);
+        	console.log(this.files[Math.abs(this.currentIndex) % this.files.length]);
+        	console.log(this.currentIndex);
+        	console.log(this.files);
+
+            return this.fastPreview
+				? this.fastPreview
+				: this.files[Math.abs(this.currentIndex) % this.files.length]
         },
         isPDF() {
-            return this.clipboard[0].mimetype === 'pdf'
+            return this.currentFile.mimetype === 'pdf'
         },
         isVideo() {
-            return this.clipboard[0].type === 'video'
+            return this.currentFile.type === 'video'
         },
         isAudio() {
-            return this.clipboard[0].type === 'audio'
+            return this.currentFile.type === 'audio'
         },
         isImage() {
-            return this.clipboard[0].type === 'image'
+            return this.currentFile.type === 'image'
         }
     },
     data() {
         return {
-            pdfdata: undefined,
+            pdfData: undefined,
             numPages: 0,
             currentIndex: 0,
             files: [],
@@ -118,7 +127,7 @@ export default {
                 this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFile)
 
                 // Init pdf instance
-                if (this.clipboard[0].mimetype === 'pdf') {
+                if (this.currentFile.mimetype === 'pdf') {
                     this.getPdf()
                 }
             }
@@ -139,37 +148,15 @@ export default {
         },
     },
     methods: {
-        next() {
-            if (!this.files.length > 1) return
-
-            this.pdfdata = undefined
-
-            this.currentIndex += 1
-
-            if (this.currentIndex > this.files.length - 1) {
-                this.currentIndex = 0
-            }
-        },
-        prev() {
-            if (!this.files.length > 1) return
-
-            this.pdfdata = undefined
-
-            this.currentIndex -= 1
-
-            if (this.currentIndex < 0) {
-                this.currentIndex = this.files.length - 1
-            }
-        },
         getPdf() {
-            this.pdfdata = undefined
+            this.pdfData = undefined
             this.numPages = 0
 
             let self = this;
 
-            self.pdfdata = pdf.createLoadingTask(this.currentFile.file_url);
+            self.pdfData = pdf.createLoadingTask(this.currentFile.file_url);
 
-            self.pdfdata.then(pdf => self.numPages = pdf.numPages);
+            self.pdfData.then(pdf => self.numPages = pdf.numPages);
         },
         getFilesForView() {
             let requestedFile = this.clipboard[0]
@@ -195,7 +182,6 @@ export default {
             })
         },
 		getDocumentSize() {
-
 			if (window.innerWidth < 960) {
 				this.documentSize = 100
 			}
@@ -205,26 +191,47 @@ export default {
 					? parseInt(localStorage.getItem('documentSize'))
 					: 50;
 			}
-		}
-    },
-    created() {
+		},
+		next() {
+			if (!this.files.length > 1) return
 
-		events.$on('file-preview:next', () => this.next())
-        events.$on('file-preview:prev', () => this.prev())
+			this.pdfData = undefined
 
-        events.$on('document-zoom:in', () => {
-            if (this.documentSize < 100) {
+			this.currentIndex += 1
+
+			if (this.currentIndex > this.files.length - 1) {
+				this.currentIndex = 0
+			}
+		},
+		prev() {
+			if (!this.files.length > 1) return
+
+			this.pdfData = undefined
+
+			this.currentIndex -= 1
+
+			if (this.currentIndex < 0) {
+				this.currentIndex = this.files.length - 1
+			}
+		},
+		zoomIn() {
+			if (this.documentSize < 100) {
 				this.documentSize += 10
 				localStorage.setItem('documentSize', this.documentSize)
 			}
-        })
-
-        events.$on('document-zoom:out', () => {
-            if (this.documentSize > 40) {
+		},
+		zoomOut() {
+			if (this.documentSize > 40) {
 				this.documentSize -= 10
 				localStorage.setItem('documentSize', this.documentSize)
 			}
-        })
+		}
+    },
+    created() {
+		events.$on('file-preview:next', () => this.next())
+        events.$on('file-preview:prev', () => this.prev())
+        events.$on('document-zoom:in', () => this.zoomIn())
+        events.$on('document-zoom:out', () => this.zoomOut())
 
         this.getDocumentSize()
         this.getFilesForView()
diff --git a/resources/js/components/FilesView/FilePreviewToolbar.vue b/resources/js/components/FilesView/FilePreviewToolbar.vue
index 86962892..dd643939 100644
--- a/resources/js/components/FilesView/FilePreviewToolbar.vue
+++ b/resources/js/components/FilesView/FilePreviewToolbar.vue
@@ -1,10 +1,10 @@
 <template>
-	<div class="navigation-panel" v-if="clipboard[0]">
+	<div class="navigation-panel" v-if="currentFile">
 		<div class="name-wrapper">
 			<x-icon @click="closeFullPreview" size="22" class="icon-close hover-text-theme" />
 			<div class="name-count-wrapper">
-				<p class="title">{{ clipboard[0].name }}</p>
-				<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
+				<p class="title">{{ currentFile.name }}</p>
+				<span v-if="! fastPreview" class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
 			</div>
 			<PopoverWrapper>
 				<span @click.stop="showItemContextMenu" id="fast-preview-menu" class="fast-menu-icon group">
@@ -12,10 +12,10 @@
 				</span>
 				<PopoverItem name="file-preview-contextmenu" side="right">
 					<OptionGroup class="menu-option-group">
-						<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
-						<Option @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
-						<Option @click.native="$shareFileOrFolder(clipboard[0])" :title="sharingTitle" icon="share" v-if="$checkPermission('master')" />
-						<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
+						<Option @click.native="$renameFileOrFolder(currentFile)" :title="$t('context_menu.rename')" icon="rename" />
+						<Option @click.native="$moveFileOrFolder(currentFile)" :title="$t('context_menu.move')" icon="move-item" />
+						<Option @click.native="$shareFileOrFolder(currentFile)" :title="sharingTitle" icon="share" v-if="$checkPermission('master')" />
+						<Option @click.native="$deleteFileOrFolder(currentFile)" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
 					</OptionGroup>
 					<OptionGroup>
 						<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
@@ -25,7 +25,7 @@
 		</div>
 
 		<div class="created-at-wrapper">
-			<p>{{ clipboard[0].filesize }}, {{ clipboard[0].created_at }}</p>
+			<p>{{ currentFile.filesize }}, {{ currentFile.created_at }}</p>
 		</div>
 
 		<div class="navigation-icons">
@@ -35,7 +35,7 @@
 			</div>
 			<div class="navigation-tool-wrapper">
 				<ToolbarButton @click.native="downloadItem" class="mobile-hide" source="download" :action="$t('actions.download')" />
-				<ToolbarButton v-if="canShareItem" @click.native="$shareFileOrFolder(clipboard[0])" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
+				<ToolbarButton v-if="canShareItem" @click.native="$shareFileOrFolder(currentFile)" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
 				<ToolbarButton v-if="isImage" @click.native="printMethod()" source="print" :action="$t('actions.print')" />
 			</div>
 		</div>
@@ -56,43 +56,47 @@
     export default {
         name: 'FilePreviewToolbar',
         components: {
+            MoreHorizontalIcon,
 			PopoverWrapper,
+            ToolbarButton,
 			PopoverItem,
 			OptionGroup,
 			Option,
-            MoreHorizontalIcon,
-            ToolbarButton,
             XIcon,
         },
         computed: {
             ...mapGetters([
+                'fastPreview',
                 'clipboard',
                 'entries'
             ]),
+			currentFile() {
+				return this.fastPreview ? this.fastPreview : this.clipboard[0]
+			},
 			sharingTitle() {
-				return this.clipboard[0].shared
+				return this.currentFile.shared
 					? this.$t('context_menu.share_edit')
 					: this.$t('context_menu.share')
 			},
             isImage() {
-                return this.clipboard[0].type === 'image'
+                return this.currentFile.type === 'image'
             },
             isPdf() {
-                return this.clipboard[0].mimetype === 'pdf'
+                return this.currentFile.mimetype === 'pdf'
             },
             files() {
                 let files = []
 
                 this.entries.map(element => {
 
-                    if (this.clipboard[0].mimetype === 'pdf') {
+                    if (this.currentFile.mimetype === 'pdf') {
 
                         if (element.mimetype === 'pdf')
                             files.push(element)
 
                     } else {
 
-                        if (element.type === this.clipboard[0].type)
+                        if (element.type === this.currentFile.type)
                             files.push(element)
                     }
                 })
@@ -103,7 +107,7 @@
                 let activeIndex = undefined
 
                 this.files.forEach((element, index) => {
-                    if (element.id === this.clipboard[0].id) {
+                    if (element.id === this.currentFile.id) {
                         activeIndex = index + 1
                     }
                 })
@@ -140,8 +144,8 @@
             },
             downloadItem() {
                 this.$downloadFile(
-                    this.clipboard[0].file_url,
-                    this.clipboard[0].name + '.' + this.clipboard[0].mimetype
+                    this.currentFile.file_url,
+                    this.currentFile.name + '.' + this.currentFile.mimetype
                 )
             },
             closeFullPreview() {
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index f025baf5..52866c35 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -98,6 +98,12 @@ export default {
 			}
 		},
 		showSelected() {
+			// Go to files if isn't current location
+			// todo: fixnut reload na Files stranke
+			if (this.$route.name !== 'Files') {
+				this.$router.push({name: 'Files'})
+			}
+
 			// Show folder
 			if (this.results[this.index].type === 'folder') {
 				this.$store.dispatch('getFolder', [{ folder: this.results[this.index], back: true, init: false }])
@@ -105,8 +111,7 @@ export default {
 
 			// Show file
 			if (this.results[this.index].type !== 'folder'){
-				this.$store.commit('CLIPBOARD_CLEAR')
-				this.$store.commit('CLIPBOARD_REPLACE', [this.results[this.index]])
+				this.$store.commit('ADD_TO_FAST_PREVIEW', this.results[this.index])
 
 				events.$emit('file-preview:show')
 			}
diff --git a/resources/js/store/modules/fileBrowser.js b/resources/js/store/modules/fileBrowser.js
index 35624b45..ed61650a 100644
--- a/resources/js/store/modules/fileBrowser.js
+++ b/resources/js/store/modules/fileBrowser.js
@@ -11,6 +11,7 @@ const defaultState = {
     isLoading: true,
 
     browseHistory: [],
+    fastPreview: undefined,
     clipboard: [],
     entries: [],
 }
@@ -228,12 +229,16 @@ const mutations = {
     CLIPBOARD_CLEAR(state) {
         state.clipboard = []
     },
-    CLIPBOARD_REPLACE(state, items) {
-        state.clipboard = items
+    ADD_TO_FAST_PREVIEW(state, item) {
+        state.fastPreview = item
+    },
+    FAST_PREVIEW_CLEAR(state) {
+        state.fastPreview = undefined
     },
 }
 
 const getters = {
+    fastPreview: state => state.fastPreview,
     clipboard: state => state.clipboard,
     currentFolder: state => state.currentFolder,
     browseHistory: state => state.browseHistory,
diff --git a/resources/js/views/FilePages/Files.vue b/resources/js/views/FilePages/Files.vue
index 207ac8d1..24852d86 100644
--- a/resources/js/views/FilePages/Files.vue
+++ b/resources/js/views/FilePages/Files.vue
@@ -116,7 +116,13 @@ export default {
 		UsersIcon,
     },
     computed: {
-        ...mapGetters(['user', 'homeDirectory', 'currentFolder', 'config', 'clipboard']),
+        ...mapGetters([
+        	'user',
+			'homeDirectory',
+			'currentFolder',
+			'config',
+			'clipboard'
+		]),
         favourites() {
             return this.user.data.relationships.favourites.data.attributes.folders
         },
@@ -184,8 +190,6 @@ export default {
             if (this.clipboard.includes(this.draggedItem)) {
                 this.$store.dispatch('addToFavourites', null)
             }
-
-
         },
         removeFavourite(folder) {
             this.$store.dispatch('removeFromFavourites', folder)
@@ -196,11 +200,7 @@ export default {
 
         // Listen for dragstart folder items
         events.$on('dragstart', (item) => {
-            this.draggedItem = item , this.dragInProgress = true
-        })
-
-        events.$on('drop', () => {
-            this.dragInProgress = false
+            this.draggedItem = item
         })
     }
 }