open searched file from spotlight in FilePreview

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -13,14 +13,17 @@
 
         <!--Desktop preview-->
         <div
-            v-if="(!$isMobile() || fastPreview) && (isAudio || isImage || isVideo || isPDF)"
+            v-if="!$isMobile() || fastPreview"
             class="flex h-full w-full items-center justify-center"
         >
+            <!--Show File-->
+			<ItemGrid v-if="isFile && !isPDF" :entry="currentFile" :mobile-handler="false" :can-hover="false"/>
+
             <!--Show PDF-->
-            <PdfFile v-if="isPDF" :file="currentFile" />
+            <PdfFile v-if="isFile && isPDF" :file="currentFile" />
 
             <!--Show Audio, Video and Image-->
-            <div class="flex h-full w-full items-center justify-center">
+            <div v-if="isAudio || isImage || isVideo" class="flex h-full w-full items-center justify-center">
                 <Audio v-if="isAudio" :file="currentFile" />
                 <Video v-if="isVideo" :file="currentFile" class="mx-auto max-h-full max-w-[1080px] self-center" />
                 <ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" :class="{'file-shadow': !$isMobile()}" id="printable-file" />
@@ -53,6 +56,7 @@
 <script>
 import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
 import ToolbarButton from '../FilesView/ToolbarButton'
+import ItemGrid from "../FilesView/ItemGrid"
 import ImageFile from './Media/ImageFile'
 import Audio from './Media/Audio'
 import Video from './Media/Video'
@@ -68,6 +72,7 @@ export default {
         ChevronLeftIcon,
         ToolbarButton,
         ImageFile,
+		ItemGrid,
         Spinner,
         Audio,
         Video,
@@ -77,6 +82,9 @@ export default {
         currentFile() {
             return this.fastPreview ? this.fastPreview : this.files[Math.abs(this.currentIndex) % this.files.length]
         },
+		isFile() {
+            return this.currentFile.data.type === 'file'
+		},
         isPDF() {
             return this.currentFile.data.attributes.mimetype === 'pdf'
         },

resources/js/components/FilesView/ItemGrid.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         :class="{
-            'bg-light-background dark:bg-dark-foreground': isClicked,
+            'bg-light-background dark:bg-dark-foreground': isClicked && canHover,
             'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover,
         }"
         class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60"
@@ -241,9 +241,6 @@ export default {
         }, 300),
     },
     created() {
-        // Set item name to own component variable
-        this.itemName = this.entry.data.attributes.name
-
         // Change item name
         events.$on('change:name', (item) => {
             if (this.entry.data.id === item.id) this.itemName = item.name
@@ -257,7 +254,12 @@ export default {
             }
         })
 
-		this.getImageSrc()
+		// Set item name to own component variable
+		this.itemName = this.entry.data.attributes.name
+
+		if (this.entry.data.type === 'image') {
+			this.getImageSrc()
+		}
     },
 }
 </script>

resources/js/components/Spotlight/Spotlight.vue

@@ -853,18 +853,13 @@ export default {
                 }
             }
 
+			// Show file
 			if (file.data.type !== 'folder') {
-				// Show file
-				if (['video', 'audio', 'image'].includes(file.data.type) || file.data.attributes.mimetype === 'pdf') {
-					this.$store.commit('ADD_TO_FAST_PREVIEW', file)
+				this.$store.commit('ADD_TO_FAST_PREVIEW', file)
+				this.$store.commit('CLIPBOARD_REPLACE', file)
 
-					events.$emit('file-preview:show')
-				} else {
-					this.$downloadFile(
-						file.data.attributes.file_url,
-						file.data.attributes.name + '.' + file.data.attributes.mimetype
-					)
-				}
+				// Show file thumbnail
+				events.$emit('file-preview:show')
 			}
 
             this.exitSpotlight()