feat(plex): on-screen ±10s skip buttons flanking play/pause (E6 S3)

Add discoverable rewind-10 / forward-10 controls to the Plex player control
bar, flanking play/pause (D5-A). New Skip10 glyph: an outline circular arrow
with a centred '10', deliberately distinct from the episode-level
SkipBack/SkipForward and from Restart's plain RotateCcw. Reuses seekTo; mirrors
the keyboard ←/→ (seekStep=10). i18n HU/EN aria-labels.
This commit is contained in:
2026-08-30 00:09:36 +02:00
parent 3682e6a01f
commit 90ae9f6e88
4 changed files with 59 additions and 2 deletions
@@ -1,6 +1,49 @@
import { type ReactNode } from "react";
import { RotateCcw } from "lucide-react";
// ±10s skip glyph: an outline circular arrow with a "10" in the centre — the YouTube/Plex-native
// muscle-memory shape. Deliberately distinct from the episode-level SkipBack/SkipForward (double
// triangles) and from Restart's plain RotateCcw. The arrowhead is an L-corner at the arc's open end,
// the same construction lucide uses for RotateCcw/RotateCw, so it sits consistently in the bar.
export function Skip10({ dir }: { dir: "back" | "forward" }) {
const back = dir === "back";
return (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="w-6 h-6"
aria-hidden="true"
>
{back ? (
<>
<path d="M4 8.5 A8 8 0 1 1 4 12" />
<path d="M4 8.5 L4 4 M4 8.5 L8.5 8.5" />
</>
) : (
<>
<path d="M20 8.5 A8 8 0 1 0 20 12" />
<path d="M20 8.5 L20 4 M20 8.5 L15.5 8.5" />
</>
)}
<text
x="12"
y="14.5"
textAnchor="middle"
fontSize="8"
fontWeight={700}
fill="currentColor"
stroke="none"
>
10
</text>
</svg>
);
}
// --- settings-panel building blocks ------------------------------------------------------------
export function PanelHead({ children }: { children: ReactNode }) {
return (