some updates

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
     ```
 

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) {

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;
     }
 
     /**

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)

src/resources/assets/js/components/globalSearch/image.vue

@@ -12,7 +12,7 @@
 
 <style scoped>
     img {
-        background-color: black;
+        background-color: $black;
     }
 
 </style>

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>

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: [

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>

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"

src/resources/assets/js/components/usageIntro/overlay.vue → 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>

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}
         }
     }

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'

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('/'))
                         : []
                 }
 

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 {

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;

src/resources/assets/sass/packages/goo.scss

@@ -33,7 +33,7 @@
         z-index: -1;
 
         .btn-plain {
-            color: white;
+            color: $white;
             height: 100%;
             width: 100%;
 

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',
+    ],
 ];