Add Docker stack, Reverb live progress, and duplicate upload detection.

Ship FrankenPHP Compose services with Reverb WebSockets for real-time transcription status, skip re-uploading identical audio via content hash, and format disk usage without requiring intl.

resources/js/transcription.js

@@ -0,0 +1,253 @@
+/**
+ * Shared helpers and Alpine components for live transcription updates via Reverb.
+ */
+
+const BADGE_CLASSES = {
+    done: 'bg-teal-50 text-teal-800 ring-teal-600/20',
+    processing: 'bg-amber-50 text-amber-800 ring-amber-600/20',
+    pending: 'bg-amber-50 text-amber-800 ring-amber-600/20',
+    failed: 'bg-red-50 text-red-800 ring-red-600/20',
+    cancelled: 'bg-stone-100 text-stone-700 ring-stone-500/20',
+};
+
+export function badgeClassFor(status) {
+    return BADGE_CLASSES[status] || 'bg-stone-100 text-stone-700 ring-stone-500/20';
+}
+
+export function formatElapsed(seconds) {
+    const total = Math.max(0, Math.round(Number(seconds) || 0));
+    const minutes = Math.floor(total / 60);
+    const remain = total % 60;
+
+    if (minutes === 0) {
+        return remain + 's';
+    }
+
+    return minutes + 'm ' + String(remain).padStart(2, '0') + 's';
+}
+
+export function formatDuration(seconds) {
+    const total = Math.max(0, Math.round(Number(seconds) || 0));
+    const minutes = Math.floor(total / 60);
+    const remain = total % 60;
+
+    return minutes + ':' + String(remain).padStart(2, '0');
+}
+
+export function formatTimestamp(value) {
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+
+    const pad = (n) => String(n).padStart(2, '0');
+
+    return date.getFullYear()
+        + '-' + pad(date.getMonth() + 1)
+        + '-' + pad(date.getDate())
+        + ' ' + pad(date.getHours())
+        + ':' + pad(date.getMinutes());
+}
+
+function formatWordCount(count) {
+    const n = Number(count) || 0;
+
+    return n > 0 ? n.toLocaleString() : '—';
+}
+
+function subscribeToRecordings(handler) {
+    if (!window.Echo) {
+        return () => {};
+    }
+
+    const channel = window.Echo.channel('recordings');
+
+    channel.listen('.RecordingTranscriptionUpdated', handler);
+
+    return () => {
+        window.Echo.leave('recordings');
+    };
+}
+
+/**
+ * Show-page Alpine component: Echo push + local elapsed tick + optional status hydrate.
+ */
+export function transcriptionMonitor({ statusUrl, initial }) {
+    return {
+        statusUrl,
+        status: initial,
+        pollError: null,
+        tickTimer: null,
+        leaveChannel: null,
+
+        get badgeClass() {
+            return badgeClassFor(this.status.status);
+        },
+
+        get startButtonLabel() {
+            if (this.status.is_active) {
+                return 'Restart transcription';
+            }
+
+            return this.status.has_transcript ? 'Re-transcribe' : 'Start transcription';
+        },
+
+        start() {
+            this.leaveChannel = subscribeToRecordings((event) => {
+                if (Number(event.id) !== Number(this.status.id)) {
+                    return;
+                }
+
+                this.applyPayload(event);
+            });
+
+            if (this.status.is_active) {
+                this.beginTick();
+                this.hydrateOnce();
+            }
+        },
+
+        destroy() {
+            this.stopTick();
+
+            if (this.leaveChannel) {
+                this.leaveChannel();
+                this.leaveChannel = null;
+            }
+        },
+
+        applyPayload(payload) {
+            const wasActive = this.status.is_active;
+            this.status = { ...this.status, ...payload };
+            this.pollError = null;
+
+            if (this.status.is_active) {
+                this.beginTick();
+            } else {
+                this.stopTick();
+            }
+
+            if (wasActive && !this.status.is_active
+                && !this.status.has_transcript
+                && this.status.status !== 'failed'
+                && this.status.status !== 'cancelled') {
+                window.location.reload();
+            }
+        },
+
+        beginTick() {
+            if (this.tickTimer) {
+                return;
+            }
+
+            this.tickTimer = setInterval(() => this.tickElapsed(), 1000);
+        },
+
+        stopTick() {
+            if (this.tickTimer) {
+                clearInterval(this.tickTimer);
+                this.tickTimer = null;
+            }
+        },
+
+        tickElapsed() {
+            if (!this.status.is_active || this.status.elapsed_seconds == null) {
+                return;
+            }
+
+            this.status.elapsed_seconds += 1;
+            this.status.elapsed_human = formatElapsed(this.status.elapsed_seconds);
+        },
+
+        async hydrateOnce() {
+            if (!this.statusUrl) {
+                return;
+            }
+
+            try {
+                const response = await fetch(this.statusUrl, {
+                    headers: { Accept: 'application/json' },
+                });
+
+                if (!response.ok) {
+                    throw new Error('Status request failed (' + response.status + ')');
+                }
+
+                this.applyPayload(await response.json());
+            } catch (error) {
+                this.pollError = error.message || 'Could not refresh progress.';
+            }
+        },
+
+        formatElapsed,
+        formatDuration,
+        formatTimestamp,
+    };
+}
+
+/**
+ * Index-page Alpine component: patch row status from Reverb events.
+ */
+export function recordingsIndex({ recordings, pendingCount }) {
+    const byId = {};
+
+    for (const row of recordings) {
+        byId[row.id] = row;
+    }
+
+    return {
+        rows: byId,
+        pendingCount: Number(pendingCount) || 0,
+        leaveChannel: null,
+
+        start() {
+            this.leaveChannel = subscribeToRecordings((event) => {
+                this.applyPayload(event);
+            });
+        },
+
+        destroy() {
+            if (this.leaveChannel) {
+                this.leaveChannel();
+                this.leaveChannel = null;
+            }
+        },
+
+        applyPayload(payload) {
+            const id = payload.id;
+
+            if (!this.rows[id]) {
+                return;
+            }
+
+            const previousStatus = this.rows[id].status;
+            const next = {
+                ...this.rows[id],
+                status: payload.status,
+                status_label: payload.status_label,
+                progress: payload.progress,
+                percent: payload.percent,
+                is_active: payload.is_active,
+                word_count: payload.word_count ?? this.rows[id].word_count,
+                word_count_display: formatWordCount(payload.word_count ?? this.rows[id].word_count),
+                badge_class: badgeClassFor(payload.status),
+            };
+
+            this.rows[id] = next;
+
+            const wasQueueable = ['pending', 'failed', 'cancelled'].includes(previousStatus);
+            const isQueueable = ['pending', 'failed', 'cancelled'].includes(payload.status);
+
+            if (wasQueueable && !isQueueable) {
+                this.pendingCount = Math.max(0, this.pendingCount - 1);
+            } else if (!wasQueueable && isQueueable) {
+                this.pendingCount += 1;
+            }
+        },
+
+        row(id) {
+            return this.rows[id] || {};
+        },
+    };
+}