@remotion/studio 4.0.468 → 4.0.470

package/dist/Studio.js

@@ -17,7 +17,7 @@ const getServerDisconnectedDomElement = () => {
 };
 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, { 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', previewSampleRate: window.remotion_previewSampleRate, 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())] }) }) }) }) }));

package/dist/api/save-render-output.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unregisterClientRender = exports.registerClientRender = exports.saveOutputFile = void 0;
+const call_api_1 = require("../components/call-api");
 const throwIfNotOk = async (response) => {
     if (!response.ok) {
         try {
@@ -26,20 +27,10 @@ const saveOutputFile = async ({ blob, filePath, }) => {
 };
 exports.saveOutputFile = saveOutputFile;
 const registerClientRender = async (render) => {
-    const response = await fetch('/api/register-client-render', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(render),
-    });
-    await throwIfNotOk(response);
+    await (0, call_api_1.callApi)('/api/register-client-render', render);
 };
 exports.registerClientRender = registerClientRender;
 const unregisterClientRender = async (id) => {
-    const response = await fetch('/api/unregister-client-render', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id }),
-    });
-    await throwIfNotOk(response);
+    await (0, call_api_1.callApi)('/api/unregister-client-render', { id });
 };
 exports.unregisterClientRender = unregisterClientRender;

package/dist/components/AudioWaveform.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { LoopDisplay } from 'remotion';
 export declare const AudioWaveform: React.FC<{
     readonly src: string;
+    readonly height: number;
     readonly visualizationWidth: number;
     readonly startFrom: number;
     readonly durationInFrames: number;

package/dist/components/AudioWaveform.js

@@ -21,12 +21,15 @@ const canUseAudioWaveformWorker = () => {
     }
     return 'transferControlToOffscreen' in HTMLCanvasElement.prototype;
 };
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'absolute',
-    inset: 0,
+const getContainerStyle = (height) => {
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'relative',
+        width: '100%',
+        height,
+    };
 };
 const errorMessage = {
     fontSize: 13,
@@ -38,6 +41,9 @@ const errorMessage = {
     maxWidth: 450,
     opacity: 0.75,
 };
+const getWaveformErrorMessage = () => {
+    return new Error('No waveform available. The audio could not be decoded or may not support CORS.');
+};
 const waveformCanvasStyle = {
     pointerEvents: 'none',
     width: '100%',
@@ -74,7 +80,7 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, w, h);
 };
-const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
+const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
@@ -83,12 +89,12 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
-    const containerRef = (0, react_1.useRef)(null);
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
     const waveformWorker = (0, react_1.useRef)(null);
     const hasTransferredCanvas = (0, react_1.useRef)(false);
     const latestRequestId = (0, react_1.useRef)(0);
+    const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
     (0, react_1.useEffect)(() => {
         if (canUseWorkerPath) {
             return;
@@ -118,6 +124,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
             return;
         }
         const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
+        let workerFailed = false;
         waveformWorker.current = worker;
         worker.addEventListener('message', (event) => {
             if (event.data.type === 'error') {
@@ -127,6 +134,17 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
                 setError(new Error(event.data.message));
             }
         });
+        worker.addEventListener('error', (event) => {
+            event.preventDefault();
+            workerFailed = true;
+            if (worker !== waveformWorker.current) {
+                return;
+            }
+            worker.terminate();
+            waveformWorker.current = null;
+            hasTransferredCanvas.current = false;
+            setError(getWaveformErrorMessage());
+        });
         let offscreen;
         try {
             offscreen = canvasElement.transferControlToOffscreen();
@@ -143,7 +161,9 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         hasTransferredCanvas.current = true;
         worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);
         return () => {
-            worker.postMessage({ type: 'dispose' });
+            if (!workerFailed) {
+                worker.postMessage({ type: 'dispose' });
+            }
             worker.terminate();
             waveformWorker.current = null;
             hasTransferredCanvas.current = false;
@@ -173,11 +193,10 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     ]);
     (0, react_1.useEffect)(() => {
         const { current: canvasElement } = waveformCanvas;
-        const { current: containerElement } = containerRef;
-        if (!canvasElement || !containerElement) {
+        if (!canvasElement) {
             return;
         }
-        const h = containerElement.clientHeight;
+        const h = height;
         const w = Math.ceil(visualizationWidth);
         const vol = typeof volume === 'number' ? volume : 1;
         if (canUseWorkerPath) {
@@ -229,6 +248,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     }, [
         canUseWorkerPath,
         durationInFrames,
+        height,
         loopDisplay,
         playbackRate,
         portionPeaks,
@@ -240,12 +260,14 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         waveformCanvasKey,
     ]);
     (0, react_1.useEffect)(() => {
+        if (!shouldRenderVolumeOverlay) {
+            return;
+        }
         const { current: volumeCanvasElement } = volumeCanvas;
-        const { current: containerElement } = containerRef;
-        if (!volumeCanvasElement || !containerElement) {
+        if (!volumeCanvasElement) {
             return;
         }
-        const h = containerElement.clientHeight;
+        const h = height;
         const context = volumeCanvasElement.getContext('2d');
         if (!context) {
             return;
@@ -253,9 +275,6 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         volumeCanvasElement.width = Math.ceil(visualizationWidth);
         volumeCanvasElement.height = h;
         context.clearRect(0, 0, visualizationWidth, h);
-        if (!doesVolumeChange || typeof volume === 'number') {
-            return;
-        }
         const volumes = volume.split(',').map((v) => Number(v));
         context.beginPath();
         context.moveTo(0, h);
@@ -271,17 +290,16 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         });
         context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
         context.stroke();
-    }, [visualizationWidth, volume, doesVolumeChange]);
+    }, [height, shouldRenderVolumeOverlay, visualizationWidth, volume]);
     if (error) {
         // eslint-disable-next-line no-console
         console.error(error);
-        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
+        return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. The audio could not be decoded or may not support CORS." }) }));
     }
     if (!canUseWorkerPath && !peaks) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [
-            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })
-        ] }));
+    return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
+            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
 exports.AudioWaveform = AudioWaveform;

package/dist/components/CompositionSelectorItem.js

@@ -131,7 +131,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     })
                     : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ContextMenu.d.ts

@@ -3,4 +3,5 @@ import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const ContextMenu: React.FC<{
     readonly children: React.ReactNode;
     readonly values: ComboboxValue[];
+    readonly onOpen: (() => void) | null;
 }>;

package/dist/components/ContextMenu.js

@@ -14,7 +14,7 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const ContextMenu = ({ children, values }) => {
+const ContextMenu = ({ children, values, onOpen }) => {
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -34,6 +34,7 @@ const ContextMenu = ({ children, values }) => {
         const onClick = (e) => {
             e.preventDefault();
             e.stopPropagation();
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
         };
@@ -41,7 +42,7 @@ const ContextMenu = ({ children, values }) => {
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [size]);
+    }, [onOpen, size]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         if (size && opened.type === 'open') {
             return size.windowSize.height - opened.top;
@@ -91,9 +92,13 @@ const ContextMenu = ({ children, values }) => {
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
+    // Prevent deselection of a selected item
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { ref: ref, onContextMenu: () => false, style: style, children: children }), 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: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? 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, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.ContextMenu = ContextMenu;

package/dist/components/EditorContent.js

@@ -11,6 +11,7 @@ const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
 const TimelineEmptyState_1 = require("./Timeline/TimelineEmptyState");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const noop = () => undefined;
 const container = {
     display: 'flex',
@@ -21,10 +22,10 @@ const container = {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
-                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
-                ] })
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
+            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), showTimeline ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: content })) : (content)] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorGuides/Guide.js

@@ -80,7 +80,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [guide.id, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, children: jsx_runtime_1.jsx("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: [
                     '__remotion_editor_guide_content',
                     selectedGuideId === guide.id || hoveredGuideId === guide.id
                         ? '__remotion_editor_guide_selected'

package/dist/components/ExpandedTracksProvider.js

@@ -2,15 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const migrate_expanded_tracks_for_subscription_key_1 = require("../helpers/migrate-expanded-tracks-for-subscription-key");
 const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
-const nodePathInfoToExpandedKey = (info) => [
-    (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
-    info.auxiliaryKeys.join('.'),
-    info.index,
-].join('.');
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const SESSION_STORAGE_KEY = 'remotion.editor.expandedTracks';
 const loadExpandedTracks = () => {
     return (0, persist_boolean_map_1.loadPersistedBooleanMap)(SESSION_STORAGE_KEY);
@@ -32,7 +27,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
     const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
         setExpandedTracks((prev) => {
-            const key = nodePathInfoToExpandedKey(nodePathInfo);
+            const key = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
             const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(prev, key);
             (0, persist_boolean_map_1.persistBooleanMap)(SESSION_STORAGE_KEY, next);
             return next;
@@ -51,7 +46,7 @@ const ExpandedTracksProvider = ({ children }) => {
     const getterValue = (0, react_1.useMemo)(() => ({
         getIsExpanded: (nodePathInfo) => {
             var _a;
-            return (_a = expandedTracks[nodePathInfoToExpandedKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+            return (_a = expandedTracks[(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
         },
     }), [expandedTracks]);
     const setterValue = (0, react_1.useMemo)(() => ({

package/dist/components/Menu/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import type { SetStateAction } from 'react';
 import React from 'react';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
-export type MenuId = 'remotion' | 'file' | 'view' | 'composition' | 'install' | 'tools' | 'help';
+export type MenuId = 'remotion' | 'file' | 'view' | 'composition' | 'tools' | 'help';
 export type Menu = {
     id: MenuId;
     label: React.ReactNode;

package/dist/components/Menu/MenuItem.js

@@ -20,8 +20,8 @@ const container = {
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',
-    paddingTop: 8,
-    paddingBottom: 8,
+    paddingTop: 6,
+    paddingBottom: 6,
     userSelect: 'none',
     WebkitUserSelect: 'none',
     border: 'none',

package/dist/components/Menu/MenuSubItem.js

@@ -19,9 +19,9 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const SubMenu_1 = require("./SubMenu");
 const container = {
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 12,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 8,
     paddingRight: 8,
     cursor: 'default',
 };
@@ -38,8 +38,8 @@ const keyHintCss = {
     fontSize: 13,
 };
 const leftSpace = {
-    width: 24,
-    marginLeft: -6,
+    width: 20,
+    marginLeft: -2,
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',

package/dist/components/MenuBuildIndicator.js

@@ -56,7 +56,6 @@ const MenuBuildIndicator = () => {
                 originalFunctionName: null,
                 originalScriptCode: null,
             })
-                .then((res) => res.json())
                 .then(({ success }) => {
                 if (!success) {
                     (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);

package/dist/components/NewComposition/InputDragger.js

@@ -120,6 +120,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         return Math.ceil(val * factor) / factor;
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
         pointerDownRef.current = true;
         const target = e.currentTarget;
         const { pageX, pageY, button } = e;

package/dist/components/Preview.js

@@ -11,6 +11,7 @@ const colors_1 = require("../helpers/colors");
 const checkerboard_1 = require("../state/checkerboard");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
+const SelectedOutlineOverlay_1 = require("./SelectedOutlineOverlay");
 const Spinner_1 = require("./Spinner");
 const StaticFilePreview_1 = require("./StaticFilePreview");
 const centeredContainer = {
@@ -146,7 +147,9 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
     if (canvasContent.type === 'output-blob') {
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
-    return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }) }));
+    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale })
+        ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);

package/dist/components/PreviewToolbar.js

@@ -24,13 +24,11 @@ const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TOOLBAR_HEIGHT = 56;
+const TOOLBAR_HEIGHT = 50;
 const container = {
     display: 'flex',
     justifyContent: 'center',
     borderTop: '1px solid rgba(0, 0, 0, 0.5)',
-    paddingTop: 2,
-    paddingBottom: 2,
     alignItems: 'center',
     flexDirection: 'row',
     background: colors_1.BACKGROUND,
@@ -64,7 +62,7 @@ const scrollIndicatorRight = {
 };
 const sideContainer = {
     width: 300,
-    height: 38,
+    height: 36,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type TimelineSelection } from './Timeline/TimelineSelection';
+type OutlinePoint = {
+    readonly x: number;
+    readonly y: number;
+};
+type UvCoordinate = readonly [number, number];
+export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
+export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
+type SelectedEffectFields = {
+    allFields: boolean;
+    fieldKeys: Set<string>;
+};
+export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly TimelineSelection[]) => Map<string, Map<number, SelectedEffectFields>>;
+export declare const SelectedOutlineOverlay: React.FC<{
+    readonly scale: number;
+}>;
+export {};