@remotion/studio 4.0.458 → 4.0.460

package/dist/audio-waveform-worker.js

@@ -1,9 +1,9 @@
 "use strict";
 /// <reference lib="webworker" />
 Object.defineProperty(exports, "__esModule", { value: true });
+const timeline_utils_1 = require("@remotion/timeline-utils");
 const draw_peaks_1 = require("./components/draw-peaks");
 const load_waveform_peaks_1 = require("./components/load-waveform-peaks");
-const looped_media_timeline_1 = require("./components/looped-media-timeline");
 const slice_waveform_peaks_1 = require("./components/slice-waveform-peaks");
 let canvas = null;
 let currentController = null;
@@ -22,7 +22,7 @@ const drawPartialWaveform = (message, peaks) => {
         return;
     }
     const portionPeaks = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-        durationInFrames: (0, looped_media_timeline_1.shouldTileLoopDisplay)(message.loopDisplay)
+        durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(message.loopDisplay)
             ? message.loopDisplay.durationInFrames
             : message.durationInFrames,
         fps: message.fps,
@@ -30,11 +30,11 @@ const drawPartialWaveform = (message, peaks) => {
         playbackRate: message.playbackRate,
         startFrom: message.startFrom,
     });
-    if (!(0, looped_media_timeline_1.shouldTileLoopDisplay)(message.loopDisplay)) {
+    if (!(0, timeline_utils_1.shouldTileLoopDisplay)(message.loopDisplay)) {
         (0, draw_peaks_1.drawBars)(canvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, message.width);
         return;
     }
-    const loopWidth = (0, looped_media_timeline_1.getLoopDisplayWidth)({
+    const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
         visualizationWidth: message.width,
         loopDisplay: message.loopDisplay,
     });

package/dist/components/AudioWaveform.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
@@ -9,7 +10,6 @@ const timeline_layout_1 = require("../helpers/timeline-layout");
 const make_audio_waveform_worker_1 = require("../make-audio-waveform-worker");
 const draw_peaks_1 = require("./draw-peaks");
 const load_waveform_peaks_1 = require("./load-waveform-peaks");
-const looped_media_timeline_1 = require("./looped-media-timeline");
 const slice_waveform_peaks_1 = require("./slice-waveform-peaks");
 const EMPTY_PEAKS = new Float32Array(0);
 // Recreate the canvas after Fast Refresh because an already transferred canvas
@@ -152,7 +152,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
             return null;
         }
         return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-            durationInFrames: (0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay)
+            durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)
                 ? loopDisplay.durationInFrames
                 : durationInFrames,
             fps: vidConf.fps,
@@ -203,13 +203,13 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         }
         canvasElement.width = w;
         canvasElement.height = h;
-        if ((0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay)) {
+        if ((0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)) {
             drawLoopedWaveform({
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
                 volume: vol,
                 visualizationWidth,
-                loopWidth: (0, looped_media_timeline_1.getLoopDisplayWidth)({
+                loopWidth: (0, timeline_utils_1.getLoopDisplayWidth)({
                     visualizationWidth,
                     loopDisplay,
                 }),

package/dist/components/Checkbox.d.ts

@@ -1,8 +1,15 @@
 import React from 'react';
+declare const SIZES: {
+    readonly default: 20;
+    readonly small: 18;
+};
+export type CheckboxVariant = keyof typeof SIZES;
 export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
     readonly rounded?: boolean;
     readonly disabled?: boolean;
+    readonly variant?: CheckboxVariant;
 }>;
+export {};

package/dist/components/Checkbox.js

@@ -5,32 +5,46 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const Checkmark_1 = require("../icons/Checkmark");
-const size = 20;
-const background = {
-    height: size,
-    width: size,
-    position: 'relative',
+const SIZES = {
+    default: 20,
+    small: 18,
 };
-const bullet = {
-    width: 10,
-    height: 10,
-    backgroundColor: colors_1.LIGHT_TEXT,
-    borderRadius: '50%',
+const BULLET_SIZES = {
+    default: 10,
+    small: 9,
 };
-const box = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    height: size,
-    width: size,
-    top: 0,
-    left: 0,
-    pointerEvents: 'none',
-    color: 'white',
+const CHECKMARK_SIZES = {
+    default: 14,
+    small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
+const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'default' }) => {
     const ref = (0, react_1.useRef)(null);
+    const size = SIZES[variant];
+    const bulletSize = BULLET_SIZES[variant];
+    const checkmarkSize = CHECKMARK_SIZES[variant];
+    const background = (0, react_1.useMemo)(() => ({
+        height: size,
+        width: size,
+        position: 'relative',
+    }), [size]);
+    const bullet = (0, react_1.useMemo)(() => ({
+        width: bulletSize,
+        height: bulletSize,
+        backgroundColor: colors_1.LIGHT_TEXT,
+        borderRadius: '50%',
+    }), [bulletSize]);
+    const box = (0, react_1.useMemo)(() => ({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        height: size,
+        width: size,
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        color: 'white',
+    }), [size]);
     const input = (0, react_1.useMemo)(() => {
         return {
             appearance: 'none',
@@ -43,14 +57,14 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
             position: 'absolute',
             margin: 0,
         };
-    }, [disabled]);
+    }, [disabled, size]);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
         }
     }, [rounded]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? rounded ? jsx_runtime_1.jsx("div", { style: bullet }) : jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null })
+            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? (rounded ? (jsx_runtime_1.jsx("div", { style: bullet })) : (jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }))) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/Editor.js

@@ -49,6 +49,7 @@ const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RenderErrorContext_1 = require("./RenderErrorContext");
+const SequencePropsSubscriptionProvider_1 = require("./SequencePropsSubscriptionProvider");
 const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -90,14 +91,14 @@ const Editor = ({ Root, readOnlyStudio }) => {
     }, []);
     const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsxs(timeline_zoom_1.TimelineZoomContext, { children: [
-                jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
-                                jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                        jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                    ] })
-                            ] })
-                    ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
-            ] }) }));
+    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
+                    jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
+                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
+                                    jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                            jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                                        ] })
+                                ] })
+                        ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
+                ] }) }) }));
 };
 exports.Editor = Editor;

package/dist/components/ExpandedTracksProvider.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
-type ExpandedTracksContextValue = {
-    readonly expandedTracks: Record<string, boolean>;
-    readonly toggleTrack: (id: string) => void;
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+export type GetIsExpanded = (nodePathInfo: SequenceNodePathInfo) => boolean;
+type ExpandedTracksGetterContextValue = {
+    readonly getIsExpanded: GetIsExpanded;
 };
-export declare const ExpandedTracksContext: React.Context<ExpandedTracksContextValue>;
+type ExpandedTracksSetterContextValue = {
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+};
+export declare const ExpandedTracksGetterContext: React.Context<ExpandedTracksGetterContextValue>;
+export declare const ExpandedTracksSetterContext: React.Context<ExpandedTracksSetterContextValue>;
 export declare const ExpandedTracksProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/components/ExpandedTracksProvider.js

@@ -1,26 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandedTracksProvider = exports.ExpandedTracksContext = void 0;
+exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-exports.ExpandedTracksContext = (0, react_1.createContext)({
-    expandedTracks: {},
+const nodePathInfoToKey = (info) => JSON.stringify([info.nodePath, info.index]);
+const LOCAL_STORAGE_KEY = 'remotion.editor.expandedTracks';
+const loadExpandedTracks = () => {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const item = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (item === null) {
+        return {};
+    }
+    try {
+        const parsed = JSON.parse(item);
+        if (parsed && typeof parsed === 'object') {
+            return parsed;
+        }
+        return {};
+    }
+    catch (_a) {
+        return {};
+    }
+};
+exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
+    getIsExpanded: () => {
+        throw new Error('ExpandedTracksGetterContext not initialized');
+    },
+});
+exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
     toggleTrack: () => {
-        throw new Error('ExpandedTracksContext not initialized');
+        throw new Error('ExpandedTracksSetterContext not initialized');
     },
 });
 const ExpandedTracksProvider = ({ children }) => {
-    const [expandedTracks, setExpandedTracks] = (0, react_1.useState)({});
-    const toggleTrack = (0, react_1.useCallback)((id) => {
-        setExpandedTracks((prev) => ({
-            ...prev,
-            [id]: !prev[id],
-        }));
+    const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
+    const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
+        setExpandedTracks((prev) => {
+            const key = nodePathInfoToKey(nodePathInfo);
+            const next = { ...prev, [key]: !prev[key] };
+            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(next));
+            return next;
+        });
     }, []);
-    const value = (0, react_1.useMemo)(() => ({
-        expandedTracks,
-        toggleTrack,
-    }), [expandedTracks, toggleTrack]);
-    return (jsx_runtime_1.jsx(exports.ExpandedTracksContext.Provider, { value: value, children: children }));
+    const getterValue = (0, react_1.useMemo)(() => ({
+        getIsExpanded: (nodePathInfo) => {
+            var _a;
+            return (_a = expandedTracks[nodePathInfoToKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+        },
+    }), [expandedTracks]);
+    const setterValue = (0, react_1.useMemo)(() => ({ toggleTrack }), [toggleTrack]);
+    return (jsx_runtime_1.jsx(exports.ExpandedTracksSetterContext.Provider, { value: setterValue, children: jsx_runtime_1.jsx(exports.ExpandedTracksGetterContext.Provider, { value: getterValue, children: children }) }));
 };
 exports.ExpandedTracksProvider = ExpandedTracksProvider;

package/dist/components/MenuBuildIndicator.js

@@ -22,7 +22,6 @@ const spinnerSize = 14;
 const spinner = {
     position: 'relative',
     width: spinnerSize,
-    marginTop: 4,
 };
 const noSpinner = {
     position: 'relative',

package/dist/components/NewComposition/ComboBox.d.ts

@@ -26,5 +26,6 @@ export declare const Combobox: React.FC<{
     readonly selectedId: string | number;
     readonly style?: React.CSSProperties;
     readonly title: string;
+    readonly small?: boolean;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -26,6 +26,10 @@ const container = {
     borderStyle: 'solid',
     maxWidth: '100%',
 };
+const smallContainer = {
+    ...container,
+    padding: '3px 4px',
+};
 const label = {
     flex: 1,
     overflow: 'hidden',
@@ -33,7 +37,12 @@ const label = {
     fontSize: 14,
     textAlign: 'left',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title }) => {
+const smallLabel = {
+    ...label,
+    fontSize: 11,
+    lineHeight: 1,
+};
+const Combobox = ({ values, selectedId, style: customStyle, title, small = false }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -147,7 +156,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
     const selected = values.find((v) => v.id === selectedId);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...container,
+            ...(small ? smallContainer : container),
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
@@ -161,11 +170,11 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     ? colors_1.INPUT_BORDER_COLOR_HOVERED
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
-    }, [customStyle, hovered, opened]);
+    }, [customStyle, hovered, opened, small]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }),
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: small ? smallLabel : label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: small ? 0.5 : 1 }),
                     " ",
-                    jsx_runtime_1.jsx(caret_1.CaretDown, {})
+                    jsx_runtime_1.jsx(caret_1.CaretDown, { small: small })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/SequencePropsSubscriptionProvider.d.ts

@@ -0,0 +1,3 @@
+export declare const SequencePropsSubscriptionProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequencePropsSubscriptionProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const SequencePropsSubscriptionProvider = ({ children }) => {
+    const [overrideToNodePathMap, setOverrideIdToNodePathMap] = (0, react_1.useState)({});
+    const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
+        setOverrideIdToNodePathMap((prev) => {
+            const existing = prev[overrideId];
+            if (existing && existing === state) {
+                return prev;
+            }
+            return { ...prev, [overrideId]: state };
+        });
+    }, []);
+    const getters = (0, react_1.useMemo)(() => {
+        return { overrideIdToNodePathMappings: overrideToNodePathMap };
+    }, [overrideToNodePathMap]);
+    const setters = (0, react_1.useMemo)(() => {
+        return { setOverrideIdToNodePath };
+    }, [setOverrideIdToNodePath]);
+    return (jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsGettersContext.Provider, { value: getters, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsSettersContext.Provider, { value: setters, children: children }) }));
+};
+exports.SequencePropsSubscriptionProvider = SequencePropsSubscriptionProvider;

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

@@ -0,0 +1 @@
+export declare const SequencePropsObserver: () => null;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequencePropsObserver = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const SequencePropsObserver = () => {
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    (0, react_1.useEffect)(() => {
+        const handleEvent = (event) => {
+            if (event.type !== 'sequence-props-updated') {
+                return;
+            }
+            setCodeValues(event.nodePath, event.result);
+        };
+        const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
+        return () => {
+            unsubscribe();
+        };
+    }, [setCodeValues, subscribeToEvent]);
+    return null;
+};
+exports.SequencePropsObserver = SequencePropsObserver;

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

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { SequenceSchema } from 'remotion';
+export declare const SubscribeToNodePaths: React.FC<{
+    readonly overrideId: string;
+    readonly schema: SequenceSchema;
+    readonly stack: string;
+}>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubscribeToNodePaths = void 0;
+const use_resolved_stack_1 = require("./use-resolved-stack");
+const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
+const SubscribeToNodePaths = ({ overrideId, schema, stack }) => {
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
+        overrideId,
+        schema,
+        originalLocation,
+    });
+    return null;
+};
+exports.SubscribeToNodePaths = SubscribeToNodePaths;

package/dist/components/Timeline/Timeline.js

@@ -40,16 +40,17 @@ const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const SequencePropsObserver_1 = require("./SequencePropsObserver");
+const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
+const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
@@ -71,12 +72,10 @@ const noop = () => undefined;
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
     const videoConfigIsNull = videoConfig === null;
     const timeline = (0, react_1.useMemo)(() => {
         if (videoConfigIsNull) {
@@ -84,52 +83,33 @@ const TimelineInner = () => {
         }
         return (0, calculate_timeline_1.calculateTimeline)({
             sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
         });
-    }, [sequences, videoConfigIsNull]);
+    }, [sequences, videoConfigIsNull, overrideIdToNodePathMappings]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
-        const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t));
-        const withoutAfter = withoutHidden.filter((t) => {
-            return t.sequence.from <= durationInFrames && t.sequence.duration > 0;
-        });
-        return withoutAfter.filter((t) => t.sequence.showInTimeline);
+        return timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t) &&
+            t.sequence.from <= durationInFrames &&
+            t.sequence.duration > 0 &&
+            t.sequence.showInTimeline);
     }, [durationInFrames, timeline]);
     const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
     const hasBeenCut = filtered.length > shown.length;
-    const inner = (0, react_1.useMemo)(() => {
-        return {
-            height: shown.reduce((acc, track) => {
-                var _a;
-                const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
-                return (acc +
-                    (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
-                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
-                    (isExpanded
-                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence, expandedTracks, dragOverrides, codeValues) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
-                        : 0));
-            }, 0) +
-                timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
-                (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
-                TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
-            display: 'flex',
-            flex: 1,
-            minHeight: '100%',
-            overflowX: 'hidden',
-        };
-    }, [
-        hasBeenCut,
-        shown,
-        expandedTracks,
-        visualModeEnabled,
-        codeValues,
-        dragOverrides,
-    ]);
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, 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, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                    ] }) })
-                        ] }) })
-            ] }) }));
+    const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [visualModeEnvEnabled
+                ? sequences.map((sequence) => {
+                    if (!sequence.controls || !previewConnected || !sequence.stack) {
+                        return null;
+                    }
+                    return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack }, sequence.id));
+                })
+                : null, jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, 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, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                        ] }) })
+                            ] }) })
+                ] })
+        ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/Timeline/TimelineBooleanField.js

@@ -15,6 +15,6 @@ const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onS
             onSave(field.key, newValue);
         }
     }, [canUpdate, onSave, field.key, checked, codeValue]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate, variant: "small" }) }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineEnumField.js

@@ -3,14 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineEnumField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const selectStyle = {
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const comboboxStyle = {
     marginLeft: 8,
-    background: 'transparent',
-    color: 'white',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
-    borderRadius: 3,
-    fontSize: 12,
-    padding: '1px 4px',
 };
 const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
     const { fieldSchema } = field;
@@ -19,8 +14,7 @@ const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave
     }
     const variantKeys = Object.keys(fieldSchema.variants);
     const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : fieldSchema.default);
-    const onChange = (0, react_1.useCallback)((e) => {
-        const newValue = e.target.value;
+    const onSelect = (0, react_1.useCallback)((newValue) => {
         if (!canUpdate || newValue === codeValue) {
             return;
         }
@@ -29,6 +23,20 @@ const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave
             onDragEnd();
         });
     }, [canUpdate, codeValue, field.key, onSave, onDragValueChange, onDragEnd]);
-    return (jsx_runtime_1.jsx("select", { disabled: !canUpdate, value: current, onChange: onChange, style: selectStyle, children: variantKeys.map((key) => (jsx_runtime_1.jsx("option", { value: key, children: key }, key))) }));
+    const items = (0, react_1.useMemo)(() => {
+        return variantKeys.map((key) => ({
+            type: 'item',
+            id: key,
+            value: key,
+            label: key,
+            onClick: () => onSelect(key),
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: null,
+            disabled: !canUpdate,
+        }));
+    }, [variantKeys, onSelect, canUpdate]);
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;