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

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:
2026-09-27 02:12:54 +02:00
parent 17916b411a
commit 89e65ca331
33 changed files with 1100 additions and 282 deletions
+4 -4
View File
@@ -313,10 +313,10 @@ function MediaCard({ state }: { state: "new" | "started" | "touch" }) {
{state === "started" && (
<span className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/30">
<span className={clsx(pill, "bg-accent text-accent-fg")}>
<Play className="h-4 w-4" /> Resume 14:02
<Play className="h-4 w-4" /> Continue
</span>
<span className={clsx(pill, "bg-black/60 text-white")}>
<RotateCcw className="h-3.5 w-3.5" /> From the start
<RotateCcw className="h-3.5 w-3.5" /> Restart
</span>
</span>
)}
@@ -352,7 +352,7 @@ function Cards() {
<Sample label="Started · hover">
<MediaCard state="started" />
</Sample>
<Sample label="Started · touch: a tap resumes, the '…' has From the start">
<Sample label="Started · touch: a tap continues, the '…' has the restart">
<MediaCard state="touch" />
</Sample>
</div>
@@ -365,7 +365,7 @@ function C5() {
id="c5"
code="C5"
title="The Plex player's controls"
rule="The owner's model. No Stop (closing is stopping), no Restart and no ±10 s buttons. Back: more than 3 s in → restart; within the first 3 s → the previous item, at its resume point if it has one. Next shows only when there is a next item (an episode, a playlist), starts it at its resume point, and leaves one behind (not watched, unless already in the credits). On touch a double-tap on the left / right third skips ∓10 s; the keyboard keeps ← / →. The rare tools sit in a fixed '⋯'. Restarting lives on the card: not started → Play; started → Resume + From the start (touch: a tap resumes, the '…' has From the start)."
rule="The owner's model. No Stop (closing is stopping), no Restart and no ±10 s buttons. Back: more than 3 s in → restart; within the first 3 s → the previous item, at its resume point if it has one. Next shows only when there is a next item (an episode, a playlist), starts it at its resume point, and leaves one behind (not watched, unless already in the credits). On touch a double-tap on the left / right third skips ∓10 s; the keyboard keeps ← / →. The rare tools sit in a fixed '⋯'. Restarting lives on the card: not started → Play; started → Continue + Restart, the video card's pair (touch: a tap continues, the '…' has the restart)."
>
<div className="flex flex-wrap items-start gap-4">
<div className="w-full max-w-xl">