@remotion/studio 4.0.478 → 4.0.481

package/dist/components/Timeline/TimelineSequence.js

@@ -62,6 +62,7 @@ const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEd
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
+const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
@@ -154,7 +155,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
     var _a, _b;
-    var _c, _d, _e, _f;
+    var _c, _d, _e, _f, _g;
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
@@ -184,6 +185,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -279,6 +281,18 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePath,
+        propStatusesForOverride,
+        sequence: s,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource: (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _e !== void 0 ? _e : null,
+    });
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -298,6 +312,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             originalLocation,
             selectAsset,
             sequence: s,
+            sourceActions: [freezeFrameMenuItem],
         });
     }, [
         assetLinkInfo,
@@ -306,6 +321,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
+        freezeFrameMenuItem,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
@@ -324,7 +340,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_e = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _e !== void 0 ? _e : 1,
+        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -378,7 +394,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_f = video.durationInFrames) !== null && _f !== void 0 ? _f : 1 })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null] }));
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -41,6 +41,7 @@ const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
@@ -63,6 +64,8 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
 const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
+const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const labelContainerStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -77,6 +80,16 @@ const effectDropHighlight = {
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
 let currentSequenceDrag = null;
+const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
+    const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+        sequence,
+        nodePathInfo,
+    });
+    if (filteredTree.length === 0) {
+        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+    }
+    return (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled }));
+};
 const sequenceReorderWrapper = {
     position: 'relative',
 };
@@ -139,7 +152,7 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
     var _a, _b, _c;
-    var _d, _e;
+    var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -147,9 +160,10 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
@@ -616,58 +630,40 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         setIsRenaming(true);
     }, [canRenameThisSequence]);
-    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
-    const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
-        typeof freezeStatus.codeValue === 'number';
-    const canToggleFreeze = previewConnected &&
-        Boolean(sequence.controls) &&
-        nodePath !== null &&
-        validatedLocation !== null &&
-        freezeStatus !== undefined &&
-        freezeStatus !== null &&
-        freezeStatus.status === 'static';
-    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
-        if (!canToggleFreeze ||
-            !sequence.controls ||
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePath,
+        propStatusesForOverride,
+        sequence,
+        sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
+    });
+    const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
+        previewServerState.type === 'connected' &&
+        Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
+    const onAddEffect = (0, react_1.useCallback)(() => {
+        if (!canAddEffect ||
+            previewServerState.type !== 'connected' ||
             !nodePath ||
-            !validatedLocation ||
-            previewServerState.type !== 'connected') {
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
             return;
         }
-        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
-        const maxFrame = Number.isFinite(sequence.duration)
-            ? Math.max(0, sequence.duration - 1)
-            : rawFreezeFrame;
-        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
-        const remove = isFrozen;
-        (0, save_sequence_prop_1.saveSequenceProps)({
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: 'freeze',
-                    value: remove ? null : freezeFrame,
-                    defaultValue: null,
-                    schema: sequence.controls.schema,
-                },
-            ],
-            setPropStatuses,
+        setSelectedModal({
+            type: 'add-effect',
             clientId: previewServerState.clientId,
-            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
-            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
+            fileName: validatedLocation.source,
+            nodePath,
         });
     }, [
-        canToggleFreeze,
-        isFrozen,
+        canAddEffect,
         nodePath,
         previewServerState,
-        sequence.controls,
-        sequence.duration,
-        sequence.from,
-        sequenceFrameOffset,
-        setPropStatuses,
-        timelinePosition,
-        validatedLocation,
+        setSelectedModal,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
@@ -689,6 +685,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             selectAsset,
             sequence,
             sourceActions: [
+                ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
+                    ? [
+                        {
+                            type: 'item',
+                            id: 'add-effect',
+                            keyHint: null,
+                            label: 'Add effect...',
+                            leftItem: null,
+                            disabled: !canAddEffect,
+                            onClick: onAddEffect,
+                            quickSwitcherLabel: null,
+                            subMenu: null,
+                            value: 'add-effect',
+                        },
+                        {
+                            type: 'divider',
+                            id: 'add-effect-divider',
+                        },
+                    ]
+                    : []),
                 {
                     type: 'item',
                     id: 'rename-sequence',
@@ -703,37 +719,25 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     subMenu: null,
                     value: 'rename-sequence',
                 },
-                {
-                    type: 'item',
-                    id: 'toggle-freeze-frame',
-                    keyHint: null,
-                    label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
-                    leftItem: null,
-                    disabled: !canToggleFreeze,
-                    onClick: () => {
-                        onToggleFreezeFrame();
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'toggle-freeze-frame',
-                },
+                freezeFrameMenuItem,
             ],
         });
     }, [
         assetLinkInfo,
+        canAddEffect,
         canOpenInEditor,
         canRenameThisSequence,
-        canToggleFreeze,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
-        isFrozen,
+        freezeFrameMenuItem,
+        nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
+        onAddEffect,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
-        onToggleFreezeFrame,
         openInEditor,
         originalLocation,
         previewConnected,
@@ -798,7 +802,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",

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

@@ -1,14 +1,24 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, 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 { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import { type TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
+export declare const TimelineSequenceKeyframedValue: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly sourceFrame: number;
+}>;
 export declare const TimelineSequencePropItem: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequencePropItem = void 0;
+exports.TimelineSequencePropItem = exports.TimelineSequenceKeyframedValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -115,34 +115,73 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     }, [clearDragOverrides, nodePath]);
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
-const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
-    var _a, _b;
-    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+const TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propStatus, sourceFrame }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [getDragOverrides, nodePath, field.key]);
+    const onSaveKeyframed = (0, react_1.useCallback)((value, frame) => {
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
+        return (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+            fileName,
+            nodePath,
+            fieldKey: field.key,
+            sourceFrame: frame,
+            value,
+            schema,
+            setPropStatuses,
+            clientId,
+        });
+    }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
+    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
+        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
+            status: propStatus,
+            frame: sourceFrame,
+            value,
+        }));
+    }, [propStatus, field.key, nodePath, setDragOverrides, sourceFrame]);
+    const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
+    return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }));
+};
+exports.TimelineSequenceKeyframedValue = TimelineSequenceKeyframedValue;
+const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
+    var _a, _b;
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
     const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
