Audio control

import {
  AudioControl,
  type AudioInput,
  type AudioOutput,
  type CaptureFigures,
} from "@bosunkit/components/audio-control";
import { Card } from "@bosunkit/components/card";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The audio panel of a settings page, beside the status strip's speaker button that opens the same controls: " +
  "the saloon and cockpit zones and a Bluetooth speaker, the ReSpeaker array with a live level and its capture " +
  "details open, and the saloon muted, so the note says alarms still sound.";

export const readsClock: boolean = true;

const OUTPUTS: readonly AudioOutput[] = [
  { id: "main", name: "Saloon", kind: "speaker" },
  { id: "intercom-cockpit", name: "Cockpit", kind: "intercom" },
  { id: "bt-F8_DF_15_2A_0C_91", name: "JBL Flip 6", kind: "bluetooth" },
];

const INPUTS: readonly AudioInput[] = [
  { id: "respeaker", name: "ReSpeaker array", kind: "array" },
  { id: "usb", name: "USB microphone", kind: "usb" },
  { id: "phone", name: "Skipper's phone", kind: "phone", state: "unavailable" },
];

/**
 * The array's capture stats at anchor in a quiet saloon, measured `now`: the denoise chain's last 30 s window, the
 * input overruns since the array was plugged back in, and the bearing of the last voice it heard.
 */
function saloonStats(now: number): CaptureFigures {
  const replugged: number = now - (3 * 60 + 41) * 60_000;
  return {
    sampleRate: 16_000,
    channels: 1,
    chunkMs: 32,
    measuredAt: now - 12_000,
    windowSeconds: 30,
    noiseFloor: -51.4,
    speechPercent: 8.6,
    clipPercent: 0.2,
    dropouts: 2,
    dropoutsSince: replugged,
    reconnectedAt: replugged,
    direction: 312,
    directionAt: now - 47_000,
  };
}

/** How often the simulated microphone reports a level, in milliseconds. */
const LEVEL_MS: number = 60;

const STRIP: CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "var(--space-md)",
  padding: "0 var(--space-sm) 0 var(--space-md)",
  border: "1px solid var(--border)",
  borderRadius: "var(--radius-md)",
  background: "var(--surface2)",
  fontFamily: "var(--font-mono)",
  fontSize: "0.85em",
};

/**
 * A speech-like level in dBFS: the saloon's background noise around -50 dBFS, and now and then a crew member
 * speaking, peaking between -20 and -6 dBFS.
 */
function useSimulatedLevel(): number {
  const [level, setLevel]: [number, Dispatch<SetStateAction<number>>] = useState<number>(-50);
  useEffect((): (() => void) => {
    let speaking: number = 0;
    const timer: ReturnType<typeof setInterval> = setInterval((): void => {
      if (speaking <= 0 && Math.random() < 0.04) {
        speaking = 20 + Math.floor(Math.random() * 30);
      }
      speaking -= 1;
      setLevel(speaking > 0 ? -20 + Math.random() * 14 : -52 + Math.random() * 5);
    }, LEVEL_MS);
    return (): void => {
      clearInterval(timer);
    };
  }, []);
  return level;
}

export default function Showcase(): ReactElement {
  const [output, setOutput]: [string, Dispatch<SetStateAction<string>>] = useState<string>("main");
  const [level, setLevel]: [number, Dispatch<SetStateAction<number>>] = useState<number>(60);
  const [muted, setMuted]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(true);
  const inputLevel: number = useSimulatedLevel();
  const [stats]: [CaptureFigures, Dispatch<SetStateAction<CaptureFigures>>] = useState<CaptureFigures>(
    (): CaptureFigures => saloonStats(Date.now()),
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)", width: "100%", maxWidth: "52em" }}>
      <div style={STRIP}>
        <span>SV Althea · 14:32 UTC</span>
        <AudioControl
          layout="compact"
          outputs={OUTPUTS}
          output={output}
          onOutputChange={setOutput}
          outputLevel={level}
          onOutputLevelChange={setLevel}
          muted={muted}
          onMutedChange={setMuted}
        />
      </div>
      <Card title="Audio">
        <AudioControl
          headingLevel={4}
          outputs={OUTPUTS}
          output={output}
          onOutputChange={setOutput}
          outputLevel={level}
          onOutputLevelChange={setLevel}
          muted={muted}
          onMutedChange={setMuted}
          inputs={INPUTS}
          defaultInput="respeaker"
          defaultInputGain={70}
          inputLevel={inputLevel}
          defaultInputMuted={false}
          captureFigures={stats}
          defaultCaptureDetailsOpen
        />
      </Card>
    </div>
  );
}

import { AudioControl, type AudioOutput } from "@bosunkit/components/audio-control";
import type { CSSProperties, ReactElement } from "react";

export const description: string =
  '`layout="compact"` draws a speaker button for a status strip or header; it opens the output controls in a ' +
  "popover, and its icon and name follow the level and the mute.";

const OUTPUTS: readonly AudioOutput[] = [
  { id: "main", name: "Saloon", kind: "speaker" },
  { id: "intercom-cockpit", name: "Cockpit", kind: "intercom" },
];

const STRIP: CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "var(--space-md)",
  width: "100%",
  maxWidth: "30em",
  padding: "0 var(--space-sm) 0 var(--space-md)",
  border: "1px solid var(--border)",
  borderRadius: "var(--radius-md)",
  background: "var(--surface2)",
  fontFamily: "var(--font-mono)",
  fontSize: "0.85em",
};

export default function Compact(): ReactElement {
  return (
    <div style={STRIP}>
      <span>Anchored · Cala Portals</span>
      <AudioControl layout="compact" outputs={OUTPUTS} defaultOutput="main" defaultOutputLevel={45} />
    </div>
  );
}

