Web frontend

web/src/components/Transport.tsx

@@ -0,0 +1,94 @@
+/** The three transport buttons, at two sizes. The glyphs are CSS shapes, as in the
+ * mockup - no icon font to load on a device that boots offline. */
+
+interface Props {
+  playing: boolean;
+  onToggle: () => void;
+  onNext: () => void;
+  onPrevious: () => void;
+  /** Side length of the skip buttons; the play button scales from it. */
+  size: number;
+  gap: number;
+}
+
+export function Transport({ playing, onToggle, onNext, onPrevious, size, gap }: Props) {
+  const glyph = Math.round(size * 0.33);
+  const bar = Math.max(4, Math.round(size * 0.085));
+  const playSize = Math.round(size * 1.26);
+  const playBar = Math.max(6, Math.round(playSize * 0.1));
+  const playGlyph = Math.round(playSize * 0.37);
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap }}>
+      <button
+        className="round"
+        onClick={onPrevious}
+        aria-label="Vorheriger Titel"
+        style={{ width: size, height: size, background: "oklch(30% 0.04 210)" }}
+      >
+        <span style={{ display: "flex", alignItems: "center", gap: 2 }}>
+          <span style={{ width: bar, height: glyph, borderRadius: 1, background: "#fff" }} />
+          <span
+            style={{
+              width: glyph,
+              height: glyph,
+              background: "#fff",
+              clipPath: "polygon(100% 0%, 100% 100%, 0% 50%)",
+            }}
+          />
+        </span>
+      </button>
+
+      <button
+        className="round"
+        onClick={onToggle}
+        aria-label={playing ? "Pause" : "Abspielen"}
+        style={{
+          width: playSize,
+          height: playSize,
+          background: "var(--accent)",
+          boxShadow: "0 6px 20px oklch(70% 0.16 340 / .5)",
+        }}
+      >
+        {playing ? (
+          <span style={{ display: "flex", gap: playBar * 0.8 }}>
+            <span
+              style={{ width: playBar, height: playGlyph, borderRadius: 2, background: "#fff" }}
+            />
+            <span
+              style={{ width: playBar, height: playGlyph, borderRadius: 2, background: "#fff" }}
+            />
+          </span>
+        ) : (
+          <span
+            style={{
+              width: playGlyph,
+              height: playGlyph,
+              background: "#fff",
+              clipPath: "polygon(6% 0%, 100% 50%, 6% 100%)",
+            }}
+          />
+        )}
+      </button>
+
+      <button
+        className="round"
+        onClick={onNext}
+        aria-label="Nächster Titel"
+        style={{ width: size, height: size, background: "oklch(30% 0.04 210)" }}
+      >
+        <span style={{ display: "flex", alignItems: "center", gap: 2 }}>
+          <span
+            style={{
+              width: glyph,
+              height: glyph,
+              background: "#fff",
+              clipPath: "polygon(0% 0%, 0% 100%, 100% 50%)",
+            }}
+          />
+          <span style={{ width: bar, height: glyph, borderRadius: 1, background: "#fff" }} />
+        </span>
+      </button>
+    </div>
+  );
+}