FileFullPreview functionality in file grid view

resources/js/components/FilesView/FileItemGrid.vue

@@ -101,9 +101,19 @@
             isFile() {
                 return this.data.type !== 'folder' && this.data.type !== 'image'
             },
+            isPdf() {
+                return this.data.mimetype === 'pdf'
+            },
             isImage() {
                 return this.data.type === 'image'
             },
+            isVideo() {
+                return this.data.type === 'video'
+            },
+            isAudio() {
+                let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
+                return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
+            },
             canEditName() {
                 return !this.$isMobile()
                     && !this.$isThisLocation(['trash', 'trash-root'])
@@ -166,6 +176,12 @@
                     }
                 }
 
+                if (this.$isMobile()) {
+                    if (this.isImage || this.isVideo || this.isAudio) {
+                        events.$emit('fileFullPreview:show')
+                    }
+                }
+
                 // Load file info detail
                 this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
@@ -180,11 +196,11 @@
                     return
             },
             goToItem() {
-                if (this.isImage) {
-                    this.$openImageOnNewTab(this.data.file_url)
+                if (this.isImage || this.isVideo || this.isAudio) {
+                    events.$emit('fileFullPreview:show')
                 }
 
-                if (this.isFile) {
+                if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
                     this.$downloadFile(
                         this.data.file_url,
                         this.data.name + '.' + this.data.mimetype

resources/js/components/FilesView/FileItemList.vue

@@ -137,8 +137,6 @@ export default {
 			// Load file info detail
 			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
-			//this.isClicked = true
-
 			events.$emit('mobileMenu:show')
 		},
 		dragEnter() {
@@ -182,7 +180,6 @@ export default {
 		},
 		goToItem() {
 			if (this.isImage || this.isVideo || this.isAudio) {
-				// this.$openImageOnNewTab(this.data.file_url)
 				events.$emit('fileFullPreview:show')
 			}
 

resources/js/components/FilesView/FilePreviewNavigationPanel.vue

@@ -177,10 +177,11 @@ export default {
 		vertical-align: middle;
 		cursor: pointer;
 		color: $text;
-		align-self: center;
 		@include transition(150ms);
+
 		&:hover {
 			background: $light_background;
+
 			line {
 				stroke: $theme;
 			}