From 202f2fa83b69620f8538d78e1fc31d9885fc0513 Mon Sep 17 00:00:00 2001
From: bdim404 <i@bdim.moe>
Date: Thu, 12 Mar 2026 16:05:19 +0800
Subject: [PATCH] feat: Refactor AudioPlayer and Audiobook components to
 improve loading state handling and integrate dialog components

---
 .../src/components/AudioPlayer.tsx            |  32 ++-
 qwen3-tts-frontend/src/pages/Audiobook.tsx    | 220 ++++++++++++------
 2 files changed, 179 insertions(+), 73 deletions(-)

diff --git a/qwen3-tts-frontend/src/components/AudioPlayer.tsx b/qwen3-tts-frontend/src/components/AudioPlayer.tsx
index facd353..ac35679 100644
--- a/qwen3-tts-frontend/src/components/AudioPlayer.tsx
+++ b/qwen3-tts-frontend/src/components/AudioPlayer.tsx
@@ -20,12 +20,17 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
   const [blobUrl, setBlobUrl] = useState<string>('')
   const [isLoading, setIsLoading] = useState(false)
   const [loadError, setLoadError] = useState<string | null>(null)
+  const [isPending, setIsPending] = useState(false)
+  const [retryCount, setRetryCount] = useState(0)
   const previousAudioUrlRef = useRef<string>('')
