refactor: migrate project from Flask to Next.js with TypeScript, Prisma, and Edge TTS integration

2026-09-03 00:16:04 -07:00
parent 84f79dc5f9
commit f033a6045c
60 changed files with 5340 additions and 2179 deletions
@@ -0,0 +1,82 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { TimingCue } from "@/lib/tts/types";
+import { Clock, PlayCircle } from "lucide-react";
+
+interface TranscriptViewerProps {
+  timings: TimingCue[];
+  currentTime: number;
+  onSeek: (time: number) => void;
+}
+
+export function TranscriptViewer({
+  timings,
+  currentTime,
+  onSeek,
+}: TranscriptViewerProps) {
+  const activeRef = useRef<HTMLDivElement | null>(null);
+
+  // Auto-scroll active cue into view smoothly
+  useEffect(() => {
+    if (activeRef.current) {
+      activeRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [currentTime]);
+
+  const formatSeconds = (secs: number) => {
+    const m = Math.floor(secs / 60);
+    const s = Math.floor(secs % 60);
+    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  };
+
+  if (!timings || timings.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 text-slate-500 border border-dashed border-slate-800 rounded-xl">
+        <Clock className="w-8 h-8 mb-2 opacity-50" />
+        <p className="text-sm">No synchronized transcript available for this episode.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2 max-h-[500px] overflow-y-auto pr-2">
+      {timings.map((cue, idx) => {
+        const isActive = currentTime >= cue.startTime && currentTime <= cue.endTime;
+
+        return (
+          <div
+            key={idx}
+            ref={isActive ? activeRef : null}
+            onClick={() => onSeek(cue.startTime)}
+            className={`group flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 border ${
+              isActive
+                ? "bg-blue-950/40 border-blue-500/40 text-blue-100 shadow-sm"
+                : "bg-slate-900/30 border-slate-800/60 hover:bg-slate-850 hover:border-slate-700 text-slate-300"
+            }`}
+          >
+            {/* Timestamp badge */}
+            <span
+              className={`text-xs font-mono px-2 py-0.5 rounded shrink-0 flex items-center gap-1 ${
+                isActive
+                  ? "bg-blue-600 text-white font-semibold"
+                  : "bg-slate-800 text-slate-400 group-hover:bg-slate-700 group-hover:text-slate-200"
+              }`}
+            >
+              <PlayCircle className="w-3 h-3" />
+              {formatSeconds(cue.startTime)}
+            </span>
+
+            {/* Cue text */}
+            <p className="text-sm leading-relaxed flex-1">
+              {cue.text}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}