fix(audio player + dashboard): markdown bookmark notes, horizontal volume, transport glyphs, client-side badges
Bookmarks: notes are markdown now — capture and drawer edit are
textareas (raw source), display renders through the reader's
markdown-it + DOMPurify pipeline (renderNoteHtml) as x-html; the
edit textarea drops the enter-to-save handler so newlines survive.
Volume: the panel dragger is horizontal (mute button beside it,
7.5rem slider) per user feedback — vertical orientation read as a
scrubber clone at a glance.
Play/pause: unicode glyphs replaced with SVG — the triangle is
optically centered (2px right-bias) and the pause bars are longer
and thicker rounded rects (4.2×15 at rx 1.7).
Dashboard: the client-side card renderer (dashboard.ts — the path the
JSON sections actually render through) now mirrors the templ BookCard:
cover-corner badges for audiobook/comic/manga (books unbadged) and the
hover action shows headphones with 'Listen to …' labels for audiobooks.
BookInfo type + Go struct carry format_group end to end.
Verified on-device: pause glyph centered/thicker, horizontal volume
panel, markdown note ('**bold**' + list) rendered in the bookmarks
drawer, badges on dashboard cards, sections JSON carrying
format_group.
This commit is contained in:
1 parent
5cf34102d6
commit
2c714dcb60
5 files changed
+65
-16
No files matched your search
@@ -13,6 +13,7 @@
|
||||
// tracks) — the mobile-web native feel from handoff item 6.
|
||||
|
||||
import { Alpine } from "./alpine";
|
||||
import { renderNoteHtml } from "./markdown";
|
||||
import { showToast } from "./toast";
|
||||
|
||||
type AudioChapter = { index: number; title: string; start: number; end: number };
|
||||
@@ -375,6 +376,12 @@ Alpine.data("audioReader", () => ({
|
||||
}
|
||||
},
|
||||
|
||||
// Markdown notes: the drawer renders sanitized HTML from the same
|
||||
// pipeline the reader's annotations use; editing stays raw markdown.
|
||||
bookmarkNoteHtml(b: Record<string, unknown>): string {
|
||||
return renderNoteHtml(String(b.notes ?? ""));
|
||||
},
|
||||
|
||||
bookmarkSeconds(position: string): number {
|
||||
const n = parseInt(String(position).slice("audio:".length), 10);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
|
||||
Reference in new issue
Block a user