From 4c0917e6ba4128f2ef90e6d805f2548183960f31 Mon Sep 17 00:00:00 2001
From: Nurmuhammet Allanov <nurmuhammet@mail.com>
Date: Tue, 9 Dec 2025 01:40:07 +0500
Subject: [PATCH] Refactor media display logic in SpatieMediaLibraryFileEntry
 component

- Simplified media handling by removing the check for images only.
- Updated grid layout for media items to use a consistent column size.
- Enhanced modal functionality to open specific image previews based on item ID.
- Improved code readability by renaming variables and streamlining the foreach loop.
---
 .../spatie-media-library-file-entry.blade.php | 125 ++++++++----------
 1 file changed, 57 insertions(+), 68 deletions(-)

diff --git a/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php b/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
index be55c06..25b75a9 100644
--- a/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
+++ b/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
@@ -1,96 +1,85 @@
 <x-filament-infolists::entry-wrapper :entry="$entry">
     @php
         $media = $getMedia();
-        $hasImagesOnly = $media->every(fn($m) => str_starts_with($m->mime_type, 'image/'));
     @endphp
 
     @if ($media->isEmpty())
         <div class="flex items-center justify-center rounded-xl border border-dashed border-gray-200 bg-white/50 p-4 text-sm text-gray-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
             {{ __('No files uploaded') }}
         </div>
-    @elseif ($hasImagesOnly)
+    @else
         <div 
             @class([
                 'grid gap-4',
-                'grid-cols-[repeat(auto-fill,minmax(120px,1fr))]' => $media->count() > 1,
+                'grid-cols-[repeat(auto-fill,minmax(200px,1fr))]',
             ])
         >
-            @foreach ($media as $medium)
-                <div class="flex flex-col items-center gap-2">
-                    <img 
-                        src="{{ $entry->getMediaUrl($medium, $media->count() > 1 ? 'thumb' : null) }}" 
-                        class="w-full 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' })"
-                    >
-                        {{ __('Watch Full') }}
-                    </button>
-                </div>  
+            @foreach ($media as $item)
+                @if (str_starts_with($item->mime_type, 'image/'))
+                    <div class="flex flex-col items-center gap-2">
+                        <img 
+                            src="{{ $entry->getMediaUrl($item, $media->count() > 1 ? 'thumb' : null) }}" 
+                            class="w-full 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-{{ $item->id }}' })"
+                        >
+                            {{ __('Watch Full') }}
+                        </button>
+                    </div>  
 
-                <x-filament::modal id="preview-image" width="5xl" :close-button="true">
-                    <x-slot name="heading">
-                        {{ $getLabel() }}
-                    </x-slot>
+                    <x-filament::modal id="preview-image-{{ $item->id }}" 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
-        <div class="flex flex-col gap-3">
-            @foreach ($getMedia() as $media)
-                <div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
-                    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
-                        @if (str_starts_with($media->mime_type, 'image/'))
-                            <img 
-                                src="{{ $media->hasGeneratedConversion('thumb') ? $entry->getMediaUrl($media, 'thumb') : $entry->getMediaUrl($media) }}" 
-                                alt="{{ $media->name }}" 
-                                class="h-full w-full object-cover" 
-                            />
-                        @else
+                        <img 
+                            src="{{ $entry->getMediaUrl($item) }}" 
+                            class="w-full h-full object-contain"
+                        />
+                    </x-filament::modal>
+                @else
+                    <div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
+                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
                             <div class="flex h-full w-full items-center justify-center bg-white dark:bg-gray-800">
                                 <x-filament::icon
                                     icon="heroicon-o-document"
                                     class="h-6 w-6 text-gray-500 dark:text-gray-400"
                                 />
                             </div>
-                        @endif
-                    </div>
+                        </div>
 
-                    <div class="flex-grow overflow-hidden">
-                        <p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $media->name }}">
-                            {{ $media->name }}
-                        </p>
-                        <p class="text-xs text-gray-500 dark:text-gray-400">
-                            {{ $media->human_readable_size }} 
-                            <span class="text-gray-300 dark:text-gray-600 px-1">•</span> 
-                            <span class="uppercase">{{ $media->extension }}</span>
-                        </p>
-                    </div>
+                        <div class="flex-grow overflow-hidden">
+                            <p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $item->name }}">
+                                {{ $item->name }}
+                            </p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">
+                                {{ $item->human_readable_size }} 
+                                <span class="text-gray-300 dark:text-gray-600 px-1">•</span> 
+                                <span class="uppercase">{{ $item->extension }}</span>
+                            </p>
+                        </div>
 
-                    <div class="flex shrink-0 items-center gap-2 pr-2">
-                        @if ($isPreviewable())
-                            <a 
-                                href="{{ $entry->getMediaUrl($media) }}" 
-                                target="_blank" 
-                                rel="noopener noreferrer"
-                                class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
-                                title="{{ __('View') }}"
-                            >
-                                <x-filament::icon
-                                    icon="heroicon-m-eye"
-                                    class="h-5 w-5"
-                                />
-                            </a>
-                        @endif
+                        <div class="flex shrink-0 items-center gap-2 pr-2">
+                            @if ($isPreviewable())
+                                <a 
+                                    href="{{ $entry->getMediaUrl($item) }}" 
+                                    target="_blank" 
+                                    rel="noopener noreferrer"
+                                    class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
+                                    title="{{ __('View') }}"
+                                >
+                                    <x-filament::icon
+                                        icon="heroicon-m-eye"
+                                        class="h-5 w-5"
+                                    />
+                                </a>
+                            @endif
+                        </div>
                     </div>
-                </div>
+                @endif
             @endforeach
         </div>
     @endif