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.
2026-09-27 02:12:54 +02:00
parent 17916b411a
commit 89e65ca331
33 changed files with 1100 additions and 282 deletions
@@ -0,0 +1,66 @@
+import type { MouseEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { Play, RotateCcw } from "lucide-react";
+import { Button } from "./ui/Button";
+import { IconButton } from "./ui/IconButton";
+
+// The started card's hover pair (DESIGN "Players", C5: restarting lives on the card): Continue in the
+// accent, Restart dark translucent. ONE component for the YouTube card and the Plex cards, so the one
+// media card says the same two words in the same two looks. A small picture (a shelf's landscape, the
+// dense video card) takes the icon-only pair, which fits beside the hover row. Touch has no hover: a
+// tap on the picture continues, and the card's "…" carries the restart.
+export function MediaResumeButtons({
+  small = false,
+  onContinue,
+  onRestart,
+}: {
+  small?: boolean;
+  onContinue: (e: MouseEvent) => void;
+  onRestart: (e: MouseEvent) => void;
+}) {
+  const { t } = useTranslation();
+  return small ? (
+    <>
+      <IconButton
+        variant="primary"
+        size="md"
+        round
+        onClick={onContinue}
+        label={t("card.continue")}
+        title={t("card.continueTitle")}
+      >
+        <Play className="fill-current" />
+      </IconButton>
+      <IconButton
+        variant="media"
+        size="md"
+        onClick={onRestart}
+        label={t("card.restart")}
+        title={t("card.restartTitle")}
+      >
+        <RotateCcw />
+      </IconButton>
+    </>
+  ) : (
+    <>
+      <Button
+        size="sm"
+        round
+        onClick={onContinue}
+        title={t("card.continueTitle")}
+        icon={<Play className="fill-current" />}
+      >
+        {t("card.continue")}
+      </Button>
+      <Button
+        variant="media"
+        size="sm"
+        onClick={onRestart}
+        title={t("card.restartTitle")}
+        icon={<RotateCcw />}
+      >
+        {t("card.restart")}
+      </Button>
+    </>
+  );
+}