Fix issues from FilePreview v0.2

resources/js/components/FilesView/ContextMenu.vue

@@ -520,6 +520,7 @@ export default {
         this.positionY = container.offsetTop + 51;
       }
     },
+
   },
   watch: {
     item(newValue, oldValue) {
@@ -528,33 +529,32 @@ 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;
-        this.showFromPreview = !this.showFromPreview;
+        this.showFromPreview = true;
         this.showFilePreviewMenu();
       } else if (this.showFromPreview) {
         this.showFromPreview = false;
         this.item = undefined;
       }
     });
+
+    events.$on('showContextMenuPreview:hide', () => {
+
+      this.showFromPreview = false;
+       this.item = undefined;
+   
+    }) 
+   
+
     events.$on("contextMenu:show", (event, item) => {
       // Store item
       this.item = item;
@@ -573,7 +573,7 @@ export default {
       else this.showFolderActionsMenu();
     });
   },
-};
+}
 </script>
 
 <style scoped lang="scss">

resources/js/components/FilesView/FileFullPreview.vue

@@ -5,13 +5,14 @@
     id="fileFullPreview"
     ref="filePreview"
     tabindex="-1"
+     @click="closeContextMenu"
     @keydown.esc="(showFullPreview = false), hideMenu()"
     @keydown.right="next"
     @keydown.left="prev"
   >
     <FilePreviewNavigationPanel />
     <MediaFullPreview v-if="isMedia" />
-    <FilePreviewActions />
+    <FilePreviewActions  />
   </div>
 </template>
 
@@ -35,6 +36,13 @@ export default {
     };
   },
   methods: {
+      closeContextMenu(event) {
+        if( (event.target.parentElement.id ||  event.target.id) === "fast-preview-menu") {
+          return
+      } else {
+          events.$emit('showContextMenuPreview:hide')
+      }
+    },
     next: function () {
       events.$emit("filePreviewAction:next");
     },
@@ -42,7 +50,7 @@ export default {
       events.$emit("filePreviewAction:prev");
     },
     hideMenu() {
-      events.$emit("showContextMenuPreview:show");
+      events.$emit("showContextMenuPreview:hide");
     },
   },
 
@@ -52,10 +60,11 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(["fileInfoDetail"]),
+    ...mapGetters(["fileInfoDetail" , "data"]),
     isMedia() {
       return this.fileInfoDetail === "image" || "video" || "audio";
     },
+    
   },
 
   mounted() {
@@ -81,7 +90,7 @@ export default {
   height: 100%;
   position: absolute;
   z-index: 7;
-  background-color: $light-background;
+  background-color: white;
 }
 
 @media (prefers-color-scheme: dark) {

resources/js/components/FilesView/FilePreviewActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="filteredFiles.length > 1">
     <chevron-left-icon
       class="prev"
       @click.prevent="prev"
@@ -16,6 +16,7 @@
 
 <script>
 import { events } from '@/bus';
+import { mapGetters } from "vuex";
 import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons';
 
 export default {
@@ -23,6 +24,19 @@ export default {
     ChevronLeftIcon,
     ChevronRightIcon,
   },
+  computed: {
+        ...mapGetters(["fileInfoDetail", "data"]),
+
+     filteredFiles() {
+       let filteredData = []
+      this.data.filter((element) => {
+        if (element.type == this.fileInfoDetail.type) {
+          filteredData.push(element);
+        }
+      });
+        return filteredData
+    },
+  },
 
   methods: {
     next: function() {
@@ -59,9 +73,11 @@ export default {
 }
 .next {
   right: 0;
+  margin-right: 10px;
 }
 .prev {
   left: 0;
+  margin-left: 10px;
 }
 
 @media (prefers-color-scheme: dark) {

resources/js/components/FilesView/FilePreviewNavigationPanel.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- <div class="navigation-wrapper"> -->
-  <div class="navigation-panel" v-if="fileInfoDetail">
+  <div class="navigation-panel" v-if="fileInfoDetail"    
+ >
     <div class="name-wrapper">
       <x-icon @click="closeFullPreview" size="17" class="icon-close"></x-icon>
       <div class="name-count-wrapper">
@@ -96,11 +97,11 @@ export default {
       let name = this.fileInfoDetail.name;
       if (name.lastIndexOf('.') > -1) {
         return _.truncate(name.substring(0, name.lastIndexOf('.')), {
-          length: 20,
+          length: 27,
         });
       } else {
         return _.truncate(name, {
-          length: 18,
+          length: 27,
         });
       }
     },
@@ -152,7 +153,7 @@ export default {
     },
     closeFullPreview() {
       events.$emit('fileFullPreview:hide');
-      events.$emit('showContextMenuPreview:show');
+      events.$emit('showContextMenuPreview:hide');
     },
   },
 };
@@ -172,7 +173,6 @@ export default {
   align-self: center;
   white-space: nowrap;
   .name-count-wrapper {
-    display: flex;
     .file-count {
       @include font-size(15);
       margin-left: 6px;
@@ -198,6 +198,8 @@ export default {
     }
   }
   .icon-close {
+          min-width: 17px;
+
     vertical-align: middle;
     cursor: pointer;
     margin-right: 6px;
@@ -221,7 +223,7 @@ export default {
       @include transition(150ms);
     }
     &:hover {
-      background: white;
+      background: $light_background;
 
       svg circle {
         stroke: $theme;
@@ -248,12 +250,12 @@ export default {
   }
 }
 
-@media (min-width: 420px) and (max-width: 890px) {
+@media (min-width: 420px) and (max-width: 930px) {
   .name-wrapper {
     width: 67%;
   }
 }
-@media (max-width: 523px) {
+@media (max-width: 570px) {
   .name-wrapper {
     width: 100%;
     justify-content: space-between;
@@ -270,7 +272,7 @@ export default {
     align-items: center;
     @include font-size(11);
   }
-  @media (max-width: 890px) {
+  @media (max-width: 930px) {
     display: none;
   }
 }
@@ -286,20 +288,22 @@ export default {
   .button {
     margin-left: 5px;
     &:hover {
-      background: white;
+      background: $light_background;
     }
   }
-  @media (max-width: 523px) {
+  @media (max-width: 570px) {
     display: none;
   }
 }
 .navigation-panel {
-  height: 6.9%;
+height: 63px;
+  width: 100%;
   padding: 10px 15px;
   display: flex;
-  position: relative;
+  position: absolute;
+  z-index: 8;
   align-items: center;
-  background-color: $light-background;
+  background-color: white;
   color: $text;
 }
 @media (prefers-color-scheme: dark) {

resources/js/components/FilesView/MediaFullPreview.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="media-full-preview"  id="mediaPreview">
+  <div class="media-full-preview"  id="mediaPreview" v-if="fileInfoDetail" @click="closeContextMenu" >
     <div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i" >
       <div class="file-wrapper" >
         <audio
-          class="file"
+          class="file audio"
           v-if="fileInfoDetail.type == 'audio'"
           :src="currentFile.file_url"
           controlsList="nodownload"
@@ -20,8 +20,7 @@
         <video
           v-if="fileInfoDetail.type === 'video' && currentFile.file_url"
           :src="currentFile.file_url"
-          class="file"
-          :style="{ width: sizeWidth, height: sizeHeight }"
+          class="video"
           controlsList="nodownload"
           disablePictureInPicture
           playsinline
@@ -46,8 +45,7 @@ export default {
       currentIndex: 1,
       sliderFile: [],
       loaded: false,
-      sizeWidth: '',
-      sizeHeight: '',
+    
     };
   },
   computed: {
@@ -87,25 +85,26 @@ export default {
   },
   created() {
     this.filteredFiles();
-    this.imageSizing();
   },
   watch: {
     currentFile() {
       //HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
+      if(this.fileInfoDetail) {
+        this.loaded = false
       this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
       events.$emit('actualShowingImage:ContextMenu', this.currentFile);
+      }
     },
     fileInfoDetail() {
       //FILE DELETE HANDLING
       if (!this.fileInfoDetail) {
-        if (this.data.length == 0) {
-          events.$emit('fileFullPreview:hide');
-        } else {
           this.currentIndex = this.currentIndex - 1;
           this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
           this.sliderFile = [];
-          this.filteredFiles();
-        }
+          this.filteredFiles();   
+      }
+      if(this.sliderFile.length == 0 ) {
+          events.$emit('fileFullPreview:hide');
       }
     },
     data(newValue, oldValue) {
@@ -117,15 +116,11 @@ export default {
     },
   },
   methods: {
-    imageSizing() {
-      if (this.$isMobile()) {
-        this.sizeWidth = '100%';
-        this.sizeHeight = 'auto';
-      } else {
-        this.sizeWidth = 'auto';
-        this.sizeHeight = '100%';
-      }
+
+    closeContextMenu() {
+      events.$emit('showContextMenuPreview:hide')
     },
+    
     closeFullPreview() {
       events.$emit('fileFullPreview:hide');
     },
@@ -158,8 +153,10 @@ export default {
 @import '@assets/vue-file-manager/_mixins';
 
 .media-full-preview {
-  height: 93.1%;
+  height: calc(100% - 72px) ;
+  top: 72px;
   position: relative;
+  background-color: white;
 }
 
 .navigation-panel {
@@ -194,10 +191,34 @@ export default {
     height: 100%;
     display: flex;
     justify-content: center;
+    align-items: center;
     .file {
       max-width: 100%;
       max-height: 100%;
       align-self: center;
+      box-shadow: 0 8px 40px rgba($text, 0.3);
+    }
+    .audio {
+      border-radius: 28px;
+    }
+    .video {
+      max-width: 1072px;
+      height: auto;
+      @media (min-width: 1920px) {
+        & {
+          max-width: 1080px;
+        }
+      }
+       @media (min-width: 2560px) {
+        & {
+          max-width: 1440px;
+        }
+      }
+       @media (min-width: 3840px) {
+        & {
+          max-width: 2160px;
+        }
+      }
     }
   }
 }