nurmuhammet/tbbank-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor media display logic in SpatieMediaLibraryFileEntry component

Browse Source 
- 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.
This commit is contained in:
Nurmuhammet Allanov
2025-12-09 01:40:07 +05:00
parent c56e3383d1
commit 4c0917e6ba
1 changed files with 57 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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