Device browser

A library of devices, with the shelves down the side, the devices of the open shelf beside them and a search over every shelf. It adds nothing itself: a device picked, or dragged out, comes back as an id, and what to do with it is yours. In a workstation the id goes onto a track's device chain.

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/device-browser

The block above is @audio-ui/block-device-browser. It installs the device chain with it, for the drag type the two share.

Anatomy

Copy
<DeviceBrowser />

Usage

DeviceBrowser lists devices by shelf, with a search over all of them. A device definition is an item as it is: it has an id, a name and a description.

Copy
import { DeviceBrowser } from "@/components/audio-ui/device-browser";

<DeviceBrowser
  onPick={(id) => add(id)}
  shelves={[
    { items: [compressorDevice, limiterDevice], label: "Dynamics" },
    { items: [delayDevice, reverbDevice], label: "Space" },
  ]}
/>;

onPick gets the id of the device to add, at the end of the chain. A device dragged from the library onto the chain comes to its onAdd(id, index) instead, with the place it was dropped in. The drag carries the id under DEVICE_DRAG_TYPE, exported by device-chain, so anything of yours can be dragged onto a chain the same way:

Copy
import { DEVICE_DRAG_TYPE } from "@/components/audio-ui/device-chain";

<div
  draggable
  onDragStart={(event) => event.dataTransfer.setData(DEVICE_DRAG_TYPE, "audioui.reverb")}
/>;

With open and onOpenChange, the library folds to a strip that opens it again. searchRef is its search field, for a DeviceChainAdd that opens the library and puts the focus in it.

Interaction

The library's list is a list box, and its shelves are toggle buttons.

API reference

DeviceBrowser