| import { useEffect, useState, type RefObject } from "react"; |
| import clsx from "clsx"; |
| import type { AudioEngine } from "../audio"; |
| import { IconPlay, IconPause } from "./icons"; |
|
|
| export function Controls(props: { |
| audio: AudioEngine; |
| /** Attached to the time clock; updated imperatively by the rAF loop. */ |
| clockRef: RefObject<HTMLSpanElement | null>; |
| mix: number; |
| onMixChange: (v: number) => void; |
| stereo: boolean; |
| onStereoChange: (v: boolean) => void; |
| /** Whether the roll auto-follows the playhead (toggled off by manual scrolling). */ |
| following: boolean; |
| onToggleFollow: () => void; |
| }) { |
| const { audio, clockRef, mix, onMixChange, stereo, onStereoChange, following, onToggleFollow } = |
| props; |
| |
| |
| const [playing, setPlaying] = useState(false); |
| useEffect(() => { |
| let raf = 0; |
| const tick = () => { |
| setPlaying(audio.state === "started"); |
| raf = requestAnimationFrame(tick); |
| }; |
| raf = requestAnimationFrame(tick); |
| return () => cancelAnimationFrame(raf); |
| }, [audio]); |
|
|
| return ( |
| <div className="col-span-full flex flex-wrap items-center gap-2.5 rounded-card border border-line bg-surface px-3.5 py-3 animate-rise [animation-delay:0.06s]"> |
| <button |
| className={clsx( |
| "inline-flex items-center gap-2", |
| playing && "border-accent bg-accent text-white hover:border-accent hover:bg-accent", |
| )} |
| onClick={(e) => { |
| e.currentTarget.blur(); |
| playing ? audio.pause() : audio.play(); |
| }} |
| > |
| {playing ? <IconPause /> : <IconPlay />} |
| {playing ? "Pause" : "Play"} |
| </button> |
| <button |
| className={clsx("text-content", following && "border-accent hover:border-accent")} |
| aria-pressed={following} |
| title={following ? "Stop following the playhead" : "Scroll along with the playhead"} |
| onClick={(e) => { |
| e.currentTarget.blur(); |
| onToggleFollow(); |
| }} |
| > |
| Follow playhead |
| </button> |
| <span |
| className="rounded-md border border-line bg-bg px-2.5 py-1 font-mono text-sm tabular-nums text-muted" |
| ref={clockRef} |
| > |
| 0.0s |
| </span> |
| <label |
| className={clsx( |
| "ml-auto inline-flex items-center gap-2.5 text-sm text-muted max-[760px]:ml-0", |
| stereo && "opacity-40", |
| )} |
| > |
| <span |
| className={clsx( |
| "min-w-8 text-center transition-colors", |
| !stereo && "cursor-pointer hover:text-content", |
| )} |
| onClick={() => !stereo && onMixChange(0)} |
| > |
| Original |
| </span> |
| <input |
| className="mix-slider" |
| type="range" |
| min="0" |
| max="1" |
| step="0.01" |
| value={mix} |
| disabled={stereo} |
| onChange={(e) => onMixChange(parseFloat(e.target.value))} |
| // Drop focus once the drag ends so Space keeps toggling play/pause |
| // (the global handler ignores Space while an input is focused). |
| // Range inputs implicitly capture the pointer, so this fires even |
| // when the drag is released outside the slider. |
| onPointerUp={(e) => e.currentTarget.blur()} |
| // Clicks on the label's Original/MIDI spans focus the slider via a |
| // forwarded click with no pointer event, so blur on click too. |
| onClick={(e) => e.currentTarget.blur()} |
| /> |
| <span |
| className={clsx( |
| "min-w-8 text-center transition-colors", |
| !stereo && "cursor-pointer hover:text-content", |
| )} |
| onClick={() => !stereo && onMixChange(1)} |
| > |
| MIDI |
| </span> |
| </label> |
| <label className="inline-flex cursor-pointer select-none items-center gap-1.5 text-sm text-muted px-3"> |
| <input |
| className="cursor-pointer accent-accent" |
| type="checkbox" |
| checked={stereo} |
| onChange={(e) => onStereoChange(e.target.checked)} |
| // Same as the slider: keep Space bound to play/pause after clicking. |
| // click (not pointerup) also catches clicks on the wrapping label, |
| // which the browser forwards to the checkbox. |
| onClick={(e) => e.currentTarget.blur()} |
| /> |
| <span>Stereo</span> |
| </label> |
| </div> |
| ); |
| } |
|
|
