AndyTranscribe/resources/views/recordings/show.blade.php

@extends('layouts.app')

@section('title', $recording->title)

@section('content')
    <div
        x-data="transcriptionMonitor(@js([
            'statusUrl' => route('recordings.transcription-status', $recording),
            'initial' => $recording->transcriptionStatusPayload(),
        ]))"
        x-init="
            start();
            return () => destroy();
        "
    >
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <a href="{{ route('recordings.index') }}" class="text-sm text-stone-500 hover:text-stone-800 dark:text-zinc-400 dark:hover:text-zinc-200">← Recordings</a>
                <h1 class="mt-2 text-2xl font-semibold tracking-tight">{{ $recording->title }}</h1>
                <div class="mt-2 flex flex-wrap items-center gap-2 text-sm text-stone-600 dark:text-zinc-400">
                    <span
                        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset"
                        :class="badgeClass"
                        x-text="status.status_label || status.status"
                    ></span>
                    <template x-if="status.driver_label">
                        <span class="text-xs text-stone-500 dark:text-zinc-400" x-text="status.driver_label"></span>
                    </template>
                </div>
            </div>
            <form method="POST" action="{{ route('recordings.destroy', $recording) }}" onsubmit="return confirm('Delete this recording and its file?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="rounded border border-red-200 bg-white px-3 py-1.5 text-sm text-red-700 hover:bg-red-50 dark:border-red-900 dark:bg-zinc-800 dark:text-red-300 dark:hover:bg-red-950">
                    Delete
                </button>
            </form>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <section class="rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800">
                <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-zinc-400">Metadata</h2>
                <dl class="mt-4 space-y-3 text-sm">
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Original file</dt>
                        <dd class="text-right font-medium">{{ $recording->original_filename }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Duration</dt>
                        <dd class="font-medium">{{ $recording->duration_formatted }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Artist</dt>
                        <dd class="font-medium">{{ $recording->artist ?: '—' }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Album</dt>
                        <dd class="font-medium">{{ $recording->album ?: '—' }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Recorded</dt>
                        <dd class="font-medium">{{ $recording->recorded_at?->format('Y-m-d') ?: '—' }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Size</dt>
                        <dd class="font-medium">{{ number_format($recording->file_size_bytes / 1024, 1) }} KB</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500 dark:text-zinc-400">Uploaded</dt>
                        <dd class="font-medium">{{ $recording->created_at?->format('Y-m-d H:i') }}</dd>
                    </div>
                </dl>
            </section>

            <section class="rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800">
                <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-zinc-400">Transcribe</h2>
                <form method="POST" action="{{ route('recordings.transcribe', $recording) }}" class="mt-4">
                    @csrf
                    <button
                        type="submit"
                        class="rounded bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-800 dark:bg-teal-600 dark:hover:bg-teal-500"
                    >
                        <span x-text="startButtonLabel"></span>
                    </button>
                </form>

                <form
                    method="POST"
                    action="{{ route('recordings.transcribe.cancel', $recording) }}"
                    x-show="status.is_active"
                    x-cloak
                    class="mt-3"
                >
                    @csrf
                    <button
                        type="submit"
                        class="rounded border border-stone-300 bg-white px-4 py-2 text-sm font-medium text-stone-800 hover:bg-stone-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-700"
                    >
                        Stop transcription
                    </button>
                </form>
            </section>
        </div>

        <section class="mt-6 rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800">
            <div class="flex items-center justify-between gap-4">
                <h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-zinc-400">Transcript</h2>
                <button
                    type="button"
                    x-show="!status.is_active && status.has_transcript"
                    x-cloak
                    @click="navigator.clipboard.writeText(status.transcript || '')"
                    class="text-sm text-teal-700 hover:underline dark:text-teal-300"
                >
                    Copy
                </button>
            </div>

            <div x-show="status.is_active" x-cloak class="mt-4 space-y-3 rounded border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/40">
                <div class="flex flex-wrap items-center justify-between gap-2 text-sm">
                    <p class="font-medium text-amber-900 dark:text-amber-100" x-text="status.progress || 'Working…'"></p>
                    <p class="tabular-nums text-amber-800 dark:text-amber-200">
                        <span x-text="(status.percent ?? 0) + '%'"></span>
                        <span class="mx-1 text-amber-600 dark:text-amber-400">·</span>
                        <span x-text="'Elapsed ' + (status.elapsed_human || '0s')"></span>
                    </p>
                </div>

                <div class="h-2 overflow-hidden rounded-full bg-amber-100 dark:bg-amber-900/50">
                    <div
                        class="h-full rounded-full bg-amber-500 transition-all duration-500"
                        :style="`width: ${Math.max(status.percent || 5, 5)}%`"
                    ></div>
                </div>

                <ul class="space-y-1 text-xs text-amber-900/80 dark:text-amber-200/80">
                    <li>
                        Engine:
                        <span class="font-medium" x-text="status.driver_label || '—'"></span>
                    </li>
                    <template x-if="status.duration_seconds">
                        <li>
                            Audio length:
                            <span class="font-medium" x-text="formatDuration(status.duration_seconds)"></span>
                            <span class="text-amber-700 dark:text-amber-300">(longer files take longer)</span>
                        </li>
                    </template>
                    <li x-show="pollError" class="text-red-700 dark:text-red-300" x-text="pollError"></li>
                </ul>
            </div>

            <div x-show="!status.is_active && status.status === 'cancelled'" x-cloak class="mt-4 rounded border border-stone-200 bg-stone-50 p-4 text-sm text-stone-700 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">
                Transcription stopped. Choose an engine above to start again.
            </div>

            <div x-show="!status.is_active && status.status === 'failed'" x-cloak class="mt-4 space-y-2 rounded border border-red-200 bg-red-50 p-4 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
                <p class="font-medium">Transcription failed</p>
                <p x-text="status.error || 'Check the logs and try again with another engine.'"></p>
            </div>

            <div x-show="!status.is_active && status.has_transcript" x-cloak>
                <p class="mt-4 whitespace-pre-wrap text-sm leading-relaxed text-stone-800 dark:text-zinc-100" x-text="status.transcript"></p>
                <p
                    class="mt-4 text-xs text-stone-500 dark:text-zinc-400"
                    x-show="status.transcribed_at"
                    x-text="status.transcribed_at ? ('Transcribed ' + formatTimestamp(status.transcribed_at)) : ''"
                ></p>
            </div>

            <p
                x-show="!status.is_active && status.status !== 'failed' && status.status !== 'cancelled' && !status.has_transcript"
                x-cloak
                class="mt-4 text-sm text-stone-500 dark:text-zinc-400"
            >
                No transcript yet. Transcription starts automatically after upload, or use the button above.
            </p>
        </section>
    </div>
@endsection