diff --git a/package-lock.json b/package-lock.json
index f350b3d5..eaaad061 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1003,6 +1003,12 @@
                 "@types/node": "*"
             }
         },
+        "@types/json-schema": {
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
+            "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
+            "dev": true
+        },
         "@types/minimatch": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -5697,9 +5703,9 @@
             "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
         },
         "jest-worker": {
-            "version": "25.2.6",
-            "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.2.6.tgz",
-            "integrity": "sha512-FJn9XDUSxcOR4cwDzRfL1z56rUofNTFs539FGASpd50RHdb6EVkhxQqktodW2mI49l+W3H+tFJDotCHUQF6dmA==",
+            "version": "25.5.0",
+            "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz",
+            "integrity": "sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==",
             "dev": true,
             "requires": {
                 "merge-stream": "^2.0.0",
@@ -6364,9 +6370,9 @@
             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
         },
         "minipass": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz",
-            "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==",
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+            "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
             "dev": true,
             "requires": {
                 "yallist": "^4.0.0"
@@ -6391,9 +6397,9 @@
             }
         },
         "minipass-pipeline": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz",
-            "integrity": "sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+            "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
             "dev": true,
             "requires": {
                 "minipass": "^3.0.0"
@@ -9719,22 +9725,34 @@
             }
         },
         "terser-webpack-plugin": {
-            "version": "2.3.5",
-            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz",
-            "integrity": "sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==",
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
+            "integrity": "sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==",
             "dev": true,
             "requires": {
                 "cacache": "^13.0.1",
-                "find-cache-dir": "^3.2.0",
-                "jest-worker": "^25.1.0",
-                "p-limit": "^2.2.2",
-                "schema-utils": "^2.6.4",
-                "serialize-javascript": "^2.1.2",
+                "find-cache-dir": "^3.3.1",
+                "jest-worker": "^25.4.0",
+                "p-limit": "^2.3.0",
+                "schema-utils": "^2.6.6",
+                "serialize-javascript": "^4.0.0",
                 "source-map": "^0.6.1",
-                "terser": "^4.4.3",
+                "terser": "^4.6.12",
                 "webpack-sources": "^1.4.3"
             },
             "dependencies": {
+                "ajv": {
+                    "version": "6.12.4",
+                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+                    "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+                    "dev": true,
+                    "requires": {
+                        "fast-deep-equal": "^3.1.1",
+                        "fast-json-stable-stringify": "^2.0.0",
+                        "json-schema-traverse": "^0.4.1",
+                        "uri-js": "^4.2.2"
+                    }
+                },
                 "commander": {
                     "version": "2.20.3",
                     "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -9772,18 +9790,18 @@
                     }
                 },
                 "make-dir": {
-                    "version": "3.0.2",
-                    "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
-                    "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+                    "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
                     "dev": true,
                     "requires": {
                         "semver": "^6.0.0"
                     }
                 },
                 "p-limit": {
-                    "version": "2.2.2",
-                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
-                    "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
+                    "version": "2.3.0",
+                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+                    "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
                     "dev": true,
                     "requires": {
                         "p-try": "^2.0.0"
@@ -9819,12 +9837,32 @@
                         "find-up": "^4.0.0"
                     }
                 },
+                "schema-utils": {
+                    "version": "2.7.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+                    "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.4",
+                        "ajv": "^6.12.2",
+                        "ajv-keywords": "^3.4.1"
+                    }
+                },
                 "semver": {
                     "version": "6.3.0",
                     "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
                     "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
                     "dev": true
                 },
