@remotion/studio 4.0.469 → 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.js

@@ -41,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%',
@@ -121,6 +124,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
             return;
         }
         const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
+        let workerFailed = false;
         waveformWorker.current = worker;
         worker.addEventListener('message', (event) => {
             if (event.data.type === 'error') {
@@ -130,6 +134,17 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
                 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();
@@ -146,7 +161,9 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         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;
@@ -277,7 +294,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
     if (error) {
         // eslint-disable-next-line no-console
         console.error(error);
-        return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), 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;

package/dist/components/ContextMenu.js

@@ -92,9 +92,13 @@ const ContextMenu = ({ children, values, onOpen }) => {
     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/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/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/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 {};