import React, { useEffect, useRef, useState } from "react"; import { useFireproof } from "use-fireproof"; import { useViewer, useVibe } from "use-vibes"; import { Badge, Button, Card, Empty, Field, Grid, Heading, IconButton, Input, NumberInput, Row, RowCard, Spacer, Stack, Text } from "@vibes.diy/pouf"; import { Confirm, Slider } from "@vibes.diy/pouf/interactive"; import { TRACKS, createEngine } from "./lib/audio-engine.js"; const emptySteps = () => Object.fromEntries(TRACKS.map((t) => [t.id, Array(16).fill(0)])); function normalizeSteps(raw) { return Object.fromEntries( TRACKS.map((t) => { const row = Array.isArray(raw?.[t.id]) ? raw[t.id] : []; return [t.id, Array.from({ length: 16 }, (_, i) => (row[i] ? 1 : 0))]; }) ); } function clampBpm(n) { const v = Number(n); return Number.isFinite(v) ? Math.min(200, Math.max(60, Math.round(v))) : 120; } // A beat travels as base64url JSON: name, bpm and all 96 steps as a bitstring. function encodeBeat({ name, bpm, steps }) { const bits = TRACKS.map((t) => steps[t.id].map((v) => (v ? "1" : "0")).join("")).join(""); const bytes = new TextEncoder().encode(JSON.stringify({ n: name, b: bpm, s: bits })); let bin = ""; bytes.forEach((byte) => { bin += String.fromCharCode(byte); }); return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); } function decodeBeat(text) { try { const b64 = text.replace(/-/g, "+").replace(/_/g, "/"); const bin = atob(b64 + "=".repeat((4 - (b64.length % 4)) % 4)); const raw = JSON.parse(new TextDecoder().decode(Uint8Array.from(bin, (ch) => ch.charCodeAt(0)))); if (!raw || typeof raw.n !== "string" || typeof raw.s !== "string") return null; if (!/^[01]+$/.test(raw.s) || raw.s.length !== TRACKS.length * 16) return null; if (!Number.isFinite(Number(raw.b))) return null; const steps = Object.fromEntries( TRACKS.map((t, ti) => [t.id, Array.from({ length: 16 }, (_, i) => (raw.s[ti * 16 + i] === "1" ? 1 : 0))]) ); return { name: raw.n.trim().slice(0, 60) || "Shared beat", bpm: clampBpm(raw.b), steps }; } catch { return null; } } export default function App() { const { database, useLiveQuery } = useFireproof("beatBox"); const { me, can, ready } = useVibe("beatBox"); const { requestLogin, isViewerPending } = useViewer(); const shelfId = `default-${me?.userHandle ?? "guest"}`; const { docs } = useLiveQuery("shelfId", { key: shelfId }); const beats = docs.filter((d) => d.type === "beat"); const [steps, setSteps] = useState(emptySteps); const [bpm, setBpm] = useState(120); const [playing, setPlaying] = useState(false); const [playhead, setPlayhead] = useState(-1); const [name, setName] = useState(""); const [loadedId, setLoadedId] = useState(null); const [renamingId, setRenamingId] = useState(null); const [renameText, setRenameText] = useState(""); const [deleting, setDeleting] = useState(null); const [sharedBeat, setSharedBeat] = useState(null); const [badLink, setBadLink] = useState(false); const [notice, setNotice] = useState(""); useEffect(() => { const apply = () => { const raw = new URLSearchParams(window.location.hash.slice(1)).get("beat"); if (!raw) return; const beat = decodeBeat(raw); if (!beat) { setBadLink(true); setSharedBeat(null); return; } setBadLink(false); setSharedBeat(beat); setSteps(beat.steps); setBpm(beat.bpm); setName(beat.name); setLoadedId(null); }; apply(); window.addEventListener("hashchange", apply); return () => window.removeEventListener("hashchange", apply); }, []); const patternRef = useRef({ steps, bpm }); patternRef.current = { steps, bpm }; const engineRef = useRef(null); if (engineRef.current === null) { engineRef.current = createEngine({ getPattern: () => patternRef.current, onStep: setPlayhead }); } useEffect(() => () => engineRef.current.stop(), []); const loaded = beats.find((b) => b._id === loadedId); function togglePlay() { if (playing) { engineRef.current.stop(); setPlaying(false); setPlayhead(-1); } else { engineRef.current.start(); // synchronous inside the tap setPlaying(true); } } function toggleStep(id, i) { setSteps((s) => ({ ...s, [id]: s[id].map((v, k) => (k === i ? (v ? 0 : 1) : v)) })); } function clearPattern() { setSteps(emptySteps()); } function loadBeat(b) { setSteps(normalizeSteps(b.steps)); setBpm(clampBpm(b.bpm)); setName(b.name); setLoadedId(b._id); } function draftFor(base) { return { ...base, type: "beat", shelfId, name: name.trim() || "Untitled beat", bpm, steps, creatorHandle: base.creatorHandle ?? me?.userHandle, authorHandle: base.authorHandle ?? me?.userHandle, }; } const newDraft = draftFor({}); const canCreate = ready && !!me && can.create(newDraft).ok; const canUpdate = !!loaded && ready && can.edit(draftFor(loaded)).ok; async function saveBeat() { if (!canUpdate) return; await database.put(draftFor(loaded)); } async function saveNew() { if (!canCreate) return; const res = await database.put(newDraft); setLoadedId(res.id); setName(newDraft.name); } async function renameBeat(b) { const next = renameText.trim(); if (next) await database.put({ ...b, name: next }); if (b._id === loadedId && next) setName(next); setRenamingId(null); } async function deleteBeat(b) { await database.del(b._id); if (b._id === loadedId) setLoadedId(null); setDeleting(null); } function flash(text) { setNotice(text); setTimeout(() => setNotice(""), 2500); } async function shareBeat(beat) { const url = `${window.location.origin}${window.location.pathname}#beat=${encodeBeat(beat)}`; if (navigator.share) { try { await navigator.share({ title: `${beat.name} on Beat Box`, text: `Play my beat "${beat.name}"`, url }); return; } catch (err) { if (err?.name === "AbortError") return; } } try { await navigator.clipboard.writeText(url); flash("Link copied"); } catch { flash("Couldn't copy the link"); } } function shareCurrent() { shareBeat({ name: name.trim() || "Untitled beat", bpm, steps }); } function shareSaved(b) { shareBeat({ name: b.name, bpm: clampBpm(b.bpm), steps: normalizeSteps(b.steps) }); } function dismissShared() { setSharedBeat(null); window.history.replaceState(null, "", window.location.pathname + window.location.search); } async function saveShared() { if (!canCreate) return; await saveNew(); dismissShared(); } const c = { page: "min-h-screen bg-background text-foreground font-sans p-6", stepGrid: "grid grid-cols-8 gap-2", full: "w-full" }; return (