+                "serialize-javascript": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+                    "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+                    "dev": true,
+                    "requires": {
+                        "randombytes": "^2.1.0"
+                    }
+                },
                 "source-map": {
                     "version": "0.6.1",
                     "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -9832,9 +9870,9 @@
                     "dev": true
                 },
                 "terser": {
-                    "version": "4.6.10",
-                    "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.10.tgz",
-                    "integrity": "sha512-qbF/3UOo11Hggsbsqm2hPa6+L4w7bkr+09FNseEe8xrcVD3APGLFqE+Oz1ZKAxjYnFsj80rLOfgAtJ0LNJjtTA==",
+                    "version": "4.8.0",
+                    "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+                    "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
                     "dev": true,
                     "requires": {
                         "commander": "^2.20.0",
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 450cd139..a254586c 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,19 +1,10 @@
 {
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
-    "/js/main.565d4389ee843a89c58e.hot-update.js": "/js/main.565d4389ee843a89c58e.hot-update.js",
-    "/js/main.2a7a8c5f338bf56d3c85.hot-update.js": "/js/main.2a7a8c5f338bf56d3c85.hot-update.js",
-    "/js/main.54c4df5b44d30d2d75cf.hot-update.js": "/js/main.54c4df5b44d30d2d75cf.hot-update.js",
-    "/js/main.52c12c9d276e65d0ae5f.hot-update.js": "/js/main.52c12c9d276e65d0ae5f.hot-update.js",
-    "/js/main.2c56df733ffb4dd5dc40.hot-update.js": "/js/main.2c56df733ffb4dd5dc40.hot-update.js",
-    "/js/main.c71f38e533847d460930.hot-update.js": "/js/main.c71f38e533847d460930.hot-update.js",
-    "/js/main.f5acca59a222131c3cba.hot-update.js": "/js/main.f5acca59a222131c3cba.hot-update.js",
-    "/js/main.e3e6195a4b3bb271fe26.hot-update.js": "/js/main.e3e6195a4b3bb271fe26.hot-update.js",
-    "/js/main.1b03d51b15dfd56be648.hot-update.js": "/js/main.1b03d51b15dfd56be648.hot-update.js",
-    "/js/main.5505a15e90a8468b452f.hot-update.js": "/js/main.5505a15e90a8468b452f.hot-update.js",
-    "/js/main.5817ccfe47cf82bfa129.hot-update.js": "/js/main.5817ccfe47cf82bfa129.hot-update.js",
-    "/js/main.a34679fea419709a4a33.hot-update.js": "/js/main.a34679fea419709a4a33.hot-update.js",
-    "/js/main.3ad171a864e7c390e890.hot-update.js": "/js/main.3ad171a864e7c390e890.hot-update.js",
-    "/js/main.51a08b81d7efc66a7215.hot-update.js": "/js/main.51a08b81d7efc66a7215.hot-update.js",
-    "/js/main.ffff7d5846e119bd9af1.hot-update.js": "/js/main.ffff7d5846e119bd9af1.hot-update.js"
+    "/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"
 }
diff --git a/resources/js/components/FilesView/FileFullPreview.vue b/resources/js/components/FilesView/FileFullPreview.vue
index a756c62d..0fbb79ef 100644
--- a/resources/js/components/FilesView/FileFullPreview.vue
+++ b/resources/js/components/FilesView/FileFullPreview.vue
@@ -5,7 +5,7 @@
     id="fileFullPreview"
     ref="filePreview"
     tabindex="-1"
-    @keydown.esc="showFullPreview = false"
+    @keydown.esc="(showFullPreview = false), hideMenu()"
     @keydown.right="next"
     @keydown.left="prev"
   >
@@ -41,6 +41,9 @@ export default {
     prev: function () {
       events.$emit("filePreviewAction:prev");
     },
+    hideMenu() {
+      events.$emit("showContextMenuPreview:show");
+    },
   },
 
   updated() {
@@ -67,12 +70,6 @@ export default {
       this.showFullPreview = false;
     });
   },
-  methods: {
-    hideMenu() {
-      events.$emit("showContextMenuPreview:hide");
-      console.log("aaaa");
-    },
-  },
 };
 </script>
 
