useMediabunnyTimelineMedia API

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 stable `visuals` and `audio` layers, pass sources keyed by timeline clip `sourceId`, and drive toolbar buttons from the returned `play`, `pause`, and `setPlaybackRate` commands.

Signature

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

Type parameters

Name	Constraint	Default	Description
`LayerName`	`string`	`string`	Named media layer keys inferred from `options.layers`, such as `"visuals" \| "audio"`.

Parameters

Name	Type	Description
options	UseMediabunnyTimelineMediaOptions<LayerName>	Mediabunny sources, active layers, optional canvas ref, and sync options.

Returns

UseMediabunnyTimelineMediaResult<LayerName>

Timeline transport state, active layer data, decoded frame status, source durations, and the low-level adapter.

Examples

import { useMemo, useRef } from 'react';
import { useMediabunnyTimelineMedia } from '#mediabunny-adapter/react';

type PreviewLayerName = 'visuals' | 'audio';

const previewLayers = {
  visuals: { trackKind: 'visual' },
  audio: { trackKind: 'audio' },
} as const;

export function DecodedPreview() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const sources = useMemo(() => [{ id: 'source-1', url: '/media/interview.mp4' }], []);
  const media = useMediabunnyTimelineMedia<PreviewLayerName>({
    canvasRef,
    sources,
    layers: previewLayers,
    onError: console.error,
  });

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

- useTimelineMediaSync - Mediabunny media sync demo - Full editor demo