@remotion/studio 4.0.504 → 4.0.506

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -45,6 +45,7 @@ const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const modals_1 = require("../../state/modals");
 const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const call_api_1 = require("../call-api");
@@ -61,6 +62,7 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -173,10 +175,10 @@ const getSequenceReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
-    var _a, _b, _c;
-    var _d, _e, _f;
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
+    var _a, _b;
+    var _c, _d;
+    const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -184,7 +186,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
@@ -195,7 +197,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
     const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { canOpenInEditor, editorInfo, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
@@ -227,7 +228,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         : displayName;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
+    const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
     const canReorderSequence = previewInteractive &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
@@ -469,7 +470,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         sequence.type === 'image'
         ? sequence.src
         : null;
-    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         if (nodePathInfo === null) {
@@ -478,15 +478,14 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
     const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
+    const runtimeHidden = (0, use_runtime_values_1.useRuntimeValue)(sequence.controls, 'hidden');
     const isItemHidden = (0, react_1.useMemo)(() => {
-        var _a;
         const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
             ? codeHiddenStatus.codeValue
             : undefined;
-        const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
-        const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
+        const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeHidden);
         return effective !== null && effective !== void 0 ? effective : false;
-    }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
+    }, [codeHiddenStatus, runtimeHidden]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -573,6 +572,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         }
         e.stopPropagation();
         if (action === 'open-connected-composition') {
+            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
             selectComposition(connectedCompositions[0], true, (0, get_sequence_double_click_action_1.getConnectedCompositionFrame)({
                 timelinePosition,
                 sequence,
@@ -588,13 +588,12 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         selectComposition,
         sequence,
         sequenceFrameOffset,
-        timelinePosition,
     ]);
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
-        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
+        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) === 'sequence';
     const onCancelRenaming = (0, react_1.useCallback)(() => {
         setIsRenaming(false);
     }, []);
@@ -636,44 +635,26 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         }
         setIsRenaming(true);
     }, [canRenameThisSequence]);
-    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewInteractive && 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 &&
         previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
-    const canCrop = (0, react_1.useMemo)(() => {
-        if (!previewInteractive ||
-            !sequence.controls ||
-            !nodePathInfo ||
-            !propStatusesForOverride ||
-            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
-            return false;
-        }
-        const activeSchema = remotion_1.Internals.flattenActiveSchema(sequence.controls.schema, (key) => {
-            var _a;
-            return (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation[key];
-        });
-        return (0, selected_outline_types_1.canEditSelectedOutlineCrop)({
-            schema: activeSchema,
-            propStatuses: propStatusesForOverride,
-        });
-    }, [
-        nodePathInfo,
-        previewInteractive,
-        propStatusesForOverride,
-        sequence.controls,
-        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
-    ]);
+    const canCrop = (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: (runtimeValues) => {
+            if (!previewInteractive ||
+                !sequence.controls ||
+                !nodePathInfo ||
+                !propStatusesForOverride ||
+                !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+                return false;
+            }
+            const activeSchema = remotion_1.Internals.flattenActiveSchema(sequence.controls.schema, (key) => runtimeValues[key]);
+            return (0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+                schema: activeSchema,
+                propStatuses: propStatusesForOverride,
+            });
+        },
+    });
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -707,9 +688,25 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             key: selected_outline_types_1.cropFieldKeys.left,
         }, undefined, undefined, { reveal: true });
     }, [canCrop, nodePathInfo, selectItem]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        var _a;
+        if (selectable) {
+            onSelect({ shiftKey: false, toggleKey: false });
+        }
+        const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
+            clientId: previewInteractive && previewServerState.type === 'connected'
+                ? previewServerState.clientId
+                : null,
+            nodePath,
+            propStatusesForOverride,
+            sequence,
+            sequenceFrameOffset,
+            setPropStatuses,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+            validatedSource: (_a = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _a !== void 0 ? _a : null,
+        });
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
-            assetLinkInfo,
+            assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
             deleteDisabled,
             disableInteractivityDisabled,
@@ -781,7 +778,6 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                 : [],
         });
     }, [
-        assetLinkInfo,
         canAddEffect,
         canCrop,
         canOpenInEditor,
@@ -791,7 +787,8 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         duplicateDisabled,
         editorInfo,
         fileLocation,
-        freezeFrameMenuItem,
+        mediaSrc,
+        nodePath,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
         onCrop,
@@ -799,15 +796,23 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
+        onSelect,
         openInEditor,
         originalLocation,
+        previewInteractive,
+        previewServerState,
+        propStatusesForOverride,
         selectAsset,
+        selectable,
         sequence,
+        sequenceFrameOffset,
+        setPropStatuses,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const canDropEffect = previewInteractive &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
+        ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (sequenceDropIndicator !== 'before') {
             return null;
@@ -870,11 +875,11 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
                 validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null, children, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLineWrapper, children: jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLine }) })) : null] }));
 };
-exports.TimelineSequenceItem = TimelineSequenceItem;
+exports.TimelineSequenceItem = react_1.default.memo(TimelineSequenceItemInner);

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

@@ -4,14 +4,21 @@ import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-s
 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<{
+type TimelineSequenceKeyframedValueBaseProps = {
     readonly field: SchemaFieldInfo;
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+};
+type TimelineSequenceKeyframedValueProps = TimelineSequenceKeyframedValueBaseProps & ({
     readonly sourceFrame: number;
-}>;
+    readonly keyframeDisplayOffset?: never;
+} | {
+    readonly sourceFrame?: never;
+    readonly keyframeDisplayOffset: number;
+});
+export declare const TimelineSequenceKeyframedValue: React.NamedExoticComponent<TimelineSequenceKeyframedValueProps>;
 export declare const TimelineSequencePropItem: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
@@ -22,3 +29,4 @@ export declare const TimelineSequencePropItem: React.FC<{
     readonly keyframeDisplayOffset: number;
     readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;
+export {};

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
@@ -132,7 +165,16 @@ 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 TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propStatus, sourceFrame }) => {
+const TimelineSequenceKeyframedValueAtSourceFrame = ({ field, nodePath, propStatus, sourceFrame, dragOverrideValue, onSave, onDragValueChangeAtFrame, onDragEnd, }) => {
+    const onDragValueChange = (0, react_1.useCallback)((value) => onDragValueChangeAtFrame(value, sourceFrame), [onDragValueChangeAtFrame, sourceFrame]);
+    return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
+};
+const TimelineSequenceKeyframedValueAtCurrentFrame = ({ keyframeDisplayOffset, ...props }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    return (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...props, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+};
+const TimelineSequenceKeyframedValueUnmemoized = (props) => {
+    const { field, fileName, nodePath, schema, propStatus } = props;
     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);
@@ -158,19 +200,28 @@ const TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, pro
             clientId,
         });
     }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
-    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
+    const onKeyframedDragValueChangeAtFrame = (0, react_1.useCallback)((value, sourceFrame) => {
         setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
             status: propStatus,
             frame: sourceFrame,
             value,
         }));
-    }, [propStatus, field.key, nodePath, setDragOverrides, sourceFrame]);
+    }, [propStatus, field.key, nodePath, setDragOverrides]);
     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 }));
+    const valueProps = {
+        field,
+        nodePath,
+        propStatus,
+        dragOverrideValue,
+        onSave: onSaveKeyframed,
+        onDragValueChangeAtFrame: onKeyframedDragValueChangeAtFrame,
+        onDragEnd: onKeyframedDragEnd,
+    };
+    return props.sourceFrame !== undefined ? (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtSourceFrame, { ...valueProps, sourceFrame: props.sourceFrame })) : (jsx_runtime_1.jsx(TimelineSequenceKeyframedValueAtCurrentFrame, { ...valueProps, keyframeDisplayOffset: props.keyframeDisplayOffset }));
 };
-exports.TimelineSequenceKeyframedValue = TimelineSequenceKeyframedValue;
+exports.TimelineSequenceKeyframedValue = react_1.default.memo(TimelineSequenceKeyframedValueUnmemoized);
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -178,8 +229,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     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 dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -257,7 +306,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         validatedLocation.source,
         propStatus,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         return [
             {
                 type: 'item',
@@ -272,7 +324,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-    }, [canShowReset, onReset]);
+    }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         var _a;
         if (!window.remotion_editorName ||
@@ -288,7 +340,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     if (propStatus === null) {
         return null;
     }
-    const fieldValue = isKeyframedStatus(propStatus) ? (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(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
+    const fieldValue = isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
     if (field.typeName === 'asset' && field.key === 'src') {
         return (jsx_runtime_1.jsx("div", { style: {
                 ...inlineSourceFieldRow,
@@ -297,6 +349,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             }, children: fieldValue }));
     }
     const row = (jsx_runtime_1.jsx(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, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -121,7 +121,7 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
-export declare const TimelineSequenceLeftEdgeDragHandle: React.FC<{
+export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticComponent<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
@@ -134,7 +134,7 @@ export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth,
     dragging: boolean;
     onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
 };
-export declare const TimelineSequenceRightEdgeDragHandle: React.FC<{
+export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticComponent<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
@@ -162,7 +195,7 @@ const getTrimBeforePlaybackRate = (sequence) => {
         !playbackRateComponentIdentities.has(componentIdentity)) {
         return 1;
     }
-    const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.currentRuntimeValueDotNotation.playbackRate;
+    const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.runtimeValues.getSnapshot().playbackRate;
     return typeof runtimePlaybackRate === 'number' ? runtimePlaybackRate : 1;
 };
 const isFromDraggableSequence = (sequence) => {
@@ -531,7 +564,7 @@ const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides,
         }
     }
 };
-const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -721,7 +754,7 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
 };
-exports.TimelineSequenceLeftEdgeDragHandle = TimelineSequenceLeftEdgeDragHandle;
+exports.TimelineSequenceLeftEdgeDragHandle = react_1.default.memo(TimelineSequenceLeftEdgeDragHandleInner);
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
@@ -944,7 +977,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -1128,4 +1161,4 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));
 };
-exports.TimelineSequenceRightEdgeDragHandle = TimelineSequenceRightEdgeDragHandle;
+exports.TimelineSequenceRightEdgeDragHandle = react_1.default.memo(TimelineSequenceRightEdgeDragHandleInner);

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTimeIndicators = exports.getTimelineTickScale = exports.getNiceSecondInterval = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+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");
@@ -171,7 +204,7 @@ const TimelineTimeIndicators = () => {
     return (jsx_runtime_1.jsx(TimelineTimeIndicatorsInner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
-const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
+const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, durationInFrames, fps }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const currentRef = ref.current;
@@ -271,4 +304,4 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
             return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
         }) }));
-};
+});

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoopDisplay } from 'remotion';
-export declare const TimelineVideoInfo: React.FC<{
+export declare const TimelineVideoInfo: React.NamedExoticComponent<{
     readonly src: string;
     readonly visualizationWidth: number;
     readonly naturalWidth: number;