@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/TimelineKeyframeControls.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelection } from './TimelineSelection';
+export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
+    readonly clickedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+}) => readonly SequenceNodePathInfo[];
 export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, keyframable, }: {
     propStatus: CanUpdateSequencePropStatus | null;
     selected: boolean;
@@ -15,4 +21,5 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly schema: SequenceSchema;
     readonly effectIndex: number | null;
+    readonly nodePathInfo: SequenceNodePathInfo;
 }>;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -1,17 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = void 0;
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = exports.getSelectedKeyframeControlNodePathInfos = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
+const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const controlsContainerStyle = {
     alignItems: 'center',
@@ -44,10 +47,184 @@ const diamondButtonStyle = {
     background: 'none',
 };
 const svgStyle = { display: 'block' };
-const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
+const isKeyframeControlSelection = (selection) => {
+    return (selection.type === 'sequence-prop' ||
+        selection.type === 'sequence-effect-prop');
+};
+const getSelectedKeyframeControlNodePathInfos = ({ clickedNodePathInfo, selectedItems, }) => {
+    const clickedSelection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(clickedNodePathInfo);
+    if (clickedSelection === null ||
+        !isKeyframeControlSelection(clickedSelection)) {
+        return [clickedNodePathInfo];
+    }
+    const clickedSelectionKey = (0, TimelineSelection_1.getTimelineSelectionKey)(clickedSelection);
+    const selectedKeyframeControls = selectedItems.filter(isKeyframeControlSelection);
+    const clickedIsSelected = selectedKeyframeControls.some((selection) => (0, TimelineSelection_1.getTimelineSelectionKey)(selection) === clickedSelectionKey);
+    if (!clickedIsSelected || selectedKeyframeControls.length <= 1) {
+        return [clickedNodePathInfo];
+    }
+    return selectedKeyframeControls.map((selection) => selection.nodePathInfo);
+};
+exports.getSelectedKeyframeControlNodePathInfos = getSelectedKeyframeControlNodePathInfos;
+const findFieldNode = (nodes, nodePathInfoKey) => {
+    for (const node of nodes) {
+        if ((0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo) === nodePathInfoKey) {
+            return node.kind === 'field' ? node : null;
+        }
+        if (node.kind === 'group') {
+            const child = findFieldNode(node.children, nodePathInfoKey);
+            if (child !== null) {
+                return child;
+            }
+        }
+    }
+    return null;
+};
+const findTrackForNodePathInfo = ({ tracks, nodePathInfo, }) => {
+    var _a;
+    return ((_a = tracks.find((track) => {
+        if (track.nodePathInfo === null) {
+            return false;
+        }
+        return ((0, timeline_node_path_key_1.timelineNodePathInfoToKey)({
+            ...track.nodePathInfo,
+            auxiliaryKeys: [],
+        }) ===
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({
+                ...nodePathInfo,
+                auxiliaryKeys: [],
+            }));
+    })) !== null && _a !== void 0 ? _a : null);
+};
+const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
+    var _a;
+    var _b, _c, _d;
+    const track = findTrackForNodePathInfo({ tracks, nodePathInfo });
+    if (track === null ||
+        track.nodePathInfo === null ||
+        !track.sequence.controls) {
+        return null;
+    }
+    const tree = (0, timeline_layout_1.buildTimelineTree)({
+        sequence: track.sequence,
+        nodePathInfo: track.nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses,
+    });
+    const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
+    if (fieldNode === null || fieldNode.field === null) {
+        return null;
+    }
+    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    if (fieldNode.field.kind === 'sequence-field') {
+        const sequencePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+        const sequenceSelectedPropStatus = (_b = sequencePropStatuses === null || sequencePropStatuses === void 0 ? void 0 : sequencePropStatuses[fieldNode.field.key]) !== null && _b !== void 0 ? _b : null;
+        if (sequenceSelectedPropStatus === null) {
+            return null;
+        }
+        return {
+            nodePathInfo,
+            fieldKey: fieldNode.field.key,
+            propStatus: sequenceSelectedPropStatus,
+            nodePath,
+            fileName: nodePath.absolutePath,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+            defaultValue: fieldNode.field.fieldSchema.default,
+            dragOverrideValue: ((_c = getDragOverrides(nodePath)) !== null && _c !== void 0 ? _c : {})[fieldNode.field.key],
+            schema: track.sequence.controls.schema,
+            effectIndex: null,
+        };
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: fieldNode.field.effectIndex,
+    });
+    const effectSelectedPropStatus = effectStatus.type === 'can-update-effect'
+        ? ((_d = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[fieldNode.field.key]) !== null && _d !== void 0 ? _d : null)
+        : null;
+    if (effectSelectedPropStatus === null) {
+        return null;
+    }
+    return {
+        nodePathInfo,
+        fieldKey: fieldNode.field.key,
+        propStatus: effectSelectedPropStatus,
+        nodePath,
+        fileName: nodePath.absolutePath,
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+        sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+        defaultValue: fieldNode.field.fieldSchema.default,
+        dragOverrideValue: getEffectDragOverrides(nodePath, fieldNode.field.effectIndex)[fieldNode.field.key],
+        schema: fieldNode.field.effectSchema,
+        effectIndex: fieldNode.field.effectIndex,
+    };
+};
+const hasTargetKeyframeAtCurrentFrame = (target) => {
+    if (!isKeyframedStatus(target.propStatus)) {
+        return false;
+    }
+    return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(target.propStatus.keyframes, target.sourceFrame);
+};
+const getAddChange = (target) => {
+    if (target.propStatus.status === 'computed' ||
+        !(0, studio_shared_1.isSchemaFieldKeyframable)({ schema: target.schema, key: target.fieldKey }) ||
+        hasTargetKeyframeAtCurrentFrame(target)) {
+        return null;
+    }
+    const value = getCurrentKeyframeValue({
+        propStatus: target.propStatus,
+        jsxFrame: target.sourceFrame,
+        defaultValue: target.defaultValue,
+        dragOverrideValue: target.dragOverrideValue,
+    });
+    if (value === null) {
+        return null;
+    }
+    const change = {
+        fileName: target.fileName,
+        nodePath: target.nodePath,
+        fieldKey: target.fieldKey,
+        sourceFrame: target.sourceFrame,
+        value,
+        schema: target.schema,
+    };
+    if (target.effectIndex === null) {
+        return change;
+    }
+    return {
+        ...change,
+        effectIndex: target.effectIndex,
+    };
+};
+const getDeleteChange = (target) => {
+    if (!hasTargetKeyframeAtCurrentFrame(target)) {
+        return null;
+    }
+    const change = {
+        fileName: target.fileName,
+        nodePath: target.nodePath,
+        fieldKey: target.fieldKey,
+        sourceFrame: target.sourceFrame,
+        schema: target.schema,
+    };
+    if (target.effectIndex === null) {
+        return change;
+    }
+    return {
+        ...change,
+        effectIndex: target.effectIndex,
+    };
+};
+const hasEffectIndex = (change) => {
+    return 'effectIndex' in change;
+};
+function getCurrentKeyframeValue({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) {
     if (isKeyframedStatus(propStatus)) {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: propStatus,
+            propStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue,
@@ -56,7 +233,7 @@ const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverr
     }
     if (propStatus.status === 'static') {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: propStatus,
+            propStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue,
@@ -64,7 +241,7 @@ const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverr
         });
     }
     return null;
