@hyperframes/studio 0.8.56 → 0.8.57

package/src/player/components/timelineProviderStateBuilders.ts

@@ -0,0 +1,83 @@
+import type {
+  TimelineMeta,
+  TimelineContainerProps,
+  TimelineViewportProps,
+} from "./TimelineProvider";
+import type { ResizingClipState } from "./useTimelineClipDrag";
+import type { TimelineLaneBaseProps } from "./timelineLaneProps";
+
+export function resolveResizingElementIds(
+  resizingClip: ResizingClipState | null,
+): readonly string[] | undefined {
+  if (resizingClip?.groupPreview) return resizingClip.groupPreview.map((change) => change.key);
+  if (resizingClip) return [resizingClip.element.key ?? resizingClip.element.id];
+  return undefined;
+}
+
+export function resolveRenderClipContent(
+  rowVirtualizationActive: boolean,
+  isScrolling: boolean,
+  renderClipContent: TimelineLaneBaseProps["renderClipContent"],
+): TimelineLaneBaseProps["renderClipContent"] {
+  return rowVirtualizationActive && isScrolling ? undefined : renderClipContent;
+}
+
+export function shouldIgnoreTimelinePointerDown(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest("button, input, select, a") !== null;
+}
+
+type ContainerInputs = Omit<TimelineContainerProps, "className"> & {
+  isDragOver: boolean;
+  activeTool: string;
+  shiftHeld: boolean;
+  accentClass: string;
+};
+
+type ViewportInputs = Omit<
+  TimelineViewportProps,
+  "className" | "data-timeline-scroll-viewport" | "data-timeline-auto-scroll-left-inset"
+> & {
+  labelMode: boolean;
+  zoomMode: "fit" | "manual";
+};
+
+export interface TimelineMetaBuilderInputs {
+  emptyState: TimelineMeta["emptyState"];
+  container: ContainerInputs;
+  viewport: ViewportInputs;
+  elementCount: number;
+  labelColumnWidth: number;
+  razorGuide: TimelineMeta["razorGuide"];
+}
+
+export function buildTimelineMeta({
+  emptyState,
+  container,
+  viewport,
+  elementCount,
+  labelColumnWidth,
+  razorGuide,
+}: TimelineMetaBuilderInputs): TimelineMeta {
+  const { labelMode, zoomMode, ...viewportProps } = viewport;
+  const containerClassName = `relative border-t select-none h-full overflow-hidden ${container.isDragOver ? container.accentClass : ""} ${container.activeTool === "razor" ? "cursor-crosshair" : container.shiftHeld ? "cursor-crosshair" : "cursor-default"}`;
+  const viewportClassName = `${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-hidden`;
+  return {
+    emptyState,
+    containerProps: {
+      ref: container.ref,
+      "aria-label": container["aria-label"],
+      "data-timeline-element-count": elementCount,
+      className: containerClassName,
+      onMouseMove: container.onMouseMove,
+      onMouseLeave: container.onMouseLeave,
+      style: container.style,
+    },
+    viewportProps: {
+      ...viewportProps,
+      "data-timeline-scroll-viewport": true,
+      "data-timeline-auto-scroll-left-inset": labelMode ? labelColumnWidth : 0,
+      className: viewportClassName,
+    },
+    razorGuide,
+  };
+}

package/src/player/components/useTimelineClipContextMenu.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-import type { ClipContextMenuState } from "./TimelineOverlays";
+import type { ClipContextMenuState } from "./TimelineProvider";
 
 /** A clicked member of an active multi-selection keeps the whole group
  *  selected, so the context menu it opens acts on all of it. */

package/src/player/components/useTimelineOverlaysState.ts

