ben
c17f8fb506
Refresh list status over Reverb with polling fallback, clarify queued vs processing, streamline upload empty states, and seed an admin login.
97 lines
3.7 KiB
PHP
97 lines
3.7 KiB
PHP
<div
|
|
class="max-w-2xl space-y-6 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
|
|
x-data="{
|
|
uploading: false,
|
|
progress: 0,
|
|
dragging: false,
|
|
openPicker() {
|
|
this.$refs.fileInput.click();
|
|
},
|
|
onDrop(event) {
|
|
this.dragging = false;
|
|
|
|
const files = event.dataTransfer?.files;
|
|
|
|
if (! files?.length) {
|
|
return;
|
|
}
|
|
|
|
const transfer = new DataTransfer();
|
|
|
|
Array.from(files).forEach((file) => transfer.items.add(file));
|
|
|
|
this.$refs.fileInput.files = transfer.files;
|
|
this.$refs.fileInput.dispatchEvent(new Event('change', { bubbles: true }));
|
|
},
|
|
}"
|
|
x-on:livewire-upload-start="uploading = true; progress = 0"
|
|
x-on:livewire-upload-finish="uploading = false; progress = 100"
|
|
x-on:livewire-upload-cancel="uploading = false"
|
|
x-on:livewire-upload-error="uploading = false"
|
|
x-on:livewire-upload-progress="progress = $event.detail.progress"
|
|
>
|
|
<div>
|
|
<flux:label>Audio files</flux:label>
|
|
|
|
<input
|
|
x-ref="fileInput"
|
|
type="file"
|
|
class="sr-only"
|
|
wire:model="audio"
|
|
multiple
|
|
accept=".mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*"
|
|
>
|
|
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
x-on:click="openPicker()"
|
|
x-on:keydown.enter.prevent="openPicker()"
|
|
x-on:keydown.space.prevent="openPicker()"
|
|
x-on:dragenter.prevent="dragging = true"
|
|
x-on:dragover.prevent="dragging = true"
|
|
x-on:dragleave.prevent="dragging = false"
|
|
x-on:drop.prevent="onDrop($event)"
|
|
x-bind:class="dragging ? 'border-accent bg-accent/5 dark:border-accent dark:bg-accent/10' : 'border-zinc-300 bg-zinc-50 dark:border-white/20 dark:bg-white/5'"
|
|
class="mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed px-6 py-10 text-center transition-colors"
|
|
>
|
|
<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>
|
|
|
|
@if ($showCancel)
|
|
<div class="flex items-center gap-3">
|
|
<flux:link href="{{ route('recordings.index') }}" wire:navigate>Cancel</flux:link>
|
|
</div>
|
|
@endif
|
|
</div>
|