@remotion/studio 4.0.519 → 4.0.521

package/dist/api/shut-down-studio.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Shuts down the Remotion Studio.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/shut-down-studio)
+ */
+import type { ShutdownStudioResponse } from '@remotion/studio-shared';
+export declare const shutDownStudio: () => Promise<ShutdownStudioResponse>;

package/dist/api/shut-down-studio.js

@@ -0,0 +1,23 @@
+"use strict";
+/**
+ * @description Shuts down the Remotion Studio.
+ * @see [Documentation](https://www.remotion.dev/docs/studio/shut-down-studio)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shutDownStudio = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../components/call-api");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const shutDownStudio = () => {
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('shutDownStudio() is only available in the Studio');
+    }
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        throw new Error('shutDownStudio() is not supported in Browser Studio');
+    }
+    if (window.remotion_isReadOnlyStudio) {
+        throw new Error('shutDownStudio() is not available in read-only Studio');
+    }
+    return (0, call_api_1.callApi)('/api/shutdown-studio', {});
+};
+exports.shutDownStudio = shutDownStudio;

package/dist/api/visual-control.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visualControl = void 0;
-const react_1 = require("react");
 const remotion_1 = require("remotion");
+const use_sync_external_store_1 = require("../helpers/use-sync-external-store");
 const visual_control_store_1 = require("../visual-controls/visual-control-store");
 const VisualControls_1 = require("../visual-controls/VisualControls");
 /**
@@ -12,7 +12,7 @@ const visualControl = (key, value, schema) => {
     // Subscribe to store changes so the calling component
     // re-renders when a visual control value is edited in the sidebar.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, react_1.useSyncExternalStore)(visual_control_store_1.visualControlStore.subscribe, visual_control_store_1.visualControlStore.getSnapshot, visual_control_store_1.visualControlStore.getSnapshot);
+    (0, use_sync_external_store_1.useSyncExternalStore)(visual_control_store_1.visualControlStore.subscribe, visual_control_store_1.visualControlStore.getSnapshot, visual_control_store_1.visualControlStore.getSnapshot);
     if ((0, remotion_1.getRemotionEnvironment)().isRendering) {
         return value;
     }

package/dist/components/AudioWaveform.js

@@ -39,6 +39,7 @@ const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const EMPTY_PEAKS = new Float32Array(0);
 const getContainerStyle = (height) => {
@@ -49,17 +50,15 @@ const getContainerStyle = (height) => {
         position: 'relative',
         width: '100%',
         height,
+        overflow: 'hidden',
     };
 };
 const waveformCanvasStyle = {
     pointerEvents: 'none',
-    width: '100%',
-    height: '100%',
+    flexShrink: 0,
 };
 const volumeCanvasStyle = {
     position: 'absolute',
-    width: '100%',
-    height: '100%',
 };
 const parseVolume = (volume) => {
     if (typeof volume === 'number') {
@@ -74,6 +73,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
+    const waveformSampleRate = Math.ceil(vidConf.fps * get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM);
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
@@ -102,10 +102,11 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         setError(null);
         return (0, timeline_utils_1.subscribeToWaveformPeaks)({
             src,
+            waveformSampleRate,
             onPeaks: (p) => setPeaks(p),
             onError: (err) => setError(err),
         });
-    }, [src]);
+    }, [src, waveformSampleRate]);
     const portionPeaks = (0, react_1.useMemo)(() => {
         if (!peaks) {
             return null;
@@ -119,6 +120,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
             peaks,
             playbackRate,
             startFrom,
+            waveformSampleRate,
         });
     }, [
         displayDurationInFrames,
@@ -129,6 +131,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         playbackRate,
         startFrom,
         vidConf.fps,
+        waveformSampleRate,
     ]);
     // Drawing must happen in a layout effect: when the timeline zooms, the
     // canvas CSS box resizes in the same commit, and painting the bitmap
@@ -141,14 +144,17 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         const pixelRatio = window.devicePixelRatio;
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
+        const drawingWidth = visualizationWidth * pixelRatio;
         canvasElement.width = w;
         canvasElement.height = h;
+        canvasElement.style.width = w / pixelRatio + 'px';
+        canvasElement.style.height = h / pixelRatio + 'px';
         (0, timeline_utils_1.drawBars)({
             canvas: canvasElement,
             peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
             color: colors_1.WHITE_ALPHA_60,
             volume: visibleVolume,
-            width: w,
+            width: drawingWidth,
         });
     }, [height, portionPeaks, visibleVolume, visualizationWidth]);
     (0, react_1.useLayoutEffect)(() => {
@@ -162,12 +168,15 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         const pixelRatio = window.devicePixelRatio;
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
+        const drawingWidth = visualizationWidth * pixelRatio;
         const context = volumeCanvasElement.getContext('2d');
         if (!context) {
             return;
         }
         volumeCanvasElement.width = w;
         volumeCanvasElement.height = h;
+        volumeCanvasElement.style.width = w / pixelRatio + 'px';
+        volumeCanvasElement.style.height = h / pixelRatio + 'px';
         context.clearRect(0, 0, w, h);
         if (!Array.isArray(visibleVolume)) {
             return;
@@ -177,7 +186,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         visibleVolume.forEach((v, index) => {
             const x = visibleVolume.length <= 1
                 ? 0
-                : (index / (visibleVolume.length - 1)) * w;
+                : (index / (visibleVolume.length - 1)) * drawingWidth;
             const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2 * pixelRatio) + pixelRatio;
             if (index === 0) {
                 context.moveTo(x, y);

package/dist/components/Canvas.js

@@ -29,6 +29,7 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const canvas_capture_drop_1 = require("./canvas-capture-drop");
+const composition_drag_data_1 = require("./composition-drag-data");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
@@ -37,7 +38,6 @@ const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
-const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
@@ -47,7 +47,19 @@ const ResetZoomButton_1 = require("./ResetZoomButton");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const elementInstallDependencyIgnoreList = ['react', 'react-dom', 'remotion'];
+const getCanvasDragPreviewMetadata = (mimeTypes) => {
+    var _a, _b, _c;
+    const composition = (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(mimeTypes);
+    if (composition !== null) {
+        return {
+            ...composition,
+            width: (_a = composition.width) !== null && _a !== void 0 ? _a : undefined,
+            height: (_b = composition.height) !== null && _b !== void 0 ? _b : undefined,
+            durationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : undefined,
+        };
+    }
+    return studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(mimeTypes);
+};
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -140,10 +152,8 @@ const Canvas = ({ canvasContent, size }) => {
         : null;
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [compositionDropPreview, setCompositionDropPreview] = (0, react_1.useState)(null);
-    const [installingElementName, setInstallingElementName] = (0, react_1.useState)(null);
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
-    const [elementInstallReview, setElementInstallReview] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
@@ -601,16 +611,6 @@ const Canvas = ({ canvasContent, size }) => {
             updateElementInstallTarget(event.requestId);
         });
     }, [subscribeToEvent, updateElementInstallTarget]);
-    (0, react_1.useEffect)(() => {
-        if (installingElementName === null) {
-            return;
-        }
-        const previousTitle = document.title;
-        document.title = `📦 Install ${installingElementName} - Remotion Studio`;
-        return () => {
-            document.title = previousTitle;
-        };
-    }, [installingElementName]);
     (0, react_1.useEffect)(() => {
         if (previewServerClientId === null) {
             return;
@@ -623,24 +623,103 @@ const Canvas = ({ canvasContent, size }) => {
             (0, element_install_request_1.enqueueElementInstallRequest)(event.request);
         });
     }, [previewServerClientId, subscribeToEvent]);
+    (0, react_1.useEffect)(() => {
+        const onMessage = (event) => {
+            var _a, _b;
+            const elementLibrary = document.querySelector('iframe[data-remotion-element-library]');
+            if (event.source !== (elementLibrary === null || elementLibrary === void 0 ? void 0 : elementLibrary.contentWindow) ||
+                !studio_protocol_1.StudioProtocolInternals.isAllowedStudioProtocolPageOrigin(event.origin)) {
+                return;
+            }
+            const payload = studio_protocol_1.StudioProtocolInternals.parseStudioProtocolIframeInstallRequest(event.data);
+            const responsePort = event.ports[0];
+            if (payload === null || responsePort === undefined) {
+                return;
+            }
+            const canInstall = canReceiveElementInstallRequest &&
+                compositionFile !== null &&
+                currentCompositionId !== null &&
+                previewServerClientId !== null;
+            const request = canInstall
+                ? {
+                    clientId: previewServerClientId,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    createdAt: Date.now(),
+                    element: {
+                        ...payload.element,
+                        durationInFrames: (_a = payload.element.durationInFrames) !== null && _a !== void 0 ? _a : null,
+                        installationMode: (_b = payload.element.installationMode) !== null && _b !== void 0 ? _b : null,
+                    },
+                    from: null,
+                    id: crypto.randomUUID(),
+                    position: null,
+                    source: { origin: event.origin, type: 'studio-protocol' },
+                }
+                : null;
+            const result = canInstall
+                ? {
+                    success: true,
+                    status: 'awaiting-confirmation',
+                    target: {
+                        compositionId: currentCompositionId,
+                        projectName: window.remotion_projectName,
+                        studioOrigin: window.location.origin,
+                        studioVersion: window.remotion_version,
+                    },
+                }
+                : {
+                    success: false,
+                    code: 'no-installable-target',
+                    message: 'Focus a composition in a Remotion Studio that is not read-only, then try again.',
+                };
+            const timeout = window.setTimeout(() => responsePort.close(), 1000);
+            responsePort.onmessage = () => {
+                window.clearTimeout(timeout);
+                responsePort.close();
+                if (request !== null) {
+                    (0, element_install_request_1.enqueueElementInstallRequest)(request);
+                }
+            };
+            responsePort.postMessage(result);
+        };
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [
+        canReceiveElementInstallRequest,
+        compositionFile,
+        currentCompositionId,
+        previewServerClientId,
+    ]);
     (0, react_1.useEffect)(() => {
         return (0, element_install_request_1.subscribeToElementInstallRequests)((request) => {
-            const requestWithFrom = request.source.type === 'drag-and-drop' || request.from !== null
+            var _a, _b;
+            const isDragAndDrop = request.source.type === 'drag-and-drop';
+            const requestWithDefaults = isDragAndDrop
                 ? request
                 : {
                     ...request,
-                    from: (0, import_assets_1.getFromForDrop)({
+                    from: (_a = request.from) !== null && _a !== void 0 ? _a : (0, import_assets_1.getFromForDrop)({
                         durationInFrames: request.element.durationInFrames,
                         from: (0, imperative_state_1.getCurrentFrame)(),
                         preferCompositionStart: true,
                     }),
+                    position: (_b = request.position) !== null && _b !== void 0 ? _b : (0, import_assets_1.getElementPositionForDrop)({
+                        dimensions: request.element.dimensions,
+                        dropPosition: contentDimensions === null || contentDimensions === 'none'
+                            ? null
+                            : {
+                                centerX: contentDimensions.width / 2,
+                                centerY: contentDimensions.height / 2,
+                            },
+                    }),
                 };
             setPendingElementInstallRequests((requests) => [
                 ...requests,
-                requestWithFrom,
+                requestWithDefaults,
             ]);
         });
-    }, []);
+    }, [contentDimensions]);
     (0, react_1.useEffect)(() => {
         var _a;
         var _b;
@@ -680,6 +759,10 @@ const Canvas = ({ canvasContent, size }) => {
         setActiveElementInstallRequest(nextRequest);
         setPendingElementInstallRequests(remainingRequests);
     }, [activeElementInstallRequest, pendingElementInstallRequests]);
+    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        setActiveElementInstallRequest(null);
+    }, [setSelectedModal]);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest === null) {
             return;
@@ -687,7 +770,6 @@ const Canvas = ({ canvasContent, size }) => {
         let canceled = false;
         const handleInstallRequest = async () => {
             var _a;
-            setInstallingElementName(activeElementInstallRequest.element.displayName);
             try {
                 const [newPreflight, currentPreflight] = await Promise.all([
                     (0, element_install_api_1.prepareElementInstall)({
@@ -711,17 +793,11 @@ const Canvas = ({ canvasContent, size }) => {
                 }
                 if (!newPreflight.success) {
                     (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${newPreflight.reason}`, 4000);
-                    setInstallingElementName(null);
                     setActiveElementInstallRequest(null);
                     return;
                 }
                 const declaredDependencies = Array.from(new Map(activeElementInstallRequest.element.dependencies.map((dependency) => [dependency.name, dependency])).values());
-                const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.name);
-                const ignoredDependencies = declaredDependencies.filter((dependency) => elementInstallDependencyIgnoreList.includes(dependency.name) &&
-                    !missingPackages.includes(dependency.name));
-                const dependenciesToReview = declaredDependencies
-                    .filter((dependency) => !ignoredDependencies.includes(dependency))
-                    .map((dependency) => dependency.version === null
+                const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.version === null
                     ? dependency.name
                     : `${dependency.name}@${dependency.version}`);
                 const { source } = activeElementInstallRequest;
@@ -735,12 +811,13 @@ const Canvas = ({ canvasContent, size }) => {
                 const currentPlan = currentPreflight.success
                     ? currentPreflight.plan
                     : null;
-                setSelectedModal(null);
-                setElementInstallReview({
+                setSelectedModal({
+                    type: 'element-install',
                     currentPlan,
-                    dependenciesToReview,
                     missingPackages,
                     newPlan: newPreflight.plan,
+                    onClose: closeElementInstallDialog,
+                    request: activeElementInstallRequest,
                     sourceIsUnverified,
                     sourceLabel,
                 });
@@ -750,7 +827,6 @@ const Canvas = ({ canvasContent, size }) => {
                     return;
                 }
                 (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${error instanceof Error ? error.message : String(error)}`, 4000);
-                setInstallingElementName(null);
                 setActiveElementInstallRequest(null);
             }
         };
@@ -758,12 +834,11 @@ const Canvas = ({ canvasContent, size }) => {
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, setSelectedModal]);
-    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
-        setElementInstallReview(null);
-        setInstallingElementName(null);
-        setActiveElementInstallRequest(null);
-    }, []);
+    }, [
+        activeElementInstallRequest,
+        closeElementInstallDialog,
+        setSelectedModal,
+    ]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -787,7 +862,7 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+        const metadata = getCanvasDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
         if (((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' && (metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'element') ||
             metadata.width === undefined ||
             metadata.height === undefined) {
@@ -918,7 +993,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
+            const metadata = getCanvasDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,
@@ -1122,15 +1197,6 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [compositionDropPreview, contentDimensions, previewSize, size]);
     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, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), 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, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef })), activeElementInstallRequest === null ||
-                elementInstallReview === null ? null : (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { currentCompositionMetadata: config === null ||
-                    currentCompositionId !== activeElementInstallRequest.compositionId
-                    ? null
-                    : {
-                        durationInFrames: config.durationInFrames,
-                        fps: config.fps,
-                        height: config.height,
-                        width: config.width,
-                    }, currentPlan: elementInstallReview.currentPlan, dependenciesToReview: elementInstallReview.dependenciesToReview, missingPackages: elementInstallReview.missingPackages, newPlan: elementInstallReview.newPlan, onClose: closeElementInstallDialog, request: activeElementInstallRequest, sourceIsUnverified: elementInstallReview.sourceIsUnverified, sourceLabel: elementInstallReview.sourceLabel, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null }))] }));
+            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, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), 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, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CaptionInspector.d.ts

@@ -6,6 +6,7 @@ export declare const CaptionInspector: React.FC<{
     readonly onTextChange: (captions: Caption[]) => void;
     readonly onTextSave: ((captions: Caption[]) => void) | null;
     readonly onTextCancel: (() => void) | null;
+    readonly onReplaceCaptions: ((captions: Caption[]) => void) | null;
     readonly onToggle: () => void;
     readonly readOnly: boolean;
     readonly readOnlyTitle: string | null;

package/dist/components/CaptionInspector.js

@@ -2,11 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CaptionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const upload_1 = require("../icons/upload");
+const Button_1 = require("./Button");
 const CaptionTextEditor_1 = require("./CaptionTextEditor");
 const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const parse_caption_file_1 = require("./parse-caption-file");
+const importTooltip = `Import captions
+
+Supports Remotion Caption[] JSON. Files are processed locally.`;
 const readOnlyStatus = {
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
@@ -15,8 +23,41 @@ const readOnlyStatus = {
     lineHeight: '16px',
     marginLeft: 12,
 };
-const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onToggle, readOnly, readOnlyTitle, }) => {
+const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
+    const fileInput = (0, react_1.useRef)(null);
+    const [isImporting, setIsImporting] = (0, react_1.useState)(false);
+    const importCaptions = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+        event.currentTarget.value = '';
+        if (!file || onReplaceCaptions === null) {
+            return;
+        }
+        setIsImporting(true);
+        try {
+            onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
+                fileName: file.name,
+                contents: await file.text(),
+            }));
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not import ${file.name}: ${error instanceof Error ? error.message : String(error)}`, 5000);
+        }
+        finally {
+            setIsImporting(false);
+        }
+    }, [onReplaceCaptions]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: importCaptions, type: "file" }), jsx_runtime_1.jsxs(Button_1.Button, { buttonContainerStyle: {
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            gap: 4,
+                                        }, disabled: isImporting, onClick: () => {
+                                            var _a;
+                                            return (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+                                        }, size: "condensed", title: importTooltip, children: [
+                                            jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: colors_1.CURRENT_COLOR, focusable: "false", style: { height: 12, width: 12 } }), isImporting ? 'Importing…' : 'Import'] })
+                                ] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CaptionTextEditor.js

@@ -119,7 +119,7 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
                         ? `Remove page break after caption ${index + 1}`
                         : `Add page break after caption ${index + 1}`;
                     return (jsx_runtime_1.jsxs("div", { style: row, children: [
-                            jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
+                            jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": `Caption ${index + 1}`, "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
                                     if (cancelledBlurIndexes.current.delete(index)) {
                                         return;
                                     }