peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(design): players on touch and the C5 control set, restart on the card (E28 S3f2)

Browse Source 
Plex player: a finger's tap on the picture only shows or hides the controls,
the hide timer starts with playback, a double-tap on a side third skips 10 s,
the seek bar is a 2.75rem touch-none hit area with its head shown on touch.
The row is play/pause, Back by position, Next only with a next item, mute,
time, tracks, a fixed ⋯ (settings, media info, stats, shortcuts, download)
and fullscreen; Stop, Restart and the ±10 s buttons are gone.

A started card shows the video card's Continue + Restart pair (one shared
MediaResumeButtons, beside the picture's button), and its menu lists the
restart; the player opens that item at 0 (fromStart). YouTube modal: the
description opens from an ⓘ, the queue arrows sit inside the screen.
This commit is contained in:
peter
2026-09-27 02:12:54 +02:00
parent 17916b411a
commit 89e65ca331
33 changed files with 1100 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PlexPlayer.tabtrap.dom.test.tsx
+12 -8
View File
@@ -154,14 +154,18 @@ describe("PlexPlayer · Tab stays inside the player", () => {
// DOES trap, so the player stood its own trap down for it and Tab walked out past the last
// control into the nav rail. Measured in a real browser: 30 Tabs, 9 escapes. The menus render
// inside the player, so the player's trap is the one that must stay on.
const gear = [...player().querySelectorAll<HTMLElement>("button")].find(
(b) => b.getAttribute("aria-label") === "plex.player.settings",
);
expect(gear).toBeDefined();
act(() => gear!.click());
const items = [...player().querySelectorAll<HTMLElement>("button:not([disabled])")];
// The menu really opened — the trap now has to span its controls too.
expect(items.length).toBeGreaterThan(12);
const buttons = () => [...player().querySelectorAll<HTMLElement>("button:not([disabled])")];
const before = buttons().length;
// The tuning panel opens from the ⋯ (C5): ⋯, then its Settings row.
const more = buttons().find((b) => b.getAttribute("aria-label") === "plex.player.more");
expect(more).toBeDefined();
act(() => more!.click());
const settings = buttons().find((b) => b.textContent === "plex.player.settings");
expect(settings).toBeDefined();
act(() => settings!.click());
const items = buttons();
// The panel really opened — the trap now has to span its controls too.
expect(items.length).toBeGreaterThan(before + 3);
const last = items[items.length - 1]!;
last.focus();
withLayout(() => press("Tab"));