+  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const playerInstanceRef = useRef<WaveformPlayer | null>(null)
 
   useEffect(() => {
-    if (!audioUrl || audioUrl === previousAudioUrlRef.current) return
+    if (!audioUrl) return
+    const cacheKey = `${audioUrl}::${retryCount}`
+    if (cacheKey === previousAudioUrlRef.current) return
 
     let active = true
     const prevBlobUrl = blobUrl
@@ -33,6 +38,7 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
     const fetchAudio = async () => {
       setIsLoading(true)
       setLoadError(null)
+      setIsPending(false)
 
       if (prevBlobUrl) {
         URL.revokeObjectURL(prevBlobUrl)
@@ -43,12 +49,20 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
         if (active) {
           const url = URL.createObjectURL(response.data)
           setBlobUrl(url)
-          previousAudioUrlRef.current = audioUrl
+          previousAudioUrlRef.current = cacheKey
         }
-      } catch (error) {
-        console.error("Failed to load audio:", error)
+      } catch (error: unknown) {
         if (active) {
-          setLoadError(t('failedToLoadAudio'))
+          const status = (error as { response?: { status?: number } })?.response?.status
+          if (status === 404) {
+            setIsPending(true)
+            retryTimerRef.current = setTimeout(() => {
+              if (active) setRetryCount(c => c + 1)
+            }, 3000)
+          } else {
+            console.error("Failed to load audio:", error)
+            setLoadError(t('failedToLoadAudio'))
+          }
         }
       } finally {
         if (active) {
@@ -61,8 +75,12 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
 
     return () => {
       active = false
+      if (retryTimerRef.current) {
+        clearTimeout(retryTimerRef.current)
+        retryTimerRef.current = null
+      }
     }
-  }, [audioUrl, blobUrl, t])
+  }, [audioUrl, retryCount, blobUrl, t])
 
   useEffect(() => {
     return () => {
@@ -119,7 +137,7 @@ const AudioPlayer = memo(({ audioUrl, jobId }: AudioPlayerProps) => {
     link.click()
   }, [blobUrl, audioUrl, jobId])
 
-  if (isLoading) {
+  if (isLoading || isPending) {
     return (
       <div className="flex items-center justify-center p-4 border rounded-lg">
         <span className="text-sm text-muted-foreground">{t('loadingAudio')}</span>
diff --git a/qwen3-tts-frontend/src/pages/Audiobook.tsx b/qwen3-tts-frontend/src/pages/Audiobook.tsx
index 446da54..5a16474 100644
--- a/qwen3-tts-frontend/src/pages/Audiobook.tsx
+++ b/qwen3-tts-frontend/src/pages/Audiobook.tsx
@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Navbar } from '@/components/Navbar'
 import { AudioPlayer } from '@/components/AudioPlayer'
 import { audiobookApi, type AudiobookProject, type AudiobookProjectDetail, type AudiobookCharacter, type AudiobookSegment } from '@/lib/api/audiobook'
@@ -213,7 +214,7 @@ function LogStream({ projectId, chapterId, active }: { projectId: number; chapte
   )
 }
 
-function LLMConfigPanel({ onSaved }: { onSaved?: () => void }) {
+function LLMConfigDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const { t } = useTranslation('audiobook')
   const [baseUrl, setBaseUrl] = useState('')
   const [apiKey, setApiKey] = useState('')
@@ -222,8 +223,8 @@ function LLMConfigPanel({ onSaved }: { onSaved?: () => void }) {
   const [existing, setExisting] = useState<{ base_url?: string; model?: string; has_key: boolean } | null>(null)
 
   useEffect(() => {
-    audiobookApi.getLLMConfig().then(setExisting).catch(() => {})
-  }, [])
+    if (open) audiobookApi.getLLMConfig().then(setExisting).catch(() => {})
+  }, [open])
 
   const handleSave = async () => {
     if (!baseUrl || !apiKey || !model) {
@@ -237,7 +238,7 @@ function LLMConfigPanel({ onSaved }: { onSaved?: () => void }) {
       setApiKey('')
       const updated = await audiobookApi.getLLMConfig()
       setExisting(updated)
-      onSaved?.()
+      onClose()
     } catch (e: any) {
       toast.error(formatApiError(e))
     } finally {
@@ -246,28 +247,39 @@ function LLMConfigPanel({ onSaved }: { onSaved?: () => void }) {
   }
 
   return (
-    <div className="border rounded-lg p-4 space-y-3">
-      <div className="font-medium text-sm">{t('llmConfigPanel.title')}</div>
-      {existing && (
-        <div className="text-xs text-muted-foreground">
-          {t('llmConfigPanel.current', {
-            baseUrl: existing.base_url || t('llmConfigPanel.notSet'),
-            model: existing.model || t('llmConfigPanel.notSet'),
-            keyStatus: existing.has_key ? t('llmConfigPanel.hasKey') : t('llmConfigPanel.noKey'),
-          })}
+    <Dialog open={open} onOpenChange={v => { if (!v) onClose() }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('llmConfigPanel.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 pt-1">
+          {existing && (
+            <div className="text-xs text-muted-foreground">
+              {t('llmConfigPanel.current', {
+                baseUrl: existing.base_url || t('llmConfigPanel.notSet'),
+                model: existing.model || t('llmConfigPanel.notSet'),
+                keyStatus: existing.has_key ? t('llmConfigPanel.hasKey') : t('llmConfigPanel.noKey'),
+              })}
+            </div>
+          )}
+          <Input placeholder="Base URL (e.g. https://api.openai.com/v1)" value={baseUrl} onChange={e => setBaseUrl(e.target.value)} />
+          <Input placeholder="API Key" type="password" value={apiKey} onChange={e => setApiKey(e.target.value)} />
+          <Input placeholder="Model (e.g. gpt-4o)" value={model} onChange={e => setModel(e.target.value)} />
+          <div className="flex justify-end gap-2 pt-1">
+            <Button size="sm" variant="outline" onClick={onClose} disabled={loading}>
+              {t('cancel', { defaultValue: '取消' })}
+            </Button>
+            <Button size="sm" onClick={handleSave} disabled={loading}>
+              {loading ? t('llmConfigPanel.saving') : t('llmConfigPanel.save')}
+            </Button>
+          </div>
         </div>
-      )}
-      <Input placeholder="Base URL (e.g. https://api.openai.com/v1)" value={baseUrl} onChange={e => setBaseUrl(e.target.value)} />
-      <Input placeholder="API Key" type="password" value={apiKey} onChange={e => setApiKey(e.target.value)} />
-      <Input placeholder="Model (e.g. gpt-4o)" value={model} onChange={e => setModel(e.target.value)} />
-      <Button size="sm" onClick={handleSave} disabled={loading}>
-        {loading ? t('llmConfigPanel.saving') : t('llmConfigPanel.save')}
-      </Button>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
-function CreateProjectPanel({ onCreated }: { onCreated: () => void }) {
+function CreateProjectDialog({ open, onClose, onCreated }: { open: boolean; onClose: () => void; onCreated: () => void }) {
   const { t } = useTranslation('audiobook')
   const [title, setTitle] = useState('')
   const [sourceType, setSourceType] = useState<'text' | 'epub'>('text')
@@ -275,6 +287,8 @@ function CreateProjectPanel({ onCreated }: { onCreated: () => void }) {
   const [epubFile, setEpubFile] = useState<File | null>(null)
   const [loading, setLoading] = useState(false)
 
+  const reset = () => { setTitle(''); setText(''); setEpubFile(null); setSourceType('text') }
+
   const handleCreate = async () => {
     if (!title) { toast.error(t('createPanel.titleRequired')); return }
     if (sourceType === 'text' && !text) { toast.error(t('createPanel.textRequired')); return }
@@ -287,8 +301,9 @@ function CreateProjectPanel({ onCreated }: { onCreated: () => void }) {
         await audiobookApi.uploadEpub(title, epubFile!)
       }
       toast.success(t('createPanel.createdSuccess'))
-      setTitle(''); setText(''); setEpubFile(null)
+      reset()
       onCreated()
+      onClose()
     } catch (e: any) {
       toast.error(formatApiError(e))
     } finally {
@@ -297,33 +312,42 @@ function CreateProjectPanel({ onCreated }: { onCreated: () => void }) {
   }
 
   return (
-    <div className="border rounded-lg p-4 space-y-3">
-      <div className="font-medium text-sm">{t('createPanel.title')}</div>
-      <Input placeholder={t('createPanel.titlePlaceholder')} value={title} onChange={e => setTitle(e.target.value)} />
-      <div className="flex gap-2">
-        <Button size="sm" variant={sourceType === 'text' ? 'default' : 'outline'} onClick={() => setSourceType('text')}>
-          {t('createPanel.pasteText')}
-        </Button>
-        <Button size="sm" variant={sourceType === 'epub' ? 'default' : 'outline'} onClick={() => setSourceType('epub')}>
-          {t('createPanel.uploadEpub')}
-        </Button>
-      </div>
-      {sourceType === 'text' && (
-        <Textarea placeholder={t('createPanel.textPlaceholder')} rows={6} value={text} onChange={e => setText(e.target.value)} />
-      )}
-      {sourceType === 'epub' && (
-        <Input type="file" accept=".epub" onChange={e => {
-          const file = e.target.files?.[0] || null
-          setEpubFile(file)
-          if (file && !title) {
-            setTitle(file.name.replace(/\.epub$/i, ''))
-          }
-        }} />
-      )}
-      <Button size="sm" onClick={handleCreate} disabled={loading}>
-        {loading ? t('createPanel.creating') : t('createPanel.create')}
-      </Button>
-    </div>
+    <Dialog open={open} onOpenChange={v => { if (!v) { reset(); onClose() } }}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t('createPanel.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3 pt-1">
+          <Input placeholder={t('createPanel.titlePlaceholder')} value={title} onChange={e => setTitle(e.target.value)} />
+          <div className="flex gap-2">
+            <Button size="sm" variant={sourceType === 'text' ? 'default' : 'outline'} onClick={() => setSourceType('text')}>
+              {t('createPanel.pasteText')}
+            </Button>
+            <Button size="sm" variant={sourceType === 'epub' ? 'default' : 'outline'} onClick={() => setSourceType('epub')}>
+              {t('createPanel.uploadEpub')}
+            </Button>
+          </div>
+          {sourceType === 'text' && (
+            <Textarea placeholder={t('createPanel.textPlaceholder')} rows={6} value={text} onChange={e => setText(e.target.value)} />
+          )}
+          {sourceType === 'epub' && (
+            <Input type="file" accept=".epub" onChange={e => {
+              const file = e.target.files?.[0] || null
+              setEpubFile(file)
+              if (file && !title) setTitle(file.name.replace(/\.epub$/i, ''))
+            }} />
+          )}
+          <div className="flex justify-end gap-2 pt-1">
+            <Button size="sm" variant="outline" onClick={() => { reset(); onClose() }} disabled={loading}>
+              {t('cancel', { defaultValue: '取消' })}
+            </Button>
+            <Button size="sm" onClick={handleCreate} disabled={loading}>
+              {loading ? t('createPanel.creating') : t('createPanel.create')}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
@@ -348,7 +372,7 @@ function ProjectListSidebar({
 }) {
   const { t } = useTranslation('audiobook')
   return (
-    <div className={`${collapsed ? 'w-10' : 'w-60'} shrink-0 flex flex-col bg-muted/30 overflow-hidden transition-all duration-200`}>
+    <div className={`${collapsed ? 'w-10' : 'w-64'} shrink-0 flex flex-col bg-muted/30 overflow-hidden transition-all duration-200`}>
       <div className="h-16 flex items-center shrink-0 px-2 gap-1">
         {!collapsed && (
           <div className="flex items-center gap-2 flex-1 min-w-0 ml-1">
@@ -370,7 +394,7 @@ function ProjectListSidebar({
               <Plus className="h-4 w-4" />
             </Button>
           </div>
-          <div className="flex-1 overflow-y-auto">
+          <div className="flex-1 overflow-y-auto px-2 py-1 space-y-1.5">
             {loading ? (
               <div className="px-3 py-4 text-xs text-muted-foreground">{t('loading')}</div>
             ) : projects.length === 0 ? (
@@ -380,10 +404,17 @@ function ProjectListSidebar({
                 <button
                   key={p.id}
                   onClick={() => onSelect(p.id)}
-                  className={`w-full text-left px-3 py-2 flex flex-col gap-0.5 hover:bg-muted/50 transition-colors border-b border-border/40 ${selectedId === p.id ? 'bg-muted' : ''}`}
+                  className={`w-full text-left rounded-lg border p-3 flex flex-col gap-1.5 transition-colors hover:bg-muted/60 ${
+                    selectedId === p.id
+                      ? 'bg-background border-border shadow-sm'
+                      : 'bg-background/50 border-border/40'
+                  }`}
                 >
-                  <span className="text-sm font-medium truncate">{p.title}</span>
-                  <Badge variant={(STATUS_COLORS[p.status] || 'secondary') as any} className="text-[10px] h-4 px-1 self-start">
+                  <div className="flex items-start gap-2">
+                    <Book className="h-3.5 w-3.5 shrink-0 mt-0.5 text-muted-foreground" />
+                    <span className="text-sm font-medium leading-snug break-words min-w-0 flex-1">{p.title}</span>
+                  </div>
+                  <Badge variant={(STATUS_COLORS[p.status] || 'secondary') as any} className="text-[10px] h-4 px-1 self-start ml-5">
                     {t(`status.${p.status}`, { defaultValue: p.status })}
                   </Badge>
                 </button>
@@ -416,6 +447,9 @@ function CharactersPanel({
   onConfirm,
   onAnalyze,
   onFetchDetail,
+  collapsed,
+  onToggle,
+  onScrollToChapter,
 }: {
   project: AudiobookProject
   detail: AudiobookProjectDetail | null
@@ -423,6 +457,9 @@ function CharactersPanel({
   onConfirm: () => void
   onAnalyze: () => void
   onFetchDetail: () => Promise<void>
+  collapsed: boolean
+  onToggle: () => void
+  onScrollToChapter: (chapterId: number) => void
 }) {
   const { t } = useTranslation('audiobook')
   const [editingCharId, setEditingCharId] = useState<number | null>(null)
@@ -479,6 +516,38 @@ function CharactersPanel({
   }
 
   const charCount = detail?.characters.length ?? 0
+  const hasChaptersOutline = (detail?.chapters.length ?? 0) > 0
+
+  if (collapsed && hasChaptersOutline) {
+    return (
+      <div className="w-44 shrink-0 flex flex-col border-r border-emerald-500/20 bg-emerald-500/5 overflow-hidden">
+        <div className="flex items-center justify-between px-2 py-2 shrink-0 border-b border-emerald-500/20">
+          <span className="text-xs font-medium text-emerald-400/80 truncate">
+            {t('projectCard.chapters.title', { count: detail!.chapters.length })}
+          </span>
+          <Button size="icon" variant="ghost" className="h-6 w-6 shrink-0 ml-1" onClick={onToggle}>
+            <PanelLeftOpen className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {detail!.chapters.map(ch => {
+            const chTitle = ch.title || t('projectCard.chapters.defaultTitle', { index: ch.chapter_index + 1 })
+            const dotClass = ch.status === 'done' ? 'bg-green-400' : ch.status === 'error' ? 'bg-destructive' : ch.status === 'parsing' || ch.status === 'generating' ? 'bg-amber-400' : ch.status === 'ready' ? 'bg-blue-400' : 'bg-muted-foreground/50'
+            return (
+              <button
+                key={ch.id}
+                className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/60 border-b border-border/30 transition-colors"
+                onClick={() => onScrollToChapter(ch.id)}
+              >
+                <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotClass}`} />
+                <span className="text-xs truncate">{chTitle}</span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div className="w-72 shrink-0 flex flex-col border-r border-blue-500/20 bg-blue-500/5 overflow-hidden">
@@ -486,11 +555,18 @@ function CharactersPanel({
         <span className="text-xs font-medium text-blue-400/80">
           {t('projectCard.characters.title', { count: charCount })}
         </span>
+        <div className="flex items-center gap-1">
         {!isActive && status !== 'pending' && charCount > 0 && (
           <Button size="sm" variant="ghost" className="h-6 text-xs px-2 text-muted-foreground" onClick={onAnalyze} disabled={loadingAction}>
             {t('projectCard.reanalyze')}
           </Button>
         )}
+        {hasChaptersOutline && (
+          <Button size="icon" variant="ghost" className="h-6 w-6" onClick={onToggle}>
+            <PanelLeftClose className="h-3.5 w-3.5" />
+          </Button>
+        )}
+        </div>
       </div>
 
       {(!detail || charCount === 0) ? (
@@ -646,6 +722,8 @@ function ChaptersPanel({
   onSequentialPlayingChange,
   onUpdateSegment,
   onRegenerateSegment,
+  scrollToChapterId,
+  onScrollToChapterDone,
 }: {
   project: AudiobookProject
   detail: AudiobookProjectDetail | null
@@ -662,6 +740,8 @@ function ChaptersPanel({
   onSequentialPlayingChange: (id: number | null) => void
   onUpdateSegment: (segmentId: number, data: { text: string; emo_text?: string | null; emo_alpha?: number | null }) => Promise<void>
   onRegenerateSegment: (segmentId: number) => Promise<void>
+  scrollToChapterId: number | null
+  onScrollToChapterDone: () => void
 }) {
   const { t } = useTranslation('audiobook')
   const [expandedChapters, setExpandedChapters] = useState<Set<number>>(new Set())
@@ -674,6 +754,15 @@ function ChaptersPanel({
   const [audioVersions, setAudioVersions] = useState<Record<number, number>>({})
   const prevSegStatusRef = useRef<Record<number, string>>({})
 
+  useEffect(() => {
+    if (!scrollToChapterId) return
+    setExpandedChapters(prev => { const n = new Set(prev); n.add(scrollToChapterId); return n })
+    setTimeout(() => {
+      document.getElementById(`ch-${scrollToChapterId}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 50)
+    onScrollToChapterDone()
+  }, [scrollToChapterId, onScrollToChapterDone])
+
   useEffect(() => {
     const bumps: Record<number, number> = {}
     segments.forEach(seg => {
@@ -785,7 +874,7 @@ function ChaptersPanel({
               return next
             })
             return (
-              <div key={ch.id}>
+              <div key={ch.id} id={`ch-${ch.id}`}>
                 {/* Chapter header — flat, full-width, click to expand */}
                 <button
                   className="w-full flex items-center gap-2 px-3 py-2.5 bg-muted/40 hover:bg-muted/70 border-b text-left transition-colors"
@@ -989,6 +1078,8 @@ export default function Audiobook() {
   const [showCreate, setShowCreate] = useState(false)
   const [showLLM, setShowLLM] = useState(false)
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [charactersCollapsed, setCharactersCollapsed] = useState(false)
+  const [scrollToChapterId, setScrollToChapterId] = useState<number | null>(null)
   const prevStatusRef = useRef<string>('')
   const autoExpandedRef = useRef(new Set<string>())
 
@@ -1360,16 +1451,8 @@ export default function Audiobook() {
       <div className="flex-1 flex flex-col overflow-hidden bg-muted/30">
         <Navbar />
         <div className="flex-1 flex flex-col overflow-hidden bg-background rounded-tl-2xl">
-          {showLLM && (
-            <div className="shrink-0 border-b px-4 py-3">
-              <LLMConfigPanel onSaved={() => setShowLLM(false)} />
-            </div>
-          )}
-          {showCreate && (
-            <div className="shrink-0 border-b px-4 py-3">
-              <CreateProjectPanel onCreated={() => { setShowCreate(false); fetchProjects() }} />
-            </div>
-          )}
+          <LLMConfigDialog open={showLLM} onClose={() => setShowLLM(false)} />
+          <CreateProjectDialog open={showCreate} onClose={() => setShowCreate(false)} onCreated={fetchProjects} />
           {!selectedProject ? (
             <EmptyState />
           ) : (
@@ -1491,6 +1574,9 @@ export default function Audiobook() {
                   onConfirm={handleConfirm}
                   onAnalyze={handleAnalyze}
                   onFetchDetail={fetchDetail}
+                  collapsed={charactersCollapsed}
+                  onToggle={() => setCharactersCollapsed(v => !v)}
+                  onScrollToChapter={(id) => setScrollToChapterId(id)}
                 />
                 <ChaptersPanel
                   project={selectedProject}
@@ -1508,6 +1594,8 @@ export default function Audiobook() {
                   onSequentialPlayingChange={setSequentialPlayingId}
                   onUpdateSegment={handleUpdateSegment}
                   onRegenerateSegment={handleRegenerateSegment}
+                  scrollToChapterId={scrollToChapterId}
+                  onScrollToChapterDone={() => setScrollToChapterId(null)}
                 />
               </div>
             </>