-};
+}
 const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable, }) => {
     if (propStatus === null) {
         return false;
@@ -75,15 +252,19 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
     if (selected) {
         return true;
     }
-    return TimelineSelection_1.SELECTION_ENABLED && isKeyframedStatus(propStatus);
+    return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
@@ -95,12 +276,6 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         }
         return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(propStatus.keyframes, jsxFrame);
     }, [jsxFrame, propStatus]);
-    const currentKeyframeValue = (0, react_1.useMemo)(() => getCurrentKeyframeValue({
-        propStatus,
-        jsxFrame,
-        defaultValue,
-        dragOverrideValue,
-    }), [defaultValue, dragOverrideValue, jsxFrame, propStatus]);
     const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition, videoConfig.durationInFrames), [keyframes, timelinePosition, videoConfig.durationInFrames]);
     const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition, videoConfig.durationInFrames), [keyframes, timelinePosition, videoConfig.durationInFrames]);
     const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
@@ -110,6 +285,62 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const canAddKeyframe = keyframable;
     const canToggleKeyframe = propStatus.status !== 'computed' &&
         (hasKeyframeAtCurrentFrame || canAddKeyframe);
+    const selectedNodePathInfos = (0, react_1.useMemo)(() => (0, exports.getSelectedKeyframeControlNodePathInfos)({
+        clickedNodePathInfo: nodePathInfo,
+        selectedItems,
+    }), [nodePathInfo, selectedItems]);
+    const clickedTarget = (0, react_1.useMemo)(() => ({
+        nodePathInfo,
+        fieldKey,
+        propStatus,
+        nodePath,
+        fileName,
+        keyframeDisplayOffset,
+        sourceFrame: jsxFrame,
+        defaultValue,
+        dragOverrideValue,
+        schema,
+        effectIndex,
+    }), [
+        defaultValue,
+        dragOverrideValue,
+        effectIndex,
+        fieldKey,
+        fileName,
+        jsxFrame,
+        keyframeDisplayOffset,
+        nodePath,
+        nodePathInfo,
+        propStatus,
+        schema,
+    ]);
+    const keyframeToggleTargets = (0, react_1.useMemo)(() => {
+        const clickedNodePathInfoKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
+        return selectedNodePathInfos.flatMap((selectedNodePathInfo) => {
+            if ((0, timeline_node_path_key_1.timelineNodePathInfoToKey)(selectedNodePathInfo) ===
+                clickedNodePathInfoKey) {
+                return [clickedTarget];
+            }
+            const target = resolveKeyframeControlTarget({
+                nodePathInfo: selectedNodePathInfo,
+                tracks,
+                propStatuses,
+                getDragOverrides,
+                getEffectDragOverrides,
+                timelinePosition,
+            });
+            return target === null ? [] : [target];
+        });
+    }, [
+        clickedTarget,
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo,
+        propStatuses,
+        selectedNodePathInfos,
+        timelinePosition,
+        tracks,
+    ]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
@@ -134,72 +365,38 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         if (!clientId || !canToggleKeyframe) {
             return;
         }
-        if (hasKeyframeAtCurrentFrame && isKeyframedStatus(propStatus)) {
-            if (effectIndex === null) {
-                await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
-                    fileName,
-                    nodePath,
-                    fieldKey,
-                    sourceFrame: jsxFrame,
-                    schema,
-                    setCodeValues,
-                    clientId,
-                });
-                return;
-            }
-            await (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
-                fileName,
-                nodePath,
-                effectIndex,
-                fieldKey,
-                sourceFrame: jsxFrame,
-                schema,
-                setCodeValues,
+        if (hasKeyframeAtCurrentFrame) {
+            const deleteChanges = keyframeToggleTargets.flatMap((target) => {
+                const change = getDeleteChange(target);
+                return change === null ? [] : [change];
+            });
+            await (0, call_delete_keyframe_1.callDeleteKeyframes)({
+                sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
+                effectKeyframes: deleteChanges.filter((change) => hasEffectIndex(change)),
+                setPropStatuses,
                 clientId,
             });
             return;
         }
-        const value = currentKeyframeValue;
-        if (value === null) {
-            return;
-        }
-        if (effectIndex === null) {
-            await (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                fileName,
-                nodePath,
-                fieldKey,
-                sourceFrame: jsxFrame,
-                value,
-                schema,
-                setCodeValues,
-                clientId,
-            });
+        const addChanges = keyframeToggleTargets.flatMap((target) => {
+            const change = getAddChange(target);
+            return change === null ? [] : [change];
+        });
+        if (addChanges.length === 0) {
             return;
         }
-        await (0, call_add_keyframe_1.callAddEffectKeyframe)({
-            fileName,
-            nodePath,
-            effectIndex,
-            fieldKey,
-            sourceFrame: jsxFrame,
-            value,
-            schema,
-            setCodeValues,
+        await (0, call_add_keyframe_1.callAddKeyframes)({
+            sequenceKeyframes: addChanges.filter((change) => !hasEffectIndex(change)),
+            effectKeyframes: addChanges.filter((change) => hasEffectIndex(change)),
+            setPropStatuses,
             clientId,
         });
     }, [
         canToggleKeyframe,
         clientId,
-        effectIndex,
-        fieldKey,
-        fileName,
         hasKeyframeAtCurrentFrame,
-        currentKeyframeValue,
-        jsxFrame,
-        nodePath,
-        propStatus,
-        schema,
-        setCodeValues,
+        keyframeToggleTargets,
+        setPropStatuses,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -60,7 +60,9 @@ const diamondBase = {
 const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineKeyframeSelection)(nodePathInfo, frame);
+    const ref = (0, react_1.useRef)(null);
+    const { selected, onSelect, selectable, selectionItem } = (0, TimelineSelection_1.useTimelineKeyframeSelection)(nodePathInfo, frame);
+    (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const { isKeyframeDragging } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
     const visuallySelected = selected || isKeyframeDragging({ nodePathInfo, frame });
     const style = (0, react_1.useMemo)(() => {
@@ -69,7 +71,6 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
         }
         return {
             ...diamondBase,
-            cursor: 'pointer',
             left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
             pointerEvents: 'auto',
             top: rowHeight / 2,
@@ -86,6 +87,6 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
 };
 exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

package/dist/components/Timeline/TimelineKeyframeEasingLine.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly rowHeight: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly segmentIndex: number;
+}>;