Add support for videos, audios and documents in media manager

Signed-off-by: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com>

app/admin/formwidgets/MediaFinder.php

@@ -11,7 +11,9 @@
 use Igniter\Flame\Exception\ApplicationException;
 use Igniter\Flame\Exception\SystemException;
 use Illuminate\Support\Collection;
+use Main\classes\MediaItem;
 use Main\Classes\MediaLibrary;
+use System\Models\Settings_model;
 
 /**
  * Media Finder
@@ -39,7 +41,7 @@ class MediaFinder extends BaseFormWidget
     public $prompt = 'lang:admin::lang.text_empty';
 
     /**
-     * @var string Display mode for the selection. Values: picker, inline.
+     * @var string Display mode. Values: grid, inline.
      */
     public $mode = 'grid';
 
@@ -146,6 +148,28 @@ public function getMediaThumb($media)
         return MediaLibrary::instance()->getMediaThumb($path, $this->thumbOptions);
     }
 
+    public function getMediaFileType($media)
+    {
+        $path = trim($media, '/');
+        if ($media instanceof Media)
+            $path = $media->getFilename();
+
+        $extension = pathinfo($path, PATHINFO_EXTENSION);
+        if (!strlen($extension))
+            return MediaItem::FILE_TYPE_DOCUMENT;
+
+        if (in_array($extension, Settings_model::imageExtensions()))
+            return MediaItem::FILE_TYPE_IMAGE;
+
+        if (in_array($extension, Settings_model::audioExtensions()))
+            return MediaItem::FILE_TYPE_AUDIO;
+
+        if (in_array($extension, Settings_model::videoExtensions()))
+            return MediaItem::FILE_TYPE_VIDEO;
+
+        return MediaItem::FILE_TYPE_DOCUMENT;
+    }
+
     public function onLoadAttachmentConfig()
     {
         if (!$this->useAttachment || !$mediaId = post('media_id'))

app/admin/formwidgets/mediafinder/assets/css/mediafinder.css

@@ -19,13 +19,19 @@
 	height: 100%;
 }
 .media-finder .grid img {
-	transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
+
+.media-finder .grid .media-icon {
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+
 .media-finder .grid .blank-cover {
-	position: relative;
-	overflow: hidden;
-	padding-top: 100%;
-	display: block;
+  position: relative;
+  overflow: hidden;
+  padding-top: 100%;
+  display: block;
 }
 .media-finder .grid .blank-cover i {
 	position: absolute;

app/admin/formwidgets/mediafinder/assets/js/mediafinder.js

@@ -184,11 +184,13 @@
         var $findIdentifier = $template.find('[data-find-identifier]'),
             $findName = $template.find('[data-find-name]'),
             $findImage = $template.find('[data-find-image]'),
+            $findFile = $template.find('[data-find-file]'),
             $findValue = $template.find('[data-find-value]')
 
         if ($findIdentifier.length) $findIdentifier.val(item.identifier)
         if ($findName.length) $findName.text(item.path)
         if ($findImage.length) $findImage.attr('src', item.publicUrl)
+        if ($findFile.length) $findFile.removeClass('fa-file').addClass('fa-'+item.fileType)
         if ($findValue.length) $findValue.val(item.path)
     }
 

app/admin/formwidgets/mediafinder/image_grid.blade.php

@@ -18,10 +18,21 @@
                 </div>
                 <a class="{{ $useAttachment ? 'find-config-button' : '' }}">
                     <div class="img-cover">
-                        <img
-                            data-find-image
-                            src="{{ $this->getMediaThumb($mediaItem) }}"
-                            class="img-responsive">
+                        @if(($mediaFileType = $this->getMediaFileType($mediaItem)) === 'image')
+                            <img
+                                data-find-image
+                                src="{{ $this->getMediaThumb($mediaItem) }}"
+                                class="img-responsive"
+                                alt=""
+                            />
+                        @else
+                            <div class="media-icon">
+                                <i
+                                    data-find-file
+                                    class="fa fa-{{ $mediaFileType }} fa-3x text-muted mb-2"
+                                ></i>
+                            </div>
+                        @endif
                     </div>
                 </a>
             @endif

app/admin/formwidgets/mediafinder/mediafinder.blade.php

@@ -1,6 +1,6 @@
 <div
     id="{{ $this->getId() }}"
-    class="mediafinder {{ $mode }}-mode{{ $isMulti ? ' is-multi' : '' }}{{ $mode == 'picker' ? ' is-picker' : '' }}{{ $value ? ' is-populated' : '' }}"
+    class="mediafinder {{ $mode }}-mode{{ $isMulti ? ' is-multi' : '' }}{{ $value ? ' is-populated' : '' }}"
     data-control="mediafinder"
     data-alias="{{ $this->alias }}"
     data-mode="{{ $mode }}"

app/main/classes/MediaItem.php

@@ -4,17 +4,16 @@
 
 use Carbon\Carbon;
 use Igniter\Flame\Support\Facades\File;
-use Illuminate\Support\Facades\Config;
+use System\Models\Settings_model;
 
 class MediaItem
 {
     const TYPE_FILE = 'file';
-
     const TYPE_FOLDER = 'folder';
-
     const FILE_TYPE_IMAGE = 'image';
-
     const FILE_TYPE_DOCUMENT = 'document';
+    const FILE_TYPE_VIDEO = 'video';
+    const FILE_TYPE_AUDIO = 'audio';
 
     /**
      * @var string The item basename.
@@ -37,21 +36,38 @@ class MediaItem
     public $lastModified;
 
     /**
-     * @var string The item type.
+     * @var string The item type. ex. file or folder
      */
     public $type;
 
+    /**
+     * @var string The item file type. ex. image, audio, video
+     */
+    public $fileType;
+
     /**
      * @var string Specifies the public URL of the item.
      */
     public $publicUrl;
 
     /**
-     * @var array Contains a default list of image files and directories to ignore.
-     * Override with config: cms.storage.media.imageExtensions
+     * @var array Contains a default list of image files.
+     * Override with config: system.assets.media.imageExtensions
      */
     protected static $imageExtensions;
 
+    /**
+     * @var array Contains a default list of video files.
+     * Override with config: system.assets.media.videoExtensions
+     */
+    protected static $videoExtensions;
+
+    /**
+     * @var array Contains a default list of audio files.
+     * Override with config: system.assets.media.audioExtensions
+     */
+    protected static $audioExtensions;
+
     /**
      * @param string $path
      * @param int $size
@@ -67,6 +83,7 @@ public function __construct($path, $size, $lastModified, $type, $publicUrl)
         $this->lastModified = $lastModified;
         $this->type = $type;
         $this->publicUrl = $publicUrl;
+        $this->fileType = $this->getFileType();
     }
 
     /**
@@ -83,18 +100,27 @@ public function getFileType()
             return null;
         }
 
-        if (!self::$imageExtensions) {
-            self::$imageExtensions = Config::get('system.assets.media.imageExtensions', ['jpg', 'jpeg', 'png']);
-        }
+        if (!self::$imageExtensions)
+            self::$imageExtensions = array_map('strtolower', Settings_model::imageExtensions());
+
+        if (!self::$audioExtensions)
+            self::$audioExtensions = array_map('strtolower', Settings_model::audioExtensions());
+
+        if (!self::$videoExtensions)
+            self::$videoExtensions = array_map('strtolower', Settings_model::videoExtensions());
 
         $extension = pathinfo($this->path, PATHINFO_EXTENSION);
-        if (!strlen($extension)) {
+        if (!strlen($extension))
             return self::FILE_TYPE_DOCUMENT;
-        }
 
-        if (in_array($extension, self::$imageExtensions)) {
+        if (in_array($extension, self::$imageExtensions))
             return self::FILE_TYPE_IMAGE;
-        }
+
+        if (in_array($extension, self::$audioExtensions))
+            return self::FILE_TYPE_AUDIO;
+
+        if (in_array($extension, self::$videoExtensions))
+            return self::FILE_TYPE_VIDEO;
 
         return self::FILE_TYPE_DOCUMENT;
     }

app/main/classes/MediaLibrary.php

@@ -10,6 +10,7 @@
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Config;
 use Illuminate\Support\Facades\Storage;
+use System\Models\Settings_model;
 
 /**
  * MediaLibrary Class
@@ -32,8 +33,6 @@ class MediaLibrary
 
     protected $storageFolderNameLength;
 
-    protected $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg', 'ico', 'webp'];
-
     protected $config = [];
 
     public function initialize()
@@ -117,8 +116,11 @@ public function listFolders($path = null, array $exclude = [], $recursive = FALS
         return $result;
     }
 
-    public function fetchFiles($path, $sortBy = [], $search = null)
+    public function fetchFiles($path, $sortBy = [], $options = null)
     {
+        if (is_string($options))
+            $options = ['search' => $options, 'filter' => 'all'];
+
         $path = $this->validatePath($path);
 
         $fullPath = $this->getMediaPath($path);
@@ -127,7 +129,9 @@ public function fetchFiles($path, $sortBy = [], $search = null)
 
         $this->sortFiles($files, $sortBy);
 
-        $this->searchFiles($files, $search);
+        $this->searchFiles($files, array_get($options, 'search'));
+
+        $this->filterFiles($files, array_get($options, 'filter'));
 
         return $files;
     }
@@ -317,7 +321,7 @@ public function getConfig($key = null, $default = null)
 
     public function getAllowedExtensions()
     {
-        return $this->allowedExtensions;
+        return Settings_model::defaultExtensions();
     }
 
     public function isAllowedExtension($filename)
@@ -411,6 +415,22 @@ protected function sortFiles(&$files, $sortBy)
             $files = array_reverse($files);
     }
 
+    protected function filterFiles(&$files, $filterBy)
+    {
+        if (!$filterBy || $filterBy === 'all') {
+            return;
+        }
+
+        $result = [];
+        foreach ($files as $item) {
+            if ($item->getFileType() === $filterBy) {
+                $result[] = $item;
+            }
+        }
+
+        $files = $result;
+    }
+
     protected function searchFiles(&$files, $filter)
     {
         if (!$filter)

app/main/language/en/lang.php

@@ -59,6 +59,7 @@
         'text_choose' => 'Choose',
         'text_attach' => 'Attach',
         'text_sort_by' => 'Sort By',
+        'text_filter_by' => 'Filter By',
         'text_filter_search' => 'Search files and folders...',
         'text_new_folder' => 'New Folder',
         'text_rename_folder' => 'Rename Folder',
@@ -87,6 +88,11 @@
         'label_modified_date' => 'Modified Date',
         'label_extension' => 'Extension',
         'label_permission' => 'Permission',
+        'label_filter_all' => 'Everything',
+        'label_filter_image' => 'Images',
+        'label_filter_video' => 'Videos',
+        'label_filter_audio' => 'Audios',
+        'label_filter_document' => 'Documents',
 
         'label_attachment_title' => 'Title',
         'label_attachment_description' => 'Description',

app/main/widgets/MediaManager.php

@@ -67,16 +67,18 @@ public function prepareVars()
     {
         $folder = $this->getCurrentFolder();
         $sortBy = $this->getSortBy();
+        $filterBy = $this->getFilterBy();
         $searchTerm = $this->getSearchTerm();
 
         $this->vars['currentFolder'] = $folder;
         $this->vars['isRootFolder'] = $folder == static::ROOT_FOLDER;
-        $this->vars['items'] = $items = $this->listFolderItems($folder, $sortBy, $searchTerm);
+        $this->vars['items'] = $items = $this->listFolderItems($folder, $sortBy, ['search' => $searchTerm, 'filter' => $filterBy]);
         $this->vars['folderSize'] = $this->getCurrentFolderSize();
         $this->vars['totalItems'] = count($items);
         $this->vars['folderList'] = $this->getFolderList();
         $this->vars['folderTree'] = $this->getFolderTreeNodes();
         $this->vars['sortBy'] = $sortBy;
+        $this->vars['filterBy'] = $filterBy;
         $this->vars['searchTerm'] = $searchTerm;
         $this->vars['isPopup'] = $this->popupLoaded;
         $this->vars['selectMode'] = $this->selectMode;
@@ -127,6 +129,20 @@ public function onSetSorting()
         ];
     }
 
+    public function onSetFilter()
+    {
+        $filterBy = input('filterBy');
+
+        $this->setFilterBy($filterBy);
+
+        $this->prepareVars();
+
+        return [
+            '#'.$this->getId('item-list') => $this->makePartial('mediamanager/item_list'),
+            '#'.$this->getId('toolbar') => $this->makePartial('mediamanager/toolbar'),
+        ];
+    }
+
     public function onSearch()
     {
         $search = input('search');
@@ -475,7 +491,6 @@ protected function getFolderTreeNodes()
         $mediaLibrary = $this->getMediaLibrary();
 
         $folderTree = function ($path) use (&$folderTree, $mediaLibrary, $result) {
-
             if (!($folders = $mediaLibrary->listFolders($path)))
                 return null;
 
@@ -543,6 +558,16 @@ protected function getSortBy()
         return $this->getSession('media_sort_by', null);
     }
 
+    protected function setFilterBy($filterBy)
+    {
+        return $this->putSession('media_filter_by', $filterBy);
+    }
+
+    protected function getFilterBy()
+    {
+        return $this->getSession('media_filter_by', 'all');
+    }
+
     protected function checkUploadHandler()
     {
         if (!($uniqueId = Request::header('X-IGNITER-FILEUPLOAD')) || $uniqueId != $this->getId())