@@ -0,0 +1,100 @@
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineOverlaysState } from "./TimelineProvider";
+import type { TimelineTimeRange } from "../store/rangeSelectionSlice";
+import { useClipContextMenu } from "./useTimelineClipContextMenu";
+import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
+import { usePublishRangeSelection } from "./usePublishRangeSelection";
+import { useTimelineSelectionLifecycle } from "./useTimelineSelectionLifecycle";
+import { useTrackGapMenu, type TrackGapHighlight } from "./useTrackGapMenu";
+
+type OverlayStateInputs = Omit<
+  TimelineOverlaysState,
+  | "elements"
+  | "elementsRef"
+  | "gapContextMenu"
+  | "onDismissGapContextMenu"
+  | "onCloseTrackGap"
+  | "onCloseAllTrackGaps"
+  | "onHoverGapAction"
+  | "rangeSelection"
+  | "setRangeSelection"
+> & {
+  elements: TimelineElement[];
+  elementsRef: { current: TimelineElement[] };
+  rangeSelection: Parameters<typeof useTimelineRangeSelection>[0] & {
+    onRangeSelect?: (range: TimelineTimeRange | null) => void;
+  };
+  gapMenu: Parameters<typeof useTrackGapMenu>[0];
+  onSelectElement: ((element: TimelineElement | null) => void) | undefined;
+  selectedElementId: string | null;
+  setRangeSelectionRef: { current: ((selection: null) => void) | null };
+};
+
+export type TimelineOverlaysStateResult = {
+  overlays: TimelineOverlaysState;
+  shiftClickClipRef: ReturnType<typeof useTimelineRangeSelection>["shiftClickClipRef"];
+  marqueeRect: ReturnType<typeof useTimelineRangeSelection>["marqueeRect"];
+  isScrubbing: ReturnType<typeof useTimelineRangeSelection>["isScrubbing"];
+  handlePointerDown: ReturnType<typeof useTimelineRangeSelection>["handlePointerDown"];
+  handlePointerMove: ReturnType<typeof useTimelineRangeSelection>["handlePointerMove"];
+  handlePointerUp: ReturnType<typeof useTimelineRangeSelection>["handlePointerUp"];
+  handlePointerCancel: ReturnType<typeof useTimelineRangeSelection>["handlePointerCancel"];
+  gapHighlight: TrackGapHighlight | null;
+  openGapMenu: ReturnType<typeof useTrackGapMenu>["openGapMenu"];
+  onContextMenuClip: ReturnType<typeof useClipContextMenu>;
+};
+
+export function useTimelineOverlaysState({
+  gapMenu,
+  rangeSelection: rangeSelectionInputs,
+  onSelectElement,
+  selectedElementId,
+  setRangeSelectionRef,
+  ...state
+}: OverlayStateInputs): TimelineOverlaysStateResult {
+  const {
+    rangeSelection,
+    setRangeSelection,
+    shiftClickClipRef,
+    marqueeRect,
+    isScrubbing,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerCancel,
+  } = useTimelineRangeSelection(rangeSelectionInputs);
+  usePublishRangeSelection(rangeSelection, rangeSelectionInputs.onRangeSelect);
+  setRangeSelectionRef.current = () => setRangeSelection(null); // oxlint-disable-line react/refs -- stable ref consumed by useTimelineClipDrag
+  useTimelineSelectionLifecycle(state.elements, selectedElementId, state.setShowPopover, () =>
+    setRangeSelection(null),
+  );
+  const gap = useTrackGapMenu(gapMenu);
+  const onContextMenuClip = useClipContextMenu(
+    onSelectElement,
+    gap.dismissGapMenu,
+    state.setClipContextMenu,
+  );
+
+  return {
+    overlays: {
+      ...state,
+      rangeSelection,
+      setRangeSelection,
+      gapContextMenu: gap.gapMenuModel,
+      onDismissGapContextMenu: gap.dismissGapMenu,
+      onCloseTrackGap: gap.closeTrackGap,
+      onCloseAllTrackGaps: gap.closeAllTrackGaps,
+      onHoverGapAction: gap.setHoveredGapAction,
+    },
+    shiftClickClipRef,
+    marqueeRect,
+    isScrubbing,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerCancel,
+    gapHighlight: gap.gapHighlight,
+    openGapMenu: gap.openGapMenu,
+    onContextMenuClip,
+  };
+}