From 717144b9dd3f0d8b06eee5cafb8c7589c6ef9190 Mon Sep 17 00:00:00 2001
From: ctf0 <muah003@gmail.com>
Date: Fri, 27 Mar 2020 08:29:49 +0200
Subject: [PATCH] some updates

---
 README.md                                     |  2 +-
 src/App/Controllers/Modules/GetContent.php    |  1 -
 src/App/Controllers/Modules/Utils.php         |  2 +-
 .../js/components/globalSearch/button.vue     | 18 ++---
 .../js/components/globalSearch/image.vue      |  2 +-
 .../js/components/globalSearch/panel.vue      |  2 +-
 .../assets/js/components/manager.vue          | 11 +--
 .../assets/js/components/search-by-voice.vue  | 67 +++++++++++++++++++
 .../js/components/usageIntro/button.vue       |  2 +-
 .../container-click-overlay.vue}              | 20 +++---
 src/resources/assets/js/manager.js            |  6 --
 src/resources/assets/js/modules/icons.js      |  1 +
 src/resources/assets/js/modules/url.js        | 12 ++--
 src/resources/assets/sass/manager.scss        | 18 +++--
 .../assets/sass/modules/usage-intro.scss      | 11 +--
 src/resources/assets/sass/packages/goo.scss   |  2 +-
 src/resources/lang/en/messages.php            |  4 ++
 src/resources/views/_manager.blade.php        | 56 +++++++++-------
 src/resources/views/partials/card.blade.php   |  6 +-
 .../views/partials/mobile-nav.blade.php       |  4 +-
 20 files changed, 165 insertions(+), 82 deletions(-)
 create mode 100644 src/resources/assets/js/components/search-by-voice.vue
 rename src/resources/assets/js/components/{usageIntro/overlay.vue => utils/container-click-overlay.vue} (87%)

diff --git a/README.md b/README.md
index 77abe2b..59cc3ff 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@
 - [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)
 
     ```bash
-    yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval
+    yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang
     yarn add worker-loader --dev
     ```
 
diff --git a/src/App/Controllers/Modules/GetContent.php b/src/App/Controllers/Modules/GetContent.php
index 1450c80..fabab55 100644
--- a/src/App/Controllers/Modules/GetContent.php
+++ b/src/App/Controllers/Modules/GetContent.php
@@ -47,7 +47,6 @@ protected function getData($dir)
         $dirList        = $this->getFolderContent($dir);
         $storageFolders = $this->getFolderListByType($dirList, 'dir');
         $storageFiles   = $this->getFolderListByType($dirList, 'file');
