@remotion/studio 4.0.505 → 4.0.506

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/Timeline.js

@@ -188,6 +188,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
                 svgImportMode: 'image',
             });
         }

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/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/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/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,

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");
@@ -175,9 +176,9 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
 const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
-    var _a, _b, _c;
-    var _d, _e;
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    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';
@@ -185,7 +186,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     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)();
@@ -227,7 +228,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         : 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;
@@ -477,15 +478,14 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         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 ||
@@ -593,7 +593,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     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);
     }, []);
@@ -638,29 +638,23 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     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' ||
@@ -818,7 +812,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     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;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -195,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) => {

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -71,7 +71,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             const sequencePropStatus = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
             const { merged: sequenceValuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
                 schema: sequence.controls.schema,
-                currentValue: sequence.controls.currentRuntimeValueDotNotation,
+                currentValue: sequence.controls.runtimeValues.getSnapshot(),
                 overrideValues: {},
                 propStatus: sequencePropStatus,
                 frame: null,

package/dist/components/Timeline/should-subscribe-to-sequence-props.d.ts

@@ -1,4 +1,4 @@
 import type { TSequence } from 'remotion';
 export declare const shouldSubscribeToSequenceProps: (sequence: TSequence, previewConnected: boolean) => sequence is TSequence & {
-    readonly controls: import("remotion").SequenceControls;
+    readonly controls: import("remotion").SequenceRegistrationControls;
 };

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceControls } from 'remotion';
+import type { SequenceRegistrationControls } from 'remotion';
 type LinkInfo = {
     kind: 'local';
     assetPath: string;
@@ -13,7 +13,7 @@ export declare const splitRemoteSourceForMiddleEllipsis: (src: string) => {
     leading: string;
     trailing: string;
 };
-export declare const getTimelineAssetSrcFromSchema: (controls: SequenceControls | null) => string | null;
+export declare const getTimelineAssetSrcFromSchema: (controls: SequenceRegistrationControls | null, runtimeValues?: Readonly<Record<string, unknown>> | undefined) => string | null;
 export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
 export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
 export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -21,11 +21,11 @@ const splitRemoteSourceForMiddleEllipsis = (src) => {
     };
 };
 exports.splitRemoteSourceForMiddleEllipsis = splitRemoteSourceForMiddleEllipsis;
-const getTimelineAssetSrcFromSchema = (controls) => {
+const getTimelineAssetSrcFromSchema = (controls, runtimeValues = controls === null || controls === void 0 ? void 0 : controls.runtimeValues.getSnapshot()) => {
     if (!controls || !(0, studio_shared_1.getAssetSchemaKeys)(controls.schema).includes('src')) {
         return null;
     }
-    const { src } = controls.currentRuntimeValueDotNotation;
+    const { src } = runtimeValues !== null && runtimeValues !== void 0 ? runtimeValues : {};
     return typeof src === 'string' ? src : null;
 };
 exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const imperative_state_1 = require("./imperative-state");
@@ -37,6 +38,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(sequence.controls);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -45,12 +47,14 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         propStatuses,
         includeTextContent: false,
         includeSourceControls: false,
+        runtimeValues,
     }), [
         propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
         sequence,
+        runtimeValues,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -132,6 +132,7 @@ const useTimelineAssetDrop = () => {
                 event,
                 fps: videoConfig.fps,
                 from: frame,
+                preferCompositionStart: false,
             });
         }
         finally {

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -9,6 +9,7 @@ export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, include
     filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
     propStatuses: import("remotion").PropStatuses;
+    runtimeValues: Readonly<Record<string, unknown>>;
     toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     tree: import("../../helpers/timeline-layout").TimelineTreeNode[];
 };

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -4,6 +4,7 @@ exports.useTimelineExpandedTree = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
@@ -14,6 +15,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(sequence.controls);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -22,6 +24,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         propStatuses: visualModePropStatuses,
         includeTextContent,
         includeSourceControls,
+        runtimeValues,
     }), [
         sequence,
         nodePathInfo,
@@ -30,6 +33,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         visualModePropStatuses,
         includeTextContent,
         includeSourceControls,
+        runtimeValues,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
@@ -57,6 +61,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         filteredTree,
         getIsExpanded,
         propStatuses: visualModePropStatuses,
+        runtimeValues,
         toggleTrack,
         tree,
     };

package/dist/components/Timeline/use-timeline-height.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
@@ -19,6 +20,20 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const expandedControls = (0, react_1.useMemo)(() => shown.flatMap((track) => {
+        if (!previewServerConnected ||
+            track.nodePathInfo === null ||
+            !getIsExpanded(track.nodePathInfo) ||
+            track.sequence.controls === null) {
+            return [];
+        }
+        return [track.sequence.controls];
+    }), [getIsExpanded, previewServerConnected, shown]);
+    const runtimeValueSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(expandedControls);
+    const runtimeValuesByStore = (0, react_1.useMemo)(() => new Map(expandedControls.map((controls, index) => [
+        controls.runtimeValues,
+        runtimeValueSnapshots[index],
+    ])), [expandedControls, runtimeValueSnapshots]);
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
             const isExpanded = previewServerConnected &&
@@ -27,6 +42,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
             const expandedHeight = (() => {
+                var _a;
                 if (!isExpanded || track.nodePathInfo === null) {
                     return 0;
                 }
@@ -39,6 +55,9 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
                     propStatuses,
                     includeTextContent: false,
                     includeSourceControls: false,
+                    runtimeValues: track.sequence.controls
+                        ? ((_a = runtimeValuesByStore.get(track.sequence.controls.runtimeValues)) !== null && _a !== void 0 ? _a : null)
+                        : null,
                 });
                 const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
                     nodes: tree,
@@ -81,6 +100,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
         getDragOverrides,
         getEffectDragOverrides,
         selectedRowKeys,
+        runtimeValuesByStore,
     ]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/components/TimelineInOutToggle.js

@@ -25,11 +25,15 @@ const style = {
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
+    var _a;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { getCurrentFrame, isFirstFrame, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const isFirstFrame = timelinePosition === 0;
+    const isLastFrame = timelinePosition === ((_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const onInOutClear = (0, react_1.useCallback)((composition) => {
         setInAndOutFrames((prev) => {
             return {

package/dist/components/TopPanel.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const mobile_layout_1 = require("../helpers/mobile-layout");
@@ -96,6 +97,21 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
+    const previousSidebarState = (0, react_1.useRef)({
+        left: actualStateLeft,
+        right: actualStateRight,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        if (previousSidebarState.current.left === actualStateLeft &&
+            previousSidebarState.current.right === actualStateRight) {
+            return;
+        }
+        previousSidebarState.current = {
+            left: actualStateLeft,
+            right: actualStateRight,
+        };
+        player_1.PlayerInternals.updateAllElementsSizes();
+    }, [actualStateLeft, actualStateRight]);
     (0, react_1.useEffect)(() => {
         onMounted();
     }, [onMounted]);

package/dist/components/UpdateCheck.js

@@ -27,7 +27,7 @@ const updateIconContainer = {
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);

package/dist/components/effect-drag-and-drop.js

@@ -33,7 +33,7 @@ exports.addEffectFromDragData = addEffectFromDragData;
 const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
         const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
-        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
+        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
         const result = await (0, call_api_1.callApi)('/api/add-effect', {
             fileName,
             sequenceNodePath: nodePath,

package/dist/components/handle-drop.d.ts

@@ -1,7 +1,7 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
 import { type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
     compositionId: string;
@@ -10,4 +10,5 @@ export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compos
     event: DragEvent;
     fps: number;
     from: number | null;
+    preferCompositionStart: boolean;
 }) => Promise<void>;

package/dist/components/handle-drop.js

@@ -6,7 +6,7 @@ const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }) => {
     var _a;
     var _b;
     if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
@@ -28,6 +28,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             files,
             fps,
             from,
+            preferCompositionStart,
             svgImportMode,
         });
         return;
@@ -45,6 +46,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             dropPosition,
             fps,
             from,
+            preferCompositionStart,
         });
         return;
     }
@@ -58,6 +60,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionId,
             fps,
             from,
+            preferCompositionStart,
             url: sfxUrl,
         });
         return;
@@ -73,6 +76,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionId,
             dropPosition,
             from,
+            preferCompositionStart,
         });
         return;
     }
@@ -85,7 +89,11 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionFile,
             compositionId,
             element: element.element,
-            from,
+            from: (0, import_assets_1.getFromForDrop)({
+                durationInFrames: element.element.durationInFrames,
+                from,
+                preferCompositionStart,
+            }),
             position: (0, import_assets_1.getElementPositionForDrop)({
                 dimensions: element.element.dimensions,
                 dropPosition,
@@ -102,6 +110,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionId,
             dropPosition,
             from,
+            preferCompositionStart,
         });
         return;
     }
@@ -116,6 +125,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
         dropPosition,
         fps,
         from,
+        preferCompositionStart,
         url: remoteAssetUrl,
     });
 };