Playback Controls

import {
  useTimelinePlayback,
  useTimelineSnapping,
  useTimelineViewport,
} from '@techsquidtv/canvas-timeline-react/hooks';

export function Transport() {
  const playback = useTimelinePlayback();
  const snapping = useTimelineSnapping();
  const viewport = useTimelineViewport();

  return (
    <>
      <button onClick={playback.togglePlayback}>
        {playback.playing ? 'Pause' : 'Play'}
      </button>
      <button onClick={() => snapping.setEnabled(!snapping.enabled)}>
        {snapping.enabled ? 'Snapping on' : 'Snapping off'}
      </button>
      <button onClick={() => viewport.setZoomScale(viewport.zoomScale - 50)}>Zoom out</button>
      <button onClick={() => viewport.setZoomScale(viewport.zoomScale + 50)}>Zoom in</button>
    </>
  );
}