Feat: honor file types in picker

README.md

@@ -189,9 +189,20 @@ Curations are a way to create custom sizes and focal points for your images. Aft
 use Awcodes\Curator\CurationPreset;
 
 Curator::curationPresets([
-    CurationPreset::make(name: 'thumbnail')->width(200)->height(200)->name('Thumbnail'),
-    CurationPreset::make(name: 'avatar')->width(420)->height(420)->name('Avatar'),
-    CurationPreset::make(name: 'hero')->width(1024)->height(320)->name('Hero'),
+    CurationPreset::make('thumbnail')
+        ->label('Thumbnail')
+        ->width(200)
+        ->height(200)
+        ->format('webp')
+        ->quality(80),
+    CurationPreset::make('hero')
+        ->label('Hero')
+        ->width(960)
+        ->height(300),
+    CurationPreset::make(name: 'og-image')
+        ->label('OG Image')
+        ->width(1200)
+        ->height(630),
 ]);
 ```
 

resources/js/plugin.js

@@ -1,8 +1,13 @@
 import Cropper from 'cropperjs'
 
 document.addEventListener("alpine:init", () => {
-    Alpine.data('curator', ({ statePath, initialSelection = null }) => ({
+    Alpine.data('curator', ({
         statePath,
+        types,
+        initialSelection = null
+    }) => ({
+        statePath,
+        types,
         selected: null,
         files: [],
         nextPageUrl: null,
@@ -118,6 +123,8 @@ document.addEventListener("alpine:init", () => {
                 if ($value === 'custom') {
                     this.cropper.reset()
                     this.key = null;
+                    this.format = 'jpg';
+                    this.quality = 60;
                 } else {
                     let containerData = this.cropper.getContainerData();
                     let cropBoxData = this.cropper.getCropBoxData();
@@ -128,6 +135,8 @@ document.addEventListener("alpine:init", () => {
                     let top = Math.round((containerData.height - height) / 2);
                     this.cropper.setCropBoxData({...cropBoxData, left, top, width, height});
                     this.key = preset.key;
+                    this.format = preset.format;
+                    this.quality = preset.quality;
                 }
             })
         },

resources/views/components/modals/curator-curation.blade.php

@@ -10,14 +10,14 @@ class="curator curation h-full absolute inset-0 flex flex-col"
 
     <div class="flex-1 relative flex flex-col lg:flex-row overflow-hidden">
 
-        <div class="flex-1 lg:h-full overflow-auto p-4">
-            <div class="h-full">
+        <div class="flex-1 w-full lg:h-full overflow-auto p-4">
+            <div class="h-full w-full">
                 <img
                     x-ref="image"
                     src="{{ $media->url }}"
                     x-on:ready="setData()"
                     x-on:crop="updateData()"
-                    class="h-full"
+                    class="h-full w-auto"
                 />
             </div>
         </div>

resources/views/components/modals/curator-panel.blade.php

@@ -1,5 +1,6 @@
 <div x-data="curator({
     statePath: '{{ $statePath }}',
+    types: @js($acceptedFileTypes),
     initialSelection: @js($selected)
 })"
      x-on:clear-selected="selected = null"
@@ -31,11 +32,14 @@ class="w-12 h-12 text-gray-700 dark:text-white animate-spin"
 
                 <template x-for="file in files">
 
-                    <li x-bind:key="file.id" class="relative aspect-square" x-bind:class="{'opacity-40': selected && selected.id !== file.id }">
+                    <li x-bind:key="file.id" class="relative aspect-square"
+                        x-bind:class="{'opacity-40': (selected && selected.id !== file.id) || ! types.includes(file.type) }"
+                    >
 
                         <button
                             type="button"
                             x-on:click.prevent="setSelected(file.id)"
+                            x-bind:disabled="! types.includes(file.type)"
                             class="block w-full h-full overflow-hidden bg-gray-700 rounded-sm"
                         >
                             <template x-if="file.type.includes('image')">
@@ -122,7 +126,7 @@ class="col-span-3 sm:col-span-4 md:col-span-6 lg:col-span-8"
                     type="search"
                     wire:ignore
                     placeholder="{{ __('curator::views.panel.search_placeholder') }}"
-                    x-on:input.debounce.500ms="searchFiles()"
+                    x-on:input.debounce.500ms="searchFiles($event)"
                     class="block w-full transition pl-10 rtl:pl-3 rtl:pr-10 duration-75 border-none focus:ring-1 focus:ring-inset focus:ring-primary-600 disabled:opacity-70 dark:bg-black/10 dark:text-white"
                 />
             </label>

src/Actions/CurationAction.php

@@ -3,7 +3,6 @@
 namespace Awcodes\Curator\Actions;
 
 use Awcodes\Curator\Components\Forms\CuratorEditor;
-use Awcodes\Curator\Models\Media;
 use Filament\Forms\Components\Actions\Action;
 use Livewire\Component;
 

src/Actions/DownloadAction.php

@@ -4,7 +4,6 @@
 
 use Awcodes\Curator\Components\Forms\CuratorPicker;
 use Awcodes\Curator\Facades\Curator;
-use Awcodes\Curator\Models\Media;
 use Filament\Forms\Components\Actions\Action;
 use Illuminate\Support\Facades\Storage;
 use Symfony\Component\HttpFoundation\StreamedResponse;

src/Actions/MediaAction.php

@@ -25,16 +25,6 @@ protected function setUp(): void
             $media = $src !== ''
                 ? Curator::getMediaModel()::firstWhere('name', Str::of($src)->afterLast('/')->beforeLast('.'))
                 : null;
-
-//            ray($component->getLivewire()->mediaProps);
-
-//            $form->fill([
-//                'src' => $source,
-//                'alt' => $component->getLivewire()->mediaProps['alt'],
-//                'title' => $component->getLivewire()->mediaProps['title'],
-//                'width' => $component->getLivewire()->mediaProps['width'],
-//                'height' => $component->getLivewire()->mediaProps['height'],
-//            ]);
         });
 
         $this->modalWidth('screen');

src/Components/Forms/CuratorEditor.php

@@ -3,18 +3,13 @@
 namespace Awcodes\Curator\Components\Forms;
 
 use Awcodes\Curator\Actions\CurationAction;
-use Awcodes\Curator\Models\Curation;
-use Awcodes\Curator\Models\Media;
 use Closure;
 use Exception;
 use Filament\Forms\Components\Field;
 use Filament\Support\Actions\Concerns\CanBeOutlined;
 use Filament\Support\Actions\Concerns\HasColor;
 use Filament\Support\Actions\Concerns\HasSize;
-use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Contracts\Support\Htmlable;
-use Illuminate\Database\Eloquent\Model;
-use Illuminate\Support\Collection;
 
 class CuratorEditor extends Field
 {

src/Components/Forms/CuratorPicker.php

@@ -5,7 +5,6 @@
 use Awcodes\Curator\Actions\DownloadAction;
 use Awcodes\Curator\Actions\PickerAction;
 use Awcodes\Curator\Facades\Curator;
-use Awcodes\Curator\Models\Media;
 use Closure;
 use Exception;
 use Filament\Forms\Components\Field;

src/Components/Modals/CuratorPanel.php

@@ -4,57 +4,55 @@
 
 use Awcodes\Curator\Components\Forms\Uploader;
 use Awcodes\Curator\Facades\Curator;
-use Awcodes\Curator\Models\Media;
+use Awcodes\Curator\Generators\PathGenerator;
 use Awcodes\Curator\Resources\MediaResource;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
 use Illuminate\Contracts\View\View;
+use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Storage;
-use Illuminate\Support\Str;
 use Livewire\Component;
 use Symfony\Component\HttpFoundation\StreamedResponse;
 
 class CuratorPanel extends Component implements HasForms
 {
     use InteractsWithForms;
 
-    public $selected = null;
+    public Model|null $selected = null;
 
-    public $data;
+    public array $data = [];
 
-    public $statePath;
+    public string|null $statePath;
 
-    public $modalId;
+    public string $modalId;
 
-    public $state = null;
+    public string|null $directory;
 
-    public $directory;
+    public PathGenerator|null $pathGenerator = null;
 
-    public $pathGenerator;
+    public bool $shouldPreserveFilenames = false;
 
-    public $shouldPreserveFilenames;
+    public int|null $maxWidth = null;
 
-    public $maxWidth;
+    public int|null $minSize = null;
 
-    public $minSize;
+    public int|null $maxSize = null;
 
-    public $maxSize;
+    public array $validationRules = [];
 
-    public $validationRules = [];
+    public array $acceptedFileTypes = [];
 
-    public $acceptedFileTypes = [];
+    public string $diskName = 'public';
 
-    public $diskName;
+    public string $visibility = 'public';
 
-    public $visibility;
+    public string|null $imageCropAspectRatio = null;
 
-    public $imageCropAspectRatio;
+    public int|null $imageResizeTargetWidth = null;
 
-    public $imageResizeTargetWidth;
+    public int|null $imageResizeTargetHeight = null;
 
-    public $imageResizeTargetHeight;
-
-    public $mediaId = null;
+    public int|null $mediaId = null;
 
     public function mount()
     {

src/CurationPreset.php

@@ -8,10 +8,16 @@ class CurationPreset
 
     protected string $name;
 
-    protected int $width;
+    protected string $label;
+
+    protected string $format = 'jpg';
 
     protected int $height;
 
+    protected int $quality = 60;
+
+    protected int $width;
+
     public static function make(string $name): static
     {
         $static = app(static::class, ['name' => $name]);
@@ -20,16 +26,19 @@ public static function make(string $name): static
         return $static;
     }
 
+    /**
+     * @deprecated Use label() instead
+     */
     public function name(string $name): static
     {
         $this->name = $name;
 
         return $this;
     }
 
-    public function width(int $width): static
+    public function format(string $format): static
     {
-        $this->width = $width;
+        $this->format = $format;
 
         return $this;
     }
@@ -41,13 +50,36 @@ public function height(int $height): static
         return $this;
     }
 
+    public function label(string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function quality(int $quality): static
+    {
+        $this->quality = $quality;
+
+        return $this;
+    }
+
+    public function width(int $width): static
+    {
+        $this->width = $width;
+
+        return $this;
+    }
+
     public function getPreset(): array
     {
         return [
             'key' => $this->key,
-            'name' => $this->name,
+            'name' => $this->label ?? $this->name,
             'width' => $this->width,
             'height' => $this->height,
+            'format' => $this->format,
+            'quality' => $this->quality,
         ];
     }
 }

src/Curator.php

@@ -5,10 +5,7 @@
 use Awcodes\Curator\Models\Media;
 use Closure;
 use Filament\Support\Concerns\EvaluatesClosures;
-use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Session;
-use League\Flysystem\Filesystem;
-use League\Flysystem\Local\LocalFilesystemAdapter;
 use League\Glide\Responses\LaravelResponseFactory;
 use League\Glide\Server;
 use League\Glide\ServerFactory;

src/CuratorServiceProvider.php

@@ -3,8 +3,6 @@
 namespace Awcodes\Curator;
 
 use Awcodes\Curator\Commands\UpgradeCommand;
-use Awcodes\Curator\Facades\Curator as CuratorFacade;
-use Awcodes\Curator\Models\Media;
 use Awcodes\Curator\Observers\MediaObserver;
 use Composer\InstalledVersions;
 use Filament\PluginServiceProvider;

src/Facades/Curator.php

@@ -3,7 +3,6 @@
 namespace Awcodes\Curator\Facades;
 
 use Closure;
-use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Facade;
 use League\Glide\Server;
 use League\Glide\ServerFactory;

src/Http/Controllers/MediaController.php

@@ -3,7 +3,6 @@
 namespace Awcodes\Curator\Http\Controllers;
 
 use Awcodes\Curator\Facades\Curator;
-use Awcodes\Curator\Models\Media;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 use League\Glide\Filesystem\FileNotFoundException;
@@ -33,10 +32,10 @@ public function index(Request $request)
 
     public function search(Request $request)
     {
-        $files = Curator::getMediaModel()::where('name', 'like', '%'.$request->q.'%')
-            ->orWhere('alt', 'like', '%'.$request->q.'%')
-            ->orWhere('caption', 'like', '%'.$request->q.'%')
-            ->orWhere('description', 'like', '%'.$request->q.'%')
+        $files = Curator::getMediaModel()::where('name', 'like', '%'.$request->query('q').'%')
+            ->orWhere('alt', 'like', '%'.$request->query('q').'%')
+            ->orWhere('caption', 'like', '%'.$request->query('q').'%')
+            ->orWhere('description', 'like', '%'.$request->query('q').'%')
             ->paginate(50);
 
         $files->each(function($item) {