@remotion/studio 4.0.477 → 4.0.479

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -63,6 +63,7 @@ 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 labelContainerStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -139,7 +140,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';
@@ -616,59 +617,18 @@ 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 ||
-            !nodePath ||
-            !validatedLocation ||
-            previewServerState.type !== 'connected') {
-            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,
-            clientId: previewServerState.clientId,
-            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
-            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
-        });
-    }, [
-        canToggleFreeze,
-        isFrozen,
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
         nodePath,
-        previewServerState,
-        sequence.controls,
-        sequence.duration,
-        sequence.from,
+        propStatusesForOverride,
+        sequence,
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedLocation,
-    ]);
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
+    });
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -703,37 +663,22 @@ 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,
         canOpenInEditor,
         canRenameThisSequence,
-        canToggleFreeze,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
-        isFrozen,
+        freezeFrameMenuItem,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
-        onToggleFreezeFrame,
         openInEditor,
         originalLocation,
         previewConnected,

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)) {
@@ -303,7 +307,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         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 }) }))] }));
+            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/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/TimelineVideoInfo.d.ts

@@ -12,4 +12,5 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly premountWidth: number;
     readonly postmountWidth: number;
     readonly loopDisplay: LoopDisplay | undefined;
+    readonly frozenMediaFrame: number | null;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
+const timeline_video_filmstrip_times_1 = require("./timeline-video-filmstrip-times");
 const outerStyle = {
     width: '100%',
     height: '100%',
@@ -22,7 +23,8 @@ const filmstripContainerStyle = {
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, }) => {
+const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -53,6 +55,94 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             return;
         }
         current.appendChild(canvas);
+        const drawRepeatedFrame = (frame) => {
+            const thumbnailWidth = Math.max(1, frame.displayWidth / window.devicePixelRatio);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let x = 0; x < canvas.width; x += thumbnailWidth) {
+                ctx.drawImage(frame, x, 0, thumbnailWidth, timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT);
+            }
+        };
+        const getCachedFrozenFrame = (timestamp) => {
+            const prefix = (0, timeline_utils_1.getFrameDatabaseKeyPrefix)(src);
+            const keys = Array.from(timeline_utils_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
+            let bestDistance = Infinity;
+            let bestFrame = null;
+            for (const key of keys) {
+                const frame = timeline_utils_1.frameDatabase.get(key);
+                if (!frame) {
+                    continue;
+                }
+                const distance = Math.abs((0, timeline_utils_1.getTimestampFromFrameDatabaseKey)(key) - timestamp);
+                if (distance < bestDistance) {
+                    bestDistance = distance;
+                    bestFrame = frame.frame;
+                }
+            }
+            return bestDistance <= MAX_FROZEN_FRAME_CACHE_DEVIATION
+                ? bestFrame
+                : null;
+        };
+        const times = (0, timeline_video_filmstrip_times_1.getTimelineVideoFilmstripTimes)({
+            trimBefore,
+            durationInFrames,
+            playbackRate,
+            fps,
+            loopDisplay,
+            frozenMediaFrame,
+        });
+        if (times.type === 'frozen') {
+            const timestamp = times.timestampInSeconds * timeline_utils_1.WEBCODECS_TIMESCALE;
+            const cachedFrame = getCachedFrozenFrame(timestamp);
+            if (cachedFrame) {
+                drawRepeatedFrame(cachedFrame);
+                return () => {
+                    current.removeChild(canvas);
+                };
+            }
+            (0, timeline_utils_1.extractFrames)({
+                timestampsInSeconds: ({ track, }) => {
+                    aspectRatio.current = track.width / track.height;
+                    timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
+                    return [times.timestampInSeconds];
+                },
+                src,
+                onVideoSample: (sample) => {
+                    let frame;
+                    try {
+                        frame = sample.toVideoFrame();
+                        const scale = (timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame.displayHeight) *
+                            window.devicePixelRatio;
+                        const transformed = (0, timeline_utils_1.resizeVideoFrame)({
+                            frame,
+                            scale,
+                        });
+                        if (transformed !== frame) {
+                            frame.close();
+                        }
+                        frame = undefined;
+                        const databaseKey = (0, timeline_utils_1.makeFrameDatabaseKey)(src, transformed.timestamp);
+                        (0, timeline_utils_1.addFrameToCache)(databaseKey, transformed);
+                        drawRepeatedFrame(transformed);
+                    }
+                    catch (e) {
+                        if (frame) {
+                            frame.close();
+                        }
+                        throw e;
+                    }
+                    finally {
+                        sample.close();
+                    }
+                },
+                signal: controller.signal,
+            }).catch((e) => {
+                setError(e);
+            });
+            return () => {
+                controller.abort();
+                current.removeChild(canvas);
+            };
+        }
         const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
             visualizationWidth: mediaNaturalWidth,
             loopDisplay,
@@ -85,13 +175,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
         // desired-timestamp -> filled-timestamp
         const filledSlots = new Map();
-        const fromSeconds = trimBefore / fps;
-        const visibleDurationInFrames = shouldRepeatVideo && loopDisplay
-            ? loopDisplay.durationInFrames
-            : durationInFrames;
-        // Trim is applied first, then playbackRate. Each composition frame
-        // advances the source video by `playbackRate` source frames.
-        const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
+        const { fromSeconds, toSeconds } = times;
         const targetWidth = shouldRepeatVideo
             ? targetCanvas.width
             : mediaNaturalWidth;
@@ -216,6 +300,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         durationInFrames,
         error,
         fps,
+        frozenMediaFrame,
         loopDisplay,
         mediaNaturalWidth,
         mediaVisualizationWidth,

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>;

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

@@ -1,11 +1,11 @@
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type DeleteSequenceKeyframeChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
     effectIndex: number;
@@ -15,7 +15,7 @@ export declare const callDeleteSequenceKeyframe: ({ fileName, nodePath, fieldKey
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
@@ -25,7 +25,7 @@ export declare const callDeleteEffectKeyframe: ({ fileName, nodePath, effectInde
     effectIndex: number;
     fieldKey: string;
     sourceFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/call-move-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 MoveSequenceKeyframeChange = {
     fileName: string;
@@ -6,7 +6,7 @@ export type MoveSequenceKeyframeChange = {
     fieldKey: string;
     fromFrame: number;
     toFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
     effectIndex: number;

package/dist/components/Timeline/call-update-keyframe-settings.d.ts

@@ -1,12 +1,12 @@
 import { type KeyframeSettings } from '@remotion/studio-shared';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export declare const callUpdateSequenceKeyframeSettings: ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
@@ -16,7 +16,7 @@ export declare const callUpdateEffectKeyframeSettings: ({ fileName, nodePath, ef
     effectIndex: number;
     fieldKey: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -1,7 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
-import type { TimelineSelection } from './TimelineSelection';
+import { type TimelineSelection } from './TimelineSelection';
 export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selection: TimelineSelection;
     sequences: TSequence[];
@@ -10,6 +10,7 @@ export declare const deleteSelectedTimelineItem: ({ selection, sequences, overri
     clientId: string;
     confirm: ConfirmationDialogFunction;
 }) => Promise<boolean> | null;
+export declare const getTimelineSelectionAfterDeletingItems: (selections: readonly TimelineSelection[]) => readonly TimelineSelection[];
 export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];