Block gate

"use client";

import { useState } from "react";
import { PlayToggle } from "@/components/audio-ui/play-toggle";
import { GatePanel } from "@/components/audio-ui/devices/gate/panel";
import { useDeviceLoop } from "@/hooks/use-device-loop";
import { useMasterBus } from "@/hooks/use-master-bus";
import {
  renderHeldChord,
  renderKickLoop,
} from "@/lib/demo-loop";
import {
  type GateState,
  gateDevice,
} from "@/components/audio-ui/devices/gate/device";
import { createGateEngine } from "@/components/audio-ui/devices/gate/engine";

const MASTER_VOLUME = 0.7;
/** A held chord, opened by the kick of the loop: the key is heard by the gate only. */
const START = {
  external: true,
  floorDb: -70,
  attackMs: 1,
  holdMs: 20,
  releaseMs: 80,
  thresholdDb: -24,
};

/**
 * A gate you can plug in: its state, a panel that draws its transfer curve
 * with a handle on the threshold and an engine that plays it, each its own
 * file. It starts keyed: a held chord that the kick of the loop opens and
 * closes. Raise the threshold and the kick opens it for less time; switch the
 * key off and the gate follows the chord itself.
 */
export function BlockGate() {
  const [state, setState] = useState<GateState>(
    () => gateDevice.apply(gateDevice.defaults(), START).state
  );
  const master = useMasterBus(MASTER_VOLUME);
  const { playing, toggle } = useDeviceLoop({
    create: createGateEngine,
    destination: master,
    key: renderKickLoop,
    signal: renderHeldChord,
    state,
  });
  return (
    <div className="rounded-xl h-full w-full min-w-0">
      <GatePanel onValueChange={setState} value={state}>
        <PlayToggle
          label="Play a loop through it"
          onToggle={toggle}
          playing={playing}
        />
      </GatePanel>
    </div>
  );
}