pnpm dlx shadcn@latest add @audio-ui/use-silence-hover
import { useSilenceHover } from "@/hooks/use-silence-hover";| Files | hooks/use-silence-hover.ts |
|---|---|
| Depends on | Nothing |
| npm | Nothing |
| Used by | block-audio-editor |
| Export | Kind | What it is |
|---|---|---|
Pause | type | A stretch of time with nothing in it, as [from, to] in the timeline's units. |
useSilenceHover | function | The pause the pointer is over on a lane, to draw as a zone while it is there. |
Usage
Give it the pauses of a sound, as [from, to] pairs, and the zoom the lane is drawn at. It returns the pause under the pointer and the two handlers that find it.
import { useSilenceHover } from "@/hooks/use-silence-hover";
const silence = useSilenceHover({ pauses, zoom });
<TimelineLane
onPointerLeave={silence.onPointerLeave}
onPointerMove={silence.onPointerMove}
>
{silence.pause ? <SilenceZone pause={silence.pause} /> : null}
</TimelineLane>;Nothing is under the pointer while a button is held, as in a drag, so a selection is not drawn over by a zone. The pauses come from detectSilences.