key binds fix

2026-04-05 18:23:48 +00:00 · 2020-08-17 20:10:30 +02:00
parent ba315014fa
commit bb22ec1e88
7 changed files with 162 additions and 132 deletions
--- 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",
--- 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"
 }
--- 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>
+</style>
--- 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 (
--- 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>
+</style>
--- 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>
+</style>
--- 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>
+</style>