Canvas Timeline
Function

useMediabunnyTimelineMedia

Create a Mediabunny adapter and bind it to timeline-synchronized playback.

Usage notes

This is the high-level React hook for decoded media previews. It is the same shape used by the media sync demo and the full editor demo: define named `visuals` and `audio` layers, pass sources keyed by timeline clip `sourceId`, and drive toolbar buttons from the returned `play`, `pause`, and `setPlaybackRate` commands. `ready` means at least one source is registered; inspect `sourceStateById` for per-source idle, loading, and ready state.

Signature

Type Definition
useMediabunnyTimelineMedia(options: UseMediabunnyTimelineMediaOptions<LayerName>): UseMediabunnyTimelineMediaResult<LayerName>

Type parameters

NameConstraintDefaultDescription
LayerNamestringstringNamed media layer keys inferred from `options.layers`, such as `"visuals" | "audio"`.

Parameters

NameTypeDescription
optionsUseMediabunnyTimelineMediaOptions<LayerName>Mediabunny sources, active layers, and sync options.

Returns

UseMediabunnyTimelineMediaResult<LayerName>

Timeline transport state, active layer data, source diagnostics, and the low-level adapter.

Examples

tsx Example
import { useMediabunnyTimelineMedia } from '@techsquidtv/canvas-timeline-mediabunny-adapter/react';


type PreviewLayerName = 'visuals' | 'audio';


const previewLayers = {
  visuals: { trackKind: 'visual' },
  audio: { trackKind: 'audio' },
} as const;
const sources = [{
  sourceId: 'source-1',
  input: '/media/interview.mp4',
}];


export function DecodedPreview() {
  const media = useMediabunnyTimelineMedia<PreviewLayerName>({
    sources,
    layers: previewLayers,
    onError: (error) => console.error(error.reason, error.message),
  });


  return (
    <>
      <canvas ref={media.canvasRef} width={1280} height={720} />
      <button type="button" disabled={!media.ready} onClick={() => void media.play()}>
        {media.playing ? 'Playing' : 'Play'}
      </button>
      <span>{media.status}</span>
    </>
  );
}

Related links