From fd3cab2ddc8715546e0f2dc4ded12e4f192aac1e Mon Sep 17 00:00:00 2001
From: ctf0 <muah003@gmail.com>
Date: Sat, 9 Nov 2019 23:20:24 +0200
Subject: [PATCH] v3.5.0

- remove browser caching to give chance to new features
- data are now being paginated and loaded on scroll, check https://github.com/ctf0/Laravel-Media-Manager/issues/104
- fix lots of weird styling
- config, rdme, wiki are updated
---
 README.md                                     |  9 ++-
 logs/v3.4.3.txt                               |  2 -
 logs/v3.5.0.txt                               |  4 ++
 src/Controllers/MediaController.php           | 27 ++++----
 src/Controllers/Modules/GetContent.php        | 30 +++++++-
 src/config/mediaManager.php                   |  7 +-
 .../js/components/globalSearch/panel.vue      | 10 +--
 .../imageEditor/filters/controls.vue          | 25 ++++---
 .../assets/js/components/imageEditor/main.vue | 42 +++++++----
 .../assets/js/components/manager.vue          |  5 +-
 .../js/components/utils/image-lazyLoading.vue |  2 +-
 src/resources/assets/js/modules/computed.js   |  2 +-
 src/resources/assets/js/modules/filtration.js |  5 +-
 src/resources/assets/js/modules/folder.js     |  5 +-
 src/resources/assets/js/modules/form.js       | 42 +++++++++--
 src/resources/assets/js/modules/player.js     |  7 +-
 src/resources/assets/js/modules/selection.js  |  2 +-
 src/resources/assets/js/modules/upload.js     |  5 +-
 src/resources/assets/js/modules/utils.js      |  5 ++
 src/resources/assets/js/modules/watch.js      | 12 ++--
 src/resources/assets/js/webworkers/audio.js   |  2 +-
 src/resources/assets/sass/manager.scss        |  4 +-
 .../assets/sass/modules/global-search.scss    | 69 +++++++++++--------
 src/resources/assets/sass/partials/utils.scss |  4 ++
 src/resources/views/_manager.blade.php        |  3 +
 25 files changed, 219 insertions(+), 111 deletions(-)
 delete mode 100644 logs/v3.4.3.txt
 create mode 100644 logs/v3.5.0.txt

diff --git a/README.md b/README.md
index 3d2cdf0..702899a 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@
 - [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)
 
     ```bash
-    yarn add vue vue-ls vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 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
+    yarn add vue vue-ls vue-infinite-loading vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 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
     ```
 
 - add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.
@@ -98,7 +98,7 @@
         * parentheses ()
         * comma ,
         */
-        'allowed_fileNames_chars' => '\._-\'\s\(\),',
+        'allowed_fileNames_chars' => '\._\-\'\s\(\),',
 
         /*
         * remove any folder special chars except
@@ -185,6 +185,11 @@
         * Locked items table name (defaults to "locked")
         */
         'table_locked' => 'locked',
