Block deesser

"use client";

import { useState } from "react";
import { PlayToggle } from "@/components/audio-ui/play-toggle";
import { DeesserPanel } from "@/components/audio-ui/devices/deesser/panel";
import { useDeviceLoop } from "@/hooks/use-device-loop";
import { useMasterBus } from "@/hooks/use-master-bus";
import {
  type DeesserState,
  deesserDevice,
} from "@/components/audio-ui/devices/deesser/device";
import { createDeesserEngine } from "@/components/audio-ui/devices/deesser/engine";
import { renderSibilantLoop } from "@/lib/demo-loop";

const MASTER_VOLUME = 0.7;

/**
 * A de-esser you can plug in: its state, a panel that draws what it does at
 * each frequency and an engine that plays it, each its own file and none
 * knowing the others. It plays a held vowel with an "s" on four beats: lower
 * the threshold and the s sits back, switch Listen on to hear the highs alone.
 */
export function BlockDeesser() {
  const [state, setState] = useState<DeesserState>(() =>
    deesserDevice.defaults()
  );
  const master = useMasterBus(MASTER_VOLUME);
  const { playing, toggle } = useDeviceLoop({
    create: createDeesserEngine,
    destination: master,
    signal: renderSibilantLoop,
    state,
  });
  return (
    <div className="rounded-xl h-full w-full min-w-0">
      <DeesserPanel onValueChange={setState} value={state}>
        <PlayToggle
          label="Play a voice through it"
          onToggle={toggle}
          playing={playing}
        />
      </DeesserPanel>
    </div>
  );
}