import React, { useEffect, useMemo, useRef, useState } from "react"; import { useFireproof } from "use-fireproof"; import { useVibe, useViewer } from "use-vibes"; import { Badge, Button, Card, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui"; import { attach, hit, run } from "./lib/hydra.js"; import { onPatternError, play, stop } from "./lib/strudel.js"; import { SETS, bandFor } from "./lib/sets.js"; const editorClass = "w-full rounded-md border border-border bg-card p-3 font-mono text-sm text-foreground outline-none"; export default function App() { const { database, useLiveQuery } = useFireproof("beatVisuals"); const { me, can, ready } = useVibe("beatVisuals"); const { requestLogin, ViewerTag } = useViewer(); const { docs } = useLiveQuery("type", { key: "set" }); const saved = useMemo(() => [...docs].sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0)), [docs]); const stage = useRef(null); const timers = useRef([]); const [pattern, setPattern] = useState(SETS[0].pattern); const [sketch, setSketch] = useState(SETS[0].sketch); const [live, setLive] = useState(false); const [sound, setSound] = useState("idle"); // idle | loading | playing const [problem, setProblem] = useState(null); const [name, setName] = useState(""); useEffect(() => { let gone = false; let detach = () => {}; attach(stage.current).then(async (d) => { if (gone) return d?.(); if (!d) return setProblem("the video engine, which did not load — check the connection and reload the page"); detach = d; await run(sketch); setLive(true); }); return () => { gone = true; detach(); stop(); timers.current.forEach(clearTimeout); }; }, []); useEffect(() => onPatternError((e) => setProblem(`the pattern: ${e.message || e}`)), []); // Every sounding event kicks a band of a.fft at the moment it sounds. function onEvent(hap, time, cps, target) { const delay = Math.max(0, (target - time) * 1000); timers.current.push(setTimeout(() => hit(bandFor(hap.value), hap.value?.gain ?? 1), delay)); if (timers.current.length > 256) timers.current = timers.current.slice(-128); } async function go(nextPattern = pattern, nextSketch = sketch) { setProblem(null); const wasPlaying = sound === "playing"; if (!wasPlaying) setSound("loading"); // play() first: it unlocks audio before its first await, while this is still the press. const playing = play(nextPattern, onEvent); const shown = await run(nextSketch); if (!shown.ok) setProblem(`the sketch: ${shown.message}`); const ok = await playing; setSound(ok ? "playing" : wasPlaying ? "playing" : "idle"); } async function halt() { await stop(); timers.current.forEach(clearTimeout); timers.current = []; setSound("idle"); } function pick(set) { setPattern(set.pattern); setSketch(set.sketch); if (sound === "playing") go(set.pattern, set.sketch); else run(set.sketch); } const draft = { type: "set", name: name || "untitled", pattern, sketch, authorHandle: me?.userHandle }; const verdict = can.create(draft); async function keep() { setName(""); const { ok } = await database.put({ ...draft, createdAt: Date.now() }); if (!ok) setName((now) => now || name); } const runKeys = (e) => { if ((e.ctrlKey || e.metaKey) && e.key === "Enter") { e.preventDefault(); go(); } }; return (

Beat Visuals {sound === "playing" ? "Playing" : sound === "loading" ? "Fetching the drum kit…" : live ? "Press play" : "Warming up the synth…"}

{!live &&

}

{SETS.map((s) => ( ))}

Pattern (Strudel)

setPattern(e.target.value)} onKeyDown={runKeys} spellCheck={false} rows={7} className={editorClass} />
          </Stack>
          <Stack gap={1}>
            <Text size="sm" muted>Sketch (Hydra) — kick is a.fft[0], snare a.fft[1], hats a.fft[2], notes a.fft[3]</Text>
            <textarea aria-label="Hydra sketch" value={sketch} onChange={(e) => setSketch(e.target.value)} onKeyDown={runKeys} spellCheck={false} rows={7} className={editorClass} />
          </Stack>
        </div>
        {problem && <Text size="sm" tone="down">Needs a tweak in {problem}. The last good one keeps going.</Text>}

<Card variant="tight">
          <Stack gap={3}>
            <Heading level={2}>Keep this set</Heading>
            {!ready && <div aria-busy="true"><Skeleton variant="row" /></div>}
            {ready && !me && <Row gap={2} align="center" wrap><Text muted>Sign in to keep sets and share them here.</Text><Button size="sm" variant="quiet" onClick={requestLogin}>Sign in</Button></Row>}
            {ready && me && verdict.ok && (
              <Row gap={2} align="top" wrap>
                <Field label="Set name">{(id, d) => <Input id={id} describedBy={d} value={name} onChange={setName} placeholder="friday opener" />}</Field>
                <Button size="sm" onClick={keep}>Keep</Button>
              </Row>
            )}
            {saved.map((s) => (
              <Row key={s._id} gap={2} align="center" wrap>
                <Button size="sm" variant="quiet" onClick={() => pick(s)}>{s.name}</Button>
                {s.authorHandle && <ViewerTag userHandle={s.authorHandle} />}
                <Spacer />
                {can.delete(s).ok && <Button size="sm" variant="quiet" tone="down" onClick={() => database.del(s._id)}>Remove</Button>}
              </Row>
            ))}
          </Stack>
        </Card>

<Text size="sm" muted>
          Sound by <a className="underline" href="https://strudel.cc" target="_blank" rel="noreferrer">Strudel</a> and video by <a className="underline" href="https://hydra.ojack.xyz" target="_blank" rel="noreferrer">Hydra</a> (both AGPL), each fetched from its own address.
        </Text>
      </Stack>
    </main>
  );
}
</article></body></html>