{notice && (

{notice}

)} {badLink && (

That link couldn't be read. Here's your Beat Box instead.

)} {sharedBeat && (

{sharedBeat.name} — shared with you {sharedBeat.bpm} bpm. Tap play to hear it. {!ready || isViewerPending ? null : me ? ( ) : ( )}

)}

{bpm} bpm

setBpm(v)} />

{(id, describedBy) => ( setBpm(clampBpm(v))} /> )} {TRACKS.map((tr) => ( {tr.label}

{steps[tr.id].map((on, i) => { const here = playing && playhead === i; const hit = here && on; return (

{i + 1}} onClick={() => toggleStep(tr.id, i)} />

); })}

))}

Save this beat {(id, describedBy) => } {!ready || isViewerPending ? ( Checking your shelf… ) : !me ? ( ) : ( {loaded && ( )} )}

My beats {beats.length === 0 ? ( ) : ( beats.map((b) => { const hits = TRACKS.reduce((n, t) => n + (b.steps?.[t.id] ?? []).filter(Boolean).length, 0); return ( {renamingId === b._id ? ( {(id, describedBy) => } ) : ( {b.name} {b.bpm} bpm · {hits} hits )} {can.edit(b).ok && ( <> )} ); }) )}

{deleting && ( deleteBeat(deleting)} onCancel={() => setDeleting(null)} /> )}

); }

Kick

Snare

Closed hat

Open hat

Clap

Tom

Save this beat

My beats