feat(audiobooks): show current chapter in MiniBar left column

Renders playback.currentChapter.title between the book title and the
time row. Truncates with a tooltip; absent when the chapter list is
empty or the current position falls outside any chapter.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
RXWatcher
2026-05-25 01:33:09 +02:00
co-authored by Claude Opus 4.7
parent 5d1534f794
commit d8e03efda0
2 changed files with 32 additions and 0 deletions
@@ -43,4 +43,27 @@ describe("MiniBar", () => {
await userEvent.click(screen.getByRole("button", { name: /close player/i }));
expect(onClose).toHaveBeenCalled();
});
it("renders the current chapter title under the book title", () => {
render(
<MiniBar
title="X"
playback={makePlayback({
currentChapter: {
index: 6,
title: "The Astrophage",
start_seconds: 0,
end_seconds: 100,
source: "embedded",
},
})}
/>,
);
expect(screen.getByText("The Astrophage")).toBeInTheDocument();
});
it("omits the chapter row when no current chapter is known", () => {
render(<MiniBar title="X" playback={makePlayback({ currentChapter: null })} />);
expect(screen.queryByTestId("minibar-chapter-title")).not.toBeInTheDocument();
});
});
@@ -38,6 +38,15 @@ export function MiniBar({ title, playback, onClose }: MiniBarProps) {
{title}
</div>
) : null}
{playback.currentChapter ? (
<div
data-testid="minibar-chapter-title"
className="text-muted-foreground truncate text-[11px] leading-tight"
title={playback.currentChapter.title}
>
{playback.currentChapter.title}
</div>
) : null}
<div className="text-muted-foreground flex items-center gap-2 text-[10px] leading-tight uppercase">
<span className="font-mono text-[11px] tracking-[0.12em] normal-case tabular-nums">
{formatTime(playback.currentTime)}