@@ -92,4 +89,4 @@ export default {
     background-color: $dark_mode_background;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index d2c77f8b..df1e72cd 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -137,7 +137,10 @@ export default {
       return this.data.type === "video";
     },
     isAudio() {
-      return this.data.type === "audio";
+      return (
+        // this.data.type === "audio" &&
+        this.data.mimetype === "mp3" || "wan" || "mpeg"
+      );
     },
     canEditName() {
       return (
diff --git a/resources/js/components/FilesView/FilePreviewActions.vue b/resources/js/components/FilesView/FilePreviewActions.vue
index 6dc42961..fd6e0598 100644
--- a/resources/js/components/FilesView/FilePreviewActions.vue
+++ b/resources/js/components/FilesView/FilePreviewActions.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import { events } from "@/bus";
-import { ChevronLeftIcon, ChevronRightIcon } from "vue-feather-icons";
+import { events } from '@/bus';
+import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons';
 
 export default {
   components: {
@@ -25,18 +25,18 @@ export default {
   },
 
   methods: {
-    next: function () {
-      events.$emit("filePreviewAction:next");
+    next: function() {
+      events.$emit('filePreviewAction:next');
     },
-    prev: function () {
-      events.$emit("filePreviewAction:prev");
+    prev: function() {
+      events.$emit('filePreviewAction:prev');
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "@assets/vue-file-manager/_variables";
+@import '@assets/vue-file-manager/_variables';
 
 .icon-wrapper {
   width: 40px;
@@ -47,10 +47,10 @@ export default {
 .next {
   cursor: pointer;
   position: absolute;
-  top: 50%;
+  top: 49.5%;
   display: flex;
   justify-content: center;
-  background-color: white;
+  background-color: white !important;
   color: $text;
   border-radius: 50%;
   text-decoration: none;
@@ -67,7 +67,7 @@ export default {
   .prev,
   .next {
     color: $light-text;
-    background-color: $dark_mode_background;
+    background-color: $dark_mode_background !important;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
index d87cadcf..57a0d9ef 100644
--- a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
@@ -9,10 +9,10 @@
         <span class="file-count">
           ({{
             showImageIndex +
-            " " +
-            $t("pronouns.of") +
-            " " +
-            filteredFiles.length
+              ' ' +
+              $t('pronouns.of') +
+              ' ' +
+              filteredFiles.length
           }})
         </span>
       </div>
@@ -57,11 +57,11 @@
 </template>
 
 <script>
-import { events } from "@/bus";
-import { mapGetters } from "vuex";
-import { XIcon, MoreHorizontalIcon } from "vue-feather-icons";
+import { events } from '@/bus';
+import { mapGetters } from 'vuex';
+import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons';
 
-import ToolbarButton from "@/components/FilesView/ToolbarButton";
+import ToolbarButton from '@/components/FilesView/ToolbarButton';
 
 export default {
   components: { ToolbarButton, XIcon, MoreHorizontalIcon },
@@ -71,7 +71,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["fileInfoDetail", "data"]),
+    ...mapGetters(['fileInfoDetail', 'data']),
     filteredFiles() {
       let files = [];
       this.data.filter((element) => {
@@ -83,7 +83,7 @@ export default {
       return files;
     },
     showImageIndex() {
-      let activeIndex = "";
+      let activeIndex = '';
       this.filteredFiles.filter((element, index) => {
         if (element.unique_id == this.fileInfoDetail.unique_id) {
           activeIndex = index + 1;
@@ -94,8 +94,8 @@ export default {
 
     formatedName() {
       let name = this.fileInfoDetail.name;
-      if (name.lastIndexOf(".") > -1) {
-        return _.truncate(name.substring(0, name.lastIndexOf(".")), {
+      if (name.lastIndexOf('.') > -1) {
+        return _.truncate(name.substring(0, name.lastIndexOf('.')), {
           length: 20,
         });
       } else {
@@ -106,19 +106,19 @@ export default {
     },
     canShareInView() {
       return !this.$isThisLocation([
-        "base",
-        "participant_uploads",
-        "latest",
-        "shared",
-        "public",
+        'base',
+        'participant_uploads',
+        'latest',
+        'shared',
+        'public',
       ]);
     },
   },
 
   methods: {
     printMethod() {
-      var tab = document.getElementById("image");
-      var win = window.open("", "", "height=700,width=700");
+      var tab = document.getElementById('image');
+      var win = window.open('', '', 'height=700,width=700');
       win.document.write(tab.outerHTML);
       win.document.close();
       win.print();
@@ -127,47 +127,50 @@ export default {
       // Download file
       this.$downloadFile(
         this.fileInfoDetail.file_url,
-        this.fileInfoDetail.name + "." + this.fileInfoDetail.mimetype
+        this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
       );
     },
     shareItem() {
       if (this.fileInfoDetail.shared) {
-        events.$emit("popup:open", {
-          name: "share-edit",
+        events.$emit('popup:open', {
+          name: 'share-edit',
           item: this.fileInfoDetail,
         });
       } else {
-        events.$emit("popup:open", {
-          name: "share-create",
+        events.$emit('popup:open', {
+          name: 'share-create',
           item: this.fileInfoDetail,
         });
       }
     },
     menuOpen() {
       if (this.$isMobile()) {
-        events.$emit("mobileMenu:show", "showFromMediaPreview");
+        events.$emit('mobileMenu:show', 'showFromMediaPreview');
       } else {
-        events.$emit("showContextMenuPreview:show", this.fileInfoDetail);
+        events.$emit('showContextMenuPreview:show', this.fileInfoDetail);
       }
     },
     closeFullPreview() {
-      events.$emit("fileFullPreview:hide");
-      events.$emit("showContextMenuPreview:hide");
+      events.$emit('fileFullPreview:hide');
+      events.$emit('showContextMenuPreview:hide');
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "@assets/vue-file-manager/_variables";
-@import "@assets/vue-file-manager/_mixins";
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
 
 .name-wrapper {
   width: 33%;
   height: 22px;
   display: flex;
   position: relative;
-  align-items: center;
+  // align-items: center;
+  flex-grow: 1;
+  align-self: center;
+  white-space: nowrap;
   .name-count-wrapper {
     display: flex;
     .file-count {
@@ -179,6 +182,7 @@ export default {
       text-overflow: ellipsis;
       display: inline-block;
       vertical-align: middle;
+      align-self: center;
       color: $text;
     }
     .title {
@@ -189,6 +193,7 @@ export default {
       text-overflow: ellipsis;
       display: inline-block;
       vertical-align: middle;
+      align-self: center;
       color: $text;
     }
   }
@@ -197,6 +202,7 @@ export default {
     cursor: pointer;
     margin-right: 6px;
     color: $text;
+    align-self: center;
     @include transition(150ms);
   }
   .fast-menu-icon {
@@ -288,25 +294,20 @@ export default {
   }
 }
 .navigation-panel {
-  height: 6.7%;
-  min-height: 63px;
+  height: 6.9%;
   padding: 10px 15px;
   display: flex;
   position: relative;
+  align-items: center;
   background-color: $light-background;
   color: $text;
-  > div {
-    flex-grow: 1;
-    align-self: center;
-    white-space: nowrap;
-  }
 }
 @media (prefers-color-scheme: dark) {
   .navigation-panel {
     background-color: $dark_mode_foreground;
-    color: $light-text;
+    color: $dark_mode_text_primary;
     .icon-close {
-      color: $light-text;
+      color: $dark_mode_text_primary;
     }
     .fast-menu-icon:hover {
       background: $dark_mode_background;
@@ -315,7 +316,7 @@ export default {
   .name-wrapper {
     .title,
     .file-count {
-      color: $light-text !important;
+      color: $dark_mode_text_primary !important;
     }
   }
   .navigation-icons {
@@ -324,4 +325,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/FilesView/MediaFullPreview.vue b/resources/js/components/FilesView/MediaFullPreview.vue
index 28db698b..c5917ffb 100644
--- a/resources/js/components/FilesView/MediaFullPreview.vue
+++ b/resources/js/components/FilesView/MediaFullPreview.vue
@@ -36,10 +36,10 @@
 </template>
 
 <script>
-import { events } from "@/bus";
-import { mapGetters } from "vuex";
-import ToolbarButton from "@/components/FilesView/ToolbarButton";
-import Spinner from "@/components/FilesView/Spinner";
+import { events } from '@/bus';
+import { mapGetters } from 'vuex';
+import ToolbarButton from '@/components/FilesView/ToolbarButton';
+import Spinner from '@/components/FilesView/Spinner';
 
 export default {
   components: { ToolbarButton, Spinner },
@@ -48,14 +48,14 @@ export default {
       currentIndex: 1,
       sliderFile: [],
       loaded: false,
-      sizeWidth: "",
-      sizeHeight: "",
+      sizeWidth: '',
+      sizeHeight: '',
     };
   },
   computed: {
-    ...mapGetters(["fileInfoDetail", "data"]),
+    ...mapGetters(['fileInfoDetail', 'data']),
 
-    currentFile: function () {
+    currentFile: function() {
       return this.sliderFile[
         Math.abs(this.currentIndex) % this.sliderFile.length
       ];
@@ -63,22 +63,22 @@ export default {
 
     canShareInView() {
       return !this.$isThisLocation([
-        "base",
-        "participant_uploads",
-        "latest",
-        "shared",
-        "public",
+        'base',
+        'participant_uploads',
+        'latest',
+        'shared',
+        'public',
       ]);
     },
   },
   mounted() {
-    events.$on("filePreviewAction:next", () => {
+    events.$on('filePreviewAction:next', () => {
       this.currentIndex += 1;
       if (this.currentIndex > this.sliderFile.length - 1) {
         this.currentIndex = 0;
       }
     });
-    events.$on("filePreviewAction:prev", () => {
+    events.$on('filePreviewAction:prev', () => {
       this.currentIndex -= 1;
       if (this.currentIndex < 0) {
         this.currentIndex = this.sliderFile.length - 1;
@@ -92,17 +92,17 @@ export default {
   watch: {
     currentFile() {
       //HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
-      this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
-      events.$emit("actualShowingImage:ContextMenu", this.currentFile);
+      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");
+          events.$emit('fileFullPreview:hide');
         } else {
           this.currentIndex = this.currentIndex - 1;
-          this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
+          this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
           this.sliderFile = [];
           this.filteredFiles();
         }
@@ -119,15 +119,15 @@ export default {
   methods: {
     imageSizing() {
       if (this.$isMobile()) {
-        this.sizeWidth = "100%";
-        this.sizeHeight = "auto";
+        this.sizeWidth = '100%';
+        this.sizeHeight = 'auto';
       } else {
-        this.sizeWidth = "auto";
-        this.sizeHeight = "100%";
+        this.sizeWidth = 'auto';
+        this.sizeHeight = '100%';
       }
     },
     closeFullPreview() {
-      events.$emit("fileFullPreview:hide");
+      events.$emit('fileFullPreview:hide');
     },
 
     filteredFiles() {
@@ -153,11 +153,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "@assets/vue-file-manager/_variables";
-@import "@assets/vue-file-manager/_mixins";
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
 
 .media-full-preview {
-  height: 93%;
+  height: 93.1%;
   position: relative;
 }
 
@@ -206,4 +206,4 @@ export default {
     background-color: $dark_mode_background;
   }
 }
-</style>
\ No newline at end of file
+</style>