95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
/** 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>
|
|
);
|
|
}
|