+
+        /*
+        * loaded chunk amount "pagination"
+        */
+        'pagination_amount' => 50,
     ];
 
     ```
diff --git a/logs/v3.4.3.txt b/logs/v3.4.3.txt
deleted file mode 100644
index 3f3b788..0000000
--- a/logs/v3.4.3.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-- some cleanup
-- more options for upload preview, check https://github.com/ctf0/Laravel-Media-Manager/wiki/Preview-Files-Before-Uploading
\ No newline at end of file
diff --git a/logs/v3.5.0.txt b/logs/v3.5.0.txt
new file mode 100644
index 0000000..ff88b3c
--- /dev/null
+++ b/logs/v3.5.0.txt
@@ -0,0 +1,4 @@
+- remove browser caching to give chance to new features
+- data are now being paginated and loaded on scroll, check https://github.com/ctf0/Laravel-Media-Manager/issues/104
+- fix lots of weird styling
+- config, rdme, wiki are updated
\ No newline at end of file
diff --git a/src/Controllers/MediaController.php b/src/Controllers/MediaController.php
index 638a94b..17cb31d 100755
--- a/src/Controllers/MediaController.php
+++ b/src/Controllers/MediaController.php
@@ -53,11 +53,13 @@ public function __construct()
         $this->unallowedMimes = $config['unallowed_mimes'];
         $this->LMF            = $config['last_modified_format'];
         $this->GFI            = $config['get_folder_info'] ?? true;
+        $this->pag_amount     = $config['pagination_amount'] ?? 50;
 
         $this->storageDisk     = app('filesystem')->disk($this->fileSystem);
         $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');
+        $this->db              = app('db')->connection($config['database_connection'] ?? 'mediamanager')
+                                            ->table($config['table_locked'] ?? 'locked');
 
         $this->storageDisk->addPlugin(new ListWith());
     }
@@ -74,16 +76,17 @@ public function index()
 
     public function globalSearch()
     {
-        return collect($this->getFolderContent('/', true))->reject(function ($item) { // remove unwanted
-            return preg_grep($this->ignoreFiles, [$item['path']]) || $item['type'] == 'dir';
-        })->map(function ($file) {
-            return $file = [
-                'name'                   => $file['basename'],
-                'type'                   => $file['mimetype'],
-                'path'                   => $this->resolveUrl($file['path']),
-                'dir'                    => $file['dirname'] != '' ? $file['dirname'] : '/',
-                'last_modified_formated' => $this->getItemTime($file['timestamp']),
-            ];
-        })->values()->all();
+        return collect($this->getFolderContent('/', true))
+                ->reject(function ($item) { // remove unwanted
+                    return preg_grep($this->ignoreFiles, [$item['path']]) || $item['type'] == 'dir';
+                })->map(function ($file) {
+                    return $file = [
+                        'name'                   => $file['basename'],
+                        'type'                   => $file['mimetype'],
+                        'path'                   => $this->resolveUrl($file['path']),
+                        'dir'                    => $file['dirname'] != '' ? $file['dirname'] : '/',
+                        'last_modified_formated' => $this->getItemTime($file['timestamp']),
+                    ];
+                })->values()->all();
     }
 }
diff --git a/src/Controllers/Modules/GetContent.php b/src/Controllers/Modules/GetContent.php
index c5f23a3..e67f0b6 100644
--- a/src/Controllers/Modules/GetContent.php
+++ b/src/Controllers/Modules/GetContent.php
@@ -3,9 +3,37 @@
 namespace ctf0\MediaManager\Controllers\Moduels;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Collection;
+use Illuminate\Pagination\Paginator;
+use Illuminate\Pagination\LengthAwarePaginator;
 
 trait GetContent
 {
+    /**
+     * helper to paginate array.
+     *
+     * @param [type] $items
+     * @param int    $perPage
+     * @param [type] $page
+     */
+    public function paginate($items, $perPage = 10, $page = null)
+    {
+        $pageName = 'page';
+        $page     = $page ?: (Paginator::resolveCurrentPage($pageName) ?: 1);
+        $items    = $items instanceof Collection ? $items : Collection::make($items);
+
+        return new LengthAwarePaginator(
+            $items->forPage($page, $perPage)->values(),
+            $items->count(),
+            $perPage,
+            $page,
+            [
+                'path'     => Paginator::resolveCurrentPath(),
+                'pageName' => $pageName,
+            ]
+        );
+    }
+
     /**
      * get files in path.
      *
@@ -28,7 +56,7 @@ public function getFiles(Request $request)
             'dirs'   => $this->getDirectoriesList($request->dirs),
             'files'  => [
                 'path'  => $folder,
-                'items' => $this->getData($folder),
+                'items' => $this->paginate($this->getData($folder), $this->pag_amount),
             ],
         ]);
     }
diff --git a/src/config/mediaManager.php b/src/config/mediaManager.php
index f3fede3..a3af21e 100644
--- a/src/config/mediaManager.php
+++ b/src/config/mediaManager.php
@@ -26,7 +26,7 @@
      * parentheses ()
      * comma ,
      */
-    'allowed_fileNames_chars' => '\._-\'\s\(\),',
+    'allowed_fileNames_chars' => '\._\-\'\s\(\),',
 
     /*
      * remove any folder special chars except
@@ -113,4 +113,9 @@
      * Locked items table name (defaults to "locked")
      */
     'table_locked' => 'locked',
+
+    /*
+     * loaded chunk amount "pagination"
+     */
+    'pagination_amount' => 50,
 ];
diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
index 94011ce..c6c9588 100644
--- a/src/resources/assets/js/components/globalSearch/panel.vue
+++ b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -31,7 +31,7 @@
 
             <transition-group name="mm-gs"
                               tag="ul"
-                              class="columns is-multiline">
+                              class="columns is-multiline m-0">
                 <li v-for="(item, i) in filterdList"
                     :key="`${i}-${item.name}`"
                     v-list-rendered="[i, filterdList, orch]"
@@ -206,9 +206,7 @@ export default {
             this.showPanelWatcher(val)
 
             if (val) {
-                this.$nextTick(() => {
-                    this.$refs.search.focus()
-                })
+                this.$nextTick(() => this.$refs.search.focus())
             } else {
                 this.$nextTick(() => {
                     this.noData = false
@@ -220,9 +218,7 @@ export default {
             this.getList()
 
             if (!this.firstRun) {
-                this.$nextTick(() => {
-                    this.firstRun = true
-                })
+                this.$nextTick(() => this.firstRun = true)
             }
         },
         firstRun(val) {
diff --git a/src/resources/assets/js/components/imageEditor/filters/controls.vue b/src/resources/assets/js/components/imageEditor/filters/controls.vue
index 0f870ed..79599b3 100644
--- a/src/resources/assets/js/components/imageEditor/filters/controls.vue
+++ b/src/resources/assets/js/components/imageEditor/filters/controls.vue
@@ -1,25 +1,31 @@
 <template>
-    <div v-tippy="{arrow: true, theme: 'mm'}" :title="filterName">
+    <div v-tippy="{arrow: true, theme: 'mm'}"
+         :title="filterName">
         <section v-if="!isControlable">
             <button v-tippy="{html: '#contentpopup2', interactive: true, trigger: 'click', theme: 'mm'}"
                     :class="{'is-active': isUsed()}"
                     :disabled="processing"
                     class="btn-plain">
-                <span class="icon"><icon :name="processing ? 'spinner' : icon" :pulse="processing"/></span>
+                <span class="icon"><icon :name="processing ? 'spinner' : icon"
+                                         :pulse="processing"/></span>
             </button>
 
             <div id="contentpopup2">
                 <div class="level is-marginless">
                     <transition name="mm-list">
-                        <div v-show="range != 0" class="level-item">
-                            <p class="heading is-marginless link" @click="resetFilter()">
+                        <div v-show="range != 0"
+                             class="level-item">
+                            <p class="heading is-marginless link"
+                               @click="resetFilter()">
                                 <span class="icon"><icon name="times"/></span>
                             </p>
                         </div>
                     </transition>
 
                     <div class="level-item">
-                        <p class="title is-5 is-marginless">{{ range }}</p>
+                        <p class="title is-5 is-marginless">
+                            {{ range }}
+                        </p>
                     </div>
                 </div>
 
@@ -39,7 +45,8 @@
                 class="btn-plain"
                 @click="update()">
             <span class="icon">
-                <icon :name="processing ? 'spinner' : icon" :pulse="processing"/>
+                <icon :name="processing ? 'spinner' : icon"
+                      :pulse="processing"/>
             </span>
         </button>
     </div>
@@ -105,6 +112,7 @@ export default {
                         ((min - val) * 100 / total).toFixed(2)
                     )) + '%'
                     item.style.setProperty('--length', perc)
+
                     return item.classList.add('range-neg')
                 }
                 // 0 > +
@@ -116,6 +124,7 @@ export default {
                         (calc * 100 / total).toFixed(2)
                     ) + '%'
                     item.style.setProperty('--length', perc)
+
                     return item.classList.add('range-pos')
                 }
             }
@@ -134,9 +143,7 @@ export default {
             if (val) {
                 this.wasReset = true
                 this.resetFilter()
-                this.$nextTick(() => {
-                    this.wasReset = false
-                })
+                this.$nextTick(() => this.wasReset = false)
             }
         },
         range(val) {
diff --git a/src/resources/assets/js/components/imageEditor/main.vue b/src/resources/assets/js/components/imageEditor/main.vue
index ac2b294..5f4ed1d 100644
--- a/src/resources/assets/js/components/imageEditor/main.vue
+++ b/src/resources/assets/js/components/imageEditor/main.vue
@@ -1,5 +1,6 @@
 <template>
-    <div ref="editor" class="card __editor">
+    <div ref="editor"
+         class="card __editor">
         <!-- btns -->
         <div class="top">
             <div class="__top-toolbar">
@@ -47,7 +48,8 @@
                             :title="trans('crop_reset_filters')"
                             class="btn-plain"
                             @click="resetFilters()">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'"
+                                                 :pulse="processing"/></span>
                     </button>
                 </div>
             </div>
@@ -64,12 +66,16 @@
 
             <div class="__cropper">
                 <!-- img -->
-                <figure :style="{'opacity': processing ? 0 : 1}" class="image">
-                    <img id="cropper" :src="url" crossOrigin>
+                <figure :style="{'opacity': processing ? 0 : 1}"
+                        class="image">
+                    <img id="cropper"
+                         :src="url"
+                         crossOrigin>
                 </figure>
 
                 <!-- loading -->
-                <div v-show="processing" class="__loader">
+                <div v-show="processing"
+                     class="__loader">
                     <div class="ball-grid-pulse">
                         <div/><div/><div/><div/><div/><div/><div/><div/><div/>
                     </div>
@@ -84,8 +90,10 @@
                                :zoom="{min: 1, max: 15}"
                                class="__diff is-draggable"
                                @movment="onDiffDrag">
-                    <icon slot="icon-left" name="arrow-left"/>
-                    <icon slot="icon-right" name="arrow-right"/>
+                    <icon slot="icon-left"
+                          name="arrow-left"/>
+                    <icon slot="icon-right"
+                          name="arrow-right"/>
                 </image-compare>
 
                 <!-- presets -->
@@ -97,14 +105,16 @@
                          class="__caman-presets"/>
 
                 <!-- operations -->
-                <div :style="hiddenBtns" class="__bottom-toolbar">
+                <div :style="hiddenBtns"
+                     class="__bottom-toolbar">
                     <!-- reset everything -->
                     <button v-tippy="{arrow: true, theme: 'mm'}"
                             :disabled="processing || !hasChanged"
                             :title="trans('crop_reset')"
                             class="btn-plain"
                             @click="operations('reset')">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'"
+                                                 :pulse="processing"/></span>
                     </button>
 
                     <!-- clear -->
@@ -113,7 +123,8 @@
                             :title="trans('clear')"
                             class="btn-plain"
                             @click="operations('clear')">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'ban'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'ban'"
+                                                 :pulse="processing"/></span>
                     </button>
 
                     <!-- apply -->
@@ -122,7 +133,8 @@
                             :title="trans('crop_apply')"
                             class="btn-plain"
                             @click="applyChanges()">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'check'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'check'"
+                                                 :pulse="processing"/></span>
                     </button>
                 </div>
             </div>
@@ -291,9 +303,11 @@ export default {
                     break
                 case 'zoom-in':
                     cropper.zoom(0.1)
+
                     return this.hasChanged = true
                 case 'zoom-out':
                     cropper.zoom(-0.1)
+
                     return this.hasChanged = true
                 case 'rotate-left':
                     cropper.rotate(-this.rotation)
@@ -348,9 +362,7 @@ export default {
                 cropper.setDragMode(this.dragMode) // active btn
                 this.resetFilters()
 
-                this.$nextTick(() => {
-                    this.reset = false
-                })
+                this.$nextTick(() => this.reset = false)
             })
         },
         clearSelection() {
@@ -429,7 +441,7 @@ export default {
             }).toDataURL(type)
 
             // reset the auto crop selection we made
-            this.$nextTick(this.clearSelection)
+            this.$nextTick(() => this.clearSelection())
 
             return url
         },
diff --git a/src/resources/assets/js/components/manager.vue b/src/resources/assets/js/components/manager.vue
index 56f4db6..f13ad8f 100644
--- a/src/resources/assets/js/components/manager.vue
+++ b/src/resources/assets/js/components/manager.vue
@@ -36,7 +36,8 @@ export default {
         usageIntroBtn: require('./usageIntro/button.vue').default,
         usageIntroPanel: require('./usageIntro/panel.vue').default,
         videoDimension: require('./utils/video-dim.vue').default,
-        uploadPreview: require('./utils/upload-preview.vue').default
+        uploadPreview: require('./utils/upload-preview.vue').default,
+        InfiniteLoading: require('vue-infinite-loading').default
     },
     name: 'media-manager',
     mixins: [
@@ -175,7 +176,7 @@ export default {
 
             if (this.selectedFileIs('video') || this.selectedFileIs('audio')) {
                 this.destroyPlyr()
-                this.$nextTick(this.initPlyr)
+                this.$nextTick(() => this.initPlyr())
             }
 
             if (!this.introIsOn) {
diff --git a/src/resources/assets/js/components/utils/image-lazyLoading.vue b/src/resources/assets/js/components/utils/image-lazyLoading.vue
index e6d1180..94a077f 100644
--- a/src/resources/assets/js/components/utils/image-lazyLoading.vue
+++ b/src/resources/assets/js/components/utils/image-lazyLoading.vue
@@ -41,7 +41,7 @@ export default {
                 if (val) {
                     this.fetchImg().then((img) => {
                         this.src = img
-                        this.$nextTick(this.sendDimensionsToParent)
+                        this.$nextTick(() => this.sendDimensionsToParent())
                     })
                 }
             }
diff --git a/src/resources/assets/js/modules/computed.js b/src/resources/assets/js/modules/computed.js
index 6ed9954..6907483 100644
--- a/src/resources/assets/js/modules/computed.js
+++ b/src/resources/assets/js/modules/computed.js
@@ -131,7 +131,7 @@ export default {
                 }
             },
             watch: ['selectedFile'],
-            default: 'data:image/gif;base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+            default: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
             lazy: true
         }
     }
diff --git a/src/resources/assets/js/modules/filtration.js b/src/resources/assets/js/modules/filtration.js
index 237c652..35b94f3 100644
--- a/src/resources/assets/js/modules/filtration.js
+++ b/src/resources/assets/js/modules/filtration.js
@@ -77,9 +77,6 @@ export default {
 
             if (!this.isBulkSelecting()) {
                 this.resetInput(['selectedFile', 'currentFileIndex'])
-            }
-
-            if (!this.isBulkSelecting()) {
                 this.selectFirst()
             }
 
@@ -87,7 +84,7 @@ export default {
                 this.updateSearchCount()
             }
 
-            this.$nextTick(EventHub.fire('start-img-observing'))
+            this.$nextTick(() => EventHub.fire('start-img-observing'))
         },
 
         // search
diff --git a/src/resources/assets/js/modules/folder.js b/src/resources/assets/js/modules/folder.js
index 80fec2a..87d29c4 100644
--- a/src/resources/assets/js/modules/folder.js
+++ b/src/resources/assets/js/modules/folder.js
@@ -20,9 +20,8 @@ export default {
                 this.folders = folders.splice(0, index)
 
                 this.$nextTick(() => {
-                    this.getFiles(this.folders, prev_folder_name).then(() => {
-                        this.updatePageUrl()
-                    })
+                    this.getFiles(this.folders, prev_folder_name)
+                        .then(() => this.updatePageUrl())
                 })
             }
         },
diff --git a/src/resources/assets/js/modules/form.js b/src/resources/assets/js/modules/form.js
index 820fa79..bd49624 100644
--- a/src/resources/assets/js/modules/form.js
+++ b/src/resources/assets/js/modules/form.js
@@ -27,10 +27,14 @@ export default {
                 }
 
                 // return data
-                this.files = data.files
+                this.files = {
+                    path: data.files.path,
+                    items: data.files.items.data,
+                    next: data.files.items.next_page_url
+                }
                 this.lockedList = data.locked
                 this.directories = data.dirs
-                this.filesListCheck(folders, prev_folder, prev_file)
+                this.filesListCheck(prev_folder, prev_file)
 
             }).catch((err) => {
                 console.error(err)
@@ -40,6 +44,37 @@ export default {
                 this.ajaxError()
             })
         },
+        loadPaginatedFiles($state) {
+            let folders = this.folders
+
+            if (folders) {
+                folders = this.clearDblSlash(`/${folders.join('/')}`)
+            }
+
+            return axios.post(this.files.next, {
+                folder: folders,
+                dirs: this.folders
+            }).then(({data}) => {
+                // folder no longer exist
+                if (data.error) {
+                    return this.showNotif(data.error, 'danger')
+                }
+
+                let next_page = data.files.items.next_page_url
+
+                // add extra items
+                this.files.items = this.files.items.concat(data.files.items.data)
+                this.files.next = next_page
+
+                next_page
+                    ? $state.loaded()
+                    : $state.complete()
+            }).catch((err) => {
+                console.error(err)
+                this.ajaxError()
+            })
+        },
+
         updateDirsList() {
             axios.post(this.routes.dirs, {
                 folder_location: this.folders
@@ -51,7 +86,7 @@ export default {
             })
         },
 
-        filesListCheck(folders, prev_folder, prev_file) {
+        filesListCheck(prev_folder, prev_file) {
             let files = this.files.items
 
             if (this.hideExt.length) {
@@ -344,7 +379,6 @@ export default {
         },
         updateFolderCount(destination, count, weight = 0) {
             if (destination !== '../') {
-
                 if (destination.includes('/')) {
                     // get the first dir in the path
                     // because this is what the user is currently viewing
diff --git a/src/resources/assets/js/modules/player.js b/src/resources/assets/js/modules/player.js
index 0f7bfd6..4b03d88 100644
--- a/src/resources/assets/js/modules/player.js
+++ b/src/resources/assets/js/modules/player.js
@@ -57,7 +57,10 @@ export default {
             }
         },
         autoPlay() {
-            if (this.filterNameIs('audio') || this.filterNameIs('video')) {
+            if (
+                (this.filterNameIs('audio') || this.filterNameIs('video')) &&
+                this.player.playing
+            ) {
                 this.player.item.on('ended', () => {
                     // stop at the end of list
                     if (this.currentFileIndex < this.allItemsCount - 1) {
@@ -89,7 +92,7 @@ export default {
                                     base64String += String.fromCharCode(value)
                                 }
 
-                                val.picture = `data:${format};base64, ${window.btoa(base64String)}`
+                                val.picture = `data:${format};base64,${window.btoa(base64String)}`
                             }
 
                             return resolve(omitBy(val, isObject))
diff --git a/src/resources/assets/js/modules/selection.js b/src/resources/assets/js/modules/selection.js
index ac671ee..da12a3b 100644
--- a/src/resources/assets/js/modules/selection.js
+++ b/src/resources/assets/js/modules/selection.js
@@ -2,7 +2,7 @@ export default {
     methods: {
         /*                Item                */
         selectFirst() {
-            this.$nextTick(this.scrollToFile(this.getElementByIndex(0)))
+            this.$nextTick(() => this.scrollToFile(this.getElementByIndex(0)))
         },
         isSelected(file) {
             return this.selectedFile == file
diff --git a/src/resources/assets/js/modules/upload.js b/src/resources/assets/js/modules/upload.js
index 672d8dc..848604c 100644
--- a/src/resources/assets/js/modules/upload.js
+++ b/src/resources/assets/js/modules/upload.js
@@ -281,10 +281,7 @@ export default {
                     }
 
                     this.resetInput('urlToUpload')
-                    this.$nextTick(() => {
-                        this.$refs.save_link_modal_input.focus()
-                    })
-
+                    this.$nextTick(() => this.$refs.save_link_modal_input.focus())
                     this.showNotif(`${this.trans('save_success')} "${data.message}"`)
                     this.getFiles(this.folders, null, data.message)
 
diff --git a/src/resources/assets/js/modules/utils.js b/src/resources/assets/js/modules/utils.js
index 9f8f8da..c40aac1 100644
--- a/src/resources/assets/js/modules/utils.js
+++ b/src/resources/assets/js/modules/utils.js
@@ -91,6 +91,7 @@ export default {
                 }
 
                 this.resetInput('activeModal')
+
                 return EventHub.fire('modal-hide')
             }
 
@@ -126,6 +127,7 @@ export default {
             if (s == 'show') {
                 this.infoSidebar = false
                 this.toggleLoader('no_files', true)
+
                 return EventHub.fire('no-files-show')
             }
 
@@ -135,6 +137,7 @@ export default {
         noSearch(s) {
             if (s == 'show') {
                 this.toggleLoader('no_search', true)
+
                 return EventHub.fire('no-search-show')
             }
 
@@ -144,6 +147,7 @@ export default {
         loadingFiles(s) {
             if (s == 'show') {
                 this.toggleLoader('loading_files', true)
+
                 return EventHub.fire('loading-files-show')
             }
 
@@ -154,6 +158,7 @@ export default {
             if (s) {
                 this.infoSidebar = false
                 this.toggleLoader('ajax_error', true)
+
                 return EventHub.fire('ajax-error-show')
             }
 
diff --git a/src/resources/assets/js/modules/watch.js b/src/resources/assets/js/modules/watch.js
index 310287d..71ab064 100644
--- a/src/resources/assets/js/modules/watch.js
+++ b/src/resources/assets/js/modules/watch.js
@@ -15,7 +15,7 @@ export default {
                 }
 
                 if (this.checkForFolders) {
-                    this.$nextTick(this.updateMoveList)
+                    this.$nextTick(() => this.updateMoveList())
                 }
 
                 return this.updateLs({'selectedFileName': val.name})
@@ -102,7 +102,7 @@ export default {
 
             // because the files gets removed & readded to the dom
             // which will put the images back to its init state "no-preview"
-            this.$nextTick(EventHub.fire('start-search-observing'))
+            this.$nextTick(() => EventHub.fire('start-search-observing'))
         },
         searchItemsCount(val) {
             if (this.allItemsCount == undefined || val == this.allItemsCount) {
@@ -130,9 +130,7 @@ export default {
             deep: true,
             immediate: true,
             handler(val) {
-                this.$nextTick(() => {
-                    setTimeout(this.scrollOnLoad, 250)
-                })
+                this.$nextTick(() => setTimeout(this.scrollOnLoad, 250))
             }
         },
         no_files(val) {
@@ -167,9 +165,7 @@ export default {
             }
 
             if (ref) {
-                this.$nextTick(() => {
-                    return this.$refs[ref].focus()
-                })
+                this.$nextTick(() => this.$refs[ref].focus())
             }
         },
         player: 'autoPlay'
diff --git a/src/resources/assets/js/webworkers/audio.js b/src/resources/assets/js/webworkers/audio.js
index 66e5eb3..c7a02d0 100644
--- a/src/resources/assets/js/webworkers/audio.js
+++ b/src/resources/assets/js/webworkers/audio.js
@@ -41,7 +41,7 @@ export function loadAudioImageWithWorker(url) {
                             base64String += String.fromCharCode(value)
                         }
 
-                        val.picture = `data:${format};base64, ${window.btoa(base64String)}`
+                        val.picture = `data:${format};base64,${window.btoa(base64String)}`
                     }
 
                     resolve(omitBy(val, isObject))
diff --git a/src/resources/assets/sass/manager.scss b/src/resources/assets/sass/manager.scss
index e333186..59977bb 100644
--- a/src/resources/assets/sass/manager.scss
+++ b/src/resources/assets/sass/manager.scss
@@ -457,8 +457,7 @@
 .__stack-files {
     bottom: 0;
     left: 20%;
-    overflow: scroll;
-    padding: 0.75rem;
+    overflow-y: scroll;
     position: absolute;
     right: 0;
     top: 0;
@@ -473,6 +472,7 @@
 .__files-boxs {
     display: flex;
     flex-wrap: wrap;
+    padding: 0.75rem;
     list-style: none;
     transition: height $anim-time ease-out;
     user-select: none;
diff --git a/src/resources/assets/sass/modules/global-search.scss b/src/resources/assets/sass/modules/global-search.scss
index 247933b..8be2c16 100644
--- a/src/resources/assets/sass/modules/global-search.scss
+++ b/src/resources/assets/sass/modules/global-search.scss
@@ -1,10 +1,15 @@
 @import '../partials/vars';
 @import '../partials/panels';
 
+#gsearch-panel {
+    overflow-x: auto;
+    overflow-y: scroll;
+}
+
 .glbl_search_panel {
-    text-align: center;
-    color: darken($active_theme, 50%);
     background-color: $active_theme;
+    color: darken($active_theme, 50%);
+    text-align: center;
 
     .svg-prev-icon {
         margin: 4rem 0;
@@ -13,6 +18,10 @@
 
 .modal {
     align-items: start;
+
+    .modal-content {
+        padding-bottom: 3rem; // add some space to breath
+    }
 }
 
 .column {
@@ -20,52 +29,54 @@
 }
 
 .search-input {
+    color: $white;
+    padding: 0 0.75rem;
     position: sticky;
-    z-index: 1;
     top: 0;
-    width: 100%;
-    padding: 0 0.75rem;
-    transition: all 1s ease 0.5s; // delay = input bounce
     transform: translate(25%, 35vh);
-    color: $white;
+    transition: all 1s ease 0.5s; // delay = input bounce
+    width: 100%;
+    z-index: 1;
 
     // animate linear-gradient
     &::before {
+        background:
+            linear-gradient(
+                to bottom,
+                $dark 0,
+                rgba($dark, 0.5) 65%,
+                transparent 100%
+            );
+        content: '';
+        height: 100%;
+        left: 0;
+        opacity: 0;
         position: absolute;
         top: 0;
-        width: 100%;
-        height: 100%;
-        content: '';
         transition: all 1s ease 1s;
-        opacity: 0;
-        background: linear-gradient(
-            to bottom,
-            $dark 0,
-            rgba($dark, 0.5) 65%,
-            transparent 100%
-        );
+        width: 100%;
     }
 
     section {
-        position: relative;
-        display: flex;
         align-items: center;
-        width: 75%;
+        display: flex;
         margin: 0 auto;
+        position: relative;
+        width: 75%;
     }
 
     input {
-        font-size: 5rem;
-        line-height: 2.5;
-        transition: all 1s ease 0.5s;
-        color: $white;
-        border: none;
         background-color: transparent;
         background-image: $image;
-        background-repeat: no-repeat;
         background-position: 0 60%;
+        background-repeat: no-repeat;
         background-size: 100% 10%;
+        border: none;
         caret-color: $white;
+        color: $white;
+        font-size: 5rem;
+        line-height: 2.5;
+        transition: all 1s ease 0.5s;
 
         &::placeholder {
             color: rgba($white, 0.5);
@@ -86,8 +97,8 @@
         }
 
         .heading {
-            font-weight: bold;
             color: $white;
+            font-weight: bold;
         }
     }
 
@@ -117,9 +128,9 @@
 }
 
 .card {
-    overflow: hidden;
-    min-width: unset;
     border-radius: 4px;
+    min-width: unset;
+    overflow: hidden;
 }
 
 .icon {
diff --git a/src/resources/assets/sass/partials/utils.scss b/src/resources/assets/sass/partials/utils.scss
index 60a40ad..df70629 100644
--- a/src/resources/assets/sass/partials/utils.scss
+++ b/src/resources/assets/sass/partials/utils.scss
@@ -2,6 +2,10 @@
     width: 100%;
 }
 
+.m-0 {
+    margin: 0 !important;
+}
+
 .p-l-0 {
     padding-left: 0 !important;
 }
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index c179099..d3c0c6c 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -670,6 +670,9 @@ class="is-hidden"
                             </v-touch>
                         </li>
                     </ul>
+                    <infinite-loading v-if="files.next" spinner="waveDots" @infinite="loadPaginatedFiles">
+                        <span slot="no-more"></span>
+                    </infinite-loading>
                 </v-touch>
 
                 {{-- ====================================================================== --}}