bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: refactor SequentialPlayer component and update button styles in ChaptersPanel for improved UI

Browse Source
This commit is contained in:
bdim404
2026-03-13 16:49:46 +08:00
parent 8c1fe96c69
commit a6974db528
1 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
qwen3-tts-frontend/src/pages/Audiobook.tsx
View File

@@ -126,10 +126,10 @@ function SequentialPlayer({
if (doneSegments.length === 0) return null
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{displayIndex !== null ? (
<>
<Button size="sm" variant="outline" className="text-red-500 border-red-500 hover:bg-red-500/10 hover:text-red-500" onClick={stop}>
<Button size="xs" variant="ghost" className="text-red-500 hover:text-red-500 hover:bg-red-500/10" onClick={stop}>
<Square className="h-3 w-3 mr-1 fill-current" />{t('projectCard.sequential.stop')}
</Button>
<span className="text-xs text-muted-foreground">
@@ -139,7 +139,7 @@ function SequentialPlayer({
</span>
</>
) : (
<Button size="sm" variant="outline" onClick={() => playSegment(0)}>
<Button size="xs" variant="ghost" className="text-muted-foreground" onClick={() => playSegment(0)}>
<Play className="h-3 w-3 mr-1" />{t('projectCard.sequential.play', { count: doneSegments.length })}
</Button>
)}
@@ -1584,6 +1584,7 @@ function ChaptersPanel({
</span>
{hasChapters && (
<div className="flex items-center gap-1 flex-wrap">
{doneCount > 0 && <SequentialPlayer segments={segments} projectId={project.id} onPlayingChange={onSequentialPlayingChange} />}
{detail!.chapters.some(c => ['pending', 'error', 'ready'].includes(c.status)) && !isBackgroundGenerating && (
<Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={onParseAll}>
{isAIMode ? <Bot className="h-3 w-3 mr-1" /> : <Wand2 className="h-3 w-3 mr-1" />}
@@ -1633,7 +1634,7 @@ function ChaptersPanel({
<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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
className="sticky top-0 z-10 w-full flex items-center gap-2 px-3 py-2.5 bg-emerald-500/5 backdrop-blur-sm hover:bg-emerald-500/10 border-b text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
onClick={toggleChExpand}
>
<span className="shrink-0 text-muted-foreground">
@@ -1866,11 +1867,6 @@ function ChaptersPanel({
)
})()}
{doneCount > 0 && (
<div className="px-3 py-2 border-t shrink-0">
<SequentialPlayer segments={segments} projectId={project.id} onPlayingChange={onSequentialPlayingChange} />
</div>
)}
</div>
)
}