@remotion/studio 4.0.505 → 4.0.507

package/dist/components/ShowOutlinesProvider.js

@@ -7,7 +7,7 @@ const editor_outlines_1 = require("../state/editor-outlines");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ShowOutlinesProvider = ({ children }) => {
     const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
-    const [hoveredSequence, setHoveredSequence] = (0, react_1.useState)(null);
+    const timelineSequenceHoverStore = (0, react_1.useMemo)(() => (0, timeline_sequence_hover_1.createTimelineSequenceHoverStore)(), []);
     const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
         setEditorShowOutlinesState((prevState) => {
             const newVal = newValue(prevState);
@@ -21,7 +21,6 @@ const ShowOutlinesProvider = ({ children }) => {
             setEditorShowOutlines,
         };
     }, [editorShowOutlines, setEditorShowOutlines]);
-    const timelineSequenceHoverCtx = (0, react_1.useMemo)(() => ({ hoveredSequence, setHoveredSequence }), [hoveredSequence]);
-    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: jsx_runtime_1.jsx(timeline_sequence_hover_1.TimelineSequenceHoverContext.Provider, { value: timelineSequenceHoverCtx, children: children }) }));
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: jsx_runtime_1.jsx(timeline_sequence_hover_1.TimelineSequenceHoverContext.Provider, { value: timelineSequenceHoverStore, children: children }) }));
 };
 exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/SidebarRenderButton.js

@@ -9,7 +9,7 @@ const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
 const SidebarRenderButton = ({ composition, visible }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {

package/dist/components/SvgImportDialog.js

@@ -25,7 +25,7 @@ const inlineCode = {
     color: 'inherit',
 };
 const useSvgImportDialog = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     return (0, react_1.useCallback)(() => {
         return new Promise((resolve) => {
             let settled = false;
@@ -48,7 +48,7 @@ const useSvgImportDialog = () => {
 };
 exports.useSvgImportDialog = useSvgImportDialog;
 const SvgImportDialog = ({ state }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const settledRef = (0, react_1.useRef)(false);
     const closeCurrentModal = (0, react_1.useCallback)(() => {
         setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'svg-import-dialog' && modal.id === state.id

package/dist/components/TimeValue.js

@@ -52,7 +52,7 @@ const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayer();
+    const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayerMethods();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const ref = (0, react_1.useRef)(null);
     const onTextChange = (0, react_1.useCallback)((newVal) => {

package/dist/components/Timeline/EasingEditorModal.js

@@ -75,8 +75,9 @@ const SPRING_FALLBACKS = {
     stiffness: DEFAULT_SPRING_EASING.stiffness,
 };
 const inlineContainer = {
-    width: '100%',
     minWidth: 0,
+    paddingBottom: 12,
+    width: '100%',
 };
 const segmentedControlWrapper = {
     display: 'flex',
@@ -85,27 +86,27 @@ const segmentedControlWrapper = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
 const presetButtonsWrapper = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 6,
-    justifyContent: 'flex-start',
-    marginBottom: 8,
-    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+    margin: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 8px`,
+    overflow: 'hidden',
 };
 const inspectorPresetButtonsWrapper = {
     ...presetButtonsWrapper,
-    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
+    margin: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
 };
 const presetButtonBase = {
     alignItems: 'center',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: `1px solid ${colors_1.WHITE_ALPHA_05}`,
-    borderRadius: 4,
+    backgroundColor: colors_1.TRANSPARENT,
+    border: 'none',
     display: 'inline-flex',
     height: 34,
     justifyContent: 'center',
     padding: 0,
-    width: 52,
+    width: '100%',
 };
 const presetPreviewSvgStyle = {
     display: 'block',
@@ -172,7 +173,10 @@ const easingToSpring = (easing) => {
         : DEFAULT_SPRING_EASING;
 };
 const easingToMode = (easing) => {
-    return isSpringEasing(easing) ? 'spring' : 'bezier';
+    if (isSpringEasing(easing)) {
+        return 'spring';
+    }
+    return easing.type === 'step1' ? 'hold' : 'bezier';
 };
 const roundToDecimalPlaces = (value, decimalPlaces) => {
     const factor = 10 ** decimalPlaces;
@@ -243,6 +247,7 @@ const areEasingsEqual = (first, second) => {
     }
     switch (first.type) {
         case 'linear':
+        case 'step1':
             return true;
         case 'spring':
             return (second.type === 'spring' &&
@@ -322,6 +327,8 @@ const getEasingFunction = (easing) => {
     switch (easing.type) {
         case 'linear':
             return remotion_1.Easing.linear;
+        case 'step1':
+            return remotion_1.Easing.step1;
         case 'bezier':
             return remotion_1.Easing.bezier(easing.x1, easing.y1, easing.x2, easing.y2);
         case 'spring':
@@ -338,6 +345,13 @@ const getEasingFunction = (easing) => {
     }
 };
 const getPresetPreviewPath = (easing) => {
+    if (easing.type === 'step1') {
+        const startX = presetPreviewXToSvg(0);
+        const endX = presetPreviewXToSvg(1);
+        const startY = presetPreviewYToSvg(0);
+        const endY = presetPreviewYToSvg(1);
+        return `M ${startX} ${startY} L ${endX} ${startY} L ${endX} ${endY}`;
+    }
     const easingFunction = getEasingFunction(easing);
     const samples = 36;
     const points = [];
@@ -386,18 +400,24 @@ const EasingGraphScaffold = ({ labels }) => {
 };
 const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const selected = areEasingsEqual(currentEasing, preset.easing);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
     const style = (0, react_1.useMemo)(() => ({
         ...presetButtonBase,
-        backgroundColor: selected ? colors_1.EASING_SELECTED_BACKGROUND : colors_1.INPUT_BACKGROUND,
-        borderColor: selected ? colors_1.BLUE : colors_1.WHITE_ALPHA_05,
-        cursor: disabled ? 'not-allowed' : 'pointer',
+        backgroundColor: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+        cursor: disabled ? 'not-allowed' : undefined,
         opacity: disabled ? 0.45 : 1,
     }), [disabled, selected]);
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.WHITE, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;
@@ -590,7 +610,9 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         const easing = nextMode === 'spring'
             ? serializeSpring(springRef.current)
-            : serializeBezier(bezierRef.current);
+            : nextMode === 'hold'
+                ? studio_shared_1.HOLD_KEYFRAME_EASING
+                : serializeBezier(bezierRef.current);
         const version = applyLiveEasing(easing);
         commitEasing(easing, version);
     }, [applyLiveEasing, commitEasing, mode, previewServerState.type]);
@@ -605,11 +627,18 @@ const EasingEditor = ({ state, renderHeader }) => {
             commitEasing(serializeSpring(nextSpring), springVersion);
             return;
         }
+        if (easing.type === 'step1') {
+            setMode('hold');
+            const holdVersion = applyLiveEasing(studio_shared_1.HOLD_KEYFRAME_EASING);
+            commitEasing(studio_shared_1.HOLD_KEYFRAME_EASING, holdVersion);
+            return;
+        }
         const nextBezier = easingToBezier(easing);
         setMode('bezier');
         const bezierVersion = setBezierAndPreview(nextBezier);
         commitEasing(serializeBezier(nextBezier), bezierVersion);
     }, [
+        applyLiveEasing,
         commitEasing,
         previewServerState.type,
         setBezierAndPreview,
@@ -709,9 +738,15 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         return points.join(' ');
     }, [spring]);
+    const holdPath = (0, react_1.useMemo)(() => `M ${startPoint.x} ${startPoint.y} L ${endPoint.x} ${startPoint.y} L ${endPoint.x} ${endPoint.y}`, [endPoint, startPoint]);
     const disabled = previewServerState.type !== 'connected';
     const graphLabels = getEasingGraphLabels(getCurrentEasingUpdates());
-    const currentEasing = (0, react_1.useMemo)(() => mode === 'spring' ? serializeSpring(spring) : serializeBezier(bezier), [bezier, mode, spring]);
+    const currentEasing = (0, react_1.useMemo)(() => {
+        if (mode === 'spring') {
+            return serializeSpring(spring);
+        }
+        return mode === 'hold' ? studio_shared_1.HOLD_KEYFRAME_EASING : serializeBezier(bezier);
+    }, [bezier, mode, spring]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -726,12 +761,18 @@ const EasingEditor = ({ state, renderHeader }) => {
                 onClick: () => switchMode('spring'),
                 selected: mode === 'spring',
             },
+            {
+                key: 'hold',
+                label: 'Hold',
+                onClick: () => switchMode('hold'),
+                selected: mode === 'hold',
+            },
         ];
     }, [mode, switchMode]);
     const coordinatesGrid = (0, react_1.useMemo)(() => ({
         ...coordinatesGridBase,
         gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-        padding: '0 12px 12px',
+        padding: '0 12px',
     }), []);
     const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
     return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -748,7 +789,7 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Y2" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[3], status: "ok", onValueChange: (value) => setCoordinate(1, 'y', value, false), onValueChangeEnd: (value) => setCoordinate(1, 'y', value, true), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] })
                         ] })
-                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : mode === 'spring' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: colors_1.WHITE })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
@@ -766,6 +807,9 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Allow tail" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: (_b = spring.allowTail) !== null && _b !== void 0 ? _b : false, onChange: setAllowTail, name: "spring-allow-tail", disabled: disabled, variant: "small" }) })
                                 ] })
                         ] })
-                ] }))] }));
+                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Hold easing curve", children: [
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: holdPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE })
+                        ] }), modeSwitcher] }))] }));
 };
 exports.EasingEditor = EasingEditor;

package/dist/components/Timeline/Timeline.js

@@ -45,6 +45,7 @@ const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -188,6 +189,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
                 svgImportMode: 'image',
             });
         }
@@ -255,13 +257,29 @@ const TimelineInner = () => {
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
     }, [durationInFrames, timeline]);
+    // Keep `filtered` complete so a future toggle can show every programmatic
+    // instance without recalculating the timeline or losing its instance index.
+    const collapsed = (0, react_1.useMemo)(() => {
+        const seenNodePaths = new Set();
+        return filtered.filter((track) => {
+            if (track.nodePathInfo === null) {
+                return true;
+            }
+            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
+            if (seenNodePaths.has(key)) {
+                return false;
+            }
+            seenNodePaths.add(key);
+            return true;
+        });
+    }, [filtered]);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return filtered.length > maxTimelineTracks
-            ? filtered.slice(0, maxTimelineTracks)
-            : filtered;
-    }, [filtered, maxTimelineTracks]);
-    const hasBeenCut = filtered.length > shown.length;
+        return collapsed.length > maxTimelineTracks
+            ? collapsed.slice(0, maxTimelineTracks)
+            : collapsed;
+    }, [collapsed, maxTimelineTracks]);
+    const hasBeenCut = collapsed.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;

package/dist/components/Timeline/TimelineAssetField.js

@@ -34,7 +34,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     if (field.fieldSchema.type !== 'asset') {
         throw new Error('TimelineAssetField rendered for non-asset field');
     }
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
     const inlineSourceAction = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineDragHandler.js

@@ -108,7 +108,7 @@ const TimelineDragHandlerInner = () => {
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });
-    const { playing, play, pause, seek } = player_1.PlayerInternals.usePlayer();
+    const { isPlaying, play, pause, seek } = player_1.PlayerInternals.usePlayerMethods();
     const scroller = (0, react_1.useRef)(null);
     const stopInterval = () => {
         if (scroller.current) {
@@ -140,14 +140,14 @@ const TimelineDragHandlerInner = () => {
         seek(frame);
         setDragging({
             dragging: true,
-            wasPlaying: playing,
+            wasPlaying: isPlaying(),
             button: e.button,
             pointerId: e.pointerId,
             target: e.currentTarget,
         });
         (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         pause();
-    }, [isHighestContext, videoConfig, left, width, seek, playing, pause]);
+    }, [isHighestContext, videoConfig, left, width, seek, isPlaying, pause]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
         var _a;
         if (!videoConfig) {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineDuplicateCount: React.FC<{
+    readonly count: number;
+}>;

package/dist/components/Timeline/TimelineDuplicateCount.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineDuplicateCount = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const badgeStyle = {
+    alignItems: 'center',
+    border: `1px solid ${colors_1.WHITE_ALPHA_20}`,
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE_ALPHA_60,
+    display: 'inline-flex',
+    flexShrink: 0,
+    fontSize: 10,
+    fontWeight: 300,
+    height: 14,
+    justifyContent: 'center',
+    lineHeight: '12px',
+    minWidth: 18,
+    padding: '0 3px',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const TimelineDuplicateCount = ({ count }) => {
+    const label = `${count} other programmatically duplicated ${count === 1 ? 'instance is' : 'instances are'} hidden`;
+    return (jsx_runtime_1.jsxs("span", { style: badgeStyle, title: label, "aria-label": label, children: ["+", count] }));
+};
+exports.TimelineDuplicateCount = TimelineDuplicateCount;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -209,6 +209,10 @@ 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 timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset }));
+};
 const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
     var _b;
@@ -217,8 +221,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase
@@ -324,7 +326,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             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, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) }) }));
+    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: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -35,8 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
@@ -71,29 +71,9 @@ const areTimelineExpandedKeyframeRowPropsEqual = (prevProps, nextProps) => {
         prevProps.canEditEasing !== nextProps.canEditEasing ||
         prevProps.showSeparator !== nextProps.showSeparator ||
         prevProps.keyframes.length !== nextProps.keyframes.length ||
-        prevProps.nodePathInfo.index !== nextProps.nodePathInfo.index ||
-        prevProps.nodePathInfo.numberOfSequencesWithThisNodePath !==
-            nextProps.nodePathInfo.numberOfSequencesWithThisNodePath ||
-        prevProps.nodePathInfo.supportsEffects !==
-            nextProps.nodePathInfo.supportsEffects ||
-        (0, studio_shared_1.stringifySequenceSubscriptionKey)(prevProps.nodePathInfo.sequenceSubscriptionKey) !==
-            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nextProps.nodePathInfo.sequenceSubscriptionKey) ||
-        prevProps.nodePathInfo.auxiliaryKeys.length !==
-            nextProps.nodePathInfo.auxiliaryKeys.length) {
+        !(0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(prevProps.nodePathInfo, nextProps.nodePathInfo)) {
         return false;
     }
-    const prevVideoConfig = prevProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
-    const nextVideoConfig = nextProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
-    if (prevVideoConfig !== nextVideoConfig &&
-        (prevVideoConfig === null ||
-            nextVideoConfig === null ||
-            prevVideoConfig.durationInFrames !== nextVideoConfig.durationInFrames ||
-            prevVideoConfig.fps !== nextVideoConfig.fps ||
-            prevVideoConfig.height !== nextVideoConfig.height ||
-            prevVideoConfig.width !== nextVideoConfig.width)) {
-        return false;
-    }
-    return (prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame) &&
-        prevProps.nodePathInfo.auxiliaryKeys.every((key, index) => key === nextProps.nodePathInfo.auxiliaryKeys[index]));
+    return prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame);
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized, areTimelineExpandedKeyframeRowPropsEqual);

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

@@ -5,7 +5,7 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
 import type { TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
-export declare const TimelineExpandedRow: React.FC<{
+type TimelineExpandedRowProps = {
     readonly node: TimelineTreeNode;
     readonly depth: number;
     readonly nestedDepth: number;
@@ -17,4 +17,6 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
     readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
-}>;
+};
+export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -21,7 +21,7 @@ const rowLabel = {
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
@@ -60,4 +60,4 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, rowDepthBase, getIsExpa
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
         }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
-exports.TimelineExpandedRow = TimelineExpandedRow;
+exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
+type TimelineExpandedTrackKeyframesProps = {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
-}>;
+};
+export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<TimelineExpandedTrackKeyframesProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedTrackKeyframes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
 const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
 const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
@@ -16,4 +17,13 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeD
     });
     return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
-exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);
+const areTimelineExpandedTrackKeyframesPropsEqual = (first, second) => {
+    var _a, _b, _c, _d;
+    return (first.keyframeDisplayOffset === second.keyframeDisplayOffset &&
+        ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
+        ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
+            ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
+        first.sequence.effects === second.sequence.effects &&
+        (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo));
+};
+exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner, areTimelineExpandedTrackKeyframesPropsEqual);

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -343,7 +343,9 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                 await onSave(option.value);
                 return;
             }
-            await (0, install_required_package_1.installRequiredPackages)(['@remotion/google-fonts']);
+            await (0, install_required_package_1.installRequiredPackages)([
+                { name: '@remotion/google-fonts', version: null },
+            ]);
             const googleFont = getGoogleFontSourceEdit({
                 fontFamily: (_a = option.value) !== null && _a !== void 0 ? _a : option.label,
                 importName: option.googleFontImportName,

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -131,6 +131,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         propStatuses,
         includeTextContent: false,
         includeSourceControls: false,
+        runtimeValues: null,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {

package/dist/components/Timeline/TimelineSelection.js

@@ -448,6 +448,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             propStatuses,
             includeTextContent: false,
             includeSourceControls: false,
+            runtimeValues: null,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,