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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user