Use database store for media library

composer.json

@@ -30,7 +30,7 @@
     },
     "require": {
         "php": "^8.0.2",
-        "winter/storm": "dev-develop as 1.2",
+        "winter/storm": "dev-wip/path-enumerable-trait as 1.2",
         "winter/wn-system-module": "dev-develop",
         "winter/wn-backend-module": "dev-develop",
         "winter/wn-cms-module": "dev-develop",

modules/backend/widgets/MediaManager.php

@@ -11,6 +11,7 @@
 use System\Classes\ImageResizer;
 use System\Classes\MediaLibrary;
 use System\Classes\MediaLibraryItem;
+use System\Models\Parameter;
 
 /**
  * Media Manager widget.
@@ -833,6 +834,29 @@ public function onResizeImage(): array
         ];
     }
 
+    /**
+     * Executed when the media library has not yet been scanned, or the user opts to manually re-scan the media library.
+     *
+     * @return void
+     */
+    public function onScan()
+    {
+        return $this->makePartial('scan-popup');
+    }
+
+    public function onScanExecute()
+    {
+        MediaLibrary::instance()->scan();
+
+        $this->prepareVars();
+
+        return [
+            '#'.$this->getId('item-list') => $this->makePartial('item-list'),
+            '#'.$this->getId('folder-path') => $this->makePartial('folder-path'),
+            '#'.$this->getId('filters') => $this->makePartial('filters')
+        ];
+    }
+
     //
     // Methods for internal use
     //
@@ -859,6 +883,7 @@ protected function prepareVars()
             $this->vars['items'] = $this->findFiles($searchTerm, $filter, ['by' => $sortBy, 'direction' => $sortDirection]);
         }
 
+        $this->vars['isScanned'] = !is_null(Parameter::get('media::scan.last_scanned'));
         $this->vars['currentFolder'] = $folder;
         $this->vars['isRootFolder'] = $folder == self::FOLDER_ROOT;
         $this->vars['pathSegments'] = $this->splitPathToSegments($folder);

modules/backend/widgets/mediamanager/assets/js/mediamanager-browser-min.js

@@ -53,7 +53,8 @@ if(this.options.cropAndInsertButton)this.$el.find('[data-popup-command="crop-and
 this.updateSidebarPreview()
 this.generateThumbnails()
 this.initUploader()
-this.initScroll()}
+this.initScroll()
+if(!this.options.isScanned){this.doScan()}}
 MediaManager.prototype.registerHandlers=function(){this.$el.on('dblclick',this.proxy(this.onNavigate))
 this.$el.on('click.tree-path','ul.tree-path, [data-control="sidebar-labels"]',this.proxy(this.onNavigate))
 this.$el.on('click.command','[data-command]',this.proxy(this.onCommandClick))
@@ -358,6 +359,7 @@ break;case'ArrowLeft':case'ArrowUp':this.selectRelative(false,ev.shiftKey)
 eventHandled=true
 break;}if(eventHandled){ev.preventDefault()
 ev.stopPropagation()}}
+MediaManager.prototype.doScan=function(){$.popup({handler:'onScan'});}
 MediaManager.DEFAULTS={url:window.location,uploadHandler:null,alias:'',deleteEmpty:'Please select files to delete.',deleteConfirm:'Delete the selected file(s)?',moveEmpty:'Please select files to move.',selectSingleImage:'Please select a single image.',selectionNotImage:'The selected item is not an image.',bottomToolbar:false,cropAndInsertButton:false}
 var old=$.fn.mediaManager
 $.fn.mediaManager=function(option){var args=Array.prototype.slice.call(arguments,1),result=undefined

modules/backend/widgets/mediamanager/assets/js/mediamanager.js

@@ -131,6 +131,10 @@
         this.generateThumbnails()
         this.initUploader()
         this.initScroll()
+
+        if (!this.options.isScanned) {
+            this.doScan()
+        }
     }
 
     MediaManager.prototype.registerHandlers = function() {
@@ -1283,6 +1287,16 @@
         }
     }
 
+    //
+    // Media scanning
+    //
+
+    MediaManager.prototype.doScan = function() {
+        $.popup({
+            handler: 'onScan'
+        });
+    }
+
     // MEDIA MANAGER PLUGIN DEFINITION
     // ============================
 

modules/backend/widgets/mediamanager/partials/_body.php

@@ -11,6 +11,7 @@ class="layout"
     data-bottom-toolbar="<?= $this->bottomToolbar ? 'true' : 'false' ?>"
     data-crop-and-insert-button="<?= $this->cropAndInsertButton ? 'true' : 'false' ?>"
     data-read-only="<?= $this->readOnly ? 'true' : 'false'; ?>"
+    data-is-scanned="<?= $isScanned ? 'true' : 'false'; ?>"
     tabindex="0"
 >
 

modules/backend/widgets/mediamanager/partials/_scan-popup.htm

@@ -0,0 +1,31 @@
+<div class="modal-body modal-no-header" id="scanPopup">
+    <div class="progress bar-loading-indicator" id="progressScanning">
+        <div class="progress-bar"></div>
+    </div>
+
+    <div class="loading-indicator-container">
+        <p>&nbsp;</p>
+        <div class="loading-indicator transparent">
+            <div id="executeMessage">
+                Scanning media library...
+            </div>
+            <span></span>
+        </div>
+    </div>
+    <p>&nbsp;</p>
+</div>
+
+<script>
+    $('#scanPopup').on('popupComplete', function() {
+        $.request('onScanExecute', {
+            success: function (data) {
+                console.log(data)
+                console.log('success')
+                $('#scanPopup').popup('hide')
+            },
+            error: function (xhr, errno, error) {
+                console.log(error)
+            },
+        })
+    })
+</script>