-        $pattern        = $this->ignoreFiles;
 
         // folders
         foreach ($storageFolders as $folder) {
diff --git a/src/App/Controllers/Modules/Utils.php b/src/App/Controllers/Modules/Utils.php
index accf584..cc62448 100644
--- a/src/App/Controllers/Modules/Utils.php
+++ b/src/App/Controllers/Modules/Utils.php
@@ -59,7 +59,7 @@ protected function filePattern($item)
 
     protected function getItemTime($time)
     {
-        return Carbon::createFromTimestamp($time)->{$this->LMF}();
+        return $time ? Carbon::createFromTimestamp($time)->{$this->LMF}() : null;
     }
 
     /**
diff --git a/src/resources/assets/js/components/globalSearch/button.vue b/src/resources/assets/js/components/globalSearch/button.vue
index efe280c..669a449 100644
--- a/src/resources/assets/js/components/globalSearch/button.vue
+++ b/src/resources/assets/js/components/globalSearch/button.vue
@@ -1,5 +1,5 @@
 <template>
-    <button v-tippy
+    <button v-tippy="{arrow: true}"
             :disabled="loading || isLoading"
             :title="trans('glbl_search')"
             class="button"
@@ -30,15 +30,15 @@ export default {
             this.loading = true
 
             axios.get(this.route)
-                .then(({data}) => {
-                    this.loading = false
-                    this.done = true
-                    EventHub.fire('global-search-index', data)
-                    this.showNotif(this.trans('glbl_search_avail'))
+                    .then(({data}) => {
+                        this.loading = false
+                        this.done = true
+                        EventHub.fire('global-search-index', data)
+                        this.showNotif(this.trans('glbl_search_avail'))
 
-                }).catch((err) => {
-                    console.error(err)
-                })
+                    }).catch((err) => {
+                        console.error(err)
+                    })
         },
         showSearchPanel() {
             EventHub.fire('toggle-global-search', true)
diff --git a/src/resources/assets/js/components/globalSearch/image.vue b/src/resources/assets/js/components/globalSearch/image.vue
index b229ed0..138f8f8 100644
--- a/src/resources/assets/js/components/globalSearch/image.vue
+++ b/src/resources/assets/js/components/globalSearch/image.vue
@@ -12,7 +12,7 @@
 
 <style scoped>
     img {
-        background-color: black;
+        background-color: $black;
     }
 
 </style>
diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
index c79bc35..3adc582 100644
--- a/src/resources/assets/js/components/globalSearch/panel.vue
+++ b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -68,7 +68,7 @@
                             <p class="subtitle is-marginless link"
                                @click.stop="goToFolder(item.dir_path, item.name)">
                                 <span class="icon"><icon name="folder"/></span>
-                                <span v-tippy
+                                <span v-tippy="{arrow: true}"
                                       :title="trans('go_to_folder')">{{ item.dir_path }}</span>
                             </p>
                             <time>
diff --git a/src/resources/assets/js/components/manager.vue b/src/resources/assets/js/components/manager.vue
index 7fb2db4..76d3c26 100644
--- a/src/resources/assets/js/components/manager.vue
+++ b/src/resources/assets/js/components/manager.vue
@@ -28,19 +28,20 @@ import Watchers from '../modules/watch'
 
 export default {
     components: {
+        containerClickOverlay: require('./utils/container-click-overlay.vue').default,
         contentRatio: require('./utils/ratio.vue').default,
+        dirBookmarks: require('./toolbar/dir-bookmark.vue').default,
+        filterAndSorting: require('./toolbar/filter-sort.vue').default,
         globalSearchBtn: require('./globalSearch/button.vue').default,
         globalSearchPanel: require('./globalSearch/panel.vue').default,
         imageEditor: require('./image/editor/main.vue').default,
         imageIntersect: require('./image/lazyLoading.vue').default,
         imagePreview: require('./image/preview.vue').default,
-        usageIntroOverlay: require('./usageIntro/overlay.vue').default,
+        InfiniteLoading: require('vue-infinite-loading').default,
+        uploadPreview: require('./utils/upload-preview.vue').default,
         usageIntroBtn: require('./usageIntro/button.vue').default,
         usageIntroPanel: require('./usageIntro/panel.vue').default,
-        uploadPreview: require('./utils/upload-preview.vue').default,
-        InfiniteLoading: require('vue-infinite-loading').default,
-        filterAndSorting: require('./toolbar/filter-sort.vue').default,
-        dirBookmarks: require('./toolbar/dir-bookmark.vue').default
+        voiceSearch: require('./search-by-voice.vue').default
     },
     name: 'media-manager',
     mixins: [
diff --git a/src/resources/assets/js/components/search-by-voice.vue b/src/resources/assets/js/components/search-by-voice.vue
new file mode 100644
index 0000000..b564513
--- /dev/null
+++ b/src/resources/assets/js/components/search-by-voice.vue
@@ -0,0 +1,67 @@
+<template>
+    <button v-if="isSupported"
+            v-tippy="{arrow: true}"
+            class="button"
+            :title="run ? trans('voice_stop') : trans('voice_start')"
+            @click.stop="toggle()">
+        <span class="icon"
+              :class="run ? 'has-text-danger' : 'has-text-link'">
+            <icon name="microphone"/>
+        </span>
+    </button>
+</template>
+
+<script>
+import annyang from 'annyang'
+
+export default {
+    props: ['trans', 'searchFor'],
+    data() {
+        return {
+            run: false,
+            isSupported: true,
+            transcript: null
+        }
+    },
+    created() {
+        if (!annyang) {
+            this.isSupported = false
+            console.error('Speech Recognition is not supported')
+        }
+    },
+    mounted() {
+        annyang.addCallback('result', (phrases) => {
+            this.$parent.searchFor = phrases[0]
+        })
+    },
+    beforeDestroy() {
+        annyang.removeCallback()
+    },
+    methods: {
+        toggle() {
+            return this.run ? this.stop() : this.start()
+        },
+        stop() {
+            this.run = false
+            annyang.abort()
+        },
+        start() {
+            this.run = true
+            annyang.start()
+
+            // NOTE: testing
+            // setTimeout(() => {
+            //     annyang.trigger('Time for some thrilling heroics')
+            // }, 1000)
+        }
+    },
+    watch: {
+        searchFor(val) {
+            if (!val) {
+                this.transcript = null
+                this.stop()
+            }
+        }
+    }
+}
+</script>
diff --git a/src/resources/assets/js/components/usageIntro/button.vue b/src/resources/assets/js/components/usageIntro/button.vue
index 629c336..d90d3b5 100644
--- a/src/resources/assets/js/components/usageIntro/button.vue
+++ b/src/resources/assets/js/components/usageIntro/button.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="usage-intro-btn extra-func-btns link"
+    <div class="usage-intro-btn"
          @click.stop="showPanel()">
         <span class="icon is-large">
             <icon name="pref"
diff --git a/src/resources/assets/js/components/usageIntro/overlay.vue b/src/resources/assets/js/components/utils/container-click-overlay.vue
similarity index 87%
rename from src/resources/assets/js/components/usageIntro/overlay.vue
rename to src/resources/assets/js/components/utils/container-click-overlay.vue
index 116c594..307ec40 100644
--- a/src/resources/assets/js/components/usageIntro/overlay.vue
+++ b/src/resources/assets/js/components/utils/container-click-overlay.vue
@@ -1,27 +1,29 @@
 <template>
-    <div :class="{'active': show}" class="gesture-overlay"/>
+    <div :class="{'active': show}"
+         class="gesture-overlay"/>
 </template>
 
 <style scoped lang="scss">
     @import '../../../sass/partials/vars';
 
     .gesture-overlay {
-        position: absolute;
-        z-index: 10;
-        top: 0;
-        right: 0;
+        background-color: rgba($blue, 0.25);
         bottom: 0;
         left: 0;
-        visibility: hidden;
         opacity: 0;
-        transition: all 0.2s;
-        background-color: rgba($blue, 0.25);
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: all $anim-time;
+        visibility: hidden;
+        z-index: 10;
     }
 
     .active {
-        visibility: visible;
         opacity: 1;
+        visibility: visible;
     }
+
 </style>
 
 <script>
diff --git a/src/resources/assets/js/manager.js b/src/resources/assets/js/manager.js
index 6632058..86ae0e0 100644
--- a/src/resources/assets/js/manager.js
+++ b/src/resources/assets/js/manager.js
@@ -11,14 +11,8 @@ window.Fuse = require('fuse.js')
 
 // vue-tippy
 Vue.use(require('vue-tippy'), {
-    arrow: true,
-    touchHold: true,
-    inertia: true,
-    performance: true,
-    flipDuration: 0,
     popperOptions: {
         modifiers: {
-            preventOverflow: {enabled: false},
             hide: {enabled: false}
         }
     }
diff --git a/src/resources/assets/js/modules/icons.js b/src/resources/assets/js/modules/icons.js
index 87b9c00..708006b 100644
--- a/src/resources/assets/js/modules/icons.js
+++ b/src/resources/assets/js/modules/icons.js
@@ -44,6 +44,7 @@ import 'vue-awesome/icons/angle-down'
 import 'vue-awesome/icons/cloud-upload'
 import 'vue-awesome/icons/shopping-cart'
 import 'vue-awesome/icons/cart-plus'
+import 'vue-awesome/icons/microphone'
 // cropperjs
 import 'vue-awesome/icons/crop'
 import 'vue-awesome/icons/ban'
diff --git a/src/resources/assets/js/modules/url.js b/src/resources/assets/js/modules/url.js
index b1be31c..96a0ef0 100644
--- a/src/resources/assets/js/modules/url.js
+++ b/src/resources/assets/js/modules/url.js
@@ -1,10 +1,10 @@
 export default {
     methods: {
         getUrlWithoutQuery() {
-            let url = new URLSearchParams(location.search)
+            let params = new URLSearchParams(location.search)
 
-            return url.has('path')
-                ? location.href.replace(url.get('path'), '')
+            return params.has('path')
+                ? location.href.replace(params.get('path'), '')
                 : location.href
         },
         clearUrlQuery() {
@@ -13,10 +13,10 @@ export default {
         getPathFromUrl() {
             return new Promise((resolve) => {
                 if (!this.inModal) {
-                    let url = new URLSearchParams(location.search)
+                    let params = new URLSearchParams(location.search)
 
-                    this.folders = url.has('path')
-                        ? this.arrayFilter(url.get('path').replace(/#/g, '').split('/'))
+                    this.folders = params.has('path')
+                        ? this.arrayFilter(params.get('path').replace(/#/g, '').split('/'))
                         : []
                 }
 
diff --git a/src/resources/assets/sass/manager.scss b/src/resources/assets/sass/manager.scss
index 4790f71..ff0c445 100644
--- a/src/resources/assets/sass/manager.scss
+++ b/src/resources/assets/sass/manager.scss
@@ -463,6 +463,7 @@
     position: absolute;
     right: 0;
     top: 0;
+    touch-action: initial !important;
     transition: all $anim-time $anim-ease;
     will-change: height, width, left, right;
 }
@@ -819,12 +820,9 @@
 .movable-list {
     background: $white;
     border-radius: 100vw;
-    box-shadow: 0 15px 30px 0 rgba($black, 0.05), 0 5px 15px 0 rgba($black, 0.08);
-
-    .icon {
-        height: 2.5rem;
-        width: 2.5rem;
-    }
+    cursor: pointer;
+    position: relative;
+    transition: all $anim-time;
 
     .counter {
         background: $red;
@@ -837,12 +835,18 @@
         position: absolute;
         right: -0.5rem;
         top: -0.5rem;
-        z-index: -1;
+        z-index: 1;
 
         &:empty {
             display: none;
         }
     }
+
+    &:hover {
+        box-shadow: 0 15px 30px 0 rgba($black, 0.05), 0 5px 15px 0 rgba($black, 0.08);
+        color: $black;
+        transform: translateY(-0.7rem);
+    }
 }
 
 .media.link {
diff --git a/src/resources/assets/sass/modules/usage-intro.scss b/src/resources/assets/sass/modules/usage-intro.scss
index 788db91..294771d 100644
--- a/src/resources/assets/sass/modules/usage-intro.scss
+++ b/src/resources/assets/sass/modules/usage-intro.scss
@@ -2,8 +2,9 @@
 
 .usage-intro-btn {
     border-radius: 100vw;
+    cursor: pointer;
     display: none;
-    transition: transform 0.3s, color 0.3s, box-shadow 0.3s;
+    transition: all $anim-time;
 
     &:hover {
         box-shadow: 0 15px 30px 0 rgba($red, 0.11), 0 5px 15px 0 rgba($red, 0.08);
@@ -17,7 +18,7 @@
     overflow-y: scroll !important;
 
     .gradient-pattern {
-        background: radial-gradient(rgba(white, 0.02) 15%, transparent 16%), rgba($dark, 0.98);
+        background: radial-gradient(rgba($white, 0.02) 15%, transparent 16%), rgba($dark, 0.98);
         background-clip: border-box;
         background-origin: padding-box;
         background-position: 10px 10px;
@@ -65,7 +66,7 @@
 
     .__corner {
         bottom: 0;
-        color: black;
+        color: $black;
         display: none;
         font: normal 100%/normal Arial, Helvetica, sans-serif;
         font-size: 3.5rem;
@@ -78,7 +79,7 @@
         word-break: break-all;
 
         p {
-            color: black;
+            color: $black;
         }
 
         &::before,
@@ -89,7 +90,7 @@
         }
 
         &::after {
-            background-color: black;
+            background-color: $black;
             height: 150%;
             left: -3rem;
             margin-bottom: -1rem;
diff --git a/src/resources/assets/sass/packages/goo.scss b/src/resources/assets/sass/packages/goo.scss
index f259c2a..dfa3d7e 100644
--- a/src/resources/assets/sass/packages/goo.scss
+++ b/src/resources/assets/sass/packages/goo.scss
@@ -33,7 +33,7 @@
         z-index: -1;
 
         .btn-plain {
-            color: white;
+            color: $white;
             height: 100%;
             width: 100%;
 
diff --git a/src/resources/lang/en/messages.php b/src/resources/lang/en/messages.php
index 6315f36..90bf418 100644
--- a/src/resources/lang/en/messages.php
+++ b/src/resources/lang/en/messages.php
@@ -175,4 +175,8 @@
         'set'     => 'Change Visibility',
         'success' => '":attr" Visibility Was Updated',
     ],
+    'voice' => [
+        'start' => 'Say Something',
+        'stop'  => 'Turn Microphone Off',
+    ],
 ];
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index 1a7cadc..e9bcba3 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -1,7 +1,7 @@
 {{-- component --}}
 <media-manager inline-template
     v-cloak
-    class='hide-native-scrollbar'
+    class="hide-native-scrollbar"
     :config="{{ json_encode([
         'baseUrl' => $base_url,
         'hideFilesExt' => config('mediaManager.hide_files_ext'),
@@ -88,6 +88,8 @@ class='hide-native-scrollbar'
         'upload_in_progress' => trans('MediaManager::messages.upload.in_progress'),
         'upload_success' => trans('MediaManager::messages.upload.success'),
         'video' => trans('MediaManager::messages.video'),
+        'voice_start' => trans('MediaManager::messages.voice.start'),
+        'voice_stop' => trans('MediaManager::messages.voice.stop'),
     ]) }}"
     :in-modal="{{ isset($modal) ? 'true' : 'false' }}"
     :hide-ext="{{ isset($hideExt) ? json_encode($hideExt) : '[]' }}"
@@ -139,7 +141,7 @@ class='hide-native-scrollbar'
                                     ref="upload"
                                     :disabled="isLoading"
                                     @click.stop="toggleUploadPanel()"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="u">
                                     <span class="icon"><icon name="shopping-basket"></icon></span>
                                     <span>{{ trans('MediaManager::messages.upload.main') }}</span>
@@ -166,7 +168,7 @@ class='hide-native-scrollbar'
                                 <button class="button is-link"
                                     ref="move"
                                     :disabled="isLoading || !movableItemsCount"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="m / p"
                                     @click.stop="moveItem()">
                                     <span class="icon"><icon name="share" scale="0.8"></icon></span>
@@ -190,7 +192,7 @@ class='hide-native-scrollbar'
                                 <button class="button is-link"
                                     ref="editor"
                                     :disabled="editor_btn_disable"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="e"
                                     @click.stop="imageEditor()">
                                     <span class="icon"><icon name="object-ungroup" scale="1.2"></icon></span>
@@ -203,7 +205,7 @@ class='hide-native-scrollbar'
                                 <button class="button is-link"
                                     ref="delete"
                                     :disabled="ops_btn_disable"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="d / del"
                                     @click.stop="deleteItem()">
                                     <span class="icon"><icon name="trash"></icon></span>
@@ -222,7 +224,7 @@ class='hide-native-scrollbar'
                                     ref="refresh"
                                     :disabled="isLoading"
                                     tag="button"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="(R) efresh"
                                     @tap="refresh()"
                                     @hold="clearAll()">
@@ -237,7 +239,7 @@ class='hide-native-scrollbar'
                                 <button class="button is-warning"
                                     ref="lock"
                                     :disabled="lock_btn_disable"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="(L) ock"
                                     @click.stop="lockFileForm()">
                                     <span class="icon">
@@ -252,7 +254,7 @@ class='hide-native-scrollbar'
                                     :class="IsVisible(selectedFile) ? 'is-light' : 'is-danger'"
                                     ref="visibility"
                                     :disabled="vis_btn_disable"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="(V) isibility"
                                     @click.stop="FileVisibilityForm()">
                                     <span class="icon">
@@ -279,7 +281,7 @@ class="button"
                                     :class="{'is-warning' : bulkSelectAll}"
                                     v-show="isBulkSelecting()"
                                     :disabled="searchItemsCount == 0 || isLoading"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="a">
                                     <template v-if="bulkSelectAll">
                                         <span class="icon"><icon name="minus" scale="0.8"></icon></span>
@@ -299,7 +301,7 @@ class="button"
                                     class="button"
                                     :class="{'is-danger' : bulkSelect}"
                                     :disabled="searchItemsCount == 0 || !allItemsCount || isLoading"
-                                    v-tippy
+                                    v-tippy="{arrow: true}"
                                     title="b">
                                     <span class="icon"><icon name="puzzle-piece"></icon></span>
                                     <span>{{ trans('MediaManager::messages.select.bulk') }}</span>
@@ -334,6 +336,7 @@ class="button"
                         <div class="level-item" v-if="allItemsCount">
                             <div class="control">
                                 <div class="field has-addons">
+                                    {{-- global --}}
                                     <p class="control" v-if="!restrictModeIsOn">
                                         <global-search-btn
                                             route="{{ route('media.global_search') }}"
@@ -343,6 +346,12 @@ class="button"
                                         </global-search-btn>
                                     </p>
 
+                                    {{-- voice --}}
+                                    <p class="control">
+                                        <voice-search :trans="trans" :search-for="searchFor"></voice-search>
+                                    </p>
+
+                                    {{-- local --}}
                                     <p class="control has-icons-left">
                                         <input class="input"
                                             :disabled="isLoading"
@@ -355,9 +364,10 @@ class="button"
                                         </span>
                                     </p>
 
+                                    {{-- clear --}}
                                     <p class="control">
                                         <button class="button is-black" :disabled="!searchFor"
-                                            v-tippy
+                                            v-tippy="{arrow: true}"
                                             title="{{ trans('MediaManager::messages.clear', ['attr' => trans('MediaManager::messages.search.main')]) }}"
                                             @click.stop="resetInput('searchFor')">
                                             <span class="icon"><icon name="times"></icon></span>
@@ -514,22 +524,22 @@ class="no_files"
                     </v-touch>
                 </div>
 
-                {{-- gesture --}}
-                <div>
-                    <usage-intro-overlay></usage-intro-overlay>
+                {{-- overlay --}}
+                <container-click-overlay></container-click-overlay>
+
+                <div class="extra-func-btns">
+                    {{-- intro --}}
                     <usage-intro-btn v-show="!isLoading && !waitingForUpload"></usage-intro-btn>
-                </div>
 
-                {{-- movable list --}}
-                <div v-if="allItemsCount && !isLoading && !waitingForUpload"
-                    class="movable-list extra-func-btns">
-                    <v-touch class="btn-plain"
+                    {{-- movable list --}}
+                    <v-touch v-if="allItemsCount && !isLoading && !waitingForUpload"
+                        class="movable-list"
                         v-tippy="{arrow: true, hideOnClick: false}"
                         :title="inMovableList() ? '{{ trans('MediaManager::messages.add.added') }}' : '{{ trans('MediaManager::messages.add.list') }} (c / x)'"
                         @tap="addToMovableList()"
                         @dbltap="showMovableList()"
                         @hold="clearMovableList()">
-                        <span class="icon">
+                        <span class="icon is-large">
                             <icon name="shopping-cart" scale="1.2"></icon>
                         </span>
                         <span class="counter">@{{ movableItemsCount || null }}</span>
@@ -955,7 +965,7 @@ class="__sidebar-swipe-hidden"
                                 <li key="library-bc">
                                     <a v-if="pathBarDirsList.length > 0 && !(isBulkSelecting() || isLoading)"
                                         class="p-l-0 level"
-                                        v-tippy
+                                        v-tippy="{arrow: true}"
                                         title="{{ trans('MediaManager::messages.backspace') }}"
                                         @click.stop="goToFolder(0)">
                                         <span class="icon level-item is-marginless"><icon name="map"></icon></span>
@@ -974,7 +984,7 @@ class="level">
                                         <span class="level-item m-l-5 is-marginless">@{{ folder }}</span>
                                     </p>
                                     <a v-else
-                                        v-tippy
+                                        v-tippy="{arrow: true}"
                                         title="{{ trans('MediaManager::messages.backspace') }}"
                                         class="level"
                                         @click.stop="pathBarDirsList.length > 1 ? goToFolder(index+1) : false">
@@ -1002,7 +1012,7 @@ class="level"
                     <div class="level-item" v-show="!isLoading && !waitingForUpload">
                         <div class="is-hidden-touch"
                             @click.stop="toggleInfoSidebar(), saveUserPref()"
-                            v-tippy
+                            v-tippy="{arrow: true}"
                             title="t"
                             v-if="allItemsCount">
                             <transition :name="infoSidebar ? 'mm-info-out' : 'mm-info-in'" mode="out-in">
diff --git a/src/resources/views/partials/card.blade.php b/src/resources/views/partials/card.blade.php
index df6f883..c696de1 100644
--- a/src/resources/views/partials/card.blade.php
+++ b/src/resources/views/partials/card.blade.php
@@ -92,7 +92,7 @@ class="image">
                 rel="noreferrer noopener"
                 target="_blank"
                 title="{{ trans('MediaManager::messages.public_url') }}"
-                v-tippy>
+                v-tippy="{arrow: true}">
                 <icon name="search" scale="1.1"></icon>
             </a>
         </p>
@@ -123,7 +123,7 @@ class="icon is-large link"
                         class="icon is-large link"
                         :class="IsVisible(selectedFile) ? 'is-success' : 'is-danger'"
                         title="{{ trans('MediaManager::messages.visibility.set') }}"
-                        v-tippy
+                        v-tippy="{arrow: true}"
                         @click.stop="$refs.visibility.click()">
                         <icon :name="IsVisible(selectedFile) ? 'eye' : 'eye-slash'" scale="1.1"></icon>
                     </span>
@@ -135,7 +135,7 @@ class="icon is-large link"
                 <div class="level-item">
                     <span class="icon is-large link is-black"
                         title="{{ trans('MediaManager::messages.download.file') }}"
-                        v-tippy
+                        v-tippy="{arrow: true}"
                         @click.prevent="saveFile(selectedFile)">
                         <icon name="download" scale="1.1"></icon>
                     </span>
diff --git a/src/resources/views/partials/mobile-nav.blade.php b/src/resources/views/partials/mobile-nav.blade.php
index fe764f3..a7a0eb9 100644
--- a/src/resources/views/partials/mobile-nav.blade.php
+++ b/src/resources/views/partials/mobile-nav.blade.php
@@ -5,7 +5,7 @@ class="__stack-breadcrumb-mobile is-hidden-desktop"
     name="mm-list">
     <li id="library-bc" key="library-bc">
         <a v-if="pathBarDirsList.length > 0 && !(isBulkSelecting() || isLoading)"
-            v-tippy
+            v-tippy="{arrow: true}"
             title="{{ trans('MediaManager::messages.backspace') }}"
             @click.stop="goToFolder(0)">
             {{ trans('MediaManager::messages.library') }}
@@ -16,7 +16,7 @@ class="__stack-breadcrumb-mobile is-hidden-desktop"
     <li v-for="(folder, index) in pathBarDirsList" :id="folder + '-bc'" :key="`${index}_${folder}`">
         <p v-if="isLastItemByIndex(index, pathBarDirsList) || isBulkSelecting() || isLoading">@{{ folder }}</p>
         <a v-else
-            v-tippy
+            v-tippy="{arrow: true}"
             title="{{ trans('MediaManager::messages.backspace') }}"
             @click.stop="pathBarDirsList.length > 1 ? goToFolder(index+1) : false">
             @{{ folder }}