feat: implement authentication control with support for BYO API keys, episode deduplication, and a task queue for async processing.
This commit is contained in:
+303
-383
@@ -1,150 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Radio,
|
||||
PlusCircle,
|
||||
Plus,
|
||||
Headphones,
|
||||
Trash2,
|
||||
FileText,
|
||||
Sparkles,
|
||||
Loader2,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Volume2,
|
||||
Play,
|
||||
Pause,
|
||||
Maximize2,
|
||||
Search,
|
||||
RefreshCw,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
RotateCw,
|
||||
Hourglass,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { AudioPlayer } from "@/components/AudioPlayer";
|
||||
import { TranscriptViewer } from "@/components/TranscriptViewer";
|
||||
import { TimingCue, VoiceOption } from "@/lib/tts/types";
|
||||
import { useAudio, Episode } from "@/contexts/AudioContext";
|
||||
import { ThemeToggle } from "@/components/ThemeToggle";
|
||||
|
||||
interface Episode {
|
||||
id: string;
|
||||
title: string;
|
||||
originalContent: string;
|
||||
mode: string;
|
||||
status: string;
|
||||
durationSeconds?: number | null;
|
||||
audioUrl?: string | null;
|
||||
timingsJson?: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
export default function HomePage() {
|
||||
const { activeEpisode, isPlaying, playEpisode, togglePlay, openZen } = useAudio();
|
||||
const [episodes, setEpisodes] = useState<Episode[]>([]);
|
||||
const [activeEpisode, setActiveEpisode] = useState<Episode | null>(null);
|
||||
const [activeTimings, setActiveTimings] = useState<TimingCue[]>([]);
|
||||
const [currentTime, setCurrentTime] = useState<number>(0);
|
||||
const [seekTime, setSeekTime] = useState<number | null>(null);
|
||||
const [workerStatus, setWorkerStatus] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// Form state
|
||||
const [title, setTitle] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [voice, setVoice] = useState("zh-CN-XiaoxiaoNeural");
|
||||
const [voices, setVoices] = useState<VoiceOption[]>([]);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formError, setFormError] = useState("");
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
|
||||
const handleContentChange = (val: string) => {
|
||||
setContent(val);
|
||||
if (/[\u4e00-\u9fa5]/.test(val) && voice.startsWith("en-")) {
|
||||
setVoice("zh-CN-XiaoxiaoNeural");
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch episodes on mount
|
||||
const fetchEpisodes = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/episodes");
|
||||
const data = await res.json();
|
||||
const [epRes, workerRes] = await Promise.all([
|
||||
fetch("/api/episodes"),
|
||||
fetch("/api/worker/status").catch(() => null),
|
||||
]);
|
||||
|
||||
const data = await epRes.json();
|
||||
if (data.success && data.episodes) {
|
||||
setEpisodes(data.episodes);
|
||||
// Default to first episode if none selected
|
||||
if (!activeEpisode && data.episodes.length > 0) {
|
||||
selectEpisode(data.episodes[0]);
|
||||
}
|
||||
|
||||
if (workerRes && workerRes.ok) {
|
||||
const workerData = await workerRes.json();
|
||||
if (workerData.success) {
|
||||
setWorkerStatus(workerData.worker);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load episodes:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch voices on mount
|
||||
const fetchVoices = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/voices");
|
||||
const data = await res.json();
|
||||
if (data.success && data.voices) {
|
||||
setVoices(data.voices);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load voices:", err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchEpisodes();
|
||||
fetchVoices();
|
||||
}, []);
|
||||
|
||||
const selectEpisode = (ep: Episode) => {
|
||||
setActiveEpisode(ep);
|
||||
if (ep.timingsJson) {
|
||||
try {
|
||||
setActiveTimings(JSON.parse(ep.timingsJson));
|
||||
} catch {
|
||||
setActiveTimings([]);
|
||||
}
|
||||
} else {
|
||||
setActiveTimings([]);
|
||||
}
|
||||
setCurrentTime(0);
|
||||
};
|
||||
// Real-time polling when any episode is QUEUED or PROCESSING, or worker is active
|
||||
useEffect(() => {
|
||||
const hasPending = episodes.some(
|
||||
(ep) => ep.status === "QUEUED" || ep.status === "PROCESSING"
|
||||
);
|
||||
const workerActive = workerStatus && (!workerStatus.isIdle || workerStatus.isBackingOff);
|
||||
|
||||
const handleCreateEpisode = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!title.trim() || !content.trim()) {
|
||||
setFormError("Please provide both a title and article content.");
|
||||
return;
|
||||
}
|
||||
if (!hasPending && !workerActive) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setFormError("");
|
||||
const interval = setInterval(() => {
|
||||
fetchEpisodes();
|
||||
}, 2500);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/episodes", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
content,
|
||||
mode: "VERBATIM",
|
||||
provider: "edge",
|
||||
voice,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok || !data.success) {
|
||||
throw new Error(data.error || "Synthesis failed");
|
||||
}
|
||||
|
||||
// Reset form
|
||||
setTitle("");
|
||||
setContent("");
|
||||
setShowCreateForm(false);
|
||||
|
||||
// Refresh list & select newly created episode
|
||||
await fetchEpisodes();
|
||||
if (data.episode) {
|
||||
selectEpisode(data.episode);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setFormError(err.message || "Failed to generate audio.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
return () => clearInterval(interval);
|
||||
}, [episodes, workerStatus]);
|
||||
|
||||
const handleDeleteEpisode = async (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
@@ -152,16 +80,22 @@ export default function Home() {
|
||||
|
||||
try {
|
||||
await fetch(`/api/episodes/${id}`, { method: "DELETE" });
|
||||
if (activeEpisode?.id === id) {
|
||||
setActiveEpisode(null);
|
||||
setActiveTimings([]);
|
||||
}
|
||||
await fetchEpisodes();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete episode:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRetryEpisode = async (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await fetch(`/api/episodes/${id}`, { method: "POST" });
|
||||
await fetchEpisodes();
|
||||
} catch (err) {
|
||||
console.error("Failed to retry episode:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDuration = (secs?: number | null) => {
|
||||
if (!secs) return "0:00";
|
||||
const m = Math.floor(secs / 60);
|
||||
@@ -169,300 +103,286 @@ export default function Home() {
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// Filter episodes purely by search query
|
||||
const filteredEpisodes = episodes.filter((ep) => {
|
||||
if (!searchQuery.trim()) return true;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return (
|
||||
ep.title.toLowerCase().includes(q) ||
|
||||
ep.originalContent.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col pb-32">
|
||||
<div className="flex-1 flex flex-col pb-36">
|
||||
{/* Top Navbar */}
|
||||
<header className="border-b border-slate-800 bg-slate-900/60 backdrop-blur-md sticky top-0 z-40">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<header className="border-b border-slate-200 dark:border-slate-900 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md sticky top-0 z-30 transition-colors">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center text-white shadow-md shadow-blue-500/20">
|
||||
<Radio className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-bold text-lg text-slate-100 tracking-tight">
|
||||
<span className="font-bold text-base sm:text-lg text-slate-900 dark:text-slate-100 tracking-tight">
|
||||
Be My Anchor
|
||||
</span>
|
||||
<span className="ml-2 text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20 font-mono">
|
||||
v2.0 M1
|
||||
<span className="ml-2 text-[10px] px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 font-mono">
|
||||
v2.0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setShowCreateForm(!showCreateForm)}
|
||||
className="flex items-center gap-2 px-3.5 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium transition shadow-sm shadow-blue-600/20"
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" />
|
||||
<span>New Episode</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<ThemeToggle />
|
||||
<Link
|
||||
href="/new"
|
||||
className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 active:scale-95 text-white text-xs sm:text-sm font-medium transition shadow-md shadow-blue-600/25"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add Article</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 py-6 w-full flex-1">
|
||||
{/* Ingest Form (Collapsible) */}
|
||||
{showCreateForm && (
|
||||
<div className="mb-8 p-6 bg-slate-900 border border-slate-800 rounded-2xl shadow-xl animate-in fade-in slide-in-from-top-4 duration-200">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-blue-400" />
|
||||
<h2 className="text-lg font-semibold text-slate-100">
|
||||
Convert Content to Podcast Episode
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(false)}
|
||||
className="text-xs text-slate-400 hover:text-slate-200"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
{/* Main Container */}
|
||||
<main className="max-w-5xl mx-auto px-4 sm:px-6 py-6 w-full flex-1 space-y-6">
|
||||
{/* Search Bar Header */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="w-4 h-4 text-slate-400 dark:text-slate-500 absolute left-3.5 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search your articles..."
|
||||
className="w-full pl-9 pr-4 py-2.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl text-xs sm:text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:border-blue-500 transition shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-slate-500 font-mono shrink-0">
|
||||
{episodes.length} {episodes.length === 1 ? "article" : "articles"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Worker Cooldown / Rate-limit Alert Banner */}
|
||||
{workerStatus?.isBackingOff && (
|
||||
<div className="mb-4 p-3.5 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-xl flex items-center gap-3 text-xs text-amber-800 dark:text-amber-300 shadow-sm animate-pulse">
|
||||
<Hourglass className="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" />
|
||||
<div>
|
||||
<span className="font-semibold">Worker Cooldown Active:</span> AI provider is experiencing high demand or rate limits. The queue is automatically paused and will resume shortly.
|
||||
</div>
|
||||
|
||||
{formError && (
|
||||
<div className="mb-4 p-3 bg-red-950/40 border border-red-800 text-red-300 text-sm rounded-lg">
|
||||
{formError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleCreateEpisode} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1">
|
||||
Article or Episode Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="e.g., Understanding Kubernetes Ingress and Service Meshes"
|
||||
className="w-full px-3.5 py-2.5 bg-slate-800/80 border border-slate-700 rounded-lg text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1">
|
||||
TTS Voice Engine (Edge Neural)
|
||||
</label>
|
||||
<select
|
||||
value={voice}
|
||||
onChange={(e) => setVoice(e.target.value)}
|
||||
className="w-full px-3.5 py-2.5 bg-slate-800/80 border border-slate-700 rounded-lg text-sm text-slate-100 focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<optgroup label="🇨🇳 中文 / Chinese (支持中英双语混合)">
|
||||
{voices
|
||||
.filter((v) => v.locale.startsWith("zh"))
|
||||
.map((v) => (
|
||||
<option key={v.id} value={v.id}>
|
||||
{v.name}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
<optgroup label="🇺🇸 English (US & UK)">
|
||||
{voices
|
||||
.filter((v) => !v.locale.startsWith("zh"))
|
||||
.map((v) => (
|
||||
<option key={v.id} value={v.id}>
|
||||
{v.name}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1">
|
||||
Narration Mode
|
||||
</label>
|
||||
<select
|
||||
disabled
|
||||
className="w-full px-3.5 py-2.5 bg-slate-850 border border-slate-700/50 rounded-lg text-sm text-slate-400 cursor-not-allowed"
|
||||
>
|
||||
<option value="VERBATIM">Verbatim Reader (M1 Active)</option>
|
||||
<option value="FEYNMAN" disabled>Feynman Tutor (M2 Preview)</option>
|
||||
<option value="DUAL_HOST" disabled>Dual-Host Dialogue (M2 Preview)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1">
|
||||
Article Text or Markdown
|
||||
</label>
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => handleContentChange(e.target.value)}
|
||||
placeholder="Paste your technical article, newsletter, blog post, or notes here..."
|
||||
rows={6}
|
||||
className="w-full px-3.5 py-2.5 bg-slate-800/80 border border-slate-700 rounded-lg text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:border-blue-500 font-mono text-xs leading-relaxed"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreateForm(false)}
|
||||
className="px-4 py-2 text-sm text-slate-400 hover:text-slate-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex items-center gap-2 px-5 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-800 text-white text-sm font-medium rounded-lg shadow-md shadow-blue-600/30 transition"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span>Synthesizing Audio...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Headphones className="w-4 h-4" />
|
||||
<span>Synthesize Episode</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dashboard Columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
|
||||
{/* Left: Episode Library (5 cols) */}
|
||||
<section className="lg:col-span-5 flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2">
|
||||
<FileText className="w-4 h-4" />
|
||||
<span>Episodes ({episodes.length})</span>
|
||||
</h2>
|
||||
</div>
|
||||
{/* Episode List */}
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-24 text-slate-500">
|
||||
<RefreshCw className="w-8 h-8 animate-spin mb-3 text-blue-500" />
|
||||
<p className="text-sm">Loading articles...</p>
|
||||
</div>
|
||||
) : filteredEpisodes.length === 0 ? (
|
||||
<div className="p-12 text-center bg-slate-50 dark:bg-slate-900/40 border border-dashed border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm">
|
||||
<Headphones className="w-12 h-12 text-slate-400 dark:text-slate-600 mx-auto mb-3" />
|
||||
<h3 className="text-slate-800 dark:text-slate-200 font-medium text-base mb-1">
|
||||
{searchQuery ? "No matching articles" : "No articles yet"}
|
||||
</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-500 max-w-sm mx-auto mb-5">
|
||||
{searchQuery
|
||||
? "Try a different search keyword."
|
||||
: "Add your first article or technical paper to listen to it anytime."}
|
||||
</p>
|
||||
{!searchQuery && (
|
||||
<Link
|
||||
href="/new"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 text-xs sm:text-sm bg-blue-600 text-white rounded-xl hover:bg-blue-500 transition shadow-md shadow-blue-600/25"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add Your First Article</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filteredEpisodes.map((ep) => {
|
||||
const isSelected = activeEpisode?.id === ep.id;
|
||||
const isEpisodePlaying = isSelected && isPlaying;
|
||||
const isReady = ep.status === "READY" && !!ep.audioUrl;
|
||||
const isProcessing = ep.status === "PROCESSING";
|
||||
const isQueued = ep.status === "QUEUED";
|
||||
const isFailed = ep.status === "FAILED";
|
||||
|
||||
{episodes.length === 0 ? (
|
||||
<div className="p-8 text-center bg-slate-900/50 border border-dashed border-slate-800 rounded-2xl">
|
||||
<Headphones className="w-10 h-10 text-slate-600 mx-auto mb-3" />
|
||||
<h3 className="text-slate-200 font-medium text-sm mb-1">No episodes generated yet</h3>
|
||||
<p className="text-xs text-slate-500 mb-4">
|
||||
Paste a blog post or article to generate your first podcast episode!
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-blue-600 text-white rounded-lg hover:bg-blue-500"
|
||||
return (
|
||||
<div
|
||||
key={ep.id}
|
||||
onClick={() => {
|
||||
if (isReady) {
|
||||
if (isSelected) {
|
||||
togglePlay();
|
||||
} else {
|
||||
playEpisode(ep);
|
||||
}
|
||||
}
|
||||
}}
|
||||
className={`p-4 sm:p-5 rounded-2xl transition-all border ${
|
||||
isReady ? "cursor-pointer" : "cursor-default"
|
||||
} ${
|
||||
isSelected
|
||||
? "bg-blue-50/70 dark:bg-slate-900 border-blue-400 dark:border-blue-500/50 shadow-md shadow-blue-500/5"
|
||||
: "bg-white dark:bg-slate-900/60 border-slate-200 dark:border-slate-850 hover:border-slate-300 dark:hover:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 shadow-sm"
|
||||
}`}
|
||||
>
|
||||
<PlusCircle className="w-3.5 h-3.5" />
|
||||
<span>Generate Episode</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{episodes.map((ep) => {
|
||||
const isSelected = activeEpisode?.id === ep.id;
|
||||
return (
|
||||
<div
|
||||
key={ep.id}
|
||||
onClick={() => selectEpisode(ep)}
|
||||
className={`p-4 rounded-xl cursor-pointer transition-all border ${
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{/* Status / Play icon button */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (isReady) {
|
||||
if (isSelected) {
|
||||
togglePlay();
|
||||
} else {
|
||||
playEpisode(ep);
|
||||
}
|
||||
}
|
||||
}}
|
||||
disabled={!isReady}
|
||||
className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-transform active:scale-95 ${
|
||||
isSelected
|
||||
? "bg-slate-850 border-blue-500/60 shadow-md shadow-blue-500/5"
|
||||
: "bg-slate-900/70 border-slate-800 hover:border-slate-700 hover:bg-slate-850/60"
|
||||
? "bg-blue-600 text-white shadow-md shadow-blue-600/30"
|
||||
: isReady
|
||||
? "bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
|
||||
: isProcessing
|
||||
? "bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800/60"
|
||||
: isQueued
|
||||
? "bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400 border border-amber-200 dark:border-amber-800/60"
|
||||
: "bg-rose-50 dark:bg-rose-950/50 text-rose-600 dark:text-rose-400 border border-rose-200 dark:border-rose-800/60"
|
||||
}`}
|
||||
aria-label={isEpisodePlaying ? "Pause" : "Play"}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className={`text-sm font-medium truncate ${isSelected ? "text-blue-200" : "text-slate-200"}`}>
|
||||
{ep.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500">
|
||||
<span className="flex items-center gap-1 font-mono">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDuration(ep.durationSeconds)}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="capitalize">{ep.mode.toLowerCase()}</span>
|
||||
<span>•</span>
|
||||
<span
|
||||
className={`px-1.5 py-0.2 rounded text-[10px] font-medium uppercase ${
|
||||
ep.status === "READY"
|
||||
? "bg-emerald-500/10 text-emerald-400"
|
||||
: ep.status === "PROCESSING"
|
||||
? "bg-amber-500/10 text-amber-400"
|
||||
: "bg-red-500/10 text-red-400"
|
||||
}`}
|
||||
>
|
||||
{ep.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{isProcessing ? (
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
) : isQueued ? (
|
||||
<Clock className="w-5 h-5 animate-pulse" />
|
||||
) : isFailed ? (
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
) : isEpisodePlaying ? (
|
||||
<Pause className="w-5 h-5 fill-current" />
|
||||
) : (
|
||||
<Play className="w-5 h-5 fill-current translate-x-0.5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={(e) => handleDeleteEpisode(ep.id, e)}
|
||||
className="p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-950/30 rounded-lg transition"
|
||||
title="Delete episode"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
{/* Metadata & Title */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 mb-1.5 flex-wrap">
|
||||
{/* Mode Badge */}
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700">
|
||||
{ep.mode === "DUAL_HOST"
|
||||
? "🎙️ 双人播客"
|
||||
: ep.mode === "FEYNMAN"
|
||||
? "💡 费曼精讲"
|
||||
: "📖 逐句朗读"}
|
||||
</span>
|
||||
|
||||
{/* Language Badge */}
|
||||
{ep.targetLanguage && ep.targetLanguage !== "auto" && (
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800">
|
||||
{ep.targetLanguage === "zh" ? "🇨🇳 中文输出" : "🇺🇸 English"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Status Chip */}
|
||||
{isProcessing ? (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-950/80 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
|
||||
<Loader2 className="w-2.5 h-2.5 animate-spin" />
|
||||
{ep.retryCount && ep.retryCount > 0
|
||||
? `Retrying (${ep.retryCount}/${ep.maxRetries || 3})...`
|
||||
: "Synthesizing audio..."}
|
||||
</span>
|
||||
) : isQueued ? (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-amber-100 dark:bg-amber-950/80 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
|
||||
<Clock className="w-2.5 h-2.5 animate-pulse" />
|
||||
In Queue
|
||||
</span>
|
||||
) : isFailed ? (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-rose-100 dark:bg-rose-950/80 text-rose-700 dark:text-rose-300 border border-rose-200 dark:border-rose-800">
|
||||
<AlertCircle className="w-2.5 h-2.5" />
|
||||
Failed
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[11px] font-mono text-slate-500 dark:text-slate-400 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3 text-blue-500 dark:text-blue-400" />
|
||||
{formatDuration(ep.durationSeconds)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="text-[11px] text-slate-400 dark:text-slate-600">•</span>
|
||||
<span className="text-[11px] text-slate-500">
|
||||
{new Date(ep.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className={`text-sm sm:text-base font-medium truncate ${
|
||||
isSelected
|
||||
? "text-blue-600 dark:text-blue-300"
|
||||
: "text-slate-900 dark:text-slate-100"
|
||||
}`}
|
||||
>
|
||||
{ep.title}
|
||||
</h3>
|
||||
|
||||
{/* Error snippet if failed */}
|
||||
{isFailed && ep.errorMessage && (
|
||||
<p className="text-[11px] text-rose-500 dark:text-rose-400 mt-1 line-clamp-1">
|
||||
{ep.errorMessage}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Right: Active Episode & Transcript (7 cols) */}
|
||||
<section className="lg:col-span-7 bg-slate-900/80 border border-slate-800 rounded-2xl p-6 min-h-[480px] flex flex-col">
|
||||
{activeEpisode ? (
|
||||
<div className="flex flex-col flex-1">
|
||||
{/* Header */}
|
||||
<div className="border-b border-slate-800 pb-4 mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-mono uppercase tracking-wider text-blue-400 bg-blue-950/60 px-2.5 py-1 rounded border border-blue-900">
|
||||
Now Playing
|
||||
</span>
|
||||
<span className="text-xs text-slate-500">
|
||||
Created {new Date(activeEpisode.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
{/* Right side actions */}
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{isFailed && (
|
||||
<button
|
||||
onClick={(e) => handleRetryEpisode(ep.id, e)}
|
||||
className="px-2.5 py-1.5 text-xs bg-rose-100 hover:bg-rose-200 dark:bg-rose-950/80 dark:hover:bg-rose-900 text-rose-700 dark:text-rose-300 rounded-lg flex items-center gap-1.5 transition font-medium border border-rose-200 dark:border-rose-800"
|
||||
title="Retry generation"
|
||||
>
|
||||
<RotateCw className="w-3.5 h-3.5" />
|
||||
<span>Retry</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isReady && isSelected && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openZen();
|
||||
}}
|
||||
className="p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-600/10 rounded-lg transition"
|
||||
title="Open Zen Player"
|
||||
aria-label="Open Zen Player"
|
||||
>
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={(e) => handleDeleteEpisode(ep.id, e)}
|
||||
className="p-2 text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-lg transition"
|
||||
title="Delete article"
|
||||
aria-label="Delete article"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-slate-100 mt-2">
|
||||
{activeEpisode.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Synchronized Transcript */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-1.5">
|
||||
<Volume2 className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>Synchronized Transcript</span>
|
||||
</h3>
|
||||
<TranscriptViewer
|
||||
timings={activeTimings}
|
||||
currentTime={currentTime}
|
||||
onSeek={(t) => setSeekTime(t)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-center text-slate-500 py-16">
|
||||
<Radio className="w-12 h-12 mb-3 opacity-30 text-blue-400" />
|
||||
<p className="text-sm">Select an episode from the library to listen and follow along.</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Persistent Bottom Audio Player */}
|
||||
{activeEpisode && activeEpisode.audioUrl && (
|
||||
<AudioPlayer
|
||||
title={activeEpisode.title}
|
||||
audioUrl={activeEpisode.audioUrl}
|
||||
durationSeconds={activeEpisode.durationSeconds}
|
||||
onTimeUpdate={(t) => setCurrentTime(t)}
|
||||
seekTime={seekTime}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user