@remotion/studio 4.0.469 → 4.0.471

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.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const ContextMenu: React.FC<{
+type ContextMenuProps = {
     readonly children: React.ReactNode;
     readonly values: ComboboxValue[];
     readonly onOpen: (() => void) | null;
-}>;
+    readonly style?: React.CSSProperties;
+    readonly className?: string;
+    readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+};
+export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ContextMenu.js

@@ -1,4 +1,37 @@
 "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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = 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 react_dom_1 = __importDefault(require("react-dom"));
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
@@ -14,13 +47,20 @@ 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, onOpen }) => {
+exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        return {};
-    }, []);
+    const setRef = (0, react_1.useCallback)((node) => {
+        ref.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+            return;
+        }
+        if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -92,9 +132,13 @@ const ContextMenu = ({ children, values, onOpen }) => {
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
+    // Prevent deselection of a selected item
+    const onMenuPointerDown = (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))
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, 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, onPointerDown: onMenuPointerDown, 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;
+});
+exports.ContextMenu.displayName = '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 = {
@@ -71,6 +72,7 @@ const containerStyle = (options) => {
         width: options.width,
         height: options.height,
         display: 'flex',
+        overflow: 'hidden',
         position: 'absolute',
         backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(options.checkerboard),
         backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(options.checkerboard),
@@ -121,7 +123,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
             position: 'absolute',
             left: centerX - previewSize.translation.x,
             top: centerY - previewSize.translation.y,
-            overflow: 'hidden',
+            overflow: canvasContent.type === 'composition' ? 'visible' : 'hidden',
             justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
             alignItems: canvasContent.type === 'asset' &&
                 (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'
@@ -146,7 +148,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,49 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusTrue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import { type TimelineSelection } from './Timeline/TimelineSelection';
+type OutlinePoint = {
+    readonly x: number;
+    readonly y: number;
+};
+type UvCoordinate = readonly [number, number];
+type SelectedOutlineDragTarget = {
+    readonly codeValue: CanUpdateSequencePropStatusTrue;
+    readonly clientId: string;
+    readonly fieldDefault: string | undefined;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: SequenceSchema;
+};
+export type SelectedOutlineDragState = {
+    readonly defaultValue: string | null;
+    readonly key: string;
+    readonly startX: number;
+    readonly startY: number;
+    readonly target: SelectedOutlineDragTarget;
+};
+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 getSelectedOutlineDragValues: ({ dragStates, deltaX, deltaY, }: {
+    readonly dragStates: readonly SelectedOutlineDragState[];
+    readonly deltaX: number;
+    readonly deltaY: number;
+}) => Map<string, string>;
+export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineDragState[];
+    readonly lastValues: ReadonlyMap<string, string>;
+}) => {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    value: string;
+    defaultValue: string | null;
+    schema: SequenceSchema;
+}[];
+export declare const SelectedOutlineOverlay: React.FC<{
+    readonly scale: number;
+}>;
+export {};