AndyTranscribe/resources/views/livewire/recordings/index.blade.php

<div
    x-data="recordingsIndex(@js([
        'recordings' => $recordings->map(fn ($recording) => [
            'id' => $recording->id,
            'status' => $recording->transcription_status,
            'status_label' => $recording->transcriptionStatusLabel(),
            'progress' => $recording->transcription_progress,
            'percent' => $recording->transcription_percent,
            'is_active' => $recording->isTranscribing(),
            'word_count' => $recording->word_count,
            'word_count_display' => $recording->word_count > 0
                ? number_format($recording->word_count)
                : '—',
            'badge_color' => match ($recording->transcription_status) {
                'done' => 'teal',
                'processing', 'pending' => 'amber',
                'failed' => 'red',
                default => 'zinc',
            },
        ])->values(),
        'pendingCount' => $pendingCount,
    ]))"
    x-init="
        start();
        return () => destroy();
    "
>
    <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <flux:heading size="xl">Recordings</flux:heading>
            <flux:text class="mt-1">Manage pocket-recorder audio and transcripts.</flux:text>
        </div>
        <div class="flex flex-col gap-2 sm:items-end">
            <div class="flex items-end gap-2">
                <flux:input
                    type="search"
                    wire:model.live.debounce.400ms="search"
                    placeholder="Search title, artist, transcript…"
                    class="min-w-[16rem]"
                />
            </div>
            <div x-show="pendingCount > 0" x-cloak>
                <flux:button
                    type="button"
                    variant="ghost"
                    size="sm"
                    wire:click="queuePending"
                >
                    Queue <span x-text="pendingCount"></span> pending
                    <span x-text="pendingCount === 1 ? 'transcription' : 'transcriptions'"></span>
                </flux:button>
            </div>
        </div>
    </div>

    @if ($recordings->isEmpty())
        <flux:card class="border-dashed py-16 text-center">
            @if (filled($search))
                <flux:text>No recordings match “{{ $search }}”.</flux:text>
                <div class="mt-4">
                    <flux:button variant="ghost" wire:click="$set('search', '')">Clear search</flux:button>
                </div>
            @else
                <flux:text>No recordings yet.</flux:text>
                <div class="mt-4">
                    <flux:link href="{{ route('recordings.create') }}" wire:navigate>Upload your first MP3</flux:link>
                </div>
            @endif
        </flux:card>
    @else
        <audio
            x-ref="player"
            class="hidden"
            preload="none"
            @play="syncPlayer()"
            @pause="syncPlayer()"
            @ended="playingId = null; syncPlayer()"
        ></audio>

        <flux:table :paginate="$recordings">
            <flux:table.columns>
                <flux:table.column class="w-12"></flux:table.column>
                <flux:table.column>Title</flux:table.column>
                <flux:table.column>Duration</flux:table.column>
                <flux:table.column>Words</flux:table.column>
                <flux:table.column>Status</flux:table.column>
                <flux:table.column>Uploaded</flux:table.column>
            </flux:table.columns>

            <flux:table.rows>
                @foreach ($recordings as $recording)
                    <flux:table.row wire:key="recording-{{ $recording->id }}">
                        <flux:table.cell>
                            <flux:button
                                type="button"
                                variant="ghost"
                                size="sm"
                                square
                                data-audio-url="{{ route('recordings.audio', $recording) }}"
                                x-bind:aria-label="isPlayingRow({{ $recording->id }}) ? 'Pause' : 'Play'"
                                x-on:click="togglePlay({{ $recording->id }}, $el.dataset.audioUrl)"
                            >
                                <flux:icon.play
                                    variant="micro"
                                    x-show="! isPlayingRow({{ $recording->id }})"
                                />
                                <flux:icon.pause
                                    variant="micro"
                                    x-show="isPlayingRow({{ $recording->id }})"
                                    x-cloak
                                />
                            </flux:button>
                        </flux:table.cell>
                        <flux:table.cell class="whitespace-normal">
                            <flux:link href="{{ route('recordings.show', $recording) }}" wire:navigate class="font-medium">
                                {{ $recording->title }}
                            </flux:link>
                            @if ($recording->artist)
                                <flux:text class="mt-0.5 text-xs">{{ $recording->artist }}</flux:text>
                            @endif
                            @if ($snippet = $recording->transcriptSnippet($search ?: null))
                                <flux:text class="mt-1 max-w-xl text-xs leading-relaxed">
                                    {{ $snippet }}
                                </flux:text>
                            @endif
                        </flux:table.cell>
                        <flux:table.cell>{{ $recording->duration_formatted }}</flux:table.cell>
                        <flux:table.cell>
                            <span
                                class="tabular-nums"
                                x-text="row({{ $recording->id }}).word_count_display"
                            >
                                {{ $recording->word_count > 0 ? number_format($recording->word_count) : '—' }}
                            </span>
                        </flux:table.cell>
                        <flux:table.cell class="whitespace-normal py-2">
                            <x-transcription-status-badge
                                :status="$recording->transcription_status"
                                :label="$recording->transcriptionStatusLabel()"
                                :alpine-row="'row('.$recording->id.')'"
                            />
                            <div
                                class="mt-1 max-w-[14rem] truncate text-xs text-amber-700 dark:text-amber-300"
                                x-show="row({{ $recording->id }}).is_active && row({{ $recording->id }}).progress"
                                x-cloak
                                :title="row({{ $recording->id }}).progress"
                            >
                                <span x-text="row({{ $recording->id }}).percent ? (row({{ $recording->id }}).percent + '% · ') : ''"></span>
                                <span x-text="row({{ $recording->id }}).progress"></span>
                            </div>
                        </flux:table.cell>
                        <flux:table.cell>
                            {{ $recording->created_at?->format('Y-m-d H:i') }}
                        </flux:table.cell>
                    </flux:table.row>
                @endforeach
            </flux:table.rows>
        </flux:table>
    @endif
</div>