81 lines
4.9 KiB
Markdown
81 lines
4.9 KiB
Markdown
# New Bento Hub theme
|
|
|
|
The old Bento rules in `frontend/styles.css` have been removed. The replacement
|
|
is `frontend/theme-bento-hub.css`, scoped to `html[data-layout="bento-hub"]`.
|
|
The stylesheet, small theme helper, and self-hosted Plus Jakarta Sans fonts are
|
|
included in the service-worker shell cache. Classic remains the default.
|
|
|
|
## Match to the reference
|
|
|
|
The reference is `docs/mockups/bento-hub/index.html` and `SPEC.md` (local design
|
|
sources). The implementation uses their obsidian surfaces, solar-gold primary
|
|
controls, cyan listening/status cues, Plus Jakarta Sans and JetBrains Mono,
|
|
16px outer / 10px inner corners, stroke SVG icons, search capsule, playlist
|
|
artwork collages, bordered collection rows, and floating mini player.
|
|
|
|
Coverage includes the desktop sidebar and phone navigation, Home and search,
|
|
Now Playing, all three notes tabs, stage lyrics, up next, playlist and channel
|
|
views, Queue and batch selection, History, Saved, all download states and their
|
|
Retry/Cancel controls, Settings overview and sections, Service mode, modals,
|
|
control sheets, and empty states. Floating chrome has measured clearance;
|
|
content scrolls inside the remaining viewport. `#sectionRail` stays fixed and
|
|
attached directly to `body`. It is never moved into a panel or scroll container.
|
|
|
|
## Deliberate differences
|
|
|
|
- Content and navigation remain the real app's. Home shows actual playlists
|
|
and recommendations. Counts, artwork, progress, lyrics and wake-lock state
|
|
come from existing data; there are no invented verification badges, transfer
|
|
speeds, subscriber counts, or guarantees that the screen will stay awake.
|
|
- The desktop sidebar uses the spec's 260px width rather than the HTML mockup's
|
|
240px. The drawer extends through 1023px. The existing app stacks its player
|
|
at phone widths; its browsing and player controls remain accessible there.
|
|
- Now Playing keeps the real control deck, playlist panel, volume, looping,
|
|
fullscreen, notes and More controls. Notes remain with the player instead of
|
|
reproducing the mockup's separate static lyrics column. Service keeps its
|
|
view, autoscroll, floating lyrics, reporting and text-size controls; these
|
|
wrap when necessary rather than overlapping.
|
|
- Settings keeps its section registry, back/history behavior, live summaries,
|
|
search and desktop two-pane navigation. Layout selection remains the existing
|
|
select rather than duplicating it with mockup-only theme chips.
|
|
- Functional text has an 11px floor and controls have 44px minimum targets.
|
|
Muted dark text and the light-theme gold were adjusted for contrast. Existing
|
|
font scaling, density, contrast, reduced-motion and performance preferences
|
|
continue to apply. Service lyrics keep their adjustable sizing.
|
|
- Mockup frames omit the shell on several screens and contain empty space or
|
|
sample rows. Real pages retain the full shell and scrollable content. Video
|
|
fixture art is synthetic; a real playing video fills the video stage.
|
|
|
|
## Verification and screenshots
|
|
|
|
Run `node scripts/test-bento-theme.js` for a reproducible comparison. It extracts
|
|
pre-Bento commit `04b620e` into a temporary directory, captures Classic and Glass
|
|
before shots, then checks the current app. It does not modify the checkout.
|
|
`BENTO_BASE_COMMIT` can select another baseline; `BENTO_SCREENSHOT_DIR` can select
|
|
an output directory. Default output is `~/deliverables/ytplayer-done13/`.
|
|
|
|
The Playwright matrix covers 23 screens at 390px and 1440px in Chromium and
|
|
WebKit. It also checks centered navigation icons, download action appearance,
|
|
fixed rail ownership, sidebar and mini-player navigation, floating clearance,
|
|
theme switching restoration, and light/high-contrast appearance. The reference
|
|
is opened at both widths and each reference frame is captured when the local
|
|
mockup is present. No local mockup files are added to these implementation
|
|
commits. Static fixtures freeze the Classic mini-player's initial observer and
|
|
native indeterminate progress to avoid unrelated animation/scroll races.
|
|
Before/after comparisons allow at most 40 subpixel rasterization differences
|
|
in a whole screenshot; substantial geometry or styling differences fail. The
|
|
additional theme-switch check tolerates one RGB level per channel to account
|
|
for Chromium recompositing rounded corners, while retaining the 40-pixel limit.
|
|
|
|
Frontend unit tests include floating-chrome clearance with and without safe
|
|
areas/hidden bars and Bento-only SVG mapping without changing Glass glyphs.
|
|
The usual frontend tests, app syntax check and server build are run after each
|
|
screen group. Server source and imports are unchanged.
|
|
|
|
On a real iPhone, review safe-area clearance in Safari and installed mode,
|
|
keyboard and orientation changes, the floating rail, mini-player return,
|
|
Service controls, and actual video playback. On desktop, review long titles,
|
|
sidebar drawer at tablet widths, keyboard focus, Settings navigation and theme
|
|
switching. WebKit automation checks layout; it does not emulate all iOS media
|
|
or safe-area behavior. Nothing was pushed or deployed.
|