wip

app/Filament/Infolists/Components/SpatieMediaLibraryFileEntry.php

@@ -4,6 +4,7 @@ namespace App\Filament\Infolists\Components;
 
 use Closure;
 use Filament\Infolists\Components\Entry;
+use Filament\Actions\Action;
 use Filament\Support\Concerns\HasMediaFilter;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Arr;
@@ -16,6 +17,25 @@ class SpatieMediaLibraryFileEntry extends Entry
 {
     use HasMediaFilter;
 
+    public function getViewMediaActionName(): string
+    {
+        return 'view_media_' . $this->getName();
+    }
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->registerActions([
+            Action::make($this->getViewMediaActionName())
+                ->label(__('Watch Full'))
+                ->modalContent(fn (array $arguments) => view('filament.infolists.components.image-modal', ['url' => $arguments['url']]))
+                ->modalSubmitAction(false)
+                ->modalCancelAction(false)
+                ->modalWidth('5xl'),
+        ]);
+    }
+
     protected string $view = 'filament.infolists.components.spatie-media-library-file-entry';
 
     protected string | Closure | null $collection = null;
@@ -75,7 +95,7 @@ class SpatieMediaLibraryFileEntry extends Entry
 
     public function getVisibility(): string
     {
-        return $this->evaluate($this->visibility);
+        return (string) $this->evaluate($this->visibility);
     }
     
     public function isDownloadable(): bool

lang/tk.json

@@ -728,5 +728,6 @@
     "Online payments": "Onlaýn tölegler",
     "USD rate": "USD kursy",
     "Total": "Jemi",
-    "Data": "Maglumatlar"
+    "Data": "Maglumatlar",
+    "Watch Full": "Giňişleýin"
 }

resources/views/filament/infolists/components/image-modal.blade.php

@@ -0,0 +1,3 @@
+<div class="flex justify-center items-center w-full h-full">
+    <img src="{{ $url }}" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg" alt="Preview" />
+</div>

resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php

@@ -16,23 +16,30 @@
             ])
         >
             @foreach ($media as $medium)
-                <div class="relative group">
+                <div class="flex flex-col items-center gap-2">
                     <img 
                         src="{{ $entry->getMediaUrl($medium, $media->count() > 1 ? 'thumb' : null) }}" 
                         class="w-full rounded-lg"
                     />
-                    <a 
-                        href="{{ $entry->getMediaUrl($medium) }}" 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg"
+                    <button 
+                        type="button"
+                        class="text-sm font-medium text-primary-600 decoration-2 center underline focus:outline-none dark:text-primary-500"
+                        @click="$dispatch('open-modal', { id: 'preview-image' })"
                     >
-                        <x-filament::icon
-                            icon="heroicon-m-eye"
-                            class="h-8 w-8 text-white"
-                        />
-                    </a>
-                </div>
+                        {{ __('Watch Full') }}
+                    </button>
+                </div>  
+
+                <x-filament::modal id="preview-image" width="5xl" :close-button="true">
+                    <x-slot name="heading">
+                        {{ $getLabel() }}
+                    </x-slot>
+
+                    <img 
+                        src="{{ $entry->getMediaUrl($medium) }}" 
+                        class="w-full h-full object-contain"
+                    />
+                </x-filament::modal>
             @endforeach
         </div>
     @else