@remotion/studio 4.0.477 → 4.0.479

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 export type KeyframeSettingsModalState = {
     type: 'keyframe-settings';
     fileName: string;
@@ -7,7 +7,7 @@ export type KeyframeSettingsModalState = {
     fieldKey: string;
     fieldLabel: string;
     status: CanUpdateSequencePropStatusKeyframed;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     effectIndex: number | null;
 };
 export declare const KeyframeSettingsModal: React.FC<{

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

@@ -1,9 +1,9 @@
 import { type FC } from 'react';
-import type { EffectDefinition, JsxComponentIdentity, SequenceSchema } from 'remotion';
+import type { EffectDefinition, JsxComponentIdentity, InteractivitySchema } from 'remotion';
 export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly componentIdentity: JsxComponentIdentity | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly getStack: () => string | null;
     readonly effects: readonly EffectDefinition<unknown>[];
 }>;

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

@@ -1,6 +1,6 @@
-import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
+import { type EasingClipboardData, type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
-import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
+import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type InteractivitySchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
@@ -20,7 +20,7 @@ export type PasteEffectPropTarget = {
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly defaultValue: string | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 } | {
     readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
@@ -33,6 +33,18 @@ export declare const getEffectPropClipboardDataFromSelection: ({ selection, prop
     selection: TimelineSelection;
     propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
+export declare const getEasingClipboardDataFromSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    selection: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses;
+}) => EasingClipboardData | null;
 export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
     readonly selectedItems: readonly TimelineSelection[];
     readonly payload: EffectPropClipboardData;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
+exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEasingClipboardDataFromSelection = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,6 +11,7 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const makeClipboardText = (payload) => JSON.stringify(payload);
 const makeTargetKey = (nodePath) => {
     return JSON.stringify({
@@ -176,6 +177,24 @@ const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) =
     };
 };
 exports.getEffectPropClipboardDataFromSelection = getEffectPropClipboardDataFromSelection;
+const getEasingClipboardDataFromSelection = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    const easing = (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    });
+    if (easing === null) {
+        return null;
+    }
+    return {
+        type: 'easing',
+        version: 1,
+        remotionClipboard: 'easing',
+        easing,
+    };
+};
+exports.getEasingClipboardDataFromSelection = getEasingClipboardDataFromSelection;
 const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
     if (selectedItems.length === 0) {
@@ -269,9 +288,38 @@ const TimelineClipboardKeybindings = () => {
                 var _a;
                 const { selectedItems } = currentSelection.current;
                 const propStatuses = propStatusesRef.current;
+                const sequences = sequencesRef.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+                if (easingSelections.length > 0) {
+                    e.preventDefault();
+                    if (easingSelections.length !== 1 ||
+                        easingSelections.length !== selectedItems.length) {
+                        (0, NotificationCenter_1.showNotification)('Select one easing to copy', 3000);
+                        return;
+                    }
+                    const payload = (0, exports.getEasingClipboardDataFromSelection)({
+                        selection: easingSelections[0],
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        propStatuses,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Cannot copy easing because it cannot be read', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied easing to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy easing: ${err.message}`, 2000);
+                    });
+                    return;
+                }
                 if (selectedItems.some((selection) => selection.type === 'sequence-effect-prop')) {
                     e.preventDefault();
                     if (selectedItems.length !== 1 ||
@@ -354,6 +402,42 @@ const TimelineClipboardKeybindings = () => {
                     .then((text) => {
                     const propStatuses = propStatusesRef.current;
                     const sequences = sequencesRef.current;
+                    const easingResult = (0, studio_shared_1.parseEasingClipboardDataResult)(text);
+                    if (easingResult.status !== 'invalid') {
+                        e.preventDefault();
+                        if (easingResult.status === 'unsupported-version') {
+                            (0, NotificationCenter_1.showNotification)('Cannot paste easing copied from a different Remotion Studio version', 4000);
+                            return;
+                        }
+                        const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
+                        if (easingSelections.length === 0 ||
+                            easingSelections.length !== selectedItems.length) {
+                            (0, NotificationCenter_1.showNotification)('Select an easing to paste onto', 3000);
+                            return;
+                        }
+                        const updatePromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+                            selections: easingSelections,
+                            sequences,
+                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                            propStatuses,
+                            setPropStatuses,
+                            clientId,
+                            easing: easingResult.data.easing,
+                        });
+                        if (updatePromise === null) {
+                            (0, NotificationCenter_1.showNotification)('Cannot paste onto an easing that cannot be updated', 3000);
+                            return;
+                        }
+                        return updatePromise
+                            .then(() => {
+                            (0, NotificationCenter_1.showNotification)(easingSelections.length === 1
+                                ? 'Pasted easing'
+                                : 'Pasted easing to selected segments', 2000);
+                        })
+                            .catch((err) => {
+                            (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
+                        });
+                    }
                     const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
                     if (effectPropResult.status !== 'invalid') {
                         e.preventDefault();

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineDeleteKeybindings = void 0;
+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");
@@ -29,7 +30,7 @@ const TimelineDeleteKeybindings = () => {
         }
         const { clientId } = previewServerState;
         const handleDelete = () => {
-            const { selectedItems, clearSelection } = currentSelection.current;
+            const { selectedItems, clearSelection, selectItems } = currentSelection.current;
             const sequences = sequencesRef.current;
             const propStatuses = propStatusesRef.current;
             if (selectedItems.length === 0) {
@@ -57,7 +58,13 @@ const TimelineDeleteKeybindings = () => {
                 deletePromise
                     .then((deleted) => {
                     if (deleted) {
-                        clearSelection();
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)(selectedItems);
+                        if (nextSelection.length === 0) {
+                            clearSelection();
+                        }
+                        else {
+                            selectItems(nextSelection);
+                        }
                     }
                 })
                     .catch(() => undefined);
@@ -72,7 +79,7 @@ const TimelineDeleteKeybindings = () => {
                     propStatuses,
                     setPropStatuses,
                     clientId,
-                    easing: 'linear',
+                    easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
                 });
                 if (resetEasingPromise !== null) {
                     resetEasingPromise.catch(() => undefined);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
@@ -7,7 +7,7 @@ export declare const TimelineEffectItem: React.FC<{
     readonly label: string;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly effectIndex: number;
-    readonly effectSchema: SequenceSchema;
+    readonly effectSchema: InteractivitySchema;
     readonly documentationLink: string | null;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;

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

@@ -3,6 +3,13 @@ import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
+import { type TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
+export declare const TimelineEffectPropValue: React.FC<{
+    readonly field: EffectSchemaFieldInfo;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly validatedLocation: CodePosition;
+    readonly sourceFrame: number;
+}>;
 export declare const TimelineEffectPropItem: React.FC<{
     readonly field: EffectSchemaFieldInfo;
     readonly validatedLocation: CodePosition;
@@ -10,4 +17,5 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineEffectPropItem = void 0;
+exports.TimelineEffectPropItem = exports.TimelineEffectPropValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -40,7 +40,7 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
+const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -58,13 +58,11 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const onDragValueChange = (0, react_1.useCallback)((value) => {
         const nextDragOverrideValue = propStatus !== null && isKeyframedStatus(propStatus)
             ? remotion_1.Internals.makeKeyframedDragOverride({
                 status: propStatus,
-                frame: jsxFrame,
+                frame: sourceFrame,
                 value,
             })
             : remotion_1.Internals.makeStaticDragOverride(value);
@@ -72,10 +70,10 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
     }, [
         field.effectIndex,
         field.key,
-        jsxFrame,
         nodePath,
         propStatus,
         setEffectDragOverrides,
+        sourceFrame,
     ]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         clearEffectDragOverrides(nodePath, field.effectIndex);
@@ -142,7 +140,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         setPropStatuses,
         validatedLocation,
     ]);
-    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
+    const onSaveKeyframed = (0, react_1.useCallback)((value, frame) => {
         if (!validatedLocation) {
             return Promise.reject(new Error('Cannot save'));
         }
@@ -154,7 +152,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
             nodePath,
             effectIndex: field.effectIndex,
             fieldKey: field.key,
-            sourceFrame,
+            sourceFrame: frame,
             value,
             schema: field.effectSchema,
             setPropStatuses,
@@ -197,7 +195,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         return null;
     }
     if (isKeyframedStatus(propStatus)) {
-        return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
+        return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
     }
     if (propStatus.status === 'computed') {
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
@@ -206,12 +204,13 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
-        frame: jsxFrame,
+        frame: sourceFrame,
         shouldResortToDefaultValueIfUndefined: true,
     });
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, }) => {
+exports.TimelineEffectPropValue = TimelineEffectPropValue;
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -220,6 +219,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -238,15 +239,18 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
         return overrides[field.key];
     }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
+        schema: field.effectSchema,
+        key: field.key,
+    });
     const keyframeControls = propStatus !== null &&
-        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            propStatus,
-            selected: selection.selected,
-            keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
-                schema: field.effectSchema,
-                key: field.key,
-            }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo })) : null;
+        (keyframeControlsMode === 'inspector'
+            ? keyframable
+            : (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+                propStatus,
+                selected: selection.selected,
+                keyframable,
+            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -356,7 +360,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         propStatus,
     ]);
     const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
-            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) })
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) })
         ] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

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

@@ -1,17 +1,20 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
+import type { TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
 export declare const TimelineExpandedRow: React.FC<{
     readonly node: TimelineTreeNode;
     readonly depth: number;
     readonly nestedDepth: number;
+    readonly rowDepthBase?: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly validatedLocation: CodePosition;
     readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -20,8 +20,8 @@ const rowLabel = {
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, }) => {
-    const rowDepth = (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: depth });
+const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+    const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
@@ -48,10 +48,10 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedSection: React.FC<{

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -36,11 +36,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
+const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -54,30 +53,17 @@ const separator = {
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
-    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+    const { getIsExpanded, propStatuses, toggleTrack, tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
-        getDragOverrides,
-        getEffectDragOverrides,
-        propStatuses: visualModePropStatuses,
-    }), [
-        sequence,
-        nodePathInfo,
-        getDragOverrides,
-        getEffectDragOverrides,
-        visualModePropStatuses,
-    ]);
+    });
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        propStatuses: visualModePropStatuses,
-    }), [sequence, nodePathInfo, getIsExpanded, visualModePropStatuses]);
+        propStatuses,
+    }), [sequence, nodePathInfo, getIsExpanded, propStatuses]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
@@ -11,6 +11,11 @@ export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected
     selected: boolean;
     keyframable: boolean;
 }) => boolean;
+export type TimelineKeyframeControlsMode = 'timeline' | 'inspector';
+export declare const shouldShowTimelineKeyframeNavigation: ({ propStatus, selected, }: {
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly selected: boolean;
+}) => boolean;
 export declare const TimelineKeyframeControls: React.FC<{
     readonly fieldKey: string;
     readonly propStatus: CanUpdateSequencePropStatus;
@@ -19,7 +24,8 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly keyframeDisplayOffset: number;
     readonly defaultValue: unknown;
     readonly dragOverrideValue: DragOverrideValue | undefined;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly effectIndex: number | null;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly mode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = exports.getSelectedKeyframeControlNodePathInfos = void 0;
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeNavigation = 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");
@@ -255,6 +255,13 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
+const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
+    if (selected) {
+        return true;
+    }
+    return isKeyframedStatus(propStatus);
+};
+exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
 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();
@@ -278,6 +285,18 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [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 propertySelected = (0, react_1.useMemo)(() => {
+        const propertySelection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(nodePathInfo);
+        if (propertySelection === null) {
+            return false;
+        }
+        const propertySelectionKey = (0, TimelineSelection_1.getTimelineSelectionKey)(propertySelection);
+        return selectedItems.some((selection) => (0, TimelineSelection_1.getTimelineSelectionKey)(selection) === propertySelectionKey);
+    }, [nodePathInfo, selectedItems]);
+    const showNavigationButtons = (0, exports.shouldShowTimelineKeyframeNavigation)({
+        propStatus,
+        selected: propertySelected,
+    });
     const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
         schema,
         key: fieldKey,
@@ -404,12 +423,14 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         ...navButtonStyle,
         cursor: previousDisabled ? 'default' : 'pointer',
         opacity: previousDisabled ? 0.35 : 1,
-    }), [previousDisabled]);
+        visibility: showNavigationButtons ? 'visible' : 'hidden',
+    }), [previousDisabled, showNavigationButtons]);
     const nextStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
         cursor: nextDisabled ? 'default' : 'pointer',
         opacity: nextDisabled ? 0.35 : 1,
-    }), [nextDisabled]);
+        visibility: showNavigationButtons ? 'visible' : 'hidden',
+    }), [nextDisabled, showNavigationButtons]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',