@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/TimelineDragHandler.js

@@ -40,10 +40,10 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const pointer_session_1 = require("../../helpers/pointer-session");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -109,13 +109,7 @@ const TimelineDragHandlerInner = () => {
         dragging: false,
     });
     const { isPlaying, play, pause, seek } = player_1.PlayerInternals.usePlayerMethods();
-    const scroller = (0, react_1.useRef)(null);
-    const stopInterval = () => {
-        if (scroller.current) {
-            clearInterval(scroller.current);
-            scroller.current = null;
-        }
-    };
+    const autoScroller = (0, react_1.useRef)(null);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         var _a, _b;
         if (e.button !== 0) {
@@ -124,7 +118,6 @@ const TimelineDragHandlerInner = () => {
         if (!isHighestContext) {
             return;
         }
-        stopInterval();
         if (!videoConfig) {
             return;
         }
@@ -148,87 +141,66 @@ const TimelineDragHandlerInner = () => {
         (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         pause();
     }, [isHighestContext, videoConfig, left, width, seek, isPlaying, pause]);
+    const onEdgeScrollTick = (0, react_1.useCallback)((directions) => {
+        var _a;
+        if (!videoConfig || directions.x === null) {
+            return;
+        }
+        const nextFrame = directions.x === 'left'
+            ? (0, timeline_scroll_logic_1.getFrameWhileScrollingLeft)({
+                durationInFrames: videoConfig.durationInFrames,
+                width,
+            })
+            : (0, timeline_scroll_logic_1.getFrameWhileScrollingRight)({
+                durationInFrames: videoConfig.durationInFrames,
+                width,
+            });
+        const scrollPos = directions.x === 'left'
+            ? (0, timeline_scroll_logic_1.getScrollPositionForCursorOnLeftEdge)({
+                nextFrame,
+                durationInFrames: videoConfig.durationInFrames,
+            })
+            : (0, timeline_scroll_logic_1.getScrollPositionForCursorOnRightEdge)({
+                nextFrame,
+                durationInFrames: videoConfig.durationInFrames,
+            });
+        // Update the imperative frame and apply the scroll before drawing, so
+        // every redraw (including the scroll event listener in TimelineSlider)
+        // sees a consistent (frame, scrollLeft) pair. Otherwise the playhead
+        // flickers between stale combinations while React commits the seek.
+        (0, imperative_state_1.setCurrentFrame)(nextFrame);
+        (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
+        (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
+        seek(nextFrame);
+    }, [videoConfig, width, seek]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
         var _a;
+        var _b;
         if (!videoConfig) {
             return;
         }
         if (!dragging.dragging) {
             return;
         }
-        const isRightOfArea = e.clientX >=
-            ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
-                left -
-                timeline_layout_1.TIMELINE_PADDING;
-        const isLeftOfArea = e.clientX <= left;
+        const directions = (_b = (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.update(e)) !== null && _b !== void 0 ? _b : {
+            x: null,
+            y: null,
+        };
+        // While edge auto-scrolling is active, the tick owns seeking
+        if (directions.x !== null) {
+            return;
+        }
         const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
             clientX: getClientXWithScroll(e.clientX) - left,
             durationInFrames: videoConfig.durationInFrames,
             width,
             extrapolate: 'clamp',
         });
-        if (isLeftOfArea && (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
-            if (scroller.current) {
-                return;
-            }
-            const scrollEvery = () => {
-                var _a;
-                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
-                    stopInterval();
-                    return;
-                }
-                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingLeft)({
-                    durationInFrames: videoConfig.durationInFrames,
-                    width,
-                });
-                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnLeftEdge)({
-                    nextFrame,
-                    durationInFrames: videoConfig.durationInFrames,
-                });
-                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
-                seek(nextFrame);
-                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
-            };
-            scrollEvery();
-            scroller.current = setInterval(() => {
-                scrollEvery();
-            }, 100);
-        }
-        else if (isRightOfArea &&
-            (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
-            if (scroller.current) {
-                return;
-            }
-            const scrollEvery = () => {
-                var _a;
-                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
-                    stopInterval();
-                    return;
-                }
-                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingRight)({
-                    durationInFrames: videoConfig.durationInFrames,
-                    width,
-                });
-                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnRightEdge)({
-                    nextFrame,
-                    durationInFrames: videoConfig.durationInFrames,
-                });
-                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
-                seek(nextFrame);
-                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
-            };
-            scrollEvery();
-            scroller.current = setInterval(() => {
-                scrollEvery();
-            }, 100);
-        }
-        else {
-            stopInterval();
-            seek(frame);
-        }
+        seek(frame);
     }, [videoConfig, dragging.dragging, left, width, seek]);
     const onPointerUpScrubbing = (0, react_1.useCallback)((e) => {
-        stopInterval();
+        var _a;
+        (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.stop();
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         if (!videoConfig) {
@@ -259,7 +231,8 @@ const TimelineDragHandlerInner = () => {
         }
     }, [dragging, left, play, videoConfig, setFrame, width]);
     const onPointerCancelScrubbing = (0, react_1.useCallback)(() => {
-        stopInterval();
+        var _a;
+        (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.stop();
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         if (!dragging.dragging) {
@@ -274,7 +247,12 @@ const TimelineDragHandlerInner = () => {
         if (!dragging.dragging) {
             return;
         }
-        return (0, pointer_session_1.startCapturedPointerSession)({
+        const scroller = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeVertical: false,
+            onTick: onEdgeScrollTick,
+        });
+        autoScroller.current = scroller;
+        const endSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: dragging,
             captureTarget: dragging.target,
             onMove: onPointerMoveScrubbing,
@@ -288,8 +266,16 @@ const TimelineDragHandlerInner = () => {
                 }
             },
         });
+        return () => {
+            scroller.stop();
+            if (autoScroller.current === scroller) {
+                autoScroller.current = null;
+            }
+            endSession();
+        };
     }, [
         dragging,
+        onEdgeScrollTick,
         onPointerCancelScrubbing,
         onPointerMoveScrubbing,
         onPointerUpScrubbing,

package/dist/components/Timeline/TimelineEffectItem.js

@@ -321,7 +321,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };

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

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

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -7,8 +7,10 @@ const react_1 = 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");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
@@ -39,7 +41,11 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame }) => {
+const TimelineComputedEffectPropValue = ({ field, propStatus, runtimeValueStore, validatedLocation }) => {
+    const runtimeValue = (0, use_runtime_values_1.useRuntimeStoreValue)(runtimeValueStore, field.key);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus, field: field, runtimeValue: runtimeValue, validatedLocation: validatedLocation }));
+};
+const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFrame, runtimeValueStore }) => {
     var _a;
     var _b;
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -178,22 +184,22 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     }
     if (effectStatus.type === 'cannot-update-effect') {
         if (effectStatus.reason === 'computed') {
-            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed", fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
+            return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: { status: 'computed' }, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
         }
         if (effectStatus.reason === 'not-call-expression') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline", formattedValue: false });
         }
         if (effectStatus.reason === 'not-found') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code", formattedValue: false }));
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
     if (effectStatus.type === 'cannot-update-sequence') {
         if (effectStatus.reason === 'not-found') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+            return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code", formattedValue: false }));
         }
         if (effectStatus.reason === 'error') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error" });
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error", formattedValue: false });
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
@@ -204,7 +210,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
         return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
     }
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TimelineSchemaField_1.TIMELINE_COMPUTED_EFFECT_FIX_LINK }));
+        return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: propStatus, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         propStatus,
@@ -216,14 +222,15 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
-const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, runtimeValueStore, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -241,6 +248,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
         return overrides[field.key];
@@ -323,17 +334,17 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         ];
     }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (!window.remotion_editorName ||
-            previewServerState.type !== 'connected') {
+        if (!canOpenInEditor || !defaultEditorId) {
             return;
         }
         event.stopPropagation();
         (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            editorId: defaultEditorId,
             originalPosition: validatedLocation,
             property: field.key,
         }).catch(() => undefined);
-    }, [field.key, previewServerState.type, validatedLocation]);
-    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, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) }) }));
+    }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
+    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, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -16,7 +16,7 @@ type TimelineExpandedRowProps = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
-    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
+    readonly keyframeControlsMode: TimelineKeyframeControlsMode;
 };
 export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;
 export {};

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -45,19 +45,19 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -76,7 +76,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return null;
     }
     return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset })
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
                 ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };

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

@@ -1,8 +1,4 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
-    readonly shown: TimelineTrackData[];
-    readonly hasBeenCut: boolean;
-    readonly isStill: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -37,7 +37,7 @@ exports.TimelineHeightContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const TimelineSelection_1 = require("./TimelineSelection");
-const use_timeline_height_1 = require("./use-timeline-height");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const baseStyle = {
     display: 'flex',
     flex: 1,
@@ -45,9 +45,9 @@ const baseStyle = {
     overflowX: 'hidden',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
-const TimelineHeightContainerInner = ({ shown, hasBeenCut, isStill, children }) => {
-    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut, isStill });
-    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
+const TimelineHeightContainerInner = ({ children }) => {
+    const { totalSize } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height: totalSize }), [totalSize]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };
 exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const TimelineImageInfo: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
+    readonly offsetInPixels: number;
 }>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -15,7 +15,7 @@ const containerStyle = {
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,
 };
-const TimelineImageInfo = ({ src, visualizationWidth }) => {
+const TimelineImageInfo = ({ src, visualizationWidth, offsetInPixels }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
@@ -38,13 +38,14 @@ const TimelineImageInfo = ({ src, visualizationWidth }) => {
             (0, timeline_utils_1.drawRepeatingImageThumbnail)({
                 canvas,
                 image: img,
+                offsetInPixels: offsetInPixels * window.devicePixelRatio,
             });
         };
         img.src = src;
         return () => {
             current.removeChild(canvas);
         };
-    }, [src, visualizationWidth]);
+    }, [offsetInPixels, src, visualizationWidth]);
     return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
 };
 exports.TimelineImageInfo = TimelineImageInfo;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -150,8 +151,15 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
             propStatus: sequenceSelectedPropStatus,
             nodePath,
             fileName: nodePath.absolutePath,
-            keyframeDisplayOffset: track.keyframeDisplayOffset,
-            sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: sequenceSelectedPropStatus,
+                keyframeDisplayOffset: track.keyframeDisplayOffset,
+            }),
+            sourceFrame: timelinePosition -
+                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: sequenceSelectedPropStatus,
+                    keyframeDisplayOffset: track.keyframeDisplayOffset,
+                }),
             defaultValue: fieldNode.field.fieldSchema.default,
             dragOverrideValue: ((_c = getDragOverrides(nodePath)) !== null && _c !== void 0 ? _c : {})[fieldNode.field.key],
             schema: track.sequence.controls.schema,
@@ -175,8 +183,15 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         propStatus: effectSelectedPropStatus,
         nodePath,
         fileName: nodePath.absolutePath,
-        keyframeDisplayOffset: track.keyframeDisplayOffset,
-        sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: effectSelectedPropStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        }),
+        sourceFrame: timelinePosition -
+            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: effectSelectedPropStatus,
+                keyframeDisplayOffset: track.keyframeDisplayOffset,
+            }),
         defaultValue: fieldNode.field.fieldSchema.default,
         dragOverrideValue: getEffectDragOverrides(nodePath, fieldNode.field.effectIndex)[fieldNode.field.key],
         schema: fieldNode.field.effectSchema,
@@ -278,6 +293,9 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
 const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
+    if (propStatus.status === 'computed') {
+        return false;
+    }
     if (selected) {
         return true;
     }
@@ -297,7 +315,11 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const jsxFrame = timelinePosition - keyframeDisplayOffset;
+    const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus,
+        keyframeDisplayOffset,
+    });
+    const jsxFrame = timelinePosition - resolvedKeyframeDisplayOffset;
     const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
     const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
         if (!isKeyframedStatus(propStatus)) {
@@ -324,7 +346,8 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         key: fieldKey,
     });
     const canAddKeyframe = keyframable;
-    const canToggleKeyframe = propStatus.status !== 'computed' &&
+    const canToggleKeyframe = (0, browser_studio_operations_1.canUseKeyframeOperations)() &&
+        propStatus.status !== 'computed' &&
         (hasKeyframeAtCurrentFrame || canAddKeyframe);
     const selectedNodePathInfos = (0, react_1.useMemo)(() => (0, exports.getSelectedKeyframeControlNodePathInfos)({
         clickedNodePathInfo: nodePathInfo,
@@ -336,7 +359,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         propStatus,
         nodePath,
         fileName,
-        keyframeDisplayOffset,
+        keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
         sourceFrame: jsxFrame,
         defaultValue,
         dragOverrideValue,
@@ -349,7 +372,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         fieldKey,
         fileName,
         jsxFrame,
-        keyframeDisplayOffset,
+        resolvedKeyframeDisplayOffset,
         nodePath,
         nodePathInfo,
         propStatus,

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -22,6 +22,7 @@ const TimelineKeyframedValue = ({ field, propStatus, sourceFrame, dragOverrideVa
     }, [propStatus, sourceFrame]);
     const fakeStatus = (0, react_1.useMemo)(() => ({
         status: 'static',
+        keyframeDisplayOffsetAdjustment: null,
         codeValue: computedValue,
     }), [computedValue]);
     const effectiveValue = (0, react_1.useMemo)(() => {

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

@@ -1,6 +1,2 @@
 import React from 'react';
-import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineList: React.FC<{
-    readonly timeline: TimelineTrackData[];
-    readonly showTimePadding: boolean;
-}>;
+export declare const TimelineList: React.FC;

package/dist/components/Timeline/TimelineList.js

@@ -2,22 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const nest_timeline_tracks_1 = require("./nest-timeline-tracks");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
-const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
+    position: 'relative',
 };
-const TimelineListTrack = ({ nestedTrack }) => {
+const TimelineListTrack = ({ row }) => {
     var _a;
-    const { track, children, siblingIndex } = nestedTrack;
-    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, children: children.map((child) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: child }, child.track.sequence.id))) }) }));
+    const { afterDropLineOffset, siblingIndex, track } = row;
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }));
 };
-const TimelineList = ({ timeline, showTimePadding }) => {
-    const nestedTimeline = (0, react_1.useMemo)(() => (0, nest_timeline_tracks_1.nestTimelineTracks)(timeline), [timeline]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [showTimePadding ? jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}) : null, nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
+const TimelineList = () => {
+    const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
+    return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
+                height: virtualItem.size,
+                left: 0,
+                position: 'absolute',
+                top: virtualItem.start,
+                width: '100%',
+            }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key))) }));
 };
 exports.TimelineList = TimelineList;