mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
Miguel Angel Simon Sierra
59a818e80a
Two halves of one inversion in the expanded timeline lanes: the tweens
that should show were filtered out, and a tween that should not be there
was the only survivor.
Lane classification read the parser's whole-tween verdict, which is
undefined for anything spanning more than one property group. `{x,
opacity}` is the canonical HyperFrames entrance tween, so five of the
seven tweens in the swiss-grid graphics example had no caret, no
reserved row and no diamonds. Classify per property instead, through one
helper both the rendered lanes and the reserved row heights count
through so they cannot drift again.
Attribution matched an unanchored leading id, so `#stat3 .block` was
filed under `#stat3`. The child's diamonds landed on its ancestor and
collided with the ancestor's own tween at the shared percentage, which
the same-percentage merge then resolved by dropping the ease. Route
attribution through resolveSelectorElementIds, which anchors a
whole-selector id and otherwise resolves through the live preview DOM,
and anchor its no-DOM fallback so a descendant selector resolves to
nothing rather than to its ancestor. The merge rule is unchanged.
Also brings the last property-lane call site onto the shared clip timing
basis: an expanded sub-composition child's start is host-absolute while
its tweens are local to its own file.
588 lines
27 KiB
TypeScript
588 lines
27 KiB
TypeScript
import { type ReactNode } from "react";
|
|
import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
|
|
import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
|
|
import { TimelineClip } from "./TimelineClip";
|
|
import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
|
|
import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
|
|
import { TimelineTrackHeader } from "./TimelineTrackHeader";
|
|
import { resolveTrackKeyframeClip } from "./useTimelineTrackLayout";
|
|
import { clipTimingStart } from "../../hooks/gsapShared";
|
|
import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
|
|
import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
|
|
import { getTimelineEditCapabilities, resolveBlockedTimelineEditIntent } from "./timelineEditing";
|
|
import type { TimelineTheme } from "./timelineTheme";
|
|
import { CLIP_Y, CLIP_HANDLE_W, TRACK_H, getTimelineRowHeight } from "./timelineLayout";
|
|
import {
|
|
usePlayerStore,
|
|
type TimelineElement,
|
|
type KeyframeCacheEntry,
|
|
} from "../store/playerStore";
|
|
import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
|
|
import {
|
|
isMultiDragPassenger,
|
|
multiDragPassengerOffsetPx,
|
|
type MultiDragPreviewInput,
|
|
} from "./timelineMultiDragPreview";
|
|
import type { TrackVisualStyle } from "./timelineIcons";
|
|
import type { TimelineEditCallbacks } from "./timelineCallbacks";
|
|
import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
|
|
import { trackStudioKeyframeLaneExpand } from "../../telemetry/events";
|
|
import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
|
|
import { isAudioTimelineElement, isMusicTrack } from "../../utils/timelineInspector";
|
|
import { renderClipChildren } from "./timelineClipChildren";
|
|
|
|
/**
|
|
* Props shared by the scroll container ({@link TimelineCanvas}) and the lane
|
|
* renderer below. TimelineCanvas passes these straight through via spread, so
|
|
* they are declared once here and both prop types compose from this base — no
|
|
* duplicated prop list.
|
|
*/
|
|
export interface TimelineLaneBaseProps {
|
|
pps: number;
|
|
contentOrigin: number;
|
|
contentGutter: number;
|
|
trackContentWidth: number;
|
|
theme: TimelineTheme;
|
|
displayTrackOrder: number[];
|
|
rowHeights: readonly number[];
|
|
trackOrder: number[];
|
|
tracks: [number, TimelineElement[]][];
|
|
trackStyles: Map<number, TrackVisualStyle>;
|
|
laneCounts: ReadonlyMap<string, number>;
|
|
selectedElementId: string | null;
|
|
selectedElementIds: Set<string>;
|
|
hoveredClip: string | null;
|
|
draggedClip: DraggedClipState | null;
|
|
blockedClipRef: React.RefObject<BlockedClipState | null>;
|
|
suppressClickRef: React.RefObject<boolean>;
|
|
scrollRef: React.RefObject<HTMLDivElement | null>;
|
|
renderClipContent?: (
|
|
element: TimelineElement,
|
|
style: { clip: string; label: string },
|
|
) => ReactNode;
|
|
renderClipOverlay?: (element: TimelineElement) => ReactNode;
|
|
onDrillDown?: (element: TimelineElement) => void;
|
|
onSelectElement?: (element: TimelineElement | null) => void;
|
|
setHoveredClip: (key: string | null) => void;
|
|
setShowPopover: (v: boolean) => void;
|
|
setRangeSelection: (v: null) => void;
|
|
setResizingClip: (v: ResizingClipState | null) => void;
|
|
setDraggedClip: (v: DraggedClipState | null) => void;
|
|
setSelectedElementId: (id: string | null) => void;
|
|
syncClipDragAutoScroll: (x: number, y: number) => void;
|
|
shiftClickClipRef: React.RefObject<{
|
|
element: TimelineElement;
|
|
anchorX: number;
|
|
anchorY: number;
|
|
} | null>;
|
|
getPreviewElement: (element: TimelineElement) => TimelineElement;
|
|
getTrackStyle: (tag: string) => TrackVisualStyle;
|
|
keyframeCache?: Map<string, KeyframeCacheEntry>;
|
|
gsapAnimations: Map<string, GsapAnimation[]>;
|
|
selectedKeyframes: Set<string>;
|
|
currentTime: number;
|
|
onSeek?: (time: number) => void;
|
|
onSelectSegment?: (elementId: string, target: TimelineKeyframeTarget) => void;
|
|
onClickKeyframe?: (element: TimelineElement, target: TimelineKeyframeTarget) => void;
|
|
onShiftClickKeyframe?: (elementId: string, target: TimelineKeyframeTarget) => void;
|
|
onContextMenuKeyframe?: (
|
|
e: React.MouseEvent,
|
|
elementId: string,
|
|
target: TimelineKeyframeTarget,
|
|
) => void;
|
|
onMoveKeyframe?: (
|
|
elementId: string,
|
|
keyframe: TimelineKeyframeTarget,
|
|
toClipPercentage: number,
|
|
propertyGroup?: string,
|
|
tweenPercentage?: number,
|
|
animationId?: string,
|
|
) => Promise<boolean>;
|
|
onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
|
|
/**
|
|
* Right-click on EMPTY lane space (not on a clip — those preventDefault
|
|
* before this fires — not the gutter/ruler, not below the lanes). `time` is
|
|
* the timeline time (seconds) under the pointer on that lane.
|
|
*/
|
|
onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
|
|
beatAnalysis?: MusicBeatAnalysis | null;
|
|
}
|
|
|
|
interface TimelineLanesProps extends TimelineLaneBaseProps {
|
|
/** Live-derived by TimelineCanvas from {@link TimelineLaneBaseProps.draggedClip}. */
|
|
draggedElement: TimelineElement | null;
|
|
multiDragPreview: MultiDragPreviewInput | null;
|
|
onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
|
|
onTogglePropertyGroupKeyframe: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
|
|
onResizeElement: TimelineEditCallbacks["onResizeElement"];
|
|
onMoveElement: TimelineEditCallbacks["onMoveElement"];
|
|
onRazorSplit: TimelineEditCallbacks["onRazorSplit"];
|
|
onRazorSplitAll: TimelineEditCallbacks["onRazorSplitAll"];
|
|
}
|
|
|
|
export function TimelineLanes({
|
|
pps,
|
|
contentOrigin,
|
|
contentGutter,
|
|
trackContentWidth,
|
|
theme,
|
|
displayTrackOrder,
|
|
rowHeights,
|
|
trackOrder,
|
|
tracks,
|
|
trackStyles,
|
|
laneCounts,
|
|
selectedElementId,
|
|
selectedElementIds,
|
|
hoveredClip,
|
|
draggedClip,
|
|
draggedElement,
|
|
multiDragPreview,
|
|
blockedClipRef,
|
|
suppressClickRef,
|
|
scrollRef,
|
|
renderClipContent,
|
|
renderClipOverlay,
|
|
onDrillDown,
|
|
onSelectElement,
|
|
setHoveredClip,
|
|
setShowPopover,
|
|
setRangeSelection,
|
|
setResizingClip,
|
|
setDraggedClip,
|
|
setSelectedElementId,
|
|
syncClipDragAutoScroll,
|
|
shiftClickClipRef,
|
|
getPreviewElement,
|
|
getTrackStyle,
|
|
keyframeCache,
|
|
gsapAnimations,
|
|
selectedKeyframes,
|
|
currentTime,
|
|
onSeek,
|
|
onSelectSegment,
|
|
onClickKeyframe,
|
|
onShiftClickKeyframe,
|
|
onContextMenuKeyframe,
|
|
onMoveKeyframe,
|
|
onContextMenuClip,
|
|
onContextMenuLane,
|
|
beatAnalysis,
|
|
onToggleTrackHidden,
|
|
onTogglePropertyGroupKeyframe,
|
|
onResizeElement,
|
|
onMoveElement,
|
|
onRazorSplit,
|
|
onRazorSplitAll,
|
|
}: TimelineLanesProps) {
|
|
const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
|
|
const toggleClipExpanded = usePlayerStore((s) => s.toggleClipExpanded);
|
|
const toggleClipExpandedTracked = (key: string) => {
|
|
const willExpand = !expandedClipIds.has(key);
|
|
trackStudioKeyframeLaneExpand({ expanded: willExpand });
|
|
toggleClipExpanded(key);
|
|
};
|
|
return (
|
|
<>
|
|
{
|
|
// NOTE (deliberate no-virtualization): lanes and their clips render via a
|
|
// plain `.map()` inside the scroll container rather than a windowing/virtualized
|
|
// list. NLE clip counts are small (dozens to low hundreds), so the DOM cost is
|
|
// bounded and virtualization's complexity isn't worth it. TODO: revisit and swap
|
|
// in a virtualizer if editorial workflows ever push very high clip counts.
|
|
// fallow-ignore-next-line complexity
|
|
displayTrackOrder.map((trackNum, row) => {
|
|
const rowHeight = getTimelineRowHeight(row, rowHeights);
|
|
const els = tracks.find(([t]) => t === trackNum)?.[1] ?? [];
|
|
const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
|
|
const isPendingTrack =
|
|
draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
|
|
// All lanes use the same uniform color — no alternating stripes.
|
|
const rowBackground = theme.rowBackground;
|
|
// The beat-dot strip occupies the top of this track's lane (active track,
|
|
// or the music track when nothing is selected). When shown, keyframe
|
|
// diamonds shrink + drop to the bottom half so they don't collide with it.
|
|
const beatStripOnTrack =
|
|
(beatAnalysis?.beatTimes?.length ?? 0) >= 2 &&
|
|
(selectedElementId
|
|
? els.some((e) => (e.key ?? e.id) === selectedElementId)
|
|
: els.some(isMusicTrack));
|
|
const isTrackHidden = els.length > 0 && els.every((element) => element.hidden === true);
|
|
const isAudioTrack = els.length > 0 && els.some(isAudioTimelineElement);
|
|
// The one keyframed element this track shows lanes for (selected, else
|
|
// most lanes). A track can hold several elements; scoping to one keeps
|
|
// their keyframes from cramming into a single row.
|
|
const keyframeClip = STUDIO_KEYFRAMES_ENABLED
|
|
? resolveTrackKeyframeClip(els, laneCounts, selectedElementId, selectedElementIds)
|
|
: null;
|
|
const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
|
|
const keyframeClipExpanded =
|
|
keyframeClipKey != null && expandedClipIds.has(keyframeClipKey);
|
|
return (
|
|
<div
|
|
key={trackNum}
|
|
className="relative flex"
|
|
style={{
|
|
height: rowHeight,
|
|
background: rowBackground,
|
|
borderBottom: `1px solid ${theme.rowBorder}`,
|
|
}}
|
|
>
|
|
<TimelineTrackHeader
|
|
trackNumber={trackNum}
|
|
trackLabel={els[0]?.label ?? els[0]?.domId ?? els[0]?.id ?? `Track ${trackNum}`}
|
|
contentOrigin={contentOrigin}
|
|
keyframeClip={keyframeClip}
|
|
clipCount={els.length}
|
|
isExpanded={keyframeClipExpanded}
|
|
animations={keyframeClipKey ? (gsapAnimations.get(keyframeClipKey) ?? []) : []}
|
|
currentTime={currentTime}
|
|
isTrackHidden={isTrackHidden}
|
|
isAudioTrack={isAudioTrack}
|
|
theme={theme}
|
|
onToggleClipExpanded={() => {
|
|
if (keyframeClipKey) {
|
|
toggleClipExpandedTracked(keyframeClipKey);
|
|
}
|
|
}}
|
|
onToggleTrackHidden={onToggleTrackHidden}
|
|
onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
|
|
onSeek={onSeek}
|
|
/>
|
|
<div
|
|
style={{
|
|
width: trackContentWidth,
|
|
marginLeft: contentGutter, // room for a 0% diamond left of t=0
|
|
opacity: isTrackHidden ? 0.35 : 1,
|
|
transition: "opacity 120ms ease",
|
|
}}
|
|
className="relative"
|
|
onContextMenu={(e: React.MouseEvent) => {
|
|
// Clip / keyframe-diamond context menus preventDefault at the
|
|
// target before this bubble handler runs — respect them so a
|
|
// right-click on a clip never also opens the gap menu.
|
|
if (e.defaultPrevented || !onContextMenuLane) return;
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const time = (e.clientX - rect.left) / pps;
|
|
if (time < 0) return;
|
|
e.preventDefault();
|
|
onContextMenuLane(e, trackNum, time);
|
|
}}
|
|
>
|
|
{/* Faint beat lines in every track's background (behind the clips);
|
|
the active move-snap target is highlighted. */}
|
|
<BeatBackgroundLines
|
|
beatTimes={beatAnalysis?.beatTimes}
|
|
beatStrengths={beatAnalysis?.beatStrengths}
|
|
pps={pps}
|
|
highlightTime={
|
|
draggedClip?.started && draggedClip.snapType === "beat"
|
|
? draggedClip.snapTime
|
|
: null
|
|
}
|
|
/>
|
|
{/* Beat dots on the active track (the one holding the selection),
|
|
falling back to the music track when nothing is selected. */}
|
|
{beatStripOnTrack && (
|
|
<BeatStrip
|
|
beatTimes={beatAnalysis?.beatTimes}
|
|
beatStrengths={beatAnalysis?.beatStrengths}
|
|
pps={pps}
|
|
/>
|
|
)}
|
|
{isPendingTrack && (
|
|
<div
|
|
className="absolute inset-0 flex items-center"
|
|
style={{
|
|
paddingLeft: 16,
|
|
color: ts.label,
|
|
fontSize: 11,
|
|
letterSpacing: "0.06em",
|
|
textTransform: "uppercase",
|
|
opacity: 0.5,
|
|
}}
|
|
>
|
|
New track
|
|
</div>
|
|
)}
|
|
{
|
|
// fallow-ignore-next-line complexity
|
|
els.map((el) => {
|
|
const clipStyle = getTrackStyle(el.tag);
|
|
const elementKey = el.key ?? el.id;
|
|
// Only the track's active keyframe clip shows expanded lanes;
|
|
// other clips (incl. siblings on a shared track) show compact
|
|
// diamonds on their own bar instead.
|
|
const showsLanes =
|
|
STUDIO_KEYFRAMES_ENABLED &&
|
|
elementKey === keyframeClipKey &&
|
|
keyframeClipExpanded;
|
|
const capabilities = getTimelineEditCapabilities(el);
|
|
const isSelected =
|
|
selectedElementId === elementKey || selectedElementIds.has(elementKey);
|
|
const isComposition = !!el.compositionSrc;
|
|
// elementKey (el.key ?? el.id) is already unique per clip; do NOT
|
|
// fold in the map index, or a splice/reorder remounts every clip
|
|
// at/after the change (DOM flash, drag interruption).
|
|
const clipKey = elementKey;
|
|
const isDraggingClip =
|
|
draggedClip?.started === true &&
|
|
(draggedElement?.key ?? draggedElement?.id) === elementKey;
|
|
if (isDraggingClip) return null;
|
|
const previewElement = getPreviewElement(el);
|
|
// Passenger of a live multi-drag: slide by the SAME formation
|
|
// delta (the grabbed clip's group-clamped delta) via a
|
|
// compositor transform on a same-geometry wrapper (absolute
|
|
// inset-0 → identical offset parent, so the clip's own
|
|
// left/top are preserved), plus the ghost's elevated z/opacity.
|
|
const isPassenger =
|
|
multiDragPreview != null && isMultiDragPassenger(clipKey, multiDragPreview);
|
|
const passengerOffsetPx = isPassenger
|
|
? multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview)
|
|
: 0;
|
|
const clip = (
|
|
<TimelineClip
|
|
key={clipKey}
|
|
onContextMenu={(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
onContextMenuClip?.(e, el);
|
|
}}
|
|
el={previewElement}
|
|
pps={pps}
|
|
clipY={CLIP_Y}
|
|
clipHeight={showsLanes ? TRACK_H - 2 * CLIP_Y : undefined}
|
|
isSelected={isSelected}
|
|
isHovered={hoveredClip === clipKey}
|
|
isDragging={false}
|
|
hasCustomContent={!!renderClipContent}
|
|
capabilities={capabilities}
|
|
theme={theme}
|
|
isComposition={isComposition}
|
|
onHoverStart={() => setHoveredClip(clipKey)}
|
|
onHoverEnd={() => setHoveredClip(null)}
|
|
onResizeStart={
|
|
// fallow-ignore-next-line complexity
|
|
(edge, e) => {
|
|
if (e.button !== 0 || e.shiftKey || !onResizeElement) return;
|
|
if (edge === "start" && !capabilities.canTrimStart) return;
|
|
if (edge === "end" && !capabilities.canTrimEnd) return;
|
|
e.stopPropagation();
|
|
blockedClipRef.current = null;
|
|
setShowPopover(false);
|
|
setRangeSelection(null);
|
|
setResizingClip({
|
|
element: el,
|
|
edge,
|
|
originClientX: e.clientX,
|
|
originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
|
|
previewStart: el.start,
|
|
previewDuration: el.duration,
|
|
previewPlaybackStart: el.playbackStart,
|
|
started: false,
|
|
});
|
|
}
|
|
}
|
|
onPointerDown={
|
|
// fallow-ignore-next-line complexity
|
|
(e) => {
|
|
if (e.button !== 0) return;
|
|
if (usePlayerStore.getState().activeTool === "razor") return;
|
|
if (e.shiftKey) {
|
|
shiftClickClipRef.current = {
|
|
element: el,
|
|
anchorX: e.clientX,
|
|
anchorY: e.clientY,
|
|
};
|
|
return;
|
|
}
|
|
const target = e.currentTarget as HTMLElement;
|
|
const rect = target.getBoundingClientRect();
|
|
const blockedIntent = resolveBlockedTimelineEditIntent({
|
|
width: rect.width,
|
|
offsetX: e.clientX - rect.left,
|
|
handleWidth: CLIP_HANDLE_W,
|
|
capabilities,
|
|
});
|
|
if (
|
|
blockedIntent &&
|
|
((blockedIntent === "move" && onMoveElement) ||
|
|
(blockedIntent !== "move" && onResizeElement))
|
|
) {
|
|
blockedClipRef.current = {
|
|
element: el,
|
|
intent: blockedIntent,
|
|
originClientX: e.clientX,
|
|
originClientY: e.clientY,
|
|
started: false,
|
|
};
|
|
return;
|
|
}
|
|
if (!onMoveElement || !capabilities.canMove) return;
|
|
blockedClipRef.current = null;
|
|
setShowPopover(false);
|
|
setRangeSelection(null);
|
|
setDraggedClip({
|
|
element: el,
|
|
originClientX: e.clientX,
|
|
originClientY: e.clientY,
|
|
originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
|
|
originScrollTop: scrollRef.current?.scrollTop ?? 0,
|
|
pointerClientX: e.clientX,
|
|
pointerClientY: e.clientY,
|
|
pointerOffsetX: e.clientX - rect.left,
|
|
pointerOffsetY: e.clientY - rect.top,
|
|
previewStart: el.start,
|
|
previewTrack: el.track,
|
|
desiredTrack: el.track,
|
|
insertRow: null,
|
|
snapTime: null,
|
|
snapType: null,
|
|
started: false,
|
|
});
|
|
syncClipDragAutoScroll(e.clientX, e.clientY);
|
|
}
|
|
}
|
|
onClick={
|
|
// fallow-ignore-next-line complexity
|
|
(e) => {
|
|
e.stopPropagation();
|
|
if (suppressClickRef.current) return;
|
|
const { activeTool } = usePlayerStore.getState();
|
|
if (activeTool === "razor" && onRazorSplit) {
|
|
const clipRect = (
|
|
e.currentTarget as HTMLElement
|
|
).getBoundingClientRect();
|
|
const clickOffsetX = e.clientX - clipRect.left;
|
|
const splitTime = previewElement.start + clickOffsetX / pps;
|
|
const clampedTime = Math.max(
|
|
previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
|
|
Math.min(
|
|
previewElement.start +
|
|
previewElement.duration -
|
|
SPLIT_BOUNDARY_EPSILON_S,
|
|
splitTime,
|
|
),
|
|
);
|
|
if (e.shiftKey && onRazorSplitAll) {
|
|
onRazorSplitAll(clampedTime);
|
|
} else {
|
|
onRazorSplit(el, clampedTime);
|
|
}
|
|
return;
|
|
}
|
|
// Plain click single-selects: drop any marquee multi-selection.
|
|
// Only a click on the PRIMARY selection toggles it off — a click
|
|
// on a marquee-selected clip narrows the selection to that clip.
|
|
const hadMultiSelection = selectedElementIds.size > 0;
|
|
usePlayerStore.getState().clearSelectedElementIds();
|
|
const nextElement =
|
|
selectedElementId === elementKey && !hadMultiSelection ? null : el;
|
|
setSelectedElementId(nextElement ? elementKey : null);
|
|
onSelectElement?.(nextElement);
|
|
}
|
|
}
|
|
onDoubleClick={(e) => {
|
|
e.stopPropagation();
|
|
if (suppressClickRef.current) return;
|
|
if (isComposition && onDrillDown) onDrillDown(el);
|
|
}}
|
|
>
|
|
{renderClipChildren(
|
|
previewElement,
|
|
clipStyle,
|
|
renderClipContent,
|
|
renderClipOverlay,
|
|
)}
|
|
{STUDIO_KEYFRAMES_ENABLED &&
|
|
!showsLanes &&
|
|
keyframeCache?.get(elementKey) && (
|
|
<TimelineClipDiamonds
|
|
keyframesData={keyframeCache.get(elementKey)!}
|
|
clipWidthPx={Math.max(previewElement.duration * pps, 4)}
|
|
clipHeightPx={rowHeight - 2 * CLIP_Y}
|
|
beatsActive={beatStripOnTrack}
|
|
accentColor={clipStyle.accent}
|
|
isSelected={isSelected}
|
|
currentPercentage={
|
|
previewElement.duration > 0
|
|
? ((currentTime - previewElement.start) /
|
|
previewElement.duration) *
|
|
100
|
|
: 0
|
|
}
|
|
elementId={elementKey}
|
|
selectedKeyframes={selectedKeyframes}
|
|
onClickKeyframe={(_elId, target) =>
|
|
onClickKeyframe?.(previewElement, target)
|
|
}
|
|
onShiftClickKeyframe={onShiftClickKeyframe}
|
|
onContextMenuKeyframe={onContextMenuKeyframe}
|
|
onMoveKeyframe={onMoveKeyframe}
|
|
onSelectSegment={onSelectSegment}
|
|
suppressClickRef={suppressClickRef}
|
|
/>
|
|
)}
|
|
</TimelineClip>
|
|
);
|
|
const propertyLanes = showsLanes && (
|
|
<TimelinePropertyLanes
|
|
key={`${clipKey}-property-lanes`}
|
|
animations={gsapAnimations.get(elementKey) ?? []}
|
|
// clipTimingStart, not the raw start: an expanded sub-comp
|
|
// child's start is host-absolute while its tweens are
|
|
// local to its own file.
|
|
clipStart={clipTimingStart(previewElement)}
|
|
clipDuration={previewElement.duration}
|
|
clipLeftPx={previewElement.start * pps}
|
|
clipWidthPx={Math.max(previewElement.duration * pps, 4)}
|
|
accentColor={clipStyle.accent}
|
|
isSelected={isSelected}
|
|
currentPercentage={
|
|
previewElement.duration > 0
|
|
? ((currentTime - previewElement.start) / previewElement.duration) * 100
|
|
: 0
|
|
}
|
|
elementId={elementKey}
|
|
selectedKeyframes={selectedKeyframes}
|
|
onSelectSegment={(target) => onSelectSegment?.(elementKey, target)}
|
|
onClickKeyframe={(target) => onClickKeyframe?.(previewElement, target)}
|
|
onShiftClickKeyframe={(target) =>
|
|
onShiftClickKeyframe?.(elementKey, target)
|
|
}
|
|
onContextMenuKeyframe={(e, target) =>
|
|
onContextMenuKeyframe?.(e, elementKey, target)
|
|
}
|
|
onMoveKeyframe={(target, toClipPercentage) =>
|
|
onMoveKeyframe?.(elementKey, target, toClipPercentage) ??
|
|
Promise.resolve(false)
|
|
}
|
|
suppressClickRef={suppressClickRef}
|
|
/>
|
|
);
|
|
if (!isPassenger) return [clip, propertyLanes];
|
|
return (
|
|
<div
|
|
key={clipKey}
|
|
className="absolute inset-0"
|
|
style={{
|
|
transform: `translateX(${passengerOffsetPx}px)`,
|
|
opacity: 0.85,
|
|
zIndex: 20,
|
|
pointerEvents: "none",
|
|
}}
|
|
>
|
|
{clip}
|
|
{propertyLanes}
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</>
|
|
);
|
|
}
|