389 lines
17 KiB
TypeScript
389 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import {
|
|
Radio,
|
|
Plus,
|
|
Headphones,
|
|
Trash2,
|
|
Clock,
|
|
Play,
|
|
Pause,
|
|
Maximize2,
|
|
Search,
|
|
RefreshCw,
|
|
Loader2,
|
|
AlertCircle,
|
|
RotateCw,
|
|
Hourglass,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
import { useAudio, Episode } from "@/contexts/AudioContext";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
|
|
export default function HomePage() {
|
|
const { activeEpisode, isPlaying, playEpisode, togglePlay, openZen } = useAudio();
|
|
const [episodes, setEpisodes] = useState<Episode[]>([]);
|
|
const [workerStatus, setWorkerStatus] = useState<any>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
const fetchEpisodes = async () => {
|
|
try {
|
|
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);
|
|
}
|
|
|
|
if (workerRes && workerRes.ok) {
|
|
const workerData = await workerRes.json();
|
|
if (workerData.success) {
|
|
setWorkerStatus(workerData.worker);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load episodes:", err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchEpisodes();
|
|
}, []);
|
|
|
|
// 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);
|
|
|
|
if (!hasPending && !workerActive) return;
|
|
|
|
const interval = setInterval(() => {
|
|
fetchEpisodes();
|
|
}, 2500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [episodes, workerStatus]);
|
|
|
|
const handleDeleteEpisode = async (id: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (!confirm("Are you sure you want to delete this episode?")) return;
|
|
|
|
try {
|
|
await fetch(`/api/episodes/${id}`, { method: "DELETE" });
|
|
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);
|
|
const s = Math.floor(secs % 60);
|
|
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-36">
|
|
{/* Top Navbar */}
|
|
<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-base sm:text-lg text-slate-900 dark:text-slate-100 tracking-tight">
|
|
Be My Anchor
|
|
</span>
|
|
<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>
|
|
|
|
<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 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>
|
|
</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";
|
|
|
|
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"
|
|
}`}
|
|
>
|
|
<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-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"}
|
|
>
|
|
{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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|