update filePreview ContextMenu

resources/js/components/FilesView/ContextMenu.vue

@@ -528,12 +528,23 @@ export default {
       }
     },
   },
+  updated () {
+     if(this.showFromPreview) {
+      let filePreview = document.getElementById('mediaPreview')
+      filePreview.addEventListener('click' , () => {
+         this.showFromPreview = false;
+        this.item = undefined;
+      })
+    }
+  },
   mounted() {
     events.$on("actualShowingImage:ContextMenu", (item) => {
       this.item = item;
     });
   },
   created() {
+   
+
     events.$on("showContextMenuPreview:show", (item) => {
       if (!this.showFromPreview) {
         this.item = item;

resources/js/components/FilesView/FileItemList.vue

@@ -137,9 +137,9 @@ export default {
       return this.data.type === "video";
     },
     isAudio() {
+      let mimetypes = ['mpeg' , "mp3" , 'wan'];
       return (
-        // this.data.type === "audio" &&
-        this.data.mimetype === "mp3" || "wan" || "mpeg"
+        mimetypes.includes(this.data.mimetype)
       );
     },
     canEditName() {

resources/js/components/FilesView/FilePreviewActions.vue

@@ -31,6 +31,7 @@ export default {
     prev: function() {
       events.$emit('filePreviewAction:prev');
     },
+  
   },
 };
 </script>
@@ -47,7 +48,7 @@ export default {
 .next {
   cursor: pointer;
   position: absolute;
-  top: 49.5%;
+  top: 52%;
   display: flex;
   justify-content: center;
   background-color: white !important;

resources/js/components/FilesView/FilePreviewNavigationPanel.vue

@@ -152,7 +152,7 @@ export default {
     },
     closeFullPreview() {
       events.$emit('fileFullPreview:hide');
-      events.$emit('showContextMenuPreview:hide');
+      events.$emit('showContextMenuPreview:show');
     },
   },
 };

resources/js/components/FilesView/MediaFullPreview.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="media-full-preview" @keydown.esc="closeFullPreview">
-    <div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
-      <div class="file-wrapper">
+  <div class="media-full-preview"  id="mediaPreview">
+    <div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i" >
+      <div class="file-wrapper" >
         <audio
           class="file"
           v-if="fileInfoDetail.type == 'audio'"
-          :src="fileInfoDetail.file_url"
+          :src="currentFile.file_url"
           controlsList="nodownload"
           controls
         ></audio>
@@ -15,9 +15,7 @@
           class="file"
           id="image"
           :src="currentFile.file_url"
-          :style="{ width: sizeWidth, height: sizeHeight }"
           v-on:load="onLoaded"
-          v-show="loaded"
         />
         <video
           v-if="fileInfoDetail.type === 'video' && currentFile.file_url"
@@ -74,11 +72,13 @@ export default {
   mounted() {
     events.$on('filePreviewAction:next', () => {
       this.currentIndex += 1;
+      this.slideType = 'next'
       if (this.currentIndex > this.sliderFile.length - 1) {
         this.currentIndex = 0;
       }
     });
     events.$on('filePreviewAction:prev', () => {
+      this.slideType = 'prev'
       this.currentIndex -= 1;
       if (this.currentIndex < 0) {
         this.currentIndex = this.sliderFile.length - 1;
@@ -130,6 +130,7 @@ export default {
       events.$emit('fileFullPreview:hide');
     },
 
+
     filteredFiles() {
       this.data.filter((element) => {
         if (element.type == this.fileInfoDetail.type) {
@@ -196,11 +197,13 @@ export default {
     .file {
       max-width: 100%;
       max-height: 100%;
-      margin: auto;
+      align-self: center;
     }
   }
 }
 
+
+
 @media (prefers-color-scheme: dark) {
   .file-wrapper-preview {
     background-color: $dark_mode_background;