@remotion/studio 4.0.445 → 4.0.446

package/dist/components/AssetSelectorItem.js

@@ -44,6 +44,7 @@ const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
@@ -173,7 +174,16 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const rowRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        (0, sidebar_scroll_into_view_1.maybeScrollAssetSidebarRowIntoView)({
+            element: rowRef.current,
+            assetPath: relativePath,
+            selected,
+        });
+    }, [relativePath, selected]);
     const onClick = (0, react_1.useCallback)(() => {
+        (0, sidebar_scroll_into_view_1.markAssetSidebarScrollFromRowClick)(relativePath);
         setCanvasContent({ type: 'asset', asset: relativePath });
         (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
         if (isMobileLayout) {
@@ -234,7 +244,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [item.name, parentFolder]);
-    return (jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [
+    return (jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [
                 jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), readOnlyStudio ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })

package/dist/components/Canvas.js

@@ -418,6 +418,6 @@ const Canvas = ({ canvasContent, size }) => {
         fetchMetadata();
     }, [fetchMetadata]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasOrLoading.js

@@ -45,7 +45,7 @@ const CanvasOrLoading = ({ size }) => {
         });
     }, [resolved, setZoom]);
     if (renderError) {
-        return jsx_runtime_1.jsx(ErrorLoading, { error: renderError });
+        return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false }));
     }
     if (!canvasContent) {
         const compname = window.location.pathname.replace('/', '');
@@ -65,7 +65,7 @@ const CanvasOrLoading = ({ size }) => {
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }));
     }
     if (resolved.type === 'error') {
-        return jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error });
+        return jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error, calculateMetadataContext: true });
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(FramePersistor_1.FramePersistor, {}),
@@ -80,9 +80,9 @@ const loaderContainer = {
     height: '100%',
     overflowY: 'auto',
 };
-const ErrorLoading = ({ error }) => {
+const ErrorLoading = ({ error, calculateMetadataContext }) => {
     return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => {
                 var _a;
                 return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
-            }, calculateMetadata: true }, error.stack) }));
+            }, calculateMetadata: calculateMetadataContext }, error.stack) }));
 };

package/dist/components/CompositionSelectorItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
+const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
@@ -61,6 +62,18 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const compositionRowRef = (0, react_1.useRef)(null);
+    const compositionId = item.type === 'composition' ? item.composition.id : null;
+    (0, react_1.useLayoutEffect)(() => {
+        if (compositionId === null) {
+            return;
+        }
+        (0, sidebar_scroll_into_view_1.maybeScrollCompositionSidebarRowIntoView)({
+            element: compositionRowRef.current,
+            compositionId,
+            selected,
+        });
+    }, [compositionId, selected]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
@@ -77,6 +90,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
+            (0, sidebar_scroll_into_view_1.markCompositionSidebarScrollFromRowClick)(item.composition.id);
             selectComposition(item.composition, true);
         }
         else {
@@ -180,7 +194,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", { 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, 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/FilePreview.js

@@ -20,6 +20,9 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (assetMetadata.type === 'not-found') {
         throw new Error('expected to have assetMetadata, got "not-found"');
     }
+    if (assetMetadata.type === 'metadata-error') {
+        throw new Error('unexpected metadata-error in FilePreview');
+    }
     if (fileType === 'audio') {
         return jsx_runtime_1.jsx("audio", { src: src, controls: true });
     }

package/dist/components/InitialCompositionLoader.js

@@ -14,7 +14,7 @@ const use_static_files_1 = require("./use-static-files");
 const useSelectAsset = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    return (asset) => {
+    return (0, react_1.useCallback)((asset) => {
         var _a;
         setCanvasContent({ type: 'asset', asset });
         (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectAssetsPanel();
@@ -31,7 +31,7 @@ const useSelectAsset = () => {
             }
             return newState;
         });
-    };
+    }, [setAssetFoldersExpanded, setCanvasContent]);
 };
 exports.useSelectAsset = useSelectAsset;
 const useSelectComposition = () => {
@@ -134,7 +134,7 @@ const InitialCompositionLoader = () => {
                     return file.name === newCanvas.asset;
                 });
                 if (exists) {
-                    setCanvasContent(newCanvas);
+                    selectAsset(newCanvas.asset);
                 }
                 return;
             }
@@ -142,7 +142,13 @@ const InitialCompositionLoader = () => {
         };
         window.addEventListener('popstate', onchange);
         return () => window.removeEventListener('popstate', onchange);
-    }, [compositions, selectComposition, setCanvasContent, staticFiles]);
+    }, [
+        compositions,
+        selectAsset,
+        selectComposition,
+        setCanvasContent,
+        staticFiles,
+    ]);
     return null;
 };
 exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/components/Preview.d.ts

@@ -10,4 +10,5 @@ export declare const VideoPreview: React.FC<{
     readonly contentDimensions: Dimensions | 'none' | null;
     readonly canvasContent: CanvasContent;
     readonly assetMetadata: AssetMetadata | null;
+    readonly onRetryAssetMetadata?: () => void;
 }>;

package/dist/components/Preview.js

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 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 Spinner_1 = require("./Spinner");
 const StaticFilePreview_1 = require("./StaticFilePreview");
@@ -22,6 +24,14 @@ const label = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
 };
+const assetMetadataErrorContainer = {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '100%',
+    position: 'absolute',
+    height: '100%',
+    overflowY: 'auto',
+};
 const getPreviewFileType = (fileName) => {
     var _a;
     if (!fileName) {
@@ -68,10 +78,13 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
+const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, onRetryAssetMetadata, }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx("div", { style: label, children: "File does not exist" }) }));
     }
+    if (assetMetadata && assetMetadata.type === 'metadata-error') {
+        return (jsx_runtime_1.jsx("div", { style: assetMetadataErrorContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: assetMetadata.error, onRetry: onRetryAssetMetadata !== null && onRetryAssetMetadata !== void 0 ? onRetryAssetMetadata : null, calculateMetadata: false }, assetMetadata.error.stack) }));
+    }
     if (contentDimensions === null) {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }

package/dist/components/Timeline/TimelineListItem.js

@@ -48,7 +48,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
+    const { nodePath, jsxInMapCallback } = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -64,6 +64,34 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+    const duplicateDisabled = deleteDisabled;
+    const onDuplicateSequenceFromSource = (0, react_1.useCallback)(async () => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+            return;
+        }
+        if (jsxInMapCallback) {
+            const message = 'This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?';
+            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
+            if (!window.confirm(message)) {
+                return;
+            }
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
+                fileName: validatedLocation.source,
+                nodePath,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Duplicated sequence in source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [jsxInMapCallback, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
@@ -89,6 +117,23 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             return [];
         }
         return [
+            {
+                type: 'item',
+                id: 'duplicate-sequence',
+                keyHint: null,
+                label: 'Duplicate',
+                leftItem: null,
+                disabled: duplicateDisabled,
+                onClick: () => {
+                    if (duplicateDisabled) {
+                        return;
+                    }
+                    onDuplicateSequenceFromSource();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'duplicate-sequence',
+            },
             {
                 type: 'item',
                 id: 'delete-sequence',
@@ -107,7 +152,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
                 value: 'delete-sequence',
             },
         ];
-    }, [deleteDisabled, onDeleteSequenceFromSource, visualModeEnvEnabled]);
+    }, [
+        deleteDisabled,
+        duplicateDisabled,
+        onDeleteSequenceFromSource,
+        onDuplicateSequenceFromSource,
+        visualModeEnvEnabled,
+    ]);
     const isExpanded = visualModeActive && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,4 +1,7 @@
 import type { SequenceNodePath } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null, visualModeEnabled: boolean) => SequenceNodePath | null;
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null, visualModeEnabled: boolean) => {
+    nodePath: SequenceNodePath | null;
+    jsxInMapCallback: boolean;
+};

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -45,6 +45,7 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
     currentLocationColumn.current = locationColumn;
     const nodePathRef = (0, react_1.useRef)(null);
     const [nodePath, setNodePath] = (0, react_1.useState)(null);
+    const [jsxInMapCallback, setJsxInMapCallback] = (0, react_1.useState)(false);
     const isMountedRef = (0, react_1.useRef)(true);
     const setNodePathBoth = (0, react_1.useCallback)((next) => {
         nodePathRef.current = next;
@@ -60,6 +61,7 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
         if (!visualModeEnabled) {
             setPropStatusesForSequence(null);
             setNodePathBoth(null);
+            setJsxInMapCallback(false);
             return;
         }
         if (!clientId ||
@@ -69,6 +71,7 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
             !schemaKeysString) {
             setPropStatusesForSequence(null);
             setNodePathBoth(null);
+            setJsxInMapCallback(false);
             return;
         }
         const keys = schemaKeysString.split(',');
@@ -88,14 +91,17 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
             if (result.canUpdate) {
                 setNodePathBoth(result.nodePath);
                 setPropStatusesForSequence(result.props);
+                setJsxInMapCallback(result.jsxInMapCallback);
             }
             else {
                 setNodePathBoth(null);
                 setPropStatusesForSequence(null);
+                setJsxInMapCallback(false);
             }
         })
             .catch((err) => {
             setNodePathBoth(null);
+            setJsxInMapCallback(false);
             remotion_1.Internals.Log.error(err);
             setPropStatusesForSequence(null);
         });
@@ -107,6 +113,7 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
                 setPropStatusesForSequence(null);
             }
             setNodePathBoth(null);
+            setJsxInMapCallback(false);
             if (currentNodePath) {
                 (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
                     fileName: locationSource,
@@ -145,10 +152,12 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
             }
             if (event.result.canUpdate) {
                 setPropStatusesForSequence(event.result.props);
+                setJsxInMapCallback(event.result.jsxInMapCallback);
             }
             else {
                 setPropStatusesForSequence(null);
                 setNodePathBoth(null);
+                setJsxInMapCallback(false);
             }
         };
         const unsub = subscribeToEvent('sequence-props-updated', listener);
@@ -164,6 +173,6 @@ const useSequencePropsSubscription = (sequence, originalLocation, visualModeEnab
         setPropStatusesForSequence,
         setNodePathBoth,
     ]);
-    return nodePath;
+    return { nodePath, jsxInMapCallback };
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -65,7 +65,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                 ] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
                 ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { canHaveKeyboardShortcuts: keyboardShortcuts, errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry })
+                    jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
                 ] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})
                 ] })) : null, display.error instanceof remotion_1.MediaPlaybackError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/error-overlay/remotion-overlay/Retry.d.ts

@@ -1,3 +1,4 @@
 export declare const RetryButton: React.FC<{
     onClick: () => void;
+    readonly label?: string;
 }>;

package/dist/error-overlay/remotion-overlay/Retry.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RetryButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../components/Button");
-const RetryButton = ({ onClick }) => {
-    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: "Retry calculateMetadata()" });
+const RetryButton = ({ onClick, label = 'Retry' }) => {
+    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: label });
 };
 exports.RetryButton = RetryButton;