bild teilen: erledigt nun sharesheet.tsx, demoswitchertenants seeder hinzugefügt;
unnötige pakete entfernt
This commit is contained in:
613
app/Console/Commands/SeedDemoSwitcherTenants.php
Normal file
613
app/Console/Commands/SeedDemoSwitcherTenants.php
Normal file
@@ -0,0 +1,613 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Console\Commands;
|
||||||
|
|
||||||
|
use App\Models\Event;
|
||||||
|
use App\Models\EventPackage;
|
||||||
|
use App\Models\EventType;
|
||||||
|
use App\Models\Package;
|
||||||
|
use App\Models\Photo;
|
||||||
|
use App\Models\TaskCollection;
|
||||||
|
use App\Models\Tenant;
|
||||||
|
use App\Models\TenantPackage;
|
||||||
|
use App\Models\User;
|
||||||
|
use Carbon\Carbon;
|
||||||
|
use Illuminate\Console\Command;
|
||||||
|
use Illuminate\Support\Arr;
|
||||||
|
use Illuminate\Support\Facades\DB;
|
||||||
|
use Illuminate\Support\Facades\Hash;
|
||||||
|
use Illuminate\Support\Facades\Http;
|
||||||
|
use Illuminate\Support\Facades\Storage;
|
||||||
|
use Illuminate\Support\Str;
|
||||||
|
|
||||||
|
class SeedDemoSwitcherTenants extends Command
|
||||||
|
{
|
||||||
|
protected $signature = 'demo:seed-switcher {--with-photos : Download sample photos from Pexels} {--photos-per-event=18 : Target photos per event when downloading} {--cleanup : Remove demo switcher tenants/events/photos instead of seeding}';
|
||||||
|
|
||||||
|
protected $description = 'Seeds demo tenants used by the DevTenantSwitcher (endcustomer + reseller profiles)';
|
||||||
|
|
||||||
|
public function handle(): int
|
||||||
|
{
|
||||||
|
if (! app()->environment(['local', 'development', 'demo'])) {
|
||||||
|
$this->error('Cleanup/Seeding is restricted to local/development/demo environments.');
|
||||||
|
|
||||||
|
return self::FAILURE;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($this->option('cleanup')) {
|
||||||
|
return $this->cleanup();
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->info('Seeding demo tenants for switcher...');
|
||||||
|
|
||||||
|
$packages = $this->loadPackages();
|
||||||
|
$eventTypes = $this->loadEventTypes();
|
||||||
|
|
||||||
|
DB::transaction(function () use ($packages, $eventTypes) {
|
||||||
|
$this->seedCustomerStandardEmpty($packages, $eventTypes);
|
||||||
|
$this->seedCustomerStarterWedding($packages, $eventTypes);
|
||||||
|
$this->seedResellerActive($packages, $eventTypes);
|
||||||
|
$this->seedResellerFull($packages, $eventTypes);
|
||||||
|
});
|
||||||
|
|
||||||
|
if ($this->option('with-photos')) {
|
||||||
|
$this->seedPhotosFromPexels((int) $this->option('photos-per-event'));
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->info('Done.');
|
||||||
|
|
||||||
|
return self::SUCCESS;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function cleanup(): int
|
||||||
|
{
|
||||||
|
$slugs = [
|
||||||
|
'demo-standard-empty',
|
||||||
|
'demo-starter-wedding',
|
||||||
|
'demo-reseller-active',
|
||||||
|
'demo-reseller-full',
|
||||||
|
];
|
||||||
|
|
||||||
|
$eventsDeleted = 0;
|
||||||
|
$photosDeleted = 0;
|
||||||
|
$photoLikesDeleted = 0;
|
||||||
|
$usersDeleted = 0;
|
||||||
|
|
||||||
|
foreach ($slugs as $slug) {
|
||||||
|
$tenant = Tenant::where('slug', $slug)->first();
|
||||||
|
|
||||||
|
if (! $tenant) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach ($tenant->events as $event) {
|
||||||
|
$eventsDeleted++;
|
||||||
|
$photos = Photo::where('event_id', $event->id)->get();
|
||||||
|
foreach ($photos as $photo) {
|
||||||
|
$deletedLikes = $photo->likes()->count();
|
||||||
|
$photo->likes()->delete();
|
||||||
|
$photoLikesDeleted += $deletedLikes;
|
||||||
|
|
||||||
|
if ($photo->thumbnail_path) {
|
||||||
|
Storage::disk('public')->delete($photo->thumbnail_path);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($photo->file_path) {
|
||||||
|
Storage::disk('public')->delete($photo->file_path);
|
||||||
|
}
|
||||||
|
|
||||||
|
$photo->delete();
|
||||||
|
$photosDeleted++;
|
||||||
|
}
|
||||||
|
|
||||||
|
Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery");
|
||||||
|
Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery/thumbs");
|
||||||
|
|
||||||
|
$event->taskCollections()->detach();
|
||||||
|
$event->tasks()->detach();
|
||||||
|
$event->eventPackages()->delete();
|
||||||
|
$event->delete();
|
||||||
|
}
|
||||||
|
|
||||||
|
TenantPackage::where('tenant_id', $tenant->id)->delete();
|
||||||
|
$usersDeleted += User::where('tenant_id', $tenant->id)->count();
|
||||||
|
User::where('tenant_id', $tenant->id)->delete();
|
||||||
|
$tenant->delete();
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->info(
|
||||||
|
'Cleanup completed. Tenants deleted: '.count($slugs)
|
||||||
|
.", Users deleted: {$usersDeleted}, Events deleted: {$eventsDeleted}, Photos deleted: {$photosDeleted}, Photo likes deleted: {$photoLikesDeleted}"
|
||||||
|
);
|
||||||
|
|
||||||
|
return self::SUCCESS;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function loadPackages(): array
|
||||||
|
{
|
||||||
|
$slugs = [
|
||||||
|
'starter' => 'Starter',
|
||||||
|
'standard' => 'Standard',
|
||||||
|
's-small-reseller' => 'Reseller S',
|
||||||
|
];
|
||||||
|
|
||||||
|
$packages = [];
|
||||||
|
foreach ($slugs as $slug => $label) {
|
||||||
|
$package = Package::where('slug', $slug)->first();
|
||||||
|
if (! $package) {
|
||||||
|
$this->error("Package {$label} ({$slug}) not found. Run PackageSeeder first.");
|
||||||
|
abort(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
$packages[$slug] = $package;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $packages;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function loadEventTypes(): array
|
||||||
|
{
|
||||||
|
$slugs = ['wedding', 'corporate', 'birthday', 'festival'];
|
||||||
|
$types = [];
|
||||||
|
|
||||||
|
foreach ($slugs as $slug) {
|
||||||
|
$eventType = EventType::where('slug', $slug)->first();
|
||||||
|
if ($eventType) {
|
||||||
|
$types[$slug] = $eventType;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $types;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function seedCustomerStandardEmpty(array $packages, array $eventTypes): void
|
||||||
|
{
|
||||||
|
$tenant = $this->upsertTenant(
|
||||||
|
slug: 'demo-standard-empty',
|
||||||
|
name: 'Demo Standard (ohne Event)',
|
||||||
|
contactEmail: 'standard-empty@demo.fotospiel',
|
||||||
|
attributes: [
|
||||||
|
'subscription_tier' => 'standard',
|
||||||
|
'subscription_status' => 'active',
|
||||||
|
'event_credits_balance' => 1,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->upsertAdmin($tenant, 'standard-empty@demo.fotospiel');
|
||||||
|
|
||||||
|
TenantPackage::updateOrCreate(
|
||||||
|
['tenant_id' => $tenant->id, 'package_id' => $packages['standard']->id],
|
||||||
|
[
|
||||||
|
'price' => $packages['standard']->price,
|
||||||
|
'purchased_at' => Carbon::now()->subDays(1),
|
||||||
|
'expires_at' => Carbon::now()->addMonths(12),
|
||||||
|
'used_events' => 0,
|
||||||
|
'active' => true,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->comment('Seeded Standard tenant without events.');
|
||||||
|
}
|
||||||
|
|
||||||
|
private function seedCustomerStarterWedding(array $packages, array $eventTypes): void
|
||||||
|
{
|
||||||
|
$tenant = $this->upsertTenant(
|
||||||
|
slug: 'demo-starter-wedding',
|
||||||
|
name: 'Demo Starter Wedding',
|
||||||
|
contactEmail: 'starter-wedding@demo.fotospiel',
|
||||||
|
attributes: [
|
||||||
|
'subscription_tier' => 'starter',
|
||||||
|
'subscription_status' => 'active',
|
||||||
|
'event_credits_balance' => 0,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->upsertAdmin($tenant, 'starter-wedding@demo.fotospiel');
|
||||||
|
|
||||||
|
$event = $this->upsertEvent(
|
||||||
|
tenant: $tenant,
|
||||||
|
package: $packages['starter'],
|
||||||
|
eventType: $eventTypes['wedding'] ?? null,
|
||||||
|
attributes: [
|
||||||
|
'name' => ['de' => 'Hochzeit Mia & Jonas', 'en' => 'Wedding Mia & Jonas'],
|
||||||
|
'slug' => 'demo-starter-wedding',
|
||||||
|
'status' => 'published',
|
||||||
|
'is_active' => true,
|
||||||
|
'date' => Carbon::now()->addWeeks(5),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->attachDefaultCollections($event);
|
||||||
|
}
|
||||||
|
|
||||||
|
private function seedResellerActive(array $packages, array $eventTypes): void
|
||||||
|
{
|
||||||
|
$tenant = $this->upsertTenant(
|
||||||
|
slug: 'demo-reseller-active',
|
||||||
|
name: 'Demo Reseller Active',
|
||||||
|
contactEmail: 'reseller-active@demo.fotospiel',
|
||||||
|
attributes: [
|
||||||
|
'subscription_tier' => 'reseller',
|
||||||
|
'subscription_status' => 'active',
|
||||||
|
'event_credits_balance' => 2,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->upsertAdmin($tenant, 'reseller-active@demo.fotospiel');
|
||||||
|
|
||||||
|
TenantPackage::updateOrCreate(
|
||||||
|
['tenant_id' => $tenant->id, 'package_id' => $packages['s-small-reseller']->id],
|
||||||
|
[
|
||||||
|
'price' => $packages['s-small-reseller']->price,
|
||||||
|
'purchased_at' => Carbon::now()->subMonths(1),
|
||||||
|
'expires_at' => Carbon::now()->addMonths(11),
|
||||||
|
'used_events' => 3,
|
||||||
|
'active' => true,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
$events = [
|
||||||
|
[
|
||||||
|
'name' => ['de' => 'Corporate Summit', 'en' => 'Corporate Summit'],
|
||||||
|
'slug' => 'demo-reseller-corporate',
|
||||||
|
'type' => $eventTypes['corporate'] ?? null,
|
||||||
|
'date' => Carbon::now()->addWeeks(3),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'name' => ['de' => 'Sommerfestival', 'en' => 'Summer Festival'],
|
||||||
|
'slug' => 'demo-reseller-festival',
|
||||||
|
'type' => $eventTypes['festival'] ?? ($eventTypes['birthday'] ?? null),
|
||||||
|
'date' => Carbon::now()->addWeeks(6),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'name' => ['de' => 'Geburtstag Lisa', 'en' => 'Lisa Birthday'],
|
||||||
|
'slug' => 'demo-reseller-birthday',
|
||||||
|
'type' => $eventTypes['birthday'] ?? null,
|
||||||
|
'date' => Carbon::now()->addWeeks(9),
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
foreach ($events as $index => $config) {
|
||||||
|
$event = $this->upsertEvent(
|
||||||
|
tenant: $tenant,
|
||||||
|
package: $packages['standard'],
|
||||||
|
eventType: $config['type'],
|
||||||
|
attributes: [
|
||||||
|
'name' => $config['name'],
|
||||||
|
'slug' => $config['slug'],
|
||||||
|
'status' => 'published',
|
||||||
|
'is_active' => true,
|
||||||
|
'date' => $config['date'],
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->attachDefaultCollections($event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function seedResellerFull(array $packages, array $eventTypes): void
|
||||||
|
{
|
||||||
|
$tenant = $this->upsertTenant(
|
||||||
|
slug: 'demo-reseller-full',
|
||||||
|
name: 'Demo Reseller Voll',
|
||||||
|
contactEmail: 'reseller-full@demo.fotospiel',
|
||||||
|
attributes: [
|
||||||
|
'subscription_tier' => 'reseller',
|
||||||
|
'subscription_status' => 'active',
|
||||||
|
'event_credits_balance' => 0,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->upsertAdmin($tenant, 'reseller-full@demo.fotospiel');
|
||||||
|
|
||||||
|
TenantPackage::updateOrCreate(
|
||||||
|
['tenant_id' => $tenant->id, 'package_id' => $packages['s-small-reseller']->id],
|
||||||
|
[
|
||||||
|
'price' => $packages['s-small-reseller']->price,
|
||||||
|
'purchased_at' => Carbon::now()->subMonths(6),
|
||||||
|
'expires_at' => Carbon::now()->addMonths(6),
|
||||||
|
'used_events' => 5,
|
||||||
|
'active' => true,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
$eventConfigs = [
|
||||||
|
['slug' => 'demo-full-wedding', 'name' => ['de' => 'Hochzeit Clara & Ben', 'en' => 'Wedding Clara & Ben'], 'type' => $eventTypes['wedding'] ?? null],
|
||||||
|
['slug' => 'demo-full-corporate', 'name' => ['de' => 'Jahrestagung', 'en' => 'Annual Summit'], 'type' => $eventTypes['corporate'] ?? null],
|
||||||
|
['slug' => 'demo-full-birthday', 'name' => ['de' => 'Geburtstag Jonas', 'en' => 'Birthday Jonas'], 'type' => $eventTypes['birthday'] ?? null],
|
||||||
|
['slug' => 'demo-full-festival', 'name' => ['de' => 'Stadtfest', 'en' => 'City Festival'], 'type' => $eventTypes['festival'] ?? null],
|
||||||
|
['slug' => 'demo-full-christmas', 'name' => ['de' => 'Weihnachtsfeier', 'en' => 'Christmas Party'], 'type' => $eventTypes['corporate'] ?? null],
|
||||||
|
];
|
||||||
|
|
||||||
|
foreach ($eventConfigs as $index => $config) {
|
||||||
|
$event = $this->upsertEvent(
|
||||||
|
tenant: $tenant,
|
||||||
|
package: $packages['standard'],
|
||||||
|
eventType: $config['type'],
|
||||||
|
attributes: [
|
||||||
|
'name' => $config['name'],
|
||||||
|
'slug' => $config['slug'],
|
||||||
|
'status' => 'archived',
|
||||||
|
'is_active' => false,
|
||||||
|
'date' => Carbon::now()->subWeeks(5 - $index),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->attachDefaultCollections($event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function upsertTenant(string $slug, string $name, string $contactEmail, array $attributes = []): Tenant
|
||||||
|
{
|
||||||
|
$defaults = [
|
||||||
|
'name' => $name,
|
||||||
|
'contact_email' => $contactEmail,
|
||||||
|
'subscription_expires_at' => Carbon::now()->addMonths(12),
|
||||||
|
'is_active' => true,
|
||||||
|
'is_suspended' => false,
|
||||||
|
'settings_updated_at' => Carbon::now(),
|
||||||
|
'settings' => [
|
||||||
|
'branding' => [
|
||||||
|
'logo_url' => null,
|
||||||
|
'primary_color' => '#1D4ED8',
|
||||||
|
'secondary_color' => '#0F172A',
|
||||||
|
'font_family' => 'Inter, sans-serif',
|
||||||
|
],
|
||||||
|
'features' => [
|
||||||
|
'photo_likes_enabled' => true,
|
||||||
|
'event_checklist' => true,
|
||||||
|
],
|
||||||
|
'contact_email' => $contactEmail,
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
return Tenant::updateOrCreate(
|
||||||
|
['slug' => $slug],
|
||||||
|
array_merge($defaults, $attributes, ['slug' => $slug])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private function upsertAdmin(Tenant $tenant, string $email): User
|
||||||
|
{
|
||||||
|
$password = config('seeding.demo_tenant_password', 'Demo1234!');
|
||||||
|
|
||||||
|
$user = User::updateOrCreate(
|
||||||
|
['email' => $email],
|
||||||
|
[
|
||||||
|
'tenant_id' => $tenant->id,
|
||||||
|
'role' => 'tenant_admin',
|
||||||
|
'password' => Hash::make($password),
|
||||||
|
'first_name' => Str::headline(Str::before($tenant->slug, '-')),
|
||||||
|
'last_name' => 'Demo',
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
if (! $user->email_verified_at) {
|
||||||
|
$user->forceFill(['email_verified_at' => now()])->save();
|
||||||
|
}
|
||||||
|
|
||||||
|
return $user;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function upsertEvent(Tenant $tenant, Package $package, ?EventType $eventType, array $attributes): Event
|
||||||
|
{
|
||||||
|
$resolvedEventType = $eventType ?? $this->fallbackEventType();
|
||||||
|
|
||||||
|
$payload = array_merge([
|
||||||
|
'tenant_id' => $tenant->id,
|
||||||
|
'event_type_id' => $resolvedEventType?->id,
|
||||||
|
'settings' => [
|
||||||
|
'features' => [
|
||||||
|
'photo_likes_enabled' => true,
|
||||||
|
'event_checklist' => true,
|
||||||
|
],
|
||||||
|
],
|
||||||
|
], $attributes);
|
||||||
|
|
||||||
|
/** @var Event $event */
|
||||||
|
$event = Event::updateOrCreate(
|
||||||
|
['slug' => $attributes['slug']],
|
||||||
|
$payload
|
||||||
|
);
|
||||||
|
|
||||||
|
EventPackage::updateOrCreate(
|
||||||
|
[
|
||||||
|
'event_id' => $event->id,
|
||||||
|
'package_id' => $package->id,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'purchased_price' => $package->price,
|
||||||
|
'purchased_at' => Carbon::now()->subDays(2),
|
||||||
|
'used_photos' => 0,
|
||||||
|
'used_guests' => 0,
|
||||||
|
'gallery_expires_at' => Carbon::now()->addDays($package->gallery_days ?? 30),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
return $event;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function fallbackEventType(): ?EventType
|
||||||
|
{
|
||||||
|
$fallback = EventType::first();
|
||||||
|
|
||||||
|
if (! $fallback) {
|
||||||
|
$this->warn('No EventType available, events will miss type. Please run EventTypesSeeder.');
|
||||||
|
}
|
||||||
|
|
||||||
|
return $fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function attachDefaultCollections(Event $event): void
|
||||||
|
{
|
||||||
|
if (! $event->event_type_id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$collection = TaskCollection::where('event_type_id', $event->event_type_id)
|
||||||
|
->where('is_default', true)
|
||||||
|
->orderBy('position')
|
||||||
|
->first();
|
||||||
|
|
||||||
|
if (! $collection) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$event->taskCollections()->syncWithoutDetaching([$collection->id]);
|
||||||
|
|
||||||
|
$taskIds = $collection->tasks()->pluck('tasks.id')->all();
|
||||||
|
if ($taskIds !== []) {
|
||||||
|
$event->tasks()->syncWithoutDetaching($taskIds);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function seedPhotosFromPexels(int $targetPerEvent): void
|
||||||
|
{
|
||||||
|
$apiKey = config('services.pexels.key') ?? env('PEXELS_API_KEY');
|
||||||
|
if (! $apiKey) {
|
||||||
|
$this->warn('PEXELS_API_KEY missing, skipping photo download.');
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$events = Event::whereIn('slug', [
|
||||||
|
'demo-starter-wedding',
|
||||||
|
'demo-reseller-corporate',
|
||||||
|
'demo-reseller-festival',
|
||||||
|
'demo-reseller-birthday',
|
||||||
|
'demo-full-wedding',
|
||||||
|
'demo-full-corporate',
|
||||||
|
'demo-full-birthday',
|
||||||
|
'demo-full-festival',
|
||||||
|
'demo-full-christmas',
|
||||||
|
])->get();
|
||||||
|
|
||||||
|
foreach ($events as $event) {
|
||||||
|
$query = $this->guessQueryForEvent($event);
|
||||||
|
$this->info("Downloading photos for {$event->slug} ({$query})...");
|
||||||
|
|
||||||
|
$photos = $this->fetchPexels($apiKey, $query, $targetPerEvent);
|
||||||
|
if ($photos === []) {
|
||||||
|
$this->warn('No photos returned from Pexels.');
|
||||||
|
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->storePhotos($event, $photos);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function guessQueryForEvent(Event $event): string
|
||||||
|
{
|
||||||
|
$typeSlug = optional($event->eventType)->slug;
|
||||||
|
|
||||||
|
return match ($typeSlug) {
|
||||||
|
'wedding' => 'wedding photography couple',
|
||||||
|
'corporate' => 'corporate event people',
|
||||||
|
'birthday' => 'birthday party friends',
|
||||||
|
default => 'event celebration crowd',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private function fetchPexels(string $apiKey, string $query, int $count): array
|
||||||
|
{
|
||||||
|
$perPage = min(40, max(5, $count));
|
||||||
|
|
||||||
|
$response = Http::withHeaders([
|
||||||
|
'Authorization' => $apiKey,
|
||||||
|
])->get('https://api.pexels.com/v1/search', [
|
||||||
|
'query' => $query,
|
||||||
|
'per_page' => $perPage,
|
||||||
|
'orientation' => 'landscape',
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (! $response->ok()) {
|
||||||
|
$this->warn('Pexels request failed: '.$response->status());
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = $response->json();
|
||||||
|
|
||||||
|
return Arr::get($data, 'photos', []);
|
||||||
|
}
|
||||||
|
|
||||||
|
private function storePhotos(Event $event, array $photos): void
|
||||||
|
{
|
||||||
|
$tenantId = $event->tenant_id;
|
||||||
|
$storage = Storage::disk('public');
|
||||||
|
$storage->makeDirectory("events/{$event->id}/gallery");
|
||||||
|
$storage->makeDirectory("events/{$event->id}/gallery/thumbs");
|
||||||
|
|
||||||
|
$demoPhotos = Photo::where('event_id', $event->id)
|
||||||
|
->where('metadata->demo', true)
|
||||||
|
->get();
|
||||||
|
|
||||||
|
foreach ($demoPhotos as $photo) {
|
||||||
|
$storage->delete([$photo->file_path, $photo->thumbnail_path]);
|
||||||
|
$photo->delete();
|
||||||
|
}
|
||||||
|
|
||||||
|
$limit = min(count($photos), (int) $this->option('photos-per-event'));
|
||||||
|
for ($i = 0; $i < $limit; $i++) {
|
||||||
|
$photo = $photos[$i];
|
||||||
|
$src = $photo['src'] ?? [];
|
||||||
|
$originalUrl = $src['large2x'] ?? $src['large'] ?? null;
|
||||||
|
$thumbUrl = $src['medium'] ?? $src['small'] ?? $originalUrl;
|
||||||
|
|
||||||
|
if (! $originalUrl) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$filename = sprintf('%s-demo-%02d.jpg', $event->slug, $i + 1);
|
||||||
|
$thumbFilename = sprintf('%s-demo-%02d_thumb.jpg', $event->slug, $i + 1);
|
||||||
|
|
||||||
|
$filePath = "events/{$event->id}/gallery/{$filename}";
|
||||||
|
$thumbPath = "events/{$event->id}/gallery/thumbs/{$thumbFilename}";
|
||||||
|
|
||||||
|
try {
|
||||||
|
$imageResponse = Http::get($originalUrl);
|
||||||
|
if ($imageResponse->ok()) {
|
||||||
|
$storage->put($filePath, $imageResponse->body());
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($thumbUrl) {
|
||||||
|
$thumbResponse = Http::get($thumbUrl);
|
||||||
|
if ($thumbResponse->ok()) {
|
||||||
|
$storage->put($thumbPath, $thumbResponse->body());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (\Throwable $exception) {
|
||||||
|
$this->warn('Failed to download image: '.$exception->getMessage());
|
||||||
|
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$timestamp = Carbon::parse($event->date ?? Carbon::now())->addHours($i);
|
||||||
|
|
||||||
|
Photo::updateOrCreate(
|
||||||
|
[
|
||||||
|
'tenant_id' => $tenantId,
|
||||||
|
'event_id' => $event->id,
|
||||||
|
'file_path' => $filePath,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'thumbnail_path' => $thumbPath,
|
||||||
|
'guest_name' => 'Demo Guest '.($i + 1),
|
||||||
|
'likes_count' => rand(1, 25),
|
||||||
|
'is_featured' => $i === 0,
|
||||||
|
'metadata' => ['demo' => true, 'source' => 'pexels'],
|
||||||
|
'created_at' => $timestamp,
|
||||||
|
'updated_at' => $timestamp,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
EventPackage::where('event_id', $event->id)->update([
|
||||||
|
'used_photos' => max($limit, 0),
|
||||||
|
'used_guests' => max(15, $event->eventPackage?->used_guests ?? 0),
|
||||||
|
]);
|
||||||
|
|
||||||
|
$this->info("Seeded {$limit} photos for {$event->slug}");
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1215,7 +1215,8 @@ class EventPublicController extends BaseController
|
|||||||
[
|
[
|
||||||
'slug' => $shareLink->slug,
|
'slug' => $shareLink->slug,
|
||||||
'variant' => $variant,
|
'variant' => $variant,
|
||||||
]
|
],
|
||||||
|
absolute: false
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
3590
package-lock.json
generated
3590
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@@ -27,6 +27,7 @@
|
|||||||
"@testing-library/user-event": "^14.5.2",
|
"@testing-library/user-event": "^14.5.2",
|
||||||
"@types/fabric": "^5.3.9",
|
"@types/fabric": "^5.3.9",
|
||||||
"@types/node": "^22.13.5",
|
"@types/node": "^22.13.5",
|
||||||
|
"dotenv": "^16.4.7",
|
||||||
"eslint": "^9.17.0",
|
"eslint": "^9.17.0",
|
||||||
"eslint-config-prettier": "^10.0.1",
|
"eslint-config-prettier": "^10.0.1",
|
||||||
"eslint-plugin-react": "^7.37.3",
|
"eslint-plugin-react": "^7.37.3",
|
||||||
@@ -35,23 +36,15 @@
|
|||||||
"jsdom": "^25.0.1",
|
"jsdom": "^25.0.1",
|
||||||
"playwright": "^1.55.1",
|
"playwright": "^1.55.1",
|
||||||
"prettier": "^3.4.2",
|
"prettier": "^3.4.2",
|
||||||
"prettier-plugin-organize-imports": "^4.1.0",
|
|
||||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
||||||
"shadcn": "^3.3.1",
|
"shadcn": "^3.3.1",
|
||||||
"typescript-eslint": "^8.23.0",
|
"typescript-eslint": "^8.23.0",
|
||||||
"vitest": "^2.1.5"
|
"vitest": "^2.1.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dnd-kit/core": "^6.3.1",
|
"@dnd-kit/core": "^6.3.1",
|
||||||
"@dnd-kit/modifiers": "^9.0.0",
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
"@dnd-kit/sortable": "^10.0.0",
|
|
||||||
"@headlessui/react": "^2.2.0",
|
"@headlessui/react": "^2.2.0",
|
||||||
"@inertiajs/react": "^2.1.0",
|
"@inertiajs/react": "^2.1.0",
|
||||||
"@jpisnice/shadcn-ui-mcp-server": "^1.1.4",
|
|
||||||
"@modelcontextprotocol/server-puppeteer": "^2025.5.12",
|
|
||||||
"@modelcontextprotocol/server-sequential-thinking": "^2025.7.1",
|
|
||||||
"@paypal/react-paypal-js": "^8.9.2",
|
|
||||||
"@playwright/mcp": "^0.0.46",
|
|
||||||
"@radix-ui/react-accordion": "^1.2.12",
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.1.4",
|
"@radix-ui/react-checkbox": "^1.1.4",
|
||||||
@@ -69,24 +62,19 @@
|
|||||||
"@radix-ui/react-toggle": "^1.1.2",
|
"@radix-ui/react-toggle": "^1.1.2",
|
||||||
"@radix-ui/react-toggle-group": "^1.1.2",
|
"@radix-ui/react-toggle-group": "^1.1.2",
|
||||||
"@radix-ui/react-tooltip": "^1.1.8",
|
"@radix-ui/react-tooltip": "^1.1.8",
|
||||||
"@stripe/react-stripe-js": "^5.0.0",
|
|
||||||
"@stripe/stripe-js": "^8.0.0",
|
"@stripe/stripe-js": "^8.0.0",
|
||||||
"@tailwindcss/vite": "^4.1.11",
|
"@tailwindcss/vite": "^4.1.11",
|
||||||
"@tanstack/react-query": "^5.90.2",
|
"@tanstack/react-query": "^5.90.2",
|
||||||
"@types/react": "^19.0.3",
|
"@types/react": "^19.0.3",
|
||||||
"@types/react-dom": "^19.0.2",
|
"@types/react-dom": "^19.0.2",
|
||||||
"@upstash/context7-mcp": "^1.0.26",
|
|
||||||
"@vitejs/plugin-react": "^4.6.0",
|
"@vitejs/plugin-react": "^4.6.0",
|
||||||
"chrome-devtools-mcp": "^0.10.1",
|
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"concurrently": "^9.0.1",
|
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"embla-carousel": "^8.6.0",
|
"embla-carousel": "^8.6.0",
|
||||||
"embla-carousel-autoplay": "^8.6.0",
|
"embla-carousel-autoplay": "^8.6.0",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"fabric": "^6.0.1",
|
"fabric": "^6.0.1",
|
||||||
"fabricjs-design-tool": "github:rifrocket/fabricjs-design-tool#main",
|
|
||||||
"globals": "^15.14.0",
|
"globals": "^15.14.0",
|
||||||
"html5-qrcode": "^2.3.8",
|
"html5-qrcode": "^2.3.8",
|
||||||
"i18next": "^25.5.3",
|
"i18next": "^25.5.3",
|
||||||
@@ -99,7 +87,6 @@
|
|||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-hot-toast": "^2.6.0",
|
"react-hot-toast": "^2.6.0",
|
||||||
"react-i18next": "^16.0.0",
|
"react-i18next": "^16.0.0",
|
||||||
"react-rnd": "^10.4.12",
|
|
||||||
"react-router-dom": "^7.8.2",
|
"react-router-dom": "^7.8.2",
|
||||||
"tailwind-merge": "^3.0.1",
|
"tailwind-merge": "^3.0.1",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
|
|||||||
140
resources/js/guest/components/ShareSheet.tsx
Normal file
140
resources/js/guest/components/ShareSheet.tsx
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Share2, MessageSquare, Copy } from 'lucide-react';
|
||||||
|
import { useTranslation } from '../i18n/useTranslation';
|
||||||
|
|
||||||
|
type ShareSheetProps = {
|
||||||
|
open: boolean;
|
||||||
|
photoId?: number | null;
|
||||||
|
eventName?: string | null;
|
||||||
|
url?: string | null;
|
||||||
|
loading?: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onShareNative: () => void;
|
||||||
|
onShareWhatsApp: () => void;
|
||||||
|
onShareMessages: () => void;
|
||||||
|
onCopyLink: () => void;
|
||||||
|
radius?: number;
|
||||||
|
bodyFont?: string | null;
|
||||||
|
headingFont?: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export function ShareSheet({
|
||||||
|
open,
|
||||||
|
photoId,
|
||||||
|
eventName,
|
||||||
|
url,
|
||||||
|
loading = false,
|
||||||
|
onClose,
|
||||||
|
onShareNative,
|
||||||
|
onShareWhatsApp,
|
||||||
|
onShareMessages,
|
||||||
|
onCopyLink,
|
||||||
|
radius = 12,
|
||||||
|
bodyFont,
|
||||||
|
headingFont,
|
||||||
|
}: ShareSheetProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm">
|
||||||
|
<div
|
||||||
|
className="w-full max-w-md rounded-t-3xl border border-border bg-white/98 p-4 text-slate-900 shadow-2xl ring-1 ring-black/10 backdrop-blur-md dark:border-white/10 dark:bg-slate-900/98 dark:text-white"
|
||||||
|
style={{ ...(bodyFont ? { fontFamily: bodyFont } : {}), borderRadius: radius }}
|
||||||
|
>
|
||||||
|
<div className="mb-4 flex items-start justify-between gap-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||||
|
{t('share.title', 'Geteiltes Foto')}
|
||||||
|
</p>
|
||||||
|
<p className="text-base font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
|
||||||
|
{photoId ? `#${photoId}` : ''}
|
||||||
|
</p>
|
||||||
|
{eventName ? <p className="text-xs text-muted-foreground line-clamp-2">{eventName}</p> : null}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="rounded-full border border-muted px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted/80 dark:border-white/20 dark:text-white"
|
||||||
|
style={{ borderRadius: radius }}
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
{t('lightbox.close', 'Schließen')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-800 disabled:opacity-100 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/10 dark:disabled:text-white/80"
|
||||||
|
onClick={onShareNative}
|
||||||
|
disabled={loading}
|
||||||
|
style={{ borderRadius: radius }}
|
||||||
|
>
|
||||||
|
<Share2 className="h-4 w-4" aria-hidden />
|
||||||
|
<div>
|
||||||
|
<div>{t('share.button', 'Teilen')}</div>
|
||||||
|
<div className="text-xs text-slate-600 dark:text-white/70">{t('share.title', 'Geteiltes Foto')}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-emerald-600 disabled:opacity-60 dark:border-emerald-400/40"
|
||||||
|
onClick={onShareWhatsApp}
|
||||||
|
disabled={loading}
|
||||||
|
style={{ borderRadius: radius }}
|
||||||
|
>
|
||||||
|
<WhatsAppIcon className="h-5 w-5" />
|
||||||
|
<div>
|
||||||
|
<div>{t('share.whatsapp', 'WhatsApp')}</div>
|
||||||
|
<div className="text-xs text-white/80">{loading ? '…' : ''}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center gap-3 rounded-2xl border border-sky-200 bg-sky-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-sky-600 disabled:opacity-60 dark:border-sky-400/40"
|
||||||
|
onClick={onShareMessages}
|
||||||
|
disabled={loading}
|
||||||
|
style={{ borderRadius: radius }}
|
||||||
|
>
|
||||||
|
<MessageSquare className="h-5 w-5" />
|
||||||
|
<div>
|
||||||
|
<div>{t('share.imessage', 'Nachrichten')}</div>
|
||||||
|
<div className="text-xs text-white/80">{loading ? '…' : ''}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-500 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/5 dark:disabled:text-white/50"
|
||||||
|
onClick={onCopyLink}
|
||||||
|
disabled={loading}
|
||||||
|
style={{ borderRadius: radius }}
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4" aria-hidden />
|
||||||
|
<div>
|
||||||
|
<div className="text-slate-900 dark:text-white">{t('share.copyLink', 'Link kopieren')}</div>
|
||||||
|
<div className="text-xs text-slate-600 dark:text-white/80">{loading ? t('share.loading', 'Lädt…') : ''}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{url ? (
|
||||||
|
<p className="mt-3 truncate text-xs text-slate-700 dark:text-white/80" title={url}>
|
||||||
|
{url}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ShareSheet;
|
||||||
@@ -4,17 +4,17 @@ import { Page } from './_util';
|
|||||||
import { useParams, useSearchParams } from 'react-router-dom';
|
import { useParams, useSearchParams } from 'react-router-dom';
|
||||||
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
||||||
import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
|
import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
|
||||||
import { Heart, Image as ImageIcon, Share2, MessageSquare, Copy } from 'lucide-react';
|
import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
|
||||||
import { likePhoto } from '../services/photosApi';
|
import { likePhoto } from '../services/photosApi';
|
||||||
import PhotoLightbox from './PhotoLightbox';
|
import PhotoLightbox from './PhotoLightbox';
|
||||||
import { fetchEvent, type EventData } from '../services/eventApi';
|
import { fetchEvent, type EventData } from '../services/eventApi';
|
||||||
import { useTranslation } from '../i18n/useTranslation';
|
import { useTranslation } from '../i18n/useTranslation';
|
||||||
import { sharePhotoLink } from '../lib/sharePhoto';
|
|
||||||
import { useToast } from '../components/ToastHost';
|
import { useToast } from '../components/ToastHost';
|
||||||
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
||||||
import { createPhotoShareLink } from '../services/photosApi';
|
import { createPhotoShareLink } from '../services/photosApi';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { useEventBranding } from '../context/EventBrandingContext';
|
import { useEventBranding } from '../context/EventBrandingContext';
|
||||||
|
import ShareSheet from '../components/ShareSheet';
|
||||||
|
|
||||||
const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
||||||
type GalleryPhoto = {
|
type GalleryPhoto = {
|
||||||
@@ -262,15 +262,6 @@ export default function GalleryPage() {
|
|||||||
setShareSheet({ photo: null, url: null, loading: false });
|
setShareSheet({ photo: null, url: null, loading: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
|
||||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
return (
|
return (
|
||||||
<Page title={t('galleryPage.title', 'Galerie')}>
|
<Page title={t('galleryPage.title', 'Galerie')}>
|
||||||
@@ -442,98 +433,25 @@ export default function GalleryPage() {
|
|||||||
onClose={() => setCurrentPhotoIndex(null)}
|
onClose={() => setCurrentPhotoIndex(null)}
|
||||||
onIndexChange={(index: number) => setCurrentPhotoIndex(index)}
|
onIndexChange={(index: number) => setCurrentPhotoIndex(index)}
|
||||||
token={token}
|
token={token}
|
||||||
|
eventName={event?.name ?? null}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{shareSheet.photo && (
|
<ShareSheet
|
||||||
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm">
|
open={Boolean(shareSheet.photo)}
|
||||||
<div
|
photoId={shareSheet.photo?.id ?? null}
|
||||||
className="w-full max-w-md rounded-t-3xl border border-border bg-white/98 p-4 text-slate-900 shadow-2xl ring-1 ring-black/10 backdrop-blur-md dark:border-white/10 dark:bg-slate-900/98 dark:text-white"
|
eventName={event?.name ?? null}
|
||||||
style={{ ...(bodyFont ? { fontFamily: bodyFont } : {}), borderRadius: radius }}
|
url={shareSheet.url}
|
||||||
>
|
loading={shareSheet.loading}
|
||||||
<div className="mb-4 flex items-start justify-between gap-3">
|
onClose={closeShareSheet}
|
||||||
<div className="space-y-1">
|
onShareNative={() => shareNative(shareSheet.url)}
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
|
||||||
{t('share.title', 'Geteiltes Foto')}
|
onShareMessages={() => shareMessages(shareSheet.url)}
|
||||||
</p>
|
onCopyLink={() => copyLink(shareSheet.url)}
|
||||||
<p className="text-base font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
|
radius={radius}
|
||||||
#{shareSheet.photo.id}
|
bodyFont={bodyFont}
|
||||||
</p>
|
headingFont={headingFont}
|
||||||
{event?.name && <p className="text-xs text-muted-foreground line-clamp-2">{event.name}</p>}
|
/>
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded-full border border-muted px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted/80 dark:border-white/20 dark:text-white"
|
|
||||||
style={{ borderRadius: radius }}
|
|
||||||
onClick={closeShareSheet}
|
|
||||||
>
|
|
||||||
{t('lightbox.close', 'Schließen')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-800 disabled:opacity-100 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/10 dark:disabled:text-white/80"
|
|
||||||
onClick={() => shareNative(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
style={{ borderRadius: radius }}
|
|
||||||
>
|
|
||||||
<Share2 className="h-4 w-4" aria-hidden />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.button', 'Teilen')}</div>
|
|
||||||
<div className="text-xs text-slate-600 dark:text-white/70">{t('share.title', 'Geteiltes Foto')}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-emerald-600 disabled:opacity-60 dark:border-emerald-400/40"
|
|
||||||
onClick={() => shareWhatsApp(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
style={{ borderRadius: radius }}
|
|
||||||
>
|
|
||||||
<WhatsAppIcon className="h-5 w-5" />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.whatsapp', 'WhatsApp')}</div>
|
|
||||||
<div className="text-xs text-white/80">{shareSheet.loading ? '…' : ''}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-3 rounded-2xl border border-sky-200 bg-sky-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-sky-600 disabled:opacity-60 dark:border-sky-400/40"
|
|
||||||
onClick={() => shareMessages(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
style={{ borderRadius: radius }}
|
|
||||||
>
|
|
||||||
<MessageSquare className="h-5 w-5" />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.imessage', 'Nachrichten')}</div>
|
|
||||||
<div className="text-xs text-white/80">{shareSheet.loading ? '…' : ''}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-500 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/5 dark:disabled:text-white/50"
|
|
||||||
onClick={() => copyLink(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
style={{ borderRadius: radius }}
|
|
||||||
>
|
|
||||||
<Copy className="h-4 w-4" aria-hidden />
|
|
||||||
<div>
|
|
||||||
<div className="text-slate-900 dark:text-white">{t('share.copyLink', 'Link kopieren')}</div>
|
|
||||||
<div className="text-xs text-slate-600 dark:text-white/80">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{shareSheet.url && (
|
|
||||||
<p className="mt-3 truncate text-xs text-slate-700 dark:text-white/80" title={shareSheet.url}>
|
|
||||||
{shareSheet.url}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,10 +2,12 @@ import React, { useState, useEffect } from 'react';
|
|||||||
import { useParams, useLocation, useNavigate } from 'react-router-dom';
|
import { useParams, useLocation, useNavigate } from 'react-router-dom';
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Heart, ChevronLeft, ChevronRight, X, Share2, MessageSquare, Copy } from 'lucide-react';
|
import { Heart, ChevronLeft, ChevronRight, X, Share2 } from 'lucide-react';
|
||||||
import { likePhoto, createPhotoShareLink } from '../services/photosApi';
|
import { likePhoto, createPhotoShareLink } from '../services/photosApi';
|
||||||
import { useTranslation } from '../i18n/useTranslation';
|
import { useTranslation } from '../i18n/useTranslation';
|
||||||
import { useToast } from '../components/ToastHost';
|
import { useToast } from '../components/ToastHost';
|
||||||
|
import ShareSheet from '../components/ShareSheet';
|
||||||
|
import { useEventBranding } from '../context/EventBrandingContext';
|
||||||
|
|
||||||
type Photo = {
|
type Photo = {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -25,9 +27,10 @@ interface Props {
|
|||||||
onClose?: () => void;
|
onClose?: () => void;
|
||||||
onIndexChange?: (index: number) => void;
|
onIndexChange?: (index: number) => void;
|
||||||
token?: string;
|
token?: string;
|
||||||
|
eventName?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, token }: Props) {
|
export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, token, eventName }: Props) {
|
||||||
const params = useParams<{ token?: string; photoId?: string }>();
|
const params = useParams<{ token?: string; photoId?: string }>();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -35,6 +38,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
|||||||
const eventToken = params.token || token;
|
const eventToken = params.token || token;
|
||||||
const { t, locale } = useTranslation();
|
const { t, locale } = useTranslation();
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
|
const { branding } = useEventBranding();
|
||||||
|
|
||||||
const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
|
const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
|
||||||
const [task, setTask] = useState<Task | null>(null);
|
const [task, setTask] = useState<Task | null>(null);
|
||||||
@@ -101,6 +105,10 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
|||||||
}
|
}
|
||||||
}, [photo]);
|
}, [photo]);
|
||||||
|
|
||||||
|
const radius = branding.buttons?.radius ?? 12;
|
||||||
|
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? null;
|
||||||
|
const headingFont = branding.typography?.heading ?? branding.fontFamily ?? null;
|
||||||
|
|
||||||
const touchRef = React.useRef<HTMLDivElement>(null);
|
const touchRef = React.useRef<HTMLDivElement>(null);
|
||||||
const startX = React.useRef(0);
|
const startX = React.useRef(0);
|
||||||
const currentX = React.useRef(0);
|
const currentX = React.useRef(0);
|
||||||
@@ -212,16 +220,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
|||||||
}
|
}
|
||||||
|
|
||||||
const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
|
const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
|
||||||
const shareText = t('share.shareText', { event: shareTitle || 'Fotospiel' });
|
const shareText = t('share.shareText', { event: eventName ?? shareTitle ?? 'Fotospiel' });
|
||||||
|
|
||||||
const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
|
||||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
async function openShareSheet() {
|
async function openShareSheet() {
|
||||||
if (!photo || !eventToken) return;
|
if (!photo || !eventToken) return;
|
||||||
@@ -250,6 +249,21 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
|||||||
setShareSheet({ url: null, loading: false });
|
setShareSheet({ url: null, loading: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function shareNative(url?: string | null) {
|
||||||
|
if (!url) return;
|
||||||
|
const data: ShareData = {
|
||||||
|
title: shareTitle,
|
||||||
|
text: shareText,
|
||||||
|
url,
|
||||||
|
};
|
||||||
|
if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
|
||||||
|
navigator.share(data).catch(() => {});
|
||||||
|
setShareSheet({ url: null, loading: false });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
void copyLink(url);
|
||||||
|
}
|
||||||
|
|
||||||
async function copyLink(url?: string | null) {
|
async function copyLink(url?: string | null) {
|
||||||
if (!url) return;
|
if (!url) return;
|
||||||
try {
|
try {
|
||||||
@@ -375,91 +389,21 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(shareSheet.url !== null || shareSheet.loading) && (
|
<ShareSheet
|
||||||
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
|
open={shareSheet.loading || Boolean(shareSheet.url)}
|
||||||
<div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
|
photoId={photo?.id}
|
||||||
<div className="mb-3 flex items-center justify-between">
|
eventName={eventName ?? null}
|
||||||
<div>
|
url={shareSheet.url}
|
||||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">
|
loading={shareSheet.loading}
|
||||||
{t('share.title', 'Geteiltes Foto')}
|
onClose={closeShareSheet}
|
||||||
</p>
|
onShareNative={() => shareNative(shareSheet.url)}
|
||||||
<p className="text-sm font-semibold text-foreground">#{photo?.id}</p>
|
onShareWhatsApp={() => shareWhatsApp(shareSheet.url)}
|
||||||
</div>
|
onShareMessages={() => shareMessages(shareSheet.url)}
|
||||||
<button
|
onCopyLink={() => copyLink(shareSheet.url)}
|
||||||
type="button"
|
radius={radius}
|
||||||
className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
|
bodyFont={bodyFont}
|
||||||
onClick={closeShareSheet}
|
headingFont={headingFont}
|
||||||
>
|
/>
|
||||||
{t('lightbox.close', 'Schließen')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
|
||||||
onClick={() => {
|
|
||||||
if (!shareSheet.url) return;
|
|
||||||
const data: ShareData = {
|
|
||||||
title: shareTitle,
|
|
||||||
text: shareText,
|
|
||||||
url: shareSheet.url,
|
|
||||||
};
|
|
||||||
if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
|
|
||||||
navigator.share(data).catch(() => {});
|
|
||||||
setShareSheet({ url: null, loading: false });
|
|
||||||
} else {
|
|
||||||
void copyLink(shareSheet.url);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
>
|
|
||||||
<Share2 className="h-4 w-4" />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.button', 'Teilen')}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
|
|
||||||
onClick={() => shareWhatsApp(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
>
|
|
||||||
<WhatsAppIcon className="h-5 w-5" />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.whatsapp', 'WhatsApp')}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
|
|
||||||
onClick={() => shareMessages(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
>
|
|
||||||
<MessageSquare className="h-5 w-5" />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.imessage', 'Nachrichten')}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
|
||||||
onClick={() => copyLink(shareSheet.url)}
|
|
||||||
disabled={shareSheet.loading}
|
|
||||||
>
|
|
||||||
<Copy className="h-4 w-4" />
|
|
||||||
<div>
|
|
||||||
<div>{t('share.copyLink', 'Link kopieren')}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user