Editing Hooks

import { fromSeconds } from '@techsquidtv/canvas-timeline-utils';
import {
  useTimelineClips,
  useTimelineClipboard,
  useTimelineEditCommands,
  useTimelineEditMode,
  useTimelineEditPreview,
  useTimelineHistory,
  useTimelineRangeSelection,
} from '@techsquidtv/canvas-timeline-react/hooks';

export function EditActions() {
  const { selectedClip } = useTimelineClips();
  const { copySelection } = useTimelineClipboard();
  const editMode = useTimelineEditMode();
  const editCommands = useTimelineEditCommands();
  const editPreview = useTimelineEditPreview();
  const rangeSelection = useTimelineRangeSelection();
  const { canUndo, undo } = useTimelineHistory();

  return (
    <>
      {editPreview.previewing && <span>{editPreview.impacts.length} clips affected</span>}
      <button onClick={() => editMode.setMode('trim')}>Trim</button>
      <button disabled={!selectedClip} onClick={copySelection}>Copy</button>
      <button
        disabled={!selectedClip}
        onClick={() =>
          selectedClip &&
          editCommands.moveClip({
            clipId: selectedClip.id,
            startTime: fromSeconds(4),
          })
        }
      >
        Move
      </button>
      <button disabled={!rangeSelection.hasRange} onClick={() => rangeSelection.liftRange()}>
        Lift
      </button>
      <button disabled={!canUndo} onClick={undo}>Undo</button>
    </>
  );
}