v3.7.0

.github/ISSUE_TEMPLATE/bug_report.md

@@ -10,7 +10,7 @@ assignees: ''
 <!--- For Demo Issues, Plz Open It On The Demo Repo -->
 <!--- you can put ur answers in place of the 3 dots ... -->
 
-> What version of Laravel are you using? (nothing lower than v5.4).
+> What version of Laravel are you using? (nothing lower than v6).
 
 ...
 

README.md

@@ -1,6 +1,7 @@
 <h1 align="center">
     Laravel Media Manager
     <br>
+    <img src="https://img.shields.io/badge/Laravel-v6+-red" alt="Browser Status"/>
     <a href="https://packagist.org/packages/ctf0/media-manager"><img src="https://img.shields.io/packagist/v/ctf0/media-manager.svg" alt="Latest Stable Version"/></a>
     <a href="https://packagist.org/packages/ctf0/media-manager"><img src="https://img.shields.io/packagist/dt/ctf0/media-manager.svg" alt="Total Downloads"/></a>
     <br>
@@ -24,14 +25,6 @@
 
 - `composer require ctf0/media-manager`
 
-- (Laravel < 5.5) add the service provider to `config/app.php`
-
-    ```php
-    'providers' => [
-        ctf0\MediaManager\MediaManagerServiceProvider::class,
-    ]
-    ```
-
 - publish the package assets with
 
     `php artisan vendor:publish --provider="ctf0\MediaManager\MediaManagerServiceProvider"`
@@ -43,7 +36,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
     ```
 
@@ -54,10 +47,7 @@
     // app.js
     window.Vue = require('vue')
 
-    // Laravel < v5.7
-    require('../vendor/MediaManager/js/manager')
-    // Laravel > v5.7
-    // require('../assets/vendor/MediaManager/js/manager')
+    require('../assets/vendor/MediaManager/js/manager')
 
     new Vue({
         el: '#app'

composer.json

@@ -19,7 +19,7 @@
     ],
     "require": {
         "php": "~7.0",
-        "illuminate/support": "^5.4 || ^6.0 || ^7.0",
+        "illuminate/support": "^6.0 || ^7.0",
         "maennchen/zipstream-php": "~1.0",
         "ctf0/package-changelog": "*",
         "jhofm/flysystem-iterator": "^2.2"

logs/v3.7.0.txt

@@ -0,0 +1,9 @@
+- add voice search, plz test and reply back
+- add new npm-dep "annyang"
+- fix not able to scroll the files container on touch screen
+- fix timestamp issue for cloud disks "https://github.com/ctf0/Laravel-Media-Manager/issues/143"
+- fix url update "https://github.com/ctf0/Laravel-Media-Manager/issues/142"
+- make sure all tooltips have the same styles
+- hide folder info if 'get_folder_info' is false
+- stop supporting laravel v5
+- some cleanups

src/App/Controllers/MediaController.php

@@ -61,8 +61,8 @@ public function __construct()
         $this->storageDiskInfo = app('config')->get("filesystems.disks.{$this->fileSystem}");
         $this->baseUrl         = $this->storageDisk->url('/');
         $this->db              = app('db')
-                                    ->connection($config['database_connection'] ?? 'mediamanager')
-                                    ->table($config['table_locked'] ?? 'locked');
+                                    ->connection($config['database_connection'])
+                                    ->table($config['table_locked']);
 
         $this->storageDisk->addPlugin(new IteratorPlugin());
     }

src/App/Controllers/Modules/GetContent.php

@@ -47,24 +47,20 @@ 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) {
             $path = $folder['path'];
-            $time = $folder['timestamp'];
-
-            if ($this->GFI) {
-                $info = $this->getFolderInfoFromList($this->getFolderContent($path, true));
-            }
+            $time = $folder['timestamp'] ?? null;
+            $info = $this->GFI ? $this->getFolderInfoFromList($this->getFolderContent($path, true)) : [];
 
             $list[] = [
                 'name'                   => $folder['basename'],
                 'type'                   => 'folder',
+                'size'                   => $info['size'] ?? 0,
+                'count'                  => $info['count'] ?? 0,
                 'path'                   => $this->resolveUrl($path),
                 'storage_path'           => $path,
-                'size'                   => isset($info) ? $info['size'] : 0,
-                'count'                  => isset($info) ? $info['count'] : 0,
                 'last_modified'          => $time,
                 'last_modified_formated' => $this->getItemTime($time),
             ];
@@ -73,15 +69,15 @@ protected function getData($dir)
         // files
         foreach ($storageFiles as $file) {
             $path = $file['path'];
-            $time = $file['timestamp'];
+            $time = $file['timestamp'] ?? null;
 
             $list[] = [
                 'name'                   => $file['basename'],
                 'type'                   => $file['mimetype'],
-                'path'                   => $this->resolveUrl($path),
-                'storage_path'           => $path,
                 'size'                   => $file['size'],
                 'visibility'             => $file['visibility'],
+                'path'                   => $this->resolveUrl($path),
+                'storage_path'           => $path,
                 'last_modified'          => $time,
                 'last_modified_formated' => $this->getItemTime($time),
             ];

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/config/mediaManager.php

@@ -35,6 +35,7 @@
      * white space
      *
      * to add & nest folders in one go add '\/'
+     * avoid using '#' as browser interpret it as an anchor
      */
     'allowed_folderNames_chars' => '_\-\s',
 

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: [
@@ -172,9 +173,11 @@ export default {
         window.addEventListener('popstate', this.urlNavigation)
         document.addEventListener('keydown', this.shortCuts)
     },
+    beforeMount() {
+        this.eventsListener()
+    },
     mounted() {
         this.init()
-        this.eventsListener()
     },
     updated: debounce(function() {
         if (this.firstRun) {
@@ -200,40 +203,12 @@ export default {
         this.noScroll('remove')
     },
     methods: {
-        init() {
-            // small screen stuff
-            if (this.checkForSmallScreen()) {
-                this.applySmallScreen()
-            }
-
+        eventsListener() {
             // restrictions
             EventHub.listen('external_modal_resrtict', (data) => {
                 return this.restrictions = Object.assign(this.restrictions, data)
             })
 
-            if (this.restrictModeIsOn) {
-                this.clearUrlQuery()
-                this.resolveRestrictFolders()
-
-                return this.getFiles().then(this.afterInit())
-            }
-
-            // normal
-            this.getPathFromUrl()
-                    .then(this.preSaved())
-                    .then(this.getFiles(null, this.selectedFile))
-                    .then(this.updatePageUrl())
-                    .then(this.afterInit())
-
-        },
-        afterInit() {
-            this.fileUpload()
-            this.$nextTick(() => {
-                this.onResize()
-                this.firstRun = true
-            })
-        },
-        eventsListener() {
             // check if image was edited
             EventHub.listen('image-edited', (msg) => {
                 this.imageWasEdited = true
@@ -273,6 +248,36 @@ export default {
             EventHub.listen('dir-bookmarks-update', (data) => this.dirBookmarks = data)
         },
 
+        init() {
+            // small screen stuff
+            if (this.checkForSmallScreen()) {
+                this.applySmallScreen()
+            }
+
+            // restrictions
+            if (this.restrictModeIsOn) {
+                this.clearUrlQuery()
+                this.resolveRestrictFolders()
+
+                return this.getFiles().then(this.afterInit())
+            }
+
+            // normal
+            this.getPathFromUrl()
+                    .then(this.preSaved())
+                    .then(this.getFiles(null, this.selectedFile))
+                    .then(this.updatePageUrl())
+                    .then(this.afterInit())
+
+        },
+        afterInit() {
+            this.fileUpload()
+            this.$nextTick(() => {
+                this.onResize()
+                this.firstRun = true
+            })
+        },
+
         shortCuts(e) {
             let key = keycode(e)
 

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"