import { AudioControl, type AudioOutput } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  "The output muted at 60%: the slider keeps the level, dimmed, the readout says Muted, the mute button is " +
  "pressed, and the note under them says alarms still sound.";

const OUTPUTS: readonly AudioOutput[] = [
  { id: "main", name: "Saloon", kind: "speaker" },
  { id: "intercom-cockpit", name: "Cockpit", kind: "intercom" },
];

export default function Muted(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={OUTPUTS} defaultOutput="main" defaultOutputLevel={60} defaultMuted />
    </div>
  );
}

import { AudioControl, type AudioOutput } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  "At 15%, under the `lowLevel` of 20%, the alarm note shows as it does when muted. Raise the level past 20% and " +
  "the note goes.";

const OUTPUTS: readonly AudioOutput[] = [{ id: "main", name: "Saloon", kind: "speaker" }];

export default function LowLevel(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={OUTPUTS} defaultOutputLevel={15} />
    </div>
  );
}

import { AudioControl } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  "With no output connected, the panel says so and what to check, and draws no level or mute to change.";

export default function NoOutputs(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={[]} />
    </div>
  );
}

import { AudioControl, type AudioOutput } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  "The chosen Bluetooth speaker has dropped its connection: the panel names it, says what to do, and disables its " +
  "level. In the list it is marked unavailable and cannot be chosen.";

const OUTPUTS: readonly AudioOutput[] = [
  { id: "main", name: "Saloon", kind: "speaker" },
  { id: "bt-F8_DF_15_2A_0C_91", name: "JBL Flip 6", kind: "bluetooth", state: "unavailable" },
];

export default function BluetoothDisconnected(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={OUTPUTS} defaultOutput="bt-F8_DF_15_2A_0C_91" defaultOutputLevel={40} />
    </div>
  );
}

import { AudioControl, type AudioInput, type AudioOutput } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  "The microphone reaching 0 dBFS: every segment is lit, the last two in the hot color, the clip mark is filled, " +
  "and the note says to lower the input gain. The mark stays for two seconds after the last level at full scale.";

const OUTPUTS: readonly AudioOutput[] = [{ id: "main", name: "Saloon", kind: "speaker" }];

const INPUTS: readonly AudioInput[] = [{ id: "respeaker", name: "ReSpeaker array", kind: "array" }];

export default function InputClipping(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={OUTPUTS} inputs={INPUTS} defaultInputGain={95} inputLevel={0} />
    </div>
  );
}

import { AudioControl, type AudioInput, type AudioOutput } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  "The microphone muted: its mute button is pressed, the meter dims, and the note says Bosun can't hear voice " +
  "commands until it is unmuted.";

const OUTPUTS: readonly AudioOutput[] = [{ id: "main", name: "Saloon", kind: "speaker" }];

const INPUTS: readonly AudioInput[] = [
  { id: "respeaker", name: "ReSpeaker array", kind: "array" },
  { id: "usb", name: "USB microphone", kind: "usb" },
];

export default function InputMuted(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={OUTPUTS} inputs={INPUTS} inputLevel={-34} defaultInputMuted />
    </div>
  );
}

import { AudioControl, type AudioInput, type AudioOutput } from "@bosunkit/components/audio-control";
import type { ReactElement } from "react";

export const description: string =
  '`inputLevelScale="linear"` takes a peak amplitude from 0 to 1, as the Web Audio API\'s analyser gives it: 0.25 ' +
  "draws at -12 dBFS.";

const OUTPUTS: readonly AudioOutput[] = [{ id: "main", name: "Saloon", kind: "speaker" }];

const INPUTS: readonly AudioInput[] = [{ id: "phone", name: "Skipper's phone", kind: "phone" }];

export default function LinearLevel(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl outputs={OUTPUTS} inputs={INPUTS} inputLevel={0.25} inputLevelScale="linear" />
    </div>
  );
}

import {
  AudioControl,
  type AudioInput,
  type AudioOutput,
  type CaptureFigures,
} from "@bosunkit/components/audio-control";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The capture details of the ReSpeaker array in a noisy engine room: clipping in 2.3% of the last 30 s is over the " +
  "1% limit, so its value carries a caution mark and the words too loud, and a note outside the disclosure says to " +
  "lower the gain. Each figure has its unit, and the line under them says how long a stretch they cover and when " +
  "they were measured.";

export const readsClock: boolean = true;

const OUTPUTS: readonly AudioOutput[] = [{ id: "main", name: "Saloon", kind: "speaker" }];

const INPUTS: readonly AudioInput[] = [{ id: "respeaker", name: "ReSpeaker array", kind: "array" }];

/** Figures as bosund reports them for the array, measured `now`: the denoise chain's last 30 s window. */
function engineRoomStats(now: number): CaptureFigures {
  return {
    sampleRate: 16_000,
    channels: 1,
    chunkMs: 32,
    measuredAt: now - 9_000,
    windowSeconds: 30,
    noiseFloor: -38.6,
    speechPercent: 21,
    clipPercent: 2.3,
    dropouts: 0,
    dropoutsSince: now - 47 * 60_000,
    direction: 168,
    directionAt: now - 14_000,
  };
}

export default function CaptureStatsExample(): ReactElement {
  const [stats]: [CaptureFigures, Dispatch<SetStateAction<CaptureFigures>>] = useState<CaptureFigures>(
    (): CaptureFigures => engineRoomStats(Date.now()),
  );
  return (
    <div style={{ width: "100%", maxWidth: "30em" }}>
      <AudioControl
        outputs={OUTPUTS}
        inputs={INPUTS}
        defaultInputGain={85}
        inputLevel={-9}
        captureFigures={stats}
        defaultCaptureDetailsOpen
      />
    </div>
  );
}