@remotion/studio 4.0.444 → 4.0.446

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelinePinchZoom = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
+const editor_zoom_gestures_1 = require("../../state/editor-zoom-gestures");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+/**
+ * Maps wheel deltaY to zoom delta. Must be large enough that typical ctrl+wheel
+ * pinch steps change `TimelineZoomCtx` zoom by at least one 0.1 step after
+ * `Math.round(z * 10) / 10` in `timeline-zoom.tsx` (0.005 was too small).
+ */
+const ZOOM_WHEEL_DELTA = 0.06;
+const TimelinePinchZoom = () => {
+    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { zoom, setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const zoomRef = (0, react_1.useRef)(zoom);
+    zoomRef.current = zoom;
+    const pinchBaseZoomRef = (0, react_1.useRef)(null);
+    const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
+    const touchPinchRef = (0, react_1.useRef)(null);
+    const onWheel = (0, react_1.useCallback)((e) => {
+        if (!editorZoomGestures || !isVideoComposition) {
+            return;
+        }
+        const { ctrlKey, metaKey, clientX, deltaY, deltaMode } = e;
+        const wantsToZoom = ctrlKey || metaKey;
+        if (!wantsToZoom) {
+            return;
+        }
+        if (suppressWheelFromWebKitPinchRef.current && wantsToZoom) {
+            e.preventDefault();
+            return;
+        }
+        if (!videoConfig || videoConfig.durationInFrames < 2) {
+            return;
+        }
+        if (!canvasContent || canvasContent.type !== 'composition') {
+            return;
+        }
+        const scrollEl = timeline_refs_1.scrollableRef.current;
+        if (!scrollEl) {
+            return;
+        }
+        e.preventDefault();
+        const anchorContentX = (0, timeline_scroll_logic_1.viewportClientXToScrollContentX)({
+            clientX,
+            scrollEl,
+        });
+        let scaledDeltaY = deltaY;
+        if (deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            scaledDeltaY *= 16;
+        }
+        else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+            scaledDeltaY *= scrollEl.clientHeight;
+        }
+        setZoom(canvasContent.compositionId, (z) => z - scaledDeltaY * ZOOM_WHEEL_DELTA, { anchorFrame: null, anchorContentX });
+    }, [
+        editorZoomGestures,
+        isVideoComposition,
+        videoConfig,
+        canvasContent,
+        setZoom,
+    ]);
+    const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
+    (0, react_1.useEffect)(() => {
+        const el = timeline_refs_1.timelineVerticalScroll.current;
+        if (!el) {
+            return;
+        }
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => {
+            el.removeEventListener('wheel', onWheel);
+        };
+    }, [onWheel]);
+    (0, react_1.useEffect)(() => {
+        const el = timeline_refs_1.timelineVerticalScroll.current;
+        if (!el || !editorZoomGestures || !supportsWebKitPinch) {
+            return;
+        }
+        const endWebKitPinch = () => {
+            pinchBaseZoomRef.current = null;
+            suppressWheelFromWebKitPinchRef.current = false;
+        };
+        const onGestureStart = (event) => {
+            var _a;
+            const e = event;
+            if (!isVideoComposition) {
+                return;
+            }
+            if (!videoConfig || videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const scrollEl = timeline_refs_1.scrollableRef.current;
+            if (!scrollEl) {
+                return;
+            }
+            e.preventDefault();
+            suppressWheelFromWebKitPinchRef.current = true;
+            pinchBaseZoomRef.current = (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        };
+        const onGestureChange = (event) => {
+            const e = event;
+            const base = pinchBaseZoomRef.current;
+            if (base === null ||
+                !isVideoComposition ||
+                !videoConfig ||
+                videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const scrollEl = timeline_refs_1.scrollableRef.current;
+            if (!scrollEl) {
+                return;
+            }
+            e.preventDefault();
+            const anchorContentX = (0, timeline_scroll_logic_1.viewportClientXToScrollContentX)({
+                clientX: e.clientX,
+                scrollEl,
+            });
+            setZoom(canvasContent.compositionId, () => base * e.scale, {
+                anchorFrame: null,
+                anchorContentX,
+            });
+        };
+        const onGestureEnd = () => {
+            endWebKitPinch();
+        };
+        el.addEventListener('gesturestart', onGestureStart, { passive: false });
+        el.addEventListener('gesturechange', onGestureChange, { passive: false });
+        el.addEventListener('gestureend', onGestureEnd);
+        el.addEventListener('gesturecancel', onGestureEnd);
+        return () => {
+            el.removeEventListener('gesturestart', onGestureStart);
+            el.removeEventListener('gesturechange', onGestureChange);
+            el.removeEventListener('gestureend', onGestureEnd);
+            el.removeEventListener('gesturecancel', onGestureEnd);
+        };
+    }, [
+        editorZoomGestures,
+        supportsWebKitPinch,
+        isVideoComposition,
+        videoConfig,
+        canvasContent,
+        setZoom,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const el = timeline_refs_1.timelineVerticalScroll.current;
+        if (!el || !editorZoomGestures) {
+            return;
+        }
+        const onTouchStart = (event) => {
+            var _a;
+            if (event.touches.length !== 2) {
+                touchPinchRef.current = null;
+                return;
+            }
+            if (!isVideoComposition ||
+                !videoConfig ||
+                videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const [t0, t1] = [event.touches[0], event.touches[1]];
+            const initialDistance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+            if (initialDistance < 1e-6) {
+                return;
+            }
+            touchPinchRef.current = {
+                initialDistance,
+                initialZoom: (_a = zoomRef.current[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM,
+            };
+        };
+        const onTouchMove = (event) => {
+            const pinch = touchPinchRef.current;
+            if (pinch === null ||
+                event.touches.length !== 2 ||
+                !videoConfig ||
+                videoConfig.durationInFrames < 2) {
+                return;
+            }
+            if (!canvasContent || canvasContent.type !== 'composition') {
+                return;
+            }
+            const scrollEl = timeline_refs_1.scrollableRef.current;
+            if (!scrollEl) {
+                return;
+            }
+            event.preventDefault();
+            const [t0, t1] = [event.touches[0], event.touches[1]];
+            const dist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+            const ratio = dist / pinch.initialDistance;
+            const clientX = (t0.clientX + t1.clientX) / 2;
+            const anchorContentX = (0, timeline_scroll_logic_1.viewportClientXToScrollContentX)({
+                clientX,
+                scrollEl,
+            });
+            setZoom(canvasContent.compositionId, () => pinch.initialZoom * ratio, {
+                anchorFrame: null,
+                anchorContentX,
+            });
+        };
+        const onTouchEnd = (event) => {
+            if (event.touches.length < 2) {
+                touchPinchRef.current = null;
+            }
+        };
+        el.addEventListener('touchstart', onTouchStart, { passive: true });
+        el.addEventListener('touchmove', onTouchMove, { passive: false });
+        el.addEventListener('touchend', onTouchEnd);
+        el.addEventListener('touchcancel', onTouchEnd);
+        return () => {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', onTouchEnd);
+            el.removeEventListener('touchcancel', onTouchEnd);
+        };
+    }, [
+        editorZoomGestures,
+        isVideoComposition,
+        videoConfig,
+        canvasContent,
+        setZoom,
+    ]);
+    return null;
+};
+exports.TimelinePinchZoom = TimelinePinchZoom;

package/dist/components/Timeline/TimelineSlider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
 const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
@@ -32,20 +33,33 @@ const TimelineSlider = () => {
 };
 exports.TimelineSlider = TimelineSlider;
 const Inner = () => {
+    var _a;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const ref = (0, react_1.useRef)(null);
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     if (timelineWidth === null) {
         throw new Error('Unexpectedly did not have timeline width');
     }
-    const style = (0, react_1.useMemo)(() => {
-        const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, timelineWidth);
-        return {
-            ...container,
-            transform: `translateX(${left}px)`,
-        };
-    }, [timelinePosition, videoConfig.durationInFrames, timelineWidth]);
+    const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
+        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const el = ref.current;
+        const measuredWidth = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (!el || measuredWidth === undefined || measuredWidth === 0) {
+            return;
+        }
+        el.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, measuredWidth)}px)`;
+    }, [
+        timelinePosition,
+        videoConfig.durationInFrames,
+        timelineWidth,
+        zoomLevel,
+    ]);
     (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
         return {
             draw: (frame, width) => {
@@ -76,7 +90,7 @@ const Inner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
             jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
         ] }));
 };

package/dist/components/Timeline/TimelineZoomControls.js

@@ -33,19 +33,22 @@ const TimelineZoomControls = () => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
+        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2));
+        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const onChange = (0, react_1.useCallback)((e) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value));
+        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -35,9 +35,21 @@ export declare const getFrameFromX: ({ clientX, durationInFrames, width, extrapo
     width: number;
     extrapolate: "clamp" | "extend";
 }) => number;
-export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }: {
+/**
+ * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
+ * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a
+ * rounded frame index).
+ */
+export declare const viewportClientXToScrollContentX: ({ clientX, scrollEl, }: {
+    clientX: number;
+    scrollEl: HTMLDivElement;
+}) => number;
+export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
     oldZoom: number;
     newZoom: number;
     currentFrame: number;
     currentDurationInFrames: number;
+    anchorFrame: number | null;
+    /** Prefer this over `anchorFrame` when not null (subpixel-accurate anchor). */
+    anchorContentX: number | null;
 }) => void;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -200,9 +200,18 @@ const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     return frame;
 };
 exports.getFrameFromX = getFrameFromX;
-const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }) => {
-    var _a, _b;
-    var _c;
+/**
+ * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
+ * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a
+ * rounded frame index).
+ */
+const viewportClientXToScrollContentX = ({ clientX, scrollEl, }) => {
+    const rect = scrollEl.getBoundingClientRect();
+    const clampedClientX = Math.min(Math.max(clientX, rect.left), rect.right);
+    return clampedClientX + scrollEl.scrollLeft - rect.left;
+};
+exports.viewportClientXToScrollContentX = viewportClientXToScrollContentX;
+const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
     const ratio = newZoom / oldZoom;
     if (ratio === 1) {
         return;
@@ -212,9 +221,14 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
         return;
     }
     const frameIncrement = getFrameIncrement(currentDurationInFrames);
-    const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
+    const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
+    const prevCursorPosition = anchorContentX !== null
+        ? Math.min(Math.max(anchorContentX, 0), current.scrollWidth)
+        : frameIncrement * frameForScroll + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;
-    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(currentFrame, ((_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0) * ratio);
+    // Playhead position is synced in `TimelineSlider` `useLayoutEffect` using
+    // measured `sliderAreaRef.clientWidth` so it matches layout after zoom
+    // (avoids fighting React `style` with stale `timelineWidth` during pinch).
 };
 exports.zoomAndPreserveCursor = zoomAndPreserveCursor;

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;