@remotion/studio 4.0.444 → 4.0.445

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

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

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 ||