This commit is contained in:
2024-06-12 19:51:41 +02:00
parent 154e79aacd
commit 0ce904a7d8
18 changed files with 104 additions and 146 deletions

View File

@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
use App\Http\Requests\StoreImageRequest; use App\Http\Requests\StoreImageRequest;
use App\Http\Requests\UpdateImageRequest; use App\Http\Requests\UpdateImageRequest;
use App\Models\Image; use App\Models\Image;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\Storage;
use Symfony\Component\HttpFoundation\BinaryFileResponse; use Symfony\Component\HttpFoundation\BinaryFileResponse;
@@ -37,15 +38,41 @@ class ImageController extends Controller
/** /**
* Display the specified resource. * Display the specified resource.
*/ */
public function show(Image $image, string $size = 'original') : BinaryFileResponse public function show(Image $image, string $size = 'original') : BinaryFileResponse|Response
{ {
return response()->file(Storage::disk('images')->path($image->album->id . '/' . $size . '/' . $image->id . '.avif')); $server = request()->server;
$headerEtag = md5($image->updated_at->format('U') . $image->id . '_' . $size);
$headerExpires = $image->updated_at->addYear()->toRfc2822String();
$headerLastModified = $image->updated_at->toRfc2822String();
$requestModifiedSince =
$server->has('HTTP_IF_MODIFIED_SINCE') &&
$server->get('HTTP_IF_MODIFIED_SINCE') === $headerLastModified;
$requestNoneMatch =
$server->has('HTTP_IF_NONE_MATCH') &&
$server->get('HTTP_IF_NONE_MATCH') === $headerEtag;
$headers = [
'Cache-Control' => 'max-age=0, must-revalidate, private',
'Content-Disposition' => sprintf('inline; filename="%s"', $image->id . '_' . $size),
'Etag' => $headerEtag,
'Expires' => $headerExpires,
'Last-Modified' => $headerLastModified,
'Pragma' => 'no-cache',
];
if ($requestModifiedSince || $requestNoneMatch) {
return response('', 304)->withHeaders($headers);
}
return response()->file(Storage::disk('images')->path($image->album->id . '/' . $size . '/' . $image->id . '.avif'), $headers);
} }
/** /**
* Display the thumbnail of the specified resource. * Display the thumbnail of the specified resource.
*/ */
public function thumbnail(Image $image) : BinaryFileResponse public function thumbnail(Image $image) : BinaryFileResponse|Response
{ {
return $this->show($image, 'thumbnail'); return $this->show($image, 'thumbnail');
} }
@@ -53,7 +80,7 @@ class ImageController extends Controller
/** /**
* Display the lightbox of the specified resource. * Display the lightbox of the specified resource.
*/ */
public function lightbox(Image $image) : BinaryFileResponse public function lightbox(Image $image) : BinaryFileResponse|Response
{ {
return $this->show($image, 'lightbox'); return $this->show($image, 'lightbox');
} }

View File

@@ -2,11 +2,13 @@
namespace App\Importers; namespace App\Importers;
use App\Importers\Image\Jobs\FinishImageModification;
use App\ImportsMedia; use App\ImportsMedia;
use Illuminate\Http\UploadedFile; use Illuminate\Http\UploadedFile;
use App\Importers\Image\Jobs\{ImportImage, GenerateFullscreen, GenerateThumbnail}; use App\Importers\Image\Jobs\{ImportImage, GenerateFullscreen, GenerateThumbnail};
use App\Models\Image as ImageModel; use App\Models\Image as ImageModel;
use App\Models\Album; use App\Models\Album;
use Illuminate\Support\Facades\Bus;
class Image implements ImportsMedia { class Image implements ImportsMedia {
@@ -19,16 +21,19 @@ class Image implements ImportsMedia {
{ {
} }
public function import(): array { public function import(): void {
$image = ImageModel::create([ $image = ImageModel::create([
'album_id' => $this->location->id 'album_id' => $this->location->id
]); ]);
$imageId = $image->id; $imageId = $image->id;
return [ Bus::chain([
new ImportImage($this->file->getPathname(), $image), new ImportImage($this->file->getPathname(), $image),
Bus::batch([
new GenerateFullscreen($image), new GenerateFullscreen($image),
new GenerateThumbnail($image), new GenerateThumbnail($image),
]; ]),
new FinishImageModification($image),
])->dispatch();
} }
} }

View File

@@ -29,7 +29,7 @@ class GenerateFullscreen implements ShouldQueue
public function handle(): void public function handle(): void
{ {
if ($this->batch()->cancelled()) { if (method_exists($this, 'batch') && $this->batch()?->cancelled()) {
return; return;
} }

View File

@@ -29,7 +29,7 @@ class GenerateThumbnail implements ShouldQueue
public function handle(): void public function handle(): void
{ {
if ($this->batch()->cancelled()) { if (method_exists($this, 'batch') && $this->batch()?->cancelled()) {
return; return;
} }

View File

@@ -24,7 +24,7 @@ class ImportImage implements ShouldQueue
public function handle(): void public function handle(): void
{ {
if ($this->batch()->cancelled()) { if (method_exists($this, 'batch') && $this->batch()?->cancelled()) {
return; return;
} }

View File

@@ -9,5 +9,5 @@ interface ImportsMedia
{ {
public static function supports(UploadedFile $file): bool; public static function supports(UploadedFile $file): bool;
public function __construct(UploadedFile $file, Album $location); public function __construct(UploadedFile $file, Album $location);
public function import(): array; public function import(): void;
} }

View File

@@ -9,7 +9,6 @@ use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View; use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Bus; use Illuminate\Support\Facades\Bus;
use Livewire\Attributes\Locked; use Livewire\Attributes\Locked;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate; use Livewire\Attributes\Validate;
use Livewire\Component; use Livewire\Component;
use Livewire\Features\SupportFileUploads\WithFileUploads; use Livewire\Features\SupportFileUploads\WithFileUploads;
@@ -30,17 +29,9 @@ class AddImage extends Component
public function save(MediaImporter $importer) : void { public function save(MediaImporter $importer) : void {
$this->validate(); $this->validate();
$jobs = array_map(fn($file) => $importer->import($file, $this->album), $this->media); foreach ($this->media as $file) {
$batch = Bus::batch($jobs) $importer->import($file, $this->album);
->name('Media import in ' . $this->album->name) }
->allowFailures()
->dispatch();
BatchMutation::create([
'album_id' => $this->album->id,
'batch_id' => $batch->id,
]);
$this->redirect(route('album.show', $this->album), navigate: true); $this->redirect(route('album.show', $this->album), navigate: true);
} }

View File

@@ -28,6 +28,14 @@ class Album extends Model
return $this->images; return $this->images;
} }
public function getHasCoverAttribute() : bool {
return $this->images()->where('isCover', 1)->count() > 0;
}
public function getHasProcessingMediaAttribute() : bool {
return $this->images()->where('isProcessing', 1)->count() > 0;
}
public function getThumbnailAttribute() : ?string { public function getThumbnailAttribute() : ?string {
return $this->images()->where('isCover', 1)->first()?->getThumbnail(); return $this->images()->where('isCover', 1)->first()?->getThumbnail();
} }

View File

@@ -18,6 +18,7 @@ class Image extends Model implements HasThumbnail
*/ */
protected $attributes = [ protected $attributes = [
'isCover' => false, 'isCover' => false,
'isProcessing' => true,
'lightboxWidth' => 0, 'lightboxWidth' => 0,
'lightboxHeight' => 0, 'lightboxHeight' => 0,
]; ];
@@ -27,7 +28,7 @@ class Image extends Model implements HasThumbnail
* *
* @var array * @var array
*/ */
protected $fillable = ['album_id', 'lightboxWidth', 'lightboxHeight']; protected $fillable = ['album_id', 'lightboxWidth', 'lightboxHeight', 'isCover', 'isProcessing'];
public function album(): BelongsTo public function album(): BelongsTo
{ {
@@ -35,11 +36,11 @@ class Image extends Model implements HasThumbnail
} }
public function getThumbnail() : string { public function getThumbnail() : string {
return route('image.thumbnail', $this); return route('image.thumbnail', $this) . '?cacheBuster3000=' . $this->updated_at->timestamp;
} }
public function getDownload() : string { public function getDownload() : string {
return route('image.download', $this); return route('image.download', $this) . '?cacheBuster3000=' . $this->updated_at->timestamp;
} }
public function setLightboxSize(int $width, int $height) : void { public function setLightboxSize(int $width, int $height) : void {
@@ -50,7 +51,7 @@ class Image extends Model implements HasThumbnail
public function getLightboxAttribute() : array { public function getLightboxAttribute() : array {
return [ return [
'location' => route('image.lightbox', $this), 'location' => route('image.lightbox', $this) . '?cacheBuster3000=' . $this->updated_at->timestamp,
'width' => $this->lightboxWidth, 'width' => $this->lightboxWidth,
'height' => $this->lightboxHeight, 'height' => $this->lightboxHeight,
]; ];

View File

@@ -4,7 +4,6 @@ namespace App\Services;
use App\ImportsMedia; use App\ImportsMedia;
use App\Models\Album; use App\Models\Album;
use Illuminate\Foundation\Bus\PendingChain;
use Illuminate\Http\UploadedFile; use Illuminate\Http\UploadedFile;
use Symfony\Component\HttpKernel\Exception\UnsupportedMediaTypeHttpException; use Symfony\Component\HttpKernel\Exception\UnsupportedMediaTypeHttpException;
@@ -17,10 +16,11 @@ class MediaImporter {
} }
} }
public function import(UploadedFile $file, Album $location): array { public function import(UploadedFile $file, Album $location): void {
foreach ($this->importers as $importer) { foreach ($this->importers as $importer) {
if($importer::supports($file)) { if($importer::supports($file)) {
return (new $importer($file, $location))->import(); (new $importer($file, $location))->import();
return;
} }
} }

View File

@@ -2,6 +2,7 @@
namespace Database\Factories; namespace Database\Factories;
use App\Importers\Image\Jobs\FinishImageModification;
use App\Models\Album; use App\Models\Album;
use App\Models\Image; use App\Models\Image;
use Illuminate\Database\Eloquent\Factories\Factory; use Illuminate\Database\Eloquent\Factories\Factory;
@@ -23,11 +24,6 @@ class ImageFactory extends Factory
public function configure(): static public function configure(): static
{ {
return $this->afterCreating(function (Image $image) { return $this->afterCreating(function (Image $image) {
if($image->album->images->sortBy('id')->first()->id == $image->id) {
$image->isCover = true;
$image->save();
}
$height = rand(2000, 4000); $height = rand(2000, 4000);
$width = rand(2000, 4000); $width = rand(2000, 4000);
$image_content = Http::get("https://picsum.photos/{$width}/{$height}")->body(); $image_content = Http::get("https://picsum.photos/{$width}/{$height}")->body();
@@ -35,10 +31,13 @@ class ImageFactory extends Factory
$image_path = $image->album_id . '/original/' . $image->id . '.avif'; $image_path = $image->album_id . '/original/' . $image->id . '.avif';
Storage::disk('images')->put($image_path, $encoded); Storage::disk('images')->put($image_path, $encoded);
Bus::chain([
Bus::batch([ Bus::batch([
new GenerateThumbnail($image), new GenerateThumbnail($image),
new GenerateFullscreen($image), new GenerateFullscreen($image),
])->name('seeder_import_batch_' . $image->id)->dispatch(); ]),
new FinishImageModification($image),
])->dispatch();
}); });
} }

View File

@@ -16,6 +16,7 @@ return new class extends Migration
$table->id(); $table->id();
$table->timestamps(); $table->timestamps();
$table->boolean('isCover'); $table->boolean('isCover');
$table->boolean('isProcessing');
$table->bigInteger(column: 'lightboxWidth', unsigned: true)->default(0); $table->bigInteger(column: 'lightboxWidth', unsigned: true)->default(0);
$table->bigInteger(column: 'lightboxHeight', unsigned: true)->default(0); $table->bigInteger(column: 'lightboxHeight', unsigned: true)->default(0);
$table->foreignIdFor(Album::class); $table->foreignIdFor(Album::class);

View File

@@ -33,7 +33,7 @@
} }
.pswp__bg { .pswp__bg {
@apply backdrop-blur-md bg-white/30 dark:bg-gray-800/30; @apply backdrop-blur-md bg-white/30 dark:bg-gray-800/50;
} }
.pswp__top-bar { .pswp__top-bar {
@@ -43,3 +43,7 @@
.pswp__button { .pswp__button {
width: 60px; width: 60px;
} }
.pswp--zoomed-in .pswp__zoom-icn-bar-b {
display: block;
}

View File

@@ -1,80 +1,22 @@
import './bootstrap'; import './bootstrap';
import './lightbox';
import './filepond';
import './notification';
import PhotoSwipeLightbox from 'photoswipe/lightbox'; ToastinTakin.init();
import * as FilePond from 'filepond'; window.setTimeout(() => {
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'; ToastinTakin.error('Bilder speichern fehlgeschlagen.');
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; }, 100);
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'; window.setTimeout(() => {
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'; ToastinTakin.info('Bilder werden geladen, bitte warten.');
}, 2000);
FilePond.registerPlugin(FilePondPluginImageExifOrientation); window.setTimeout(() => {
FilePond.registerPlugin(FilePondPluginImagePreview); ToastinTakin.success('Bilder erfolgreich gespeichert');
FilePond.registerPlugin(FilePondPluginFileValidateSize); }, 3000);
FilePond.registerPlugin(FilePondPluginFileValidateType); window.setTimeout(() => {
ToastinTakin.error('Bilder doch nicht erfolgreich gespeichert');
window.FilePond = FilePond; }, 4000);
window.setTimeout(() => {
document.addEventListener('alpine:init', () => { ToastinTakin.info('Diese Nachrichten sind komisch ;).');
Alpine.store('uploader', { }, 5000);
states: {},
setState(state, value) {
this.states[state] = value;
},
});
});
const lightbox = new PhotoSwipeLightbox({
gallery: '#album',
children: 'a',
bgOpacity: 1,
arrowPrevSVG: '<svg class="w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>',
arrowNextSVG: '<svg class="w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>',
closeSVG: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg></div>',
zoomSVG: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.872 9.687 20 6.56 17.44 4 4 17.44 6.56 20 16.873 9.687Zm0 0-2.56-2.56M6 7v2m0 0v2m0-2H4m2 0h2m7 7v2m0 0v2m0-2h-2m2 0h2M8 4h.01v.01H8V4Zm2 2h.01v.01H10V6Zm2-2h.01v.01H12V4Zm8 8h.01v.01H20V12Zm-2 2h.01v.01H18V14Zm2 2h.01v.01H20V16Z"/></svg></div>',
pswpModule: () => import('photoswipe')
});
lightbox.on('uiRegister', function() {
lightbox.pswp.ui.registerElement({
name: 'download-button',
order: 9,
isButton: true,
tagName: 'button',
html: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2m-1-5-4 5-4-5m9 8h.01"/></svg></div>',
onInit: (el, pswp) => {
el.setAttribute('download', '');
el.setAttribute('target', '_blank');
el.setAttribute('rel', 'noopener');
pswp.on('change', () => {
el.href = pswp.currSlide.data.element.dataset.pswpDownload;
});
}
});
lightbox.pswp.ui.registerElement({
name: 'rotate-button-clk',
ariaLabel: 'Rotate clockwise',
order: 8,
isButton: true,
html: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="w-6 h-6 text-gray-800 dark:text-white" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19.407 11.376a7.552 7.552 0 1 1-2.212-5.34"/><path d="M17.555 2.612v4h-4"/></svg></div>',
onClick: (event, el) => {
// Rotate
}
});
lightbox.pswp.ui.registerElement({
name: 'rotate-button-cclk',
ariaLabel: 'Rotate counter-clockwise',
order: 7,
isButton: true,
html: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="w-6 h-6 text-gray-800 dark:text-white scale-x-[-1]" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19.407 11.376a7.552 7.552 0 1 1-2.212-5.34"/><path d="M17.555 2.612v4h-4"/></svg></div>',
onClick: (event, el) => {
// Rotate
}
});
});
lightbox.init();

View File

@@ -28,27 +28,7 @@
@if($album->mutations->count() > 0) @if($album->mutations->count() > 0)
<livewire:drawer.album.progress-monitor :mutation="$album->mutations->first()"/> <livewire:drawer.album.progress-monitor :mutation="$album->mutations->first()"/>
@else @else
<div id="album" class="m-8 flex flex-wrap flex-row gap-4"> <livewire:image.grid :images="$album->images"></livewire:image.grid>
@foreach ($album->images as $image)
<a
class="relative group rounded-lg cursor-pointer h-80 flex-grow overflow-hidden"
href="{{ $image->lightbox['location'] }}"
data-pswp-width="{{ $image->lightbox['width'] }}"
data-pswp-download="{{ $image->getDownload() }}"
data-pswp-height="{{ $image->lightbox['height'] }}"
data-cropped="true"
>
<img class="max-h-full min-w-full align-bottom object-cover"
src="{{ $image->getThumbnail() }}" alt="{{ $album->name }} Bild">
<div class="opacity-0 group-hover:opacity-40 absolute inset-0 w-full h-full bg-black flex items-center justify-center transition-opacity">
<svg class="w-1/2 h-1/2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
<path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
</svg>
</div>
</a>
@endforeach
</div>
<x-drawer name="image-add" > <x-drawer name="image-add" >
<x-slot:title>Neue Bilder zu {{ $album->name }} hinzufügen</x-slot:title> <x-slot:title>Neue Bilder zu {{ $album->name }} hinzufügen</x-slot:title>
<x-slot:content> <x-slot:content>

View File

@@ -20,7 +20,7 @@
</div> </div>
@endpush @endpush
<x-layout> <x-layouts.app>
<x-hero-search></x-hero-search> <x-hero-search></x-hero-search>
<h1 class="mb-4 mx-8 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white"> <h1 class="mb-4 mx-8 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
{{ $category->name }} {{ $category->name }}
@@ -50,4 +50,4 @@
<livewire:drawer.album.create></livewire:drawer.album.create> <livewire:drawer.album.create></livewire:drawer.album.create>
</x-slot:content> </x-slot:content>
</x-drawer> </x-drawer>
</x-layout> </x-layouts.app>

View File

@@ -1,5 +1,5 @@
<x-layout> <x-layouts.app>
<x-hero-search></x-hero-search> <x-hero-search></x-hero-search>
<livewire:category-filter /> <livewire:category-filter />
</x-layout> </x-layouts.app>

View File

@@ -3,11 +3,11 @@
use App\Http\Controllers\ImageController; use App\Http\Controllers\ImageController;
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CategoryController; use App\Http\Controllers\CategoryController;
use App\Http\Controllers\AlbumController; use App\Livewire\Album\Show as AlbumShow;
Route::get('/', [CategoryController::class, 'index'])->name('index'); Route::get('/', [CategoryController::class, 'index'])->name('index');
Route::get('/category/{category}', [CategoryController::class, 'show'])->name('category.show'); Route::get('/category/{category}', [CategoryController::class, 'show'])->name('category.show');
Route::get('/album/{album}', [AlbumController::class, 'show'])->name('album.show'); Route::get('/album/{album}', AlbumShow::class)->name('album.show');
Route::get('/image/{image}/thumbnail', [ImageController::class, 'thumbnail'])->name('image.thumbnail'); Route::get('/image/{image}/thumbnail', [ImageController::class, 'thumbnail'])->name('image.thumbnail');
Route::get('/image/{image}/lightbox', [ImageController::class, 'lightbox'])->name('image.lightbox'); Route::get('/image/{image}/lightbox', [ImageController::class, 'lightbox'])->name('image.lightbox');
Route::get('/image/{image}/download', [ImageController::class, 'download'])->name('image.download'); Route::get('/image/{image}/download', [ImageController::class, 'download'])->name('image.download');