takin/project-minnesota
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Takin v/o Oliver Göldi
2024-06-12 19:51:41 +02:00
parent 154e79aacd
commit 0ce904a7d8
18 changed files with 104 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/Http/Controllers/ImageController.php
View File

@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
use App\Http\Requests\StoreImageRequest;
use App\Http\Requests\UpdateImageRequest;
use App\Models\Image;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Storage;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
@@ -37,15 +38,41 @@ class ImageController extends Controller
/**
* 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.
*/
public function thumbnail(Image $image) : BinaryFileResponse
public function thumbnail(Image $image) : BinaryFileResponse|Response
{
return $this->show($image, 'thumbnail');
}
@@ -53,7 +80,7 @@ class ImageController extends Controller
/**
* 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');
}

11
app/Importers/Image.php
View File

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

2
app/Importers/Image/Jobs/GenerateFullscreen.php
View File

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

2
app/Importers/Image/Jobs/GenerateThumbnail.php
View File

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

2
app/Importers/Image/Jobs/ImportImage.php
View File

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

2
app/ImportsMedia.php
View File

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

15
app/Livewire/Drawer/Album/AddImage.php
View File

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

8
app/Models/Album.php
View File

@@ -28,6 +28,14 @@ class Album extends Model
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 {
return $this->images()->where('isCover', 1)->first()?->getThumbnail();
}

9
app/Models/Image.php
View File

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

6
app/Services/MediaImporter.php
View File

@@ -4,7 +4,6 @@ namespace App\Services;
use App\ImportsMedia;
use App\Models\Album;
use Illuminate\Foundation\Bus\PendingChain;
use Illuminate\Http\UploadedFile;
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) {
if($importer::supports($file)) {
return (new $importer($file, $location))->import();
(new $importer($file, $location))->import();
return;
}
}

11
database/factories/ImageFactory.php
View File

@@ -2,6 +2,7 @@
namespace Database\Factories;
use App\Importers\Image\Jobs\FinishImageModification;
use App\Models\Album;
use App\Models\Image;
use Illuminate\Database\Eloquent\Factories\Factory;
@@ -23,11 +24,6 @@ class ImageFactory extends Factory
public function configure(): static
{
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);
$width = rand(2000, 4000);
$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';
Storage::disk('images')->put($image_path, $encoded);
Bus::chain([
Bus::batch([
new GenerateThumbnail($image),
new GenerateFullscreen($image),
])->name('seeder_import_batch_' . $image->id)->dispatch();
]),
new FinishImageModification($image),
])->dispatch();
});
}

1
database/migrations/2024_05_22_190526_create_images_table.php
View File

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

6
resources/css/app.css
View File

@@ -33,7 +33,7 @@
}
.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 {
@@ -43,3 +43,7 @@
.pswp__button {
width: 60px;
}
.pswp--zoomed-in .pswp__zoom-icn-bar-b {
display: block;
}

96
resources/js/app.js
View File

@@ -1,80 +1,22 @@
import './bootstrap';
import './lightbox';
import './filepond';
import './notification';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
ToastinTakin.init();
import * as FilePond from 'filepond';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
FilePond.registerPlugin(FilePondPluginImageExifOrientation);
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFileValidateSize);
FilePond.registerPlugin(FilePondPluginFileValidateType);
window.FilePond = FilePond;
document.addEventListener('alpine:init', () => {
Alpine.store('uploader', {
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();
window.setTimeout(() => {
ToastinTakin.error('Bilder speichern fehlgeschlagen.');
}, 100);
window.setTimeout(() => {
ToastinTakin.info('Bilder werden geladen, bitte warten.');
}, 2000);
window.setTimeout(() => {
ToastinTakin.success('Bilder erfolgreich gespeichert');
}, 3000);
window.setTimeout(() => {
ToastinTakin.error('Bilder doch nicht erfolgreich gespeichert');
}, 4000);
window.setTimeout(() => {
ToastinTakin.info('Diese Nachrichten sind komisch ;).');
}, 5000);

22
resources/views/album/show.blade.php
View File

@@ -28,27 +28,7 @@
@if($album->mutations->count() > 0)
<livewire:drawer.album.progress-monitor :mutation="$album->mutations->first()"/>
@else
<div id="album" class="m-8 flex flex-wrap flex-row gap-4">
@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>
<livewire:image.grid :images="$album->images"></livewire:image.grid>
<x-drawer name="image-add" >
<x-slot:title>Neue Bilder zu {{ $album->name }} hinzufügen</x-slot:title>
<x-slot:content>

4
resources/views/category/show.blade.php
View File

@@ -20,7 +20,7 @@
</div>
@endpush
<x-layout>
<x-layouts.app>
<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">
{{ $category->name }}
@@ -50,4 +50,4 @@
<livewire:drawer.album.create></livewire:drawer.album.create>
</x-slot:content>
</x-drawer>
</x-layout>
</x-layouts.app>

4
resources/views/welcome.blade.php
View File

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

4
routes/web.php
View File

@@ -3,11 +3,11 @@
use App\Http\Controllers\ImageController;
use Illuminate\Support\Facades\Route;
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('/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}/lightbox', [ImageController::class, 'lightbox'])->name('image.lightbox');
Route::get('/image/{image}/download', [ImageController::class, 'download'])->name('image.download');