+    const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
+        schema,
+        key: field.key,
+    });
     const keyframeControls = propStatus !== null &&
-        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            propStatus,
-            selected: selection.selected,
-            keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
-                schema,
-                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: schema, effectIndex: null, 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: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -203,41 +242,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         validatedLocation.source,
         propStatus,
     ]);
-    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
-        if (!clientId) {
-            return Promise.reject(new Error('Not connected to studio server'));
-        }
-        return (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            sourceFrame,
-            value,
-            schema,
-            setPropStatuses,
-            clientId,
-        });
-    }, [
-        clientId,
-        field.key,
-        nodePath,
-        schema,
-        setPropStatuses,
-        validatedLocation.source,
-    ]);
-    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
-        if (propStatus === null || !isKeyframedStatus(propStatus)) {
-            throw new Error('Expected keyframed status');
-        }
-        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
-            status: propStatus,
-            frame: jsxFrame,
-            value,
-        }));
-    }, [propStatus, field.key, jsxFrame, nodePath, setDragOverrides]);
-    const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
-        clearDragOverrides(nodePath);
-    }, [clearDragOverrides, nodePath]);
     const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
         var _a;
         if (propStatus === null || !isKeyframedStatus(propStatus)) {
@@ -302,8 +306,8 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     if (propStatus === null) {
         return null;
     }
-    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: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: 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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -92,12 +92,12 @@ const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
 };
 exports.getTimelineSequenceFromDragChanges = getTimelineSequenceFromDragChanges;
 const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
-    const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePathInfo.sequenceSubscriptionKey);
+    const key = (0, studio_shared_1.stringifySequenceExpandedRowKey)(nodePathInfo.sequenceSubscriptionKey);
     return tracks.find((candidate) => {
         if (candidate.nodePathInfo === null) {
             return false;
         }
-        return ((0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
+        return ((0, studio_shared_1.stringifySequenceExpandedRowKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
     });
 };
 const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
@@ -120,11 +120,12 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             ? sequences.find((sequence) => sequence.id === track.sequence.id)
             : null;
         if (!track ||
+            !track.nodePathInfo ||
             !originalSequence ||
             !isDurationDraggableSequence(originalSequence)) {
             return null;
         }
-        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
             return null;
         }
@@ -160,11 +161,12 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             ? sequences.find((sequence) => sequence.id === track.sequence.id)
             : null;
         if (!track ||
+            !track.nodePathInfo ||
             !originalSequence ||
             !isFromDraggableSequence(originalSequence)) {
             return null;
         }
-        const nodePath = nodePathInfo.sequenceSubscriptionKey;
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         if (!canUpdateFrom({ propStatuses, nodePath })) {
             return null;
         }

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -4,6 +4,7 @@ exports.TimelineTransformOriginField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-utils");
@@ -31,13 +32,11 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: false,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-        return `${formatted}%`;
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     const serialize = (0, react_1.useCallback)((x, y) => {
         var _a;
         return (0, transform_origin_utils_1.serializeTransformOrigin)({

package/dist/components/Timeline/TimelineTranslateField.js

@@ -4,6 +4,7 @@ exports.TimelineTranslateField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
 const leftDraggerStyle = {
@@ -27,13 +28,11 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: false,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-        return `${formatted}px`;
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -4,6 +4,7 @@ exports.TimelineUvCoordinateField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const leftDraggerStyle = {
     paddingLeft: 0,
@@ -49,12 +50,11 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        return (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: true,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;

package/dist/components/Timeline/call-add-keyframe.d.ts

@@ -1,4 +1,4 @@
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type AddSequenceKeyframeChange = {
     fileName: string;
@@ -6,7 +6,7 @@ export type AddSequenceKeyframeChange = {
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type AddEffectKeyframeChange = AddSequenceKeyframeChange & {
     effectIndex: number;
@@ -17,7 +17,7 @@ export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, s
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
@@ -34,7 +34,7 @@ export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex,
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;