update filePreview ContextMenu

public/mix-manifest.json

@@ -1,10 +1,121 @@
 {
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
-    "/js/main.72718d0977a2aa871bfb.hot-update.js": "/js/main.72718d0977a2aa871bfb.hot-update.js",
-    "/js/main.1b2caf4989a0e93eafc8.hot-update.js": "/js/main.1b2caf4989a0e93eafc8.hot-update.js",
-    "/js/main.e9fd1082caf92327885e.hot-update.js": "/js/main.e9fd1082caf92327885e.hot-update.js",
-    "/js/main.0066ffe4fdaefe4e8936.hot-update.js": "/js/main.0066ffe4fdaefe4e8936.hot-update.js",
-    "/js/main.7df12ff0934906f7b365.hot-update.js": "/js/main.7df12ff0934906f7b365.hot-update.js",
-    "/js/main.9503354157ea447047b7.hot-update.js": "/js/main.9503354157ea447047b7.hot-update.js"
+    "/js/main.41fba7d1db23b679866a.hot-update.js": "/js/main.41fba7d1db23b679866a.hot-update.js",
+    "/js/main.dfef6b6e7ff01c58eb7b.hot-update.js": "/js/main.dfef6b6e7ff01c58eb7b.hot-update.js",
+    "/js/main.1e5721c2c691120f3b7e.hot-update.js": "/js/main.1e5721c2c691120f3b7e.hot-update.js",
+    "/js/main.4d3f29207f8bec0c4d20.hot-update.js": "/js/main.4d3f29207f8bec0c4d20.hot-update.js",
+    "/js/main.49f420535b104d82b192.hot-update.js": "/js/main.49f420535b104d82b192.hot-update.js",
+    "/js/main.6868f579f73ae79e4ec1.hot-update.js": "/js/main.6868f579f73ae79e4ec1.hot-update.js",
+    "/js/main.ef4468e21d348da73996.hot-update.js": "/js/main.ef4468e21d348da73996.hot-update.js",
+    "/js/main.ae60a29e9617cd7397b5.hot-update.js": "/js/main.ae60a29e9617cd7397b5.hot-update.js",
+    "/js/main.1e35ab4e9d790a1b5768.hot-update.js": "/js/main.1e35ab4e9d790a1b5768.hot-update.js",
+    "/js/main.fab8bc06f1fe9cb1a3dc.hot-update.js": "/js/main.fab8bc06f1fe9cb1a3dc.hot-update.js",
+    "/js/main.06df956143f3ec9a931b.hot-update.js": "/js/main.06df956143f3ec9a931b.hot-update.js",
+    "/js/main.e670438daad5a13c3f22.hot-update.js": "/js/main.e670438daad5a13c3f22.hot-update.js",
+    "/js/main.336650bdd9aefce44cc7.hot-update.js": "/js/main.336650bdd9aefce44cc7.hot-update.js",
+    "/js/main.5b5a4760fc17c4d464a2.hot-update.js": "/js/main.5b5a4760fc17c4d464a2.hot-update.js",
+    "/js/main.708f796a199dad74e369.hot-update.js": "/js/main.708f796a199dad74e369.hot-update.js",
+    "/js/main.d8926f8b4fcf31864a0a.hot-update.js": "/js/main.d8926f8b4fcf31864a0a.hot-update.js",
+    "/js/main.447c994a471bca7ef6d7.hot-update.js": "/js/main.447c994a471bca7ef6d7.hot-update.js",
+    "/js/main.29b90928dd3ff6cf4f02.hot-update.js": "/js/main.29b90928dd3ff6cf4f02.hot-update.js",
+    "/js/main.bf9c3fc08db7f1a7625a.hot-update.js": "/js/main.bf9c3fc08db7f1a7625a.hot-update.js",
+    "/js/main.1b2ea2e0c5a2ad385f9c.hot-update.js": "/js/main.1b2ea2e0c5a2ad385f9c.hot-update.js",
+    "/js/main.e29d3f6ca950067eef84.hot-update.js": "/js/main.e29d3f6ca950067eef84.hot-update.js",
+    "/js/main.90acaaa1ffe0263127f7.hot-update.js": "/js/main.90acaaa1ffe0263127f7.hot-update.js",
+    "/js/main.35eb2b7ea85a0aaba29c.hot-update.js": "/js/main.35eb2b7ea85a0aaba29c.hot-update.js",
+    "/js/main.5d7f8ca1e740cbb414d6.hot-update.js": "/js/main.5d7f8ca1e740cbb414d6.hot-update.js",
+    "/js/main.93320d22cd2e0871ba92.hot-update.js": "/js/main.93320d22cd2e0871ba92.hot-update.js",
+    "/js/main.5b7c5ca07e99578b48ad.hot-update.js": "/js/main.5b7c5ca07e99578b48ad.hot-update.js",
+    "/js/main.948ea8151eece3c0b503.hot-update.js": "/js/main.948ea8151eece3c0b503.hot-update.js",
+    "/js/main.e37e7c3ba053b269c21e.hot-update.js": "/js/main.e37e7c3ba053b269c21e.hot-update.js",
+    "/js/main.73180bbf01d6706fbb4d.hot-update.js": "/js/main.73180bbf01d6706fbb4d.hot-update.js",
+    "/js/main.ac0b31c9a46332698129.hot-update.js": "/js/main.ac0b31c9a46332698129.hot-update.js",
+    "/js/main.1c4d9087faee20118bec.hot-update.js": "/js/main.1c4d9087faee20118bec.hot-update.js",
+    "/js/main.57f2653eda68fcd6b6d8.hot-update.js": "/js/main.57f2653eda68fcd6b6d8.hot-update.js",
+    "/js/main.2f014ae591a6dc27a72f.hot-update.js": "/js/main.2f014ae591a6dc27a72f.hot-update.js",
+    "/js/main.9847e707aaa5d314c8f8.hot-update.js": "/js/main.9847e707aaa5d314c8f8.hot-update.js",
+    "/js/main.12b19fc6ec166b86ebd0.hot-update.js": "/js/main.12b19fc6ec166b86ebd0.hot-update.js",
+    "/js/main.5adc2c8c35bad13d5749.hot-update.js": "/js/main.5adc2c8c35bad13d5749.hot-update.js",
+    "/js/main.9b212284299f1bb9f602.hot-update.js": "/js/main.9b212284299f1bb9f602.hot-update.js",
+    "/js/main.26e131e26bc059ae06f0.hot-update.js": "/js/main.26e131e26bc059ae06f0.hot-update.js",
+    "/js/main.8c63baec8c5388af3b8f.hot-update.js": "/js/main.8c63baec8c5388af3b8f.hot-update.js",
+    "/js/main.13dcd7aeaceea06ac594.hot-update.js": "/js/main.13dcd7aeaceea06ac594.hot-update.js",
+    "/js/main.b63da7c33bc517c582d2.hot-update.js": "/js/main.b63da7c33bc517c582d2.hot-update.js",
+    "/js/main.845bf5136c1da8f2b2d2.hot-update.js": "/js/main.845bf5136c1da8f2b2d2.hot-update.js",
+    "/js/main.1d6769f79169ede7a2b0.hot-update.js": "/js/main.1d6769f79169ede7a2b0.hot-update.js",
+    "/js/main.a726229440c584acd5e0.hot-update.js": "/js/main.a726229440c584acd5e0.hot-update.js",
+    "/js/main.dc38083c27ddb936f25a.hot-update.js": "/js/main.dc38083c27ddb936f25a.hot-update.js",
+    "/js/main.c09c6b5987c7d8db9103.hot-update.js": "/js/main.c09c6b5987c7d8db9103.hot-update.js",
+    "/js/main.77146c38d64ab28f9530.hot-update.js": "/js/main.77146c38d64ab28f9530.hot-update.js",
+    "/js/main.0f80e2de63b64d7c27ad.hot-update.js": "/js/main.0f80e2de63b64d7c27ad.hot-update.js",
+    "/js/main.e6c224c474214c18ea93.hot-update.js": "/js/main.e6c224c474214c18ea93.hot-update.js",
+    "/js/main.55cb3647c9f29e5e9448.hot-update.js": "/js/main.55cb3647c9f29e5e9448.hot-update.js",
+    "/js/main.8ff81397dad6d2ba92d5.hot-update.js": "/js/main.8ff81397dad6d2ba92d5.hot-update.js",
+    "/js/main.802e0eaa5215f7d428c9.hot-update.js": "/js/main.802e0eaa5215f7d428c9.hot-update.js",
+    "/js/main.1b414f3663618245fbe3.hot-update.js": "/js/main.1b414f3663618245fbe3.hot-update.js",
+    "/js/main.eb3135f5f13f7f1d424b.hot-update.js": "/js/main.eb3135f5f13f7f1d424b.hot-update.js",
+    "/js/main.7c73490bd80e6cc6770d.hot-update.js": "/js/main.7c73490bd80e6cc6770d.hot-update.js",
+    "/js/main.9b98d46d62b1c76e69d6.hot-update.js": "/js/main.9b98d46d62b1c76e69d6.hot-update.js",
+    "/js/main.60d3dba75698c093010e.hot-update.js": "/js/main.60d3dba75698c093010e.hot-update.js",
+    "/js/main.c23172999d714124deea.hot-update.js": "/js/main.c23172999d714124deea.hot-update.js",
+    "/js/main.cc3c7b6a10b55aff1aaa.hot-update.js": "/js/main.cc3c7b6a10b55aff1aaa.hot-update.js",
+    "/js/main.56a1340fd5ae920ea553.hot-update.js": "/js/main.56a1340fd5ae920ea553.hot-update.js",
+    "/js/main.5ffbf14c658f060bb43c.hot-update.js": "/js/main.5ffbf14c658f060bb43c.hot-update.js",
+    "/js/main.82bf31c4d1e70a5822c3.hot-update.js": "/js/main.82bf31c4d1e70a5822c3.hot-update.js",
+    "/js/main.d5db461a7f7e81cf54c4.hot-update.js": "/js/main.d5db461a7f7e81cf54c4.hot-update.js",
+    "/js/main.1d53b21f17e120de1d15.hot-update.js": "/js/main.1d53b21f17e120de1d15.hot-update.js",
+    "/js/main.39528cda4dd25abfe5a1.hot-update.js": "/js/main.39528cda4dd25abfe5a1.hot-update.js",
+    "/js/main.94b32f87e92f868bbfdb.hot-update.js": "/js/main.94b32f87e92f868bbfdb.hot-update.js",
+    "/js/main.2fb71132ebc3574d4aa7.hot-update.js": "/js/main.2fb71132ebc3574d4aa7.hot-update.js",
+    "/js/main.293fc52296cf959d89f0.hot-update.js": "/js/main.293fc52296cf959d89f0.hot-update.js",
+    "/js/main.846ebffc548e5e57d03f.hot-update.js": "/js/main.846ebffc548e5e57d03f.hot-update.js",
+    "/js/main.35d77468f42462e9b9cc.hot-update.js": "/js/main.35d77468f42462e9b9cc.hot-update.js",
+    "/js/main.7f3804bae781db2b7599.hot-update.js": "/js/main.7f3804bae781db2b7599.hot-update.js",
+    "/js/main.2e0a057e6dea36ca4b90.hot-update.js": "/js/main.2e0a057e6dea36ca4b90.hot-update.js",
+    "/js/main.0d8444ad05bf0bf30e4b.hot-update.js": "/js/main.0d8444ad05bf0bf30e4b.hot-update.js",
+    "/js/main.3d8033a7c21e5c27058b.hot-update.js": "/js/main.3d8033a7c21e5c27058b.hot-update.js",
+    "/js/main.baeae7a58a1918f966c4.hot-update.js": "/js/main.baeae7a58a1918f966c4.hot-update.js",
+    "/js/main.e44c8ab9b1b02401d78b.hot-update.js": "/js/main.e44c8ab9b1b02401d78b.hot-update.js",
+    "/js/main.f06147d53e6270d44617.hot-update.js": "/js/main.f06147d53e6270d44617.hot-update.js",
+    "/js/main.55d728fdd69d7868d880.hot-update.js": "/js/main.55d728fdd69d7868d880.hot-update.js",
+    "/js/main.f99c45e9c8ccf7c567a4.hot-update.js": "/js/main.f99c45e9c8ccf7c567a4.hot-update.js",
+    "/js/main.6fec1411b51fabc16df7.hot-update.js": "/js/main.6fec1411b51fabc16df7.hot-update.js",
+    "/js/main.3064787a72bfd7dc8c8f.hot-update.js": "/js/main.3064787a72bfd7dc8c8f.hot-update.js",
+    "/js/main.eee32eb04fabfdc7acb9.hot-update.js": "/js/main.eee32eb04fabfdc7acb9.hot-update.js",
+    "/js/main.de8d609e7f7af8bfed32.hot-update.js": "/js/main.de8d609e7f7af8bfed32.hot-update.js",
+    "/js/main.d40351e6e28156fc584f.hot-update.js": "/js/main.d40351e6e28156fc584f.hot-update.js",
+    "/js/main.a43e0db7677052e0a582.hot-update.js": "/js/main.a43e0db7677052e0a582.hot-update.js",
+    "/js/main.b06d12e24286599deebf.hot-update.js": "/js/main.b06d12e24286599deebf.hot-update.js",
+    "/js/main.dff74d28a8426f4f6a18.hot-update.js": "/js/main.dff74d28a8426f4f6a18.hot-update.js",
+    "/js/main.ced994dbc0784ee12f7d.hot-update.js": "/js/main.ced994dbc0784ee12f7d.hot-update.js",
+    "/js/main.11cd9fe70382a3ba848b.hot-update.js": "/js/main.11cd9fe70382a3ba848b.hot-update.js",
+    "/js/main.de7fbf00944c5bdf5c1a.hot-update.js": "/js/main.de7fbf00944c5bdf5c1a.hot-update.js",
+    "/js/main.d4070ee247e5cea9fca3.hot-update.js": "/js/main.d4070ee247e5cea9fca3.hot-update.js",
+    "/js/main.3be392be34e72ec9d2d0.hot-update.js": "/js/main.3be392be34e72ec9d2d0.hot-update.js",
+    "/js/main.0e5e9b4e49947fbb23eb.hot-update.js": "/js/main.0e5e9b4e49947fbb23eb.hot-update.js",
+    "/js/main.5da2454d4db63ac83be1.hot-update.js": "/js/main.5da2454d4db63ac83be1.hot-update.js",
+    "/js/main.5035d30851e3345c4ff8.hot-update.js": "/js/main.5035d30851e3345c4ff8.hot-update.js",
+    "/js/main.d37863d75356c272d80e.hot-update.js": "/js/main.d37863d75356c272d80e.hot-update.js",
+    "/js/main.0003e39ee56e987772c3.hot-update.js": "/js/main.0003e39ee56e987772c3.hot-update.js",
+    "/js/main.430ddd0626b48aaee5a6.hot-update.js": "/js/main.430ddd0626b48aaee5a6.hot-update.js",
+    "/js/main.23b6419a893aab5b57de.hot-update.js": "/js/main.23b6419a893aab5b57de.hot-update.js",
+    "/js/main.24476ff42fdae4b3cb5e.hot-update.js": "/js/main.24476ff42fdae4b3cb5e.hot-update.js",
+    "/js/main.08d5961c81b8b01a9abe.hot-update.js": "/js/main.08d5961c81b8b01a9abe.hot-update.js",
+    "/js/main.429b54c18dd075cabac1.hot-update.js": "/js/main.429b54c18dd075cabac1.hot-update.js",
+    "/js/main.c43ad645d3374babd36e.hot-update.js": "/js/main.c43ad645d3374babd36e.hot-update.js",
+    "/js/main.a056948c77da4d9c0816.hot-update.js": "/js/main.a056948c77da4d9c0816.hot-update.js",
+    "/js/main.043c82fe5eb0f27d0e8d.hot-update.js": "/js/main.043c82fe5eb0f27d0e8d.hot-update.js",
+    "/js/main.958ec8f05347f7c6a4de.hot-update.js": "/js/main.958ec8f05347f7c6a4de.hot-update.js",
+    "/js/main.661ca03e7712bc8fee46.hot-update.js": "/js/main.661ca03e7712bc8fee46.hot-update.js",
+    "/js/main.9e057935183bb4a0c91f.hot-update.js": "/js/main.9e057935183bb4a0c91f.hot-update.js",
+    "/js/main.5b09cb20a0ee4270aaae.hot-update.js": "/js/main.5b09cb20a0ee4270aaae.hot-update.js",
+    "/js/main.4479e0a249319111ff7f.hot-update.js": "/js/main.4479e0a249319111ff7f.hot-update.js",
+    "/js/main.e6f047f73adef1491879.hot-update.js": "/js/main.e6f047f73adef1491879.hot-update.js",
+    "/js/main.3107d65b545e4f4d821c.hot-update.js": "/js/main.3107d65b545e4f4d821c.hot-update.js",
+    "/js/main.5aff23c3dc64bc77c457.hot-update.js": "/js/main.5aff23c3dc64bc77c457.hot-update.js",
+    "/js/main.223d053b0349b659e378.hot-update.js": "/js/main.223d053b0349b659e378.hot-update.js",
+    "/js/main.8760b75c79a799a19496.hot-update.js": "/js/main.8760b75c79a799a19496.hot-update.js",
+    "/js/main.3893b0842d275058bfe3.hot-update.js": "/js/main.3893b0842d275058bfe3.hot-update.js",
+    "/js/main.6e8904065228a68d66cc.hot-update.js": "/js/main.6e8904065228a68d66cc.hot-update.js"
 }

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;