@remotion/studio 4.0.444 → 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

@@ -21,13 +21,14 @@ const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
-const container = {
+const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
     overflow: 'hidden',
     position: 'relative',
     backgroundColor: colors_1.BACKGROUND,
-};
+    ...(editorZoomGestures ? { touchAction: 'none' } : {}),
+});
 const resetZoom = {
     position: 'absolute',
     top: layout_1.SPACING_UNIT * 2,
@@ -37,6 +38,14 @@ const ZOOM_PX_FACTOR = 0.003;
 const Canvas = ({ canvasContent, size }) => {
     const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const previewSnapshotRef = (0, react_1.useRef)({
+        previewSize,
+        canvasSize: size,
+        contentDimensions: null,
+    });
+    const pinchBaseZoomRef = (0, react_1.useRef)(null);
+    const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
+    const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
@@ -56,7 +65,13 @@ const Canvas = ({ canvasContent, size }) => {
         return null;
     }, [assetResolution, config, canvasContent]);
     const isFit = previewSize.size === 'auto';
+    previewSnapshotRef.current = {
+        previewSize,
+        canvasSize: size,
+        contentDimensions,
+    };
     const onWheel = (0, react_1.useCallback)((e) => {
+        const ev = e;
         if (!editorZoomGestures) {
             return;
         }
@@ -66,11 +81,15 @@ const Canvas = ({ canvasContent, size }) => {
         if (!contentDimensions || contentDimensions === 'none') {
             return;
         }
-        const wantsToZoom = e.ctrlKey || e.metaKey;
+        const wantsToZoom = ev.ctrlKey || ev.metaKey;
         if (!wantsToZoom && isFit) {
             return;
         }
-        e.preventDefault();
+        if (suppressWheelFromWebKitPinchRef.current && wantsToZoom) {
+            ev.preventDefault();
+            return;
+        }
+        ev.preventDefault();
         setSize((prevSize) => {
             const scale = remotion_1.Internals.calculateScale({
                 canvasSize: size,
@@ -78,41 +97,20 @@ const Canvas = ({ canvasContent, size }) => {
                 compositionWidth: contentDimensions.width,
                 previewSize: prevSize.size,
             });
-            // Zoom in/out
             if (wantsToZoom) {
                 const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
                 const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
-                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
+                const added = smoothened + ev.deltaY * ZOOM_PX_FACTOR;
                 const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
-                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
-                    size,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    compositionWidth: contentDimensions.width,
-                    compositionHeight: contentDimensions.height,
-                    scale,
-                    translation: prevSize.translation,
+                return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    canvasSize: size,
+                    contentDimensions,
+                    previewSizeBefore: prevSize,
+                    oldNumericSize: oldSize,
+                    newNumericSize: unsmoothened,
+                    clientX: ev.clientX,
+                    clientY: ev.clientY,
                 });
-                const zoomDifference = unsmoothened - oldSize;
-                const uvCoordinatesX = centerX / contentDimensions.width;
-                const uvCoordinatesY = centerY / contentDimensions.height;
-                const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
-                    (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
-                const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
-                    (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
-                return {
-                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                        translation: {
-                            x: prevSize.translation.x - correctionLeft / 2,
-                            y: prevSize.translation.y - correctionTop / 2,
-                        },
-                        canvasSize: size,
-                        compositionHeight: contentDimensions.height,
-                        compositionWidth: contentDimensions.width,
-                        scale,
-                    }),
-                    size: unsmoothened,
-                };
             }
             const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
                 translation: prevSize.translation,
@@ -121,13 +119,12 @@ const Canvas = ({ canvasContent, size }) => {
                 compositionWidth: contentDimensions.width,
                 scale,
             });
-            // Pan
             return {
                 ...prevSize,
                 translation: (0, get_effective_translation_1.getEffectiveTranslation)({
                     translation: {
-                        x: effectiveTranslation.x + e.deltaX,
-                        y: effectiveTranslation.y + e.deltaY,
+                        x: effectiveTranslation.x + ev.deltaX,
+                        y: effectiveTranslation.y + ev.deltaY,
                     },
                     canvasSize: size,
                     compositionHeight: contentDimensions.height,
@@ -143,12 +140,170 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         current.addEventListener('wheel', onWheel, { passive: false });
-        return () => 
-        // @ts-expect-error
-        current.removeEventListener('wheel', onWheel, {
+        return () => {
+            current.removeEventListener('wheel', onWheel);
+        };
+    }, [onWheel]);
+    const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
+    (0, react_1.useEffect)(() => {
+        const { current } = canvas_ref_1.canvasRef;
+        if (!current || !editorZoomGestures || !supportsWebKitPinch) {
+            return;
+        }
+        const endWebKitPinch = () => {
+            pinchBaseZoomRef.current = null;
+            suppressWheelFromWebKitPinchRef.current = false;
+        };
+        const onGestureStart = (event) => {
+            const e = event;
+            const snap = previewSnapshotRef.current;
+            const canvasSz = snap.canvasSize;
+            const cdim = snap.contentDimensions;
+            if (!canvasSz || !cdim || cdim === 'none') {
+                return;
+            }
+            e.preventDefault();
+            suppressWheelFromWebKitPinchRef.current = true;
+            const fitted = remotion_1.Internals.calculateScale({
+                canvasSize: canvasSz,
+                compositionHeight: cdim.height,
+                compositionWidth: cdim.width,
+                previewSize: snap.previewSize.size,
+            });
+            pinchBaseZoomRef.current =
+                snap.previewSize.size === 'auto' ? fitted : snap.previewSize.size;
+        };
+        const onGestureChange = (event) => {
+            const e = event;
+            const base = pinchBaseZoomRef.current;
+            const snap = previewSnapshotRef.current;
+            const canvasSz = snap.canvasSize;
+            const cdim = snap.contentDimensions;
+            if (base === null || !canvasSz || !cdim || cdim === 'none') {
+                return;
+            }
+            const dimensions = cdim;
+            e.preventDefault();
+            setSize((prevSize) => {
+                const scale = remotion_1.Internals.calculateScale({
+                    canvasSize: canvasSz,
+                    compositionHeight: dimensions.height,
+                    compositionWidth: dimensions.width,
+                    previewSize: prevSize.size,
+                });
+                const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
+                return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    canvasSize: canvasSz,
+                    contentDimensions: dimensions,
+                    previewSizeBefore: prevSize,
+                    oldNumericSize: oldNumeric,
+                    newNumericSize: base * e.scale,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                });
+            });
+        };
+        const onGestureEnd = () => {
+            endWebKitPinch();
+        };
+        current.addEventListener('gesturestart', onGestureStart, {
             passive: false,
         });
-    }, [onWheel]);
+        current.addEventListener('gesturechange', onGestureChange, {
+            passive: false,
+        });
+        current.addEventListener('gestureend', onGestureEnd);
+        current.addEventListener('gesturecancel', onGestureEnd);
+        return () => {
+            current.removeEventListener('gesturestart', onGestureStart);
+            current.removeEventListener('gesturechange', onGestureChange);
+            current.removeEventListener('gestureend', onGestureEnd);
+            current.removeEventListener('gesturecancel', onGestureEnd);
+        };
+    }, [editorZoomGestures, setSize, supportsWebKitPinch]);
+    (0, react_1.useEffect)(() => {
+        const { current } = canvas_ref_1.canvasRef;
+        if (!current || !editorZoomGestures) {
+            return;
+        }
+        const onTouchStart = (event) => {
+            if (event.touches.length !== 2) {
+                touchPinchRef.current = null;
+                return;
+            }
+            const snap = previewSnapshotRef.current;
+            if (!snap.canvasSize ||
+                !snap.contentDimensions ||
+                snap.contentDimensions === 'none') {
+                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;
+            }
+            const fitted = remotion_1.Internals.calculateScale({
+                canvasSize: snap.canvasSize,
+                compositionHeight: snap.contentDimensions.height,
+                compositionWidth: snap.contentDimensions.width,
+                previewSize: snap.previewSize.size,
+            });
+            const initialZoom = snap.previewSize.size === 'auto' ? fitted : snap.previewSize.size;
+            touchPinchRef.current = { initialDistance, initialZoom };
+        };
+        const onTouchMove = (event) => {
+            const pinch = touchPinchRef.current;
+            const snap = previewSnapshotRef.current;
+            if (pinch === null ||
+                event.touches.length !== 2 ||
+                !snap.canvasSize ||
+                !snap.contentDimensions ||
+                snap.contentDimensions === 'none') {
+                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 clientY = (t0.clientY + t1.clientY) / 2;
+            setSize((prevSize) => {
+                const canvasSz = snap.canvasSize;
+                const cdim = snap.contentDimensions;
+                const scale = remotion_1.Internals.calculateScale({
+                    canvasSize: canvasSz,
+                    compositionHeight: cdim.height,
+                    compositionWidth: cdim.width,
+                    previewSize: prevSize.size,
+                });
+                const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
+                return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    canvasSize: canvasSz,
+                    contentDimensions: cdim,
+                    previewSizeBefore: prevSize,
+                    oldNumericSize: oldNumeric,
+                    newNumericSize: pinch.initialZoom * ratio,
+                    clientX,
+                    clientY,
+                });
+            });
+        };
+        const onTouchEnd = (event) => {
+            if (event.touches.length < 2) {
+                touchPinchRef.current = null;
+            }
+        };
+        current.addEventListener('touchstart', onTouchStart, { passive: true });
+        current.addEventListener('touchmove', onTouchMove, { passive: false });
+        current.addEventListener('touchend', onTouchEnd);
+        current.addEventListener('touchcancel', onTouchEnd);
+        return () => {
+            current.removeEventListener('touchstart', onTouchStart);
+            current.removeEventListener('touchmove', onTouchMove);
+            current.removeEventListener('touchend', onTouchEnd);
+            current.removeEventListener('touchcancel', onTouchEnd);
+        };
+    }, [editorZoomGestures, setSize]);
     const onReset = (0, react_1.useCallback)(() => {
         setSize(() => {
             return {
@@ -263,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: container, 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/Timeline.js

@@ -52,6 +52,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
+const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSlider_1 = require("./TimelineSlider");
@@ -116,10 +117,12 @@ const TimelineInner = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
-                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                    jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                ] }) })
-                    ] }) }) }) }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                    ] }) })
+                        ] }) })
+            ] }) }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

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

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const TimelinePinchZoom: FC;