@remotion/studio 4.0.521 → 4.0.522

package/dist/components/Splitter/SplitterContainer.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContainer = exports.containerColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const timeline_1 = require("../../state/timeline");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterHandle_1 = require("./SplitterHandle");
@@ -21,8 +54,10 @@ exports.containerColumn = {
     height: 0,
 };
 const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, minAntiFlexerSize, id, }) => {
+    const parentLayout = (0, react_1.useContext)(SplitterContext_1.SplitterLayoutContext);
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
+    const [collapsedDuringDrag, setCollapsedDuringDrag] = (0, react_1.useState)(null);
     const ref = (0, react_1.useRef)(null);
     const isDragging = (0, react_1.useRef)(false);
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -46,6 +81,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
     const value = (0, react_1.useMemo)(() => {
         return {
             flexValue: effectiveFlexValue,
+            collapsedDuringDrag,
+            setCollapsedDuringDrag,
             ref,
             setFlexValue,
             isDragging,
@@ -62,6 +99,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         };
     }, [
         defaultFlex,
+        collapsedDuringDrag,
         effectiveFlexValue,
         id,
         maxFlex,
@@ -74,14 +112,29 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         persistFlex,
         ref,
     ]);
-    (0, react_1.useEffect)(() => {
-        const frame = requestAnimationFrame(() => {
-            player_1.PlayerInternals.updateAllElementsSizes();
-        });
-        return () => {
-            cancelAnimationFrame(frame);
-        };
-    });
-    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
+    const childCount = react_1.default.Children.toArray(children).length;
+    const layout = (0, react_1.useMemo)(() => ({
+        parentLayout,
+        effectiveFlexValue,
+        collapsedDuringDrag,
+        orientation,
+        width: size === null || size === void 0 ? void 0 : size.width,
+        height: size === null || size === void 0 ? void 0 : size.height,
+        childCount,
+    }), [
+        parentLayout,
+        effectiveFlexValue,
+        collapsedDuringDrag,
+        orientation,
+        size === null || size === void 0 ? void 0 : size.width,
+        size === null || size === void 0 ? void 0 : size.height,
+        childCount,
+    ]);
+    const refreshSize = size === null || size === void 0 ? void 0 : size.refresh;
+    (0, react_1.useLayoutEffect)(() => {
+        // Remeasure this splitter when its own or an ancestor's layout changes.
+        refreshSize === null || refreshSize === void 0 ? void 0 : refreshSize();
+    }, [layout, refreshSize]);
+    return (jsx_runtime_1.jsx(SplitterContext_1.SplitterLayoutContext.Provider, { value: layout, children: jsx_runtime_1.jsx(SplitterContext_1.SplitterContext.Provider, { value: value, children: jsx_runtime_1.jsx("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }) }));
 };
 exports.SplitterContainer = SplitterContainer;

package/dist/components/Splitter/SplitterContext.d.ts

@@ -6,6 +6,8 @@ export type SplitterDragState = false | {
 export type SplitterOrientation = 'horizontal' | 'vertical';
 export type TSplitterContext = {
     flexValue: number;
+    collapsedDuringDrag: 'left' | 'right' | null;
+    setCollapsedDuringDrag: (side: 'left' | 'right' | null) => void;
     setFlexValue: React.Dispatch<React.SetStateAction<number>>;
     orientation: SplitterOrientation;
     ref: React.RefObject<HTMLDivElement | null>;
@@ -36,4 +38,5 @@ export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSp
     readonly flexValue: number;
 }) => number;
 export declare const SplitterContext: React.Context<TSplitterContext>;
+export declare const SplitterLayoutContext: React.Context<object | null>;
 export {};

package/dist/components/Splitter/SplitterContext.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
+exports.SplitterLayoutContext = exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
 const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }) => {
     if (availableSize === null || availableSize <= 0) {
@@ -21,6 +21,8 @@ const getClampedSplitterFlex = ({ flexValue, ...bounds }) => {
 exports.getClampedSplitterFlex = getClampedSplitterFlex;
 exports.SplitterContext = react_1.default.createContext({
     flexValue: 1,
+    collapsedDuringDrag: null,
+    setCollapsedDuringDrag: () => undefined,
     ref: { current: null },
     setFlexValue: () => undefined,
     isDragging: { current: false },
@@ -35,3 +37,5 @@ exports.SplitterContext = react_1.default.createContext({
     id: '--',
     persistFlex: () => undefined,
 });
+// Propagate layout changes only through the affected splitter subtree.
+exports.SplitterLayoutContext = react_1.default.createContext(null);

package/dist/components/Splitter/SplitterElement.js

@@ -15,7 +15,9 @@ const SplitterElement = ({ children, type, sticky }) => {
             flex: 
             // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
             (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
-            display: 'flex',
+            display: context.collapsedDuringDrag === (type === 'flexer' ? 'left' : 'right')
+                ? 'none'
+                : 'flex',
             position: 'relative',
             overflow: 'hidden',
             flexDirection: 'column',
@@ -28,7 +30,14 @@ const SplitterElement = ({ children, type, sticky }) => {
                 ? (minSize !== null && minSize !== void 0 ? minSize : undefined)
                 : undefined,
         };
-    }, [context.flexValue, context.orientation, maxSize, minSize, type]);
+    }, [
+        context.collapsedDuringDrag,
+        context.flexValue,
+        context.orientation,
+        maxSize,
+        minSize,
+        type,
+    ]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.d.ts

@@ -3,4 +3,5 @@ export declare const SPLITTER_HANDLE_SIZE = 3;
 export declare const SplitterHandle: React.FC<{
     readonly allowToCollapse: 'right' | 'left' | 'none';
     readonly onCollapse: () => void;
+    readonly onCollapseDuringDrag: ((side: 'left' | 'right' | null) => void) | null;
 }>;

package/dist/components/Splitter/SplitterHandle.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -11,10 +10,14 @@ exports.SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
     height: exports.SPLITTER_HANDLE_SIZE,
 };
+const collapsedContainer = {
+    width: 0,
+    height: 0,
+};
 const containerColumn = {
     width: exports.SPLITTER_HANDLE_SIZE,
 };
-const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
+const SplitterHandle = ({ allowToCollapse, onCollapse, onCollapseDuringDrag }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     if (!context) {
         throw new Error('Cannot find splitter context');
@@ -22,8 +25,13 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     const ref = (0, react_1.useRef)(null);
     // Keep the latest props/context readable inside the long-lived pointerdown
     // listener without re-subscribing it on every render.
-    const latest = (0, react_1.useRef)({ context, allowToCollapse, onCollapse });
-    latest.current = { context, allowToCollapse, onCollapse };
+    const latest = (0, react_1.useRef)({
+        context,
+        allowToCollapse,
+        onCollapse,
+        onCollapseDuringDrag,
+    });
+    latest.current = { context, allowToCollapse, onCollapse, onCollapseDuringDrag };
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -75,41 +83,59 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 }
                 return newFlex;
             };
+            const getCollapsedSide = (ev) => {
+                const collapse = latest.current.allowToCollapse;
+                const unclamped = getNewValue(ev, false);
+                if (collapse === 'left' && unclamped < dragContext.minFlex / 2) {
+                    return 'left';
+                }
+                if (collapse === 'right' &&
+                    1 - unclamped < (1 - dragContext.maxFlex) / 2) {
+                    return 'right';
+                }
+                return null;
+            };
+            let lastFlex = startFlex;
+            let lastCollapsedSide = null;
             const onPointerMove = (ev) => {
+                var _a, _b;
                 if (!dragContext.isDragging.current) {
                     return;
                 }
-                dragContext.setFlexValue(getNewValue(ev, true));
-                const collapse = latest.current.allowToCollapse;
-                if (collapse === 'left') {
-                    const unclamped = getNewValue(ev, false);
-                    if (unclamped < dragContext.minFlex / 2) {
-                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-                        latest.current.onCollapse();
-                    }
-                }
-                else if (collapse === 'right') {
-                    const unclamped = 1 - getNewValue(ev, false);
-                    if (unclamped < (1 - dragContext.maxFlex) / 2) {
-                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-                        latest.current.onCollapse();
-                    }
-                }
+                // Keep the handle mounted and captured until release, even while
+                // the panel is hidden, so moving inward can restore it.
+                lastCollapsedSide = getCollapsedSide(ev);
+                lastFlex = getNewValue(ev, true);
+                (_b = (_a = latest.current).onCollapseDuringDrag) === null || _b === void 0 ? void 0 : _b.call(_a, lastCollapsedSide);
+                dragContext.setCollapsedDuringDrag(lastCollapsedSide);
+                dragContext.setFlexValue(lastFlex);
             };
             endDrag = (0, pointer_session_1.startCapturedPointerSession)({
                 event: e,
                 captureTarget: current,
                 onMove: onPointerMove,
                 onEnd: (reason, endEvent) => {
+                    var _a, _b;
                     if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                        endEvent &&
-                        dragContext.isDragging.current) {
-                        dragContext.persistFlex(getNewValue(endEvent, true));
+                        endEvent) {
+                        lastFlex = getNewValue(endEvent, true);
+                        lastCollapsedSide = getCollapsedSide(endEvent);
+                    }
+                    // Capture loss and cancellation may have no usable coordinates.
+                    // Commit the last displayed state instead of resetting the panel.
+                    if (reason !== 'manual' && dragContext.isDragging.current) {
+                        const savedFlex = lastCollapsedSide === null ? lastFlex : startFlex;
+                        dragContext.setFlexValue(savedFlex);
+                        dragContext.persistFlex(savedFlex);
+                        if (lastCollapsedSide !== null) {
+                            latest.current.onCollapse();
+                        }
                     }
+                    (_b = (_a = latest.current).onCollapseDuringDrag) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+                    dragContext.setCollapsedDuringDrag(null);
                     dragContext.isDragging.current = false;
                     (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                     endDrag = null;
-                    player_1.PlayerInternals.updateAllElementsSizes();
                 },
             });
         };
@@ -124,6 +150,10 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             context.orientation === 'horizontal'
                 ? 'remotion-splitter-horizontal'
                 : 'remotion-splitter-vertical',
-        ].join(' '), style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
+        ].join(' '), style: context.collapsedDuringDrag !== null
+            ? collapsedContainer
+            : context.orientation === 'horizontal'
+                ? containerRow
+                : containerColumn }));
 };
 exports.SplitterHandle = SplitterHandle;

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

@@ -1,9 +1,10 @@
 import { type FC } from 'react';
-import type { EffectDefinition, JsxComponentIdentity, InteractivitySchema } from 'remotion';
+import type { EffectDefinition, JsxComponentIdentity, InteractivitySchema, VideoConfigValues } from 'remotion';
 export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly componentIdentity: JsxComponentIdentity | null;
     readonly schema: InteractivitySchema;
     readonly getStack: () => string | null;
     readonly effects: readonly EffectDefinition<unknown>[];
+    readonly videoConfigValues: VideoConfigValues | null;
 }>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects }) => {
+const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects, videoConfigValues, }) => {
     const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack, overrideId);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
@@ -22,6 +22,7 @@ const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack,
         originalLocation: resolvedLocation,
         preferMappedNodePath,
         stack,
+        videoConfigValues,
     });
     return null;
 };

package/dist/components/Timeline/Timeline.js

@@ -356,9 +356,20 @@ const TimelineInner = () => {
         timeline,
     ]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const filtered = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
-    }, [durationInFrames, timeline]);
+        return timeline.filter((t) => {
+            // Moving outside the composition can reduce the displayed duration to
+            // zero. Keep the drag owner mounted until its pending edit is saved.
+            if (t.sequence.showInTimeline &&
+                t.nodePathInfo !== null &&
+                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
+                    undefined) {
+                return true;
+            }
+            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
+        });
+    }, [durationInFrames, getDragOverrides, 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)(() => {
@@ -388,10 +399,10 @@ const TimelineInner = () => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects, videoConfigValues: sequence.controls.videoConfigValues }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenProvider, { value: layerChildrenValue, children: jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: jsx_runtime_1.jsxs(TimelineVirtualization_1.TimelineVirtualizationProvider, { hasBeenCut: hasBeenCut, isStill: isStill, timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, {})) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                                             jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-                                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, onCollapseDuringDrag: null, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                                 jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                             ] }), children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                                 jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null] }) })

package/dist/components/Timeline/TimelineDragHandler.js

@@ -80,6 +80,7 @@ const TimelineDragHandler = () => {
     });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoId = video === null || video === void 0 ? void 0 : video.id;
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
         var _b, _c, _d, _e;
@@ -90,16 +91,20 @@ const TimelineDragHandler = () => {
         const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
             durationInFrames,
             timelineViewportWidth: (_d = (_c = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _d !== void 0 ? _d : 0,
-            zoom: canvasContent.type === 'composition'
-                ? ((_e = zoomMap[canvasContent.compositionId]) !== null && _e !== void 0 ? _e : null)
-                : null,
+            zoom: videoId ? ((_e = zoomMap[videoId]) !== null && _e !== void 0 ? _e : null) : null,
         });
         return {
             ...container,
             width: (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom }),
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
-    }, [canvasContent, timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width, video === null || video === void 0 ? void 0 : video.durationInFrames, zoomMap]);
+    }, [
+        canvasContent,
+        timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width,
+        video === null || video === void 0 ? void 0 : video.durationInFrames,
+        videoId,
+        zoomMap,
+    ]);
     const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
         ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
             (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -18,7 +18,6 @@ const ZOOM_WHEEL_SENSITIVITY = 0.06;
 const TimelinePinchZoom = () => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom, setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const zoomRef = (0, react_1.useRef)(zoom);
@@ -51,9 +50,6 @@ const TimelinePinchZoom = () => {
         if (!videoConfig || videoConfig.durationInFrames < 2) {
             return;
         }
-        if (!canvasContent || canvasContent.type !== 'composition') {
-            return;
-        }
         const scrollEl = timeline_refs_1.scrollableRef.current;
         if (!scrollEl) {
             return;
@@ -70,14 +66,8 @@ const TimelinePinchZoom = () => {
         else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             scaledDeltaY *= scrollEl.clientHeight;
         }
-        setZoom(canvasContent.compositionId, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
-    }, [
-        editorZoomGestures,
-        isVideoComposition,
-        videoConfig,
-        canvasContent,
-        setZoom,
-    ]);
+        setZoom(videoConfig.id, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
+    }, [editorZoomGestures, isVideoComposition, videoConfig, setZoom]);
     const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
     (0, react_1.useEffect)(() => {
         const el = timeline_refs_1.timelineVerticalScroll.current;
@@ -106,16 +96,13 @@ const TimelinePinchZoom = () => {
             if (!videoConfig || videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            pinchBaseZoomRef.current = getCurrentTimelineZoom(canvasContent.compositionId);
+            pinchBaseZoomRef.current = getCurrentTimelineZoom(videoConfig.id);
         };
         const onGestureChange = (event) => {
             const e = event;
@@ -126,9 +113,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
@@ -138,7 +122,7 @@ const TimelinePinchZoom = () => {
                 clientX: e.clientX,
                 scrollEl,
             });
-            setZoom(canvasContent.compositionId, () => base * e.scale, {
+            setZoom(videoConfig.id, () => base * e.scale, {
                 anchorFrame: null,
                 anchorContentX,
             });
@@ -161,7 +145,6 @@ const TimelinePinchZoom = () => {
         supportsWebKitPinch,
         isVideoComposition,
         videoConfig,
-        canvasContent,
         getCurrentTimelineZoom,
         setZoom,
     ]);
@@ -180,9 +163,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const [t0, t1] = [event.touches[0], event.touches[1]];
             const initialDistance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
             if (initialDistance < 1e-6) {
@@ -190,7 +170,7 @@ const TimelinePinchZoom = () => {
             }
             touchPinchRef.current = {
                 initialDistance,
-                initialZoom: getCurrentTimelineZoom(canvasContent.compositionId),
+                initialZoom: getCurrentTimelineZoom(videoConfig.id),
             };
         };
         const onTouchMove = (event) => {
@@ -201,9 +181,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
@@ -217,7 +194,7 @@ const TimelinePinchZoom = () => {
                 clientX,
                 scrollEl,
             });
-            setZoom(canvasContent.compositionId, () => pinch.initialZoom * ratio, {
+            setZoom(videoConfig.id, () => pinch.initialZoom * ratio, {
                 anchorFrame: null,
                 anchorContentX,
             });
@@ -241,7 +218,6 @@ const TimelinePinchZoom = () => {
         editorZoomGestures,
         isVideoComposition,
         videoConfig,
-        canvasContent,
         getCurrentTimelineZoom,
         setZoom,
     ]);

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -16,17 +16,11 @@ const TimelinePlayCursorSyncer = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const playing = remotion_1.Internals.usePlaying();
     const { playbackRate } = remotion_1.Internals.usePlaybackRate();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const compositionId = canvasContent && canvasContent.type === 'composition'
-        ? canvasContent.compositionId
-        : null;
-    // Asset previews have a synthetic video config, but no composition ID
-    // with which to look up a persisted timeline zoom.
     const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
         durationInFrames: (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1,
         timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
-        zoom: compositionId ? ((_d = zoomMap[compositionId]) !== null && _d !== void 0 ? _d : null) : null,
+        zoom: video ? ((_d = zoomMap[video.id]) !== null && _d !== void 0 ? _d : null) : null,
     });
     if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);