@remotion/studio 4.0.460 → 4.0.461

package/dist/Studio.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 export declare const Studio: React.FC<{
     readonly rootComponent: React.FC;
     readonly readOnly: boolean;
-    readonly visualModeEnabled: boolean;
 }>;

package/dist/Studio.js

@@ -15,17 +15,17 @@ const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigIn
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
-const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
+const StudioInner = ({ rootComponent, readOnly }) => {
     var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));
 };
-const Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
+const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly, visualModeEnabled: visualModeEnabled }) }));
+    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly }) }));
 };
 exports.Studio = Studio;

package/dist/components/AudioWaveform.js

@@ -7,10 +7,6 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 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 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
 // cannot be handed to OffscreenCanvas again.
@@ -56,7 +52,13 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     const targetCanvas = document.createElement('canvas');
     targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
     targetCanvas.height = h;
-    (0, draw_peaks_1.drawBars)(targetCanvas, peaks, 'rgba(255, 255, 255, 0.6)', volume, targetCanvas.width);
+    (0, timeline_utils_1.drawBars)({
+        canvas: targetCanvas,
+        peaks,
+        color: 'rgba(255, 255, 255, 0.6)',
+        volume,
+        width: targetCanvas.width,
+    });
     canvas.width = w;
     canvas.height = h;
     const ctx = canvas.getContext('2d');
@@ -94,7 +96,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         const controller = new AbortController();
         setPeaks(null);
         setError(null);
-        (0, load_waveform_peaks_1.loadWaveformPeaks)(src, controller.signal)
+        (0, timeline_utils_1.loadWaveformPeaks)(src, controller.signal)
             .then((p) => {
             if (!controller.signal.aborted) {
                 setPeaks(p);
@@ -115,7 +117,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         if (!canvasElement || hasTransferredCanvas.current) {
             return;
         }
-        const worker = (0, make_audio_waveform_worker_1.makeAudioWaveformWorker)();
+        const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
         waveformWorker.current = worker;
         worker.addEventListener('message', (event) => {
             if (event.data.type === 'error') {
@@ -151,7 +153,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         if (canUseWorkerPath || !peaks) {
             return null;
         }
-        return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+        return (0, timeline_utils_1.sliceWaveformPeaks)({
             durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)
                 ? loopDisplay.durationInFrames
                 : durationInFrames,
@@ -216,7 +218,13 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
             });
         }
         else {
-            (0, draw_peaks_1.drawBars)(canvasElement, portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS, 'rgba(255, 255, 255, 0.6)', vol, w);
+            (0, timeline_utils_1.drawBars)({
+                canvas: canvasElement,
+                peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
+                color: 'rgba(255, 255, 255, 0.6)',
+                volume: vol,
+                width: w,
+            });
         }
     }, [
         canUseWorkerPath,

package/dist/components/MenuBuildIndicator.js

@@ -94,7 +94,7 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
         ] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.js

@@ -14,6 +14,7 @@ const baseStyle = {
     textDecoration: 'none',
     fontSize: 'inherit',
     textUnderlineOffset: 2,
+    whiteSpace: 'nowrap',
 };
 const compositionNameStyle = {
     ...baseStyle,

package/dist/components/RenderButton.js

@@ -166,7 +166,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
         };
     }, []);
     const video = remotion_1.Internals.useVideo();
-    const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const openServerRenderModal = (0, react_1.useCallback)((copyCommandOnly) => {
         var _a;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -12,7 +12,7 @@ const SequencePropsObserver = () => {
             if (event.type !== 'sequence-props-updated') {
                 return;
             }
-            setCodeValues(event.nodePath, event.result);
+            setCodeValues(event.nodePath, () => event.result);
         };
         const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
         return () => {

package/dist/components/Timeline/Timeline.js

@@ -93,17 +93,18 @@ const TimelineInner = () => {
             t.sequence.duration > 0 &&
             t.sequence.showInTimeline);
     }, [durationInFrames, timeline]);
-    const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
+    const shown = (0, react_1.useMemo)(() => {
+        return filtered.length > MaxTimelineTracks_1.MAX_TIMELINE_TRACKS
+            ? filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS)
+            : filtered;
+    }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    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: [
+    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [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));
+            }), 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, {})

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineBooleanField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onSave: TimelineFieldOnSave;
 }>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -7,14 +7,14 @@ const Checkbox_1 = require("../Checkbox");
 const checkboxContainer = {
     marginLeft: 8,
 };
-const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) => {
     const checked = Boolean(effectiveValue);
     const onChange = (0, react_1.useCallback)(() => {
         const newValue = !checked;
-        if (canUpdate && newValue !== codeValue) {
-            onSave(field.key, newValue);
+        if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+            onSave(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, variant: "small" }) }));
+    }, [propStatus, onSave, checked]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !propStatus.canUpdate, variant: "small" }) }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineDragHandler.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.TimelineDragHandler = 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 remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -59,10 +92,10 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(Inner, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
-const Inner = () => {
+const TimelineDragHandlerInner = () => {
     var _a;
     var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -470,3 +503,4 @@ const Inner = () => {
     return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };
+const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineEnumField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineEnumField.js

@@ -7,7 +7,7 @@ const ComboBox_1 = require("../NewComposition/ComboBox");
 const comboboxStyle = {
     marginLeft: 8,
 };
-const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     const { fieldSchema } = field;
     if (fieldSchema.type !== 'enum') {
         throw new Error('TimelineEnumField rendered for non-enum field');
@@ -15,14 +15,14 @@ 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 onSelect = (0, react_1.useCallback)((newValue) => {
-        if (!canUpdate || newValue === codeValue) {
+        if (!propStatus.canUpdate || newValue === propStatus.codeValue) {
             return;
         }
-        onDragValueChange(field.key, newValue);
-        onSave(field.key, newValue).finally(() => {
+        onDragValueChange(newValue);
+        onSave(newValue).finally(() => {
             onDragEnd();
         });
-    }, [canUpdate, codeValue, field.key, onSave, onDragValueChange, onDragEnd]);
+    }, [propStatus, onSave, onDragValueChange, onDragEnd]);
     const items = (0, react_1.useMemo)(() => {
         return variantKeys.map((key) => ({
             type: 'item',
@@ -34,9 +34,9 @@ const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave
             leftItem: null,
             subMenu: null,
             quickSwitcherLabel: null,
-            disabled: !canUpdate,
+            disabled: !propStatus.canUpdate,
         }));
-    }, [variantKeys, onSelect, canUpdate]);
+    }, [variantKeys, onSelect, propStatus]);
     return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -31,7 +31,7 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
             opacity: disabled ? 0.5 : 1,
         };
     }, [isExpanded, disabled]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "#ccc" }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -56,7 +56,8 @@ const separator = {
 const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nestedDepth }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -81,9 +82,8 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nes
         sequence,
         nodePathInfo,
         getIsExpanded,
-        getDragOverrides,
         getCodeValues,
-    }), [sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues]);
+    }), [sequence, nodePathInfo, getIsExpanded, getCodeValues]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,

package/dist/components/Timeline/TimelineFieldRow.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -27,11 +28,15 @@ const fieldLabelRow = {
     gap: 6,
 };
 const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
-    var _a, _b, _c;
-    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
+    var _a, _b;
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const codeValuesForOverride = getCodeValues(nodePath);
     const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
+    if (codeValue === null) {
+        throw new Error('Unexpectedly got null code value for field' + field.key);
+    }
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return nodePath === null
@@ -46,45 +51,73 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const onSave = (0, react_1.useCallback)((key, value) => {
+    const onSave = (0, react_1.useCallback)((value) => {
         if (!codeValuesForOverride || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
         }
-        const status = codeValuesForOverride[key];
-        if (!status || !status.canUpdate) {
+        if (!codeValue || !codeValue.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
+        const stringifiedValue = JSON.stringify(value);
+        if (value === codeValue.codeValue) {
+            return Promise.resolve();
+        }
+        if (defaultValue === stringifiedValue &&
+            codeValue.codeValue === undefined) {
+            return Promise.resolve();
+        }
+        let previousUpdate;
+        // Optimistic update to prevent flicker
+        setCodeValues(nodePath, (prev) => {
+            previousUpdate = prev;
+            return (0, studio_shared_1.optimisticUpdateForCodeValues)({
+                previous: prev,
+                fieldKey: field.key,
+                value,
+                schema,
+            });
+        });
         return (0, call_api_1.callApi)('/api/save-sequence-props', {
             fileName: validatedLocation.source,
             nodePath,
-            key,
-            value: JSON.stringify(value),
+            key: field.key,
+            value: stringifiedValue,
             defaultValue,
             schema,
-        }).then((data) => {
-            if (data.success) {
-                setCodeValues(nodePath, data.newStatus);
-                return;
+        })
+            .then((data) => {
+            setCodeValues(nodePath, () => data);
+        })
+            .catch(() => {
+            // In case something went wrong, undo optimistic update
+            if (previousUpdate) {
+                setCodeValues(nodePath, (current) => {
+                    if (previousUpdate) {
+                        return previousUpdate;
+                    }
+                    return current;
+                });
             }
-            return Promise.reject(new Error(data.reason));
         });
     }, [
+        codeValue,
         codeValuesForOverride,
         field.fieldSchema.default,
+        field.key,
         nodePath,
         schema,
         setCodeValues,
         validatedLocation,
     ]);
-    const onDragValueChange = (0, react_1.useCallback)((key, value) => {
+    const onDragValueChange = (0, react_1.useCallback)((value) => {
         if (nodePath === null) {
             throw new Error('Cannot drag value');
         }
-        setDragOverrides(nodePath, key, value);
-    }, [setDragOverrides, nodePath]);
+        setDragOverrides(nodePath, field.key, value);
+    }, [setDragOverrides, nodePath, field.key]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         if (nodePath === null) {
             throw new Error('Cannot clear drag value');
@@ -99,7 +132,7 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
         };
     }, [field.rowHeight, paddingLeft]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_c = codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) !== null && _c !== void 0 ? _c : false, effectiveValue: effectiveValue, codeValue: codeValue })
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue })
         ] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

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

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

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -1,8 +1,41 @@
 "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.TimelineHeightContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const use_timeline_height_1 = require("./use-timeline-height");
 const baseStyle = {
     display: 'flex',
@@ -10,9 +43,9 @@ const baseStyle = {
     minHeight: '100%',
     overflowX: 'hidden',
 };
-const TimelineHeightContainer = ({ shown, hasBeenCut, children }) => {
+const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
     const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };
-exports.TimelineHeightContainer = TimelineHeightContainer;
+exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);

package/dist/components/Timeline/TimelineListItem.js

@@ -22,13 +22,10 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     var _a, _b;
     const nodePath = (_a = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.nodePath) !== null && _a !== void 0 ? _a : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
     const previewConnected = previewServerState.type === 'connected';
-    const visualModeActive = visualModeEnvEnabled && previewConnected;
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { getIsJsxInMapCallback } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_b = sequence.stack) !== null && _b !== void 0 ? _b : null);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -50,8 +47,10 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
-        if (getIsJsxInMapCallback(nodePath)) {
-            const message = 'This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?';
+        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+            const message = 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Duplicating inserts another copy. Continue?';
             // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
             if (!window.confirm(message)) {
                 return;
@@ -72,13 +71,15 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, getIsJsxInMapCallback]);
+    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
-        if (getIsJsxInMapCallback(nodePath)) {
-            const message = 'This sequence is rendered inside a .map() callback. Deleting removes all sequences in that callback. Continue?';
+        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+            const message = 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Deleting removes all instances. Continue?';
             // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
             if (!window.confirm(message)) {
                 return;
@@ -99,9 +100,9 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, getIsJsxInMapCallback]);
+    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!visualModeEnvEnabled) {
+        if (!previewConnected) {
             return [];
         }
         return [
@@ -145,9 +146,9 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         duplicateDisabled,
         onDeleteSequenceFromSource,
         onDuplicateSequenceFromSource,
-        visualModeEnvEnabled,
+        previewConnected,
     ]);
-    const isExpanded = visualModeActive && nodePathInfo !== null && getIsExpanded(nodePathInfo);
+    const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         if (nodePathInfo === null) {
             return;
@@ -188,9 +189,9 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [
-                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), visualModeActive ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), previewConnected ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
             ] }) }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));