ben
34ccf0c32b
Replace controller-driven Blade views with full-page Livewire index/show/create flows so Flux tables, toasts, and uploads work natively.
68 lines
3.3 KiB
PHP
68 lines
3.3 KiB
PHP
<div
|
|
class="max-w-2xl space-y-6 rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
|
|
x-data="{ uploading: false, progress: 0 }"
|
|
x-on:livewire-upload-start="uploading = true; progress = 0"
|
|
x-on:livewire-upload-finish="uploading = false; progress = 100"
|
|
x-on:livewire-upload-error="uploading = false"
|
|
x-on:livewire-upload-progress="progress = $event.detail.progress"
|
|
>
|
|
<flux:input
|
|
wire:model="title"
|
|
label="Title (optional)"
|
|
description="Used when you upload a single file. Leave blank to use embedded title or filename."
|
|
placeholder="Leave blank to use embedded title or filename"
|
|
/>
|
|
|
|
<div>
|
|
<flux:label>Audio files</flux:label>
|
|
|
|
<div
|
|
wire:drop.file="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
|
|
wire:click="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
|
|
role="button"
|
|
tabindex="0"
|
|
wire:keydown.enter="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
|
|
class="mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-6 py-10 text-center transition-colors data-dragging:border-accent data-dragging:bg-accent/5 dark:border-white/20 dark:bg-white/5 dark:data-dragging:border-accent dark:data-dragging:bg-accent/10"
|
|
>
|
|
<div class="mb-3 flex size-12 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-800 dark:ring-white/10">
|
|
<flux:icon.cloud-arrow-up class="size-6 text-zinc-500 dark:text-zinc-400" />
|
|
</div>
|
|
|
|
<flux:heading size="sm" class="text-zinc-800 dark:text-zinc-100">
|
|
Drop audio files here or click to browse
|
|
</flux:heading>
|
|
|
|
<flux:text class="mt-1 max-w-sm text-zinc-500 dark:text-zinc-400">
|
|
MP3, WAV, OGG, FLAC, M4A, AAC, WebM, WMA, or AIFF · max 2 GB each · up to 50 files
|
|
</flux:text>
|
|
|
|
<div
|
|
x-show="uploading || $wire.saving"
|
|
x-cloak
|
|
class="mt-5 w-full max-w-sm space-y-2"
|
|
>
|
|
<div class="flex items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400">
|
|
<span x-text="$wire.saving ? 'Saving recordings…' : 'Uploading…'"></span>
|
|
<span x-show="uploading" x-text="progress + '%'"></span>
|
|
</div>
|
|
<flux:progress color="teal" x-bind:value="uploading ? progress : 100" />
|
|
</div>
|
|
</div>
|
|
|
|
@error('audio')
|
|
<flux:error>{{ $message }}</flux:error>
|
|
@enderror
|
|
@error('audio.*')
|
|
<flux:error>{{ $message }}</flux:error>
|
|
@enderror
|
|
</div>
|
|
|
|
<flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
|
|
Uploads start as soon as you drop or choose files. Duplicate files (same name and size, or identical content) are skipped.
|
|
</flux:text>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<flux:link href="{{ route('recordings.index') }}">Cancel</flux:link>
|
|
</div>
|
|
</div>
|