@remotion/cli 4.0.0-lambda.3 → 4.0.0-newpathfunctions.13

package/dist/editor/components/TimelineInOutToggle.js

@@ -4,12 +4,20 @@ exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const truthy_1 = require("../../truthy");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
+const in_out_1 = require("../state/in-out");
 const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
-const getTooltipText = (pointType) => `Mark ${pointType}`;
+const getTooltipText = (pointType, key) => [
+    `Mark ${pointType}`,
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
+    '- right click to clear',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const style = {
     width: 16,
     height: 16,
@@ -17,16 +25,33 @@ const style = {
 exports.inOutHandles = (0, react_1.createRef)();
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
-    const { setInAndOutFrames } = remotion_1.Internals.Timeline.useTimelineSetInOutFramePosition();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
+    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInMark = (0, react_1.useCallback)(() => {
+    const onInOutClear = (0, react_1.useCallback)(() => {
+        setInAndOutFrames(() => {
+            return {
+                inFrame: null,
+                outFrame: null,
+            };
+        });
+    }, [setInAndOutFrames]);
+    const onInMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
         }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                return {
+                    ...f,
+                    inFrame: null,
+                };
+            });
+            return null;
+        }
         setInAndOutFrames((prev) => {
             const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
@@ -51,10 +76,43 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onOutMark = (0, react_1.useCallback)(() => {
+    const clearInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                inFrame: null,
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const clearOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                outFrame: null,
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const onOutMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
         }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                return {
+                    ...f,
+                    outFrame: null,
+                };
+            });
+            return;
+        }
         setInAndOutFrames((prev) => {
             const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
@@ -78,23 +136,33 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
-            return {
-                inFrame: null,
-                outFrame: null,
-            };
-        });
-    }, [setInAndOutFrames]);
     (0, react_1.useEffect)(() => {
-        const iKey = keybindings.registerKeybinding('keypress', 'i', () => {
-            onInMark();
+        const iKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'i',
+            callback: (e) => {
+                onInMark(e);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
         });
-        const oKey = keybindings.registerKeybinding('keypress', 'o', () => {
-            onOutMark();
+        const oKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'o',
+            callback: (e) => {
+                onOutMark(e);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
         });
-        const xKey = keybindings.registerKeybinding('keypress', 'x', () => {
-            onInOutClear();
+        const xKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'x',
+            callback: () => {
+                onInOutClear();
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             oKey.unregister();
@@ -146,13 +214,13 @@ const TimelineInOutPointToggle = () => {
                 });
             },
         };
-    });
+    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
     if (!videoConfig) {
         return null;
     }
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In (I)'), "aria-label": getTooltipText('In (I)'), onClick: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out (O)'), "aria-label": getTooltipText('Out (O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/UpdateCheck.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PackageManager } from '../../preview-server/get-package-manager';
+import type { PackageManager } from '../../preview-server/get-package-manager';
 export declare type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;

package/dist/editor/components/UpdateModal/UpdateModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UpdateInfo } from '../UpdateCheck';
+import type { UpdateInfo } from '../UpdateCheck';
 export declare const UpdateModal: React.FC<{
     info: UpdateInfo;
 }>;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -38,6 +38,6 @@ const UpdateModal = ({ info }) => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyText)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/components/ZoomPersistor.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare const persistCurrentZoom: (zoom: number) => void;
+export declare const getZoomForComposition: (composition: string) => number;
+export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomPersistor = exports.getZoomForComposition = exports.persistCurrentZoom = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const FramePersistor_1 = require("./FramePersistor");
+const makeKey = (composition) => {
+    return `remotion.zoom.${composition}`;
+};
+const persistCurrentZoom = (zoom) => {
+    const currentComposition = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+    if (!currentComposition) {
+        return;
+    }
+    localStorage.setItem(makeKey(currentComposition), String(zoom));
+};
+exports.persistCurrentZoom = persistCurrentZoom;
+const getZoomForComposition = (composition) => {
+    const zoom = localStorage.getItem(makeKey(composition));
+    return zoom ? Number(zoom) : 0;
+};
+exports.getZoomForComposition = getZoomForComposition;
+const ZoomPersistor = () => {
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const isActive = currentComposition === (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+    (0, react_1.useEffect)(() => {
+        if (!isActive) {
+            return;
+        }
+        (0, exports.persistCurrentZoom)(zoom);
+    }, [zoom, isActive, playing]);
+    return null;
+};
+exports.ZoomPersistor = ZoomPersistor;

package/dist/editor/helpers/calculate-timeline.d.ts

@@ -1,5 +1,5 @@
-import { TSequence } from 'remotion';
-import { TrackWithHash } from './get-timeline-sequence-sort-key';
+import type { TSequence } from 'remotion';
+import type { TrackWithHash } from './get-timeline-sequence-sort-key';
 export declare type SequenceWithOverlap = {
     sequence: TSequence;
     overlaps: TSequence[];

package/dist/editor/helpers/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const PreviewServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const previewServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/helpers/client-id.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewServerConnection = exports.previewServerConnectionRef = exports.PreviewServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.PreviewServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.previewServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.previewServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

package/dist/editor/helpers/colors.d.ts

@@ -8,7 +8,8 @@ export declare const SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
+export declare const TIMELINE_BACKGROUND = "#111";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/editor/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
@@ -11,6 +11,7 @@ exports.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
 exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+exports.TIMELINE_BACKGROUND = '#111';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/editor/helpers/copy-text.d.ts

@@ -1 +1 @@
-export declare const copyCmd: (cmd: string) => void;
+export declare const copyText: (cmd: string) => void;

package/dist/editor/helpers/copy-text.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyCmd = void 0;
-const copyCmd = (cmd) => {
+exports.copyText = void 0;
+const copyText = (cmd) => {
     const permissionName = 'clipboard-write';
     navigator.permissions
         .query({ name: permissionName })
@@ -11,7 +11,8 @@ const copyCmd = (cmd) => {
         }
     })
         .catch((err) => {
-        console.log('Could not copy command', err);
+        // eslint-disable-next-line no-alert
+        alert('Could not copy:' + err);
     });
 };
-exports.copyCmd = copyCmd;
+exports.copyText = copyText;

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -1,5 +1,5 @@
-import { TComposition, TFolder } from 'remotion';
-import { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
+import type { TComposition, TFolder } from 'remotion';
+import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;

package/dist/editor/helpers/get-effective-translation.d.ts

@@ -0,0 +1,26 @@
+import type { Size, Translation } from '@remotion/player';
+export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
+    canvasSize: Size;
+    scale: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    translation: {
+        x: number;
+        y: number;
+    };
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};

package/dist/editor/helpers/get-effective-translation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.width / 2 +
+        (scale * compositionWidth) / 2 -
+        MUST_BE_INSIDE_CANVAS);
+    return Math.max(-maxTranslation, Math.min(translation.x, maxTranslation));
+};
+const MUST_BE_INSIDE_CANVAS = 50;
+const getEffectiveYTranslation = ({ canvasSize, scale, compositionHeight, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.height / 2 + (scale * compositionHeight) / 2) -
+        MUST_BE_INSIDE_CANVAS;
+    return Math.max(-maxTranslation, Math.min(translation.y, maxTranslation));
+};
+const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }) => {
+    return {
+        x: getEffectiveXTranslation({
+            canvasSize,
+            compositionWidth,
+            scale,
+            translation,
+        }),
+        y: getEffectiveYTranslation({
+            canvasSize,
+            compositionHeight,
+            scale,
+            translation,
+        }),
+    };
+};
+exports.getEffectiveTranslation = getEffectiveTranslation;
+const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+    const mouseLeft = clientX - size.left;
+    const mouseTop = clientY - size.top;
+    const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
+    const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
+    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
+    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
+    return {
+        centerX: offsetFromVideoLeft,
+        centerY: offsetFromVideoTop,
+    };
+};
+exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

package/dist/editor/helpers/get-left-of-timeline-slider.d.ts

@@ -2,3 +2,4 @@ export declare const useGetXPositionOfItemInTimeline: () => {
     get: (frame: number) => number;
     width: number;
 };
+export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;

package/dist/editor/helpers/get-left-of-timeline-slider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetXPositionOfItemInTimeline = void 0;
+exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -18,12 +18,15 @@ const useGetXPositionOfItemInTimeline = () => {
         if (!videoConfig) {
             return 0;
         }
-        return ((frame / (videoConfig.durationInFrames - 1)) *
-            (width - timeline_layout_1.TIMELINE_PADDING * 2) +
-            timeline_layout_1.TIMELINE_PADDING);
+        return (0, exports.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
     }, [videoConfig, width]);
     return (0, react_1.useMemo)(() => {
         return { get, width };
     }, [get, width]);
 };
 exports.useGetXPositionOfItemInTimeline = useGetXPositionOfItemInTimeline;
+const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
+    const proportion = frame / (duration - 1);
+    return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
+};
+exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/editor/helpers/get-sequence-visible-range.d.ts

@@ -1,4 +1,4 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const getCascadedStart: (sequence: TSequence, sequences: TSequence[]) => number;
 export declare const getTimelineVisibleStart: (sequence: TSequence, sequences: TSequence[]) => number;
 export declare const getTimelineVisibleDuration: (sequence: TSequence, sequences: TSequence[]) => number;

package/dist/editor/helpers/get-timeline-nestedness.d.ts

@@ -1,2 +1,2 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const getTimelineNestedLevel: (sequence: TSequence, allSequences: TSequence[], depth: number) => number;

package/dist/editor/helpers/get-timeline-sequence-hash.d.ts

@@ -1,4 +1,4 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare const getTimelineSequenceHash: (sequence: TSequence, allSequences: TSequence[], hashesUsedInRoot: {
     [rootId: string]: string[];
 }, cache: {

package/dist/editor/helpers/get-timeline-sequence-layout.d.ts

@@ -1,4 +1,4 @@
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
 export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }: {
     durationInFrames: number;

package/dist/editor/helpers/get-timeline-sequence-layout.js

@@ -3,23 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
+const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    const base = durationInFrames === Infinity || lastFrame === 0
+        ? fullWidth
+        : (spatialDuration / lastFrame) * fullWidth;
+    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+};
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
+    const shouldAddHalfAFrameAtStart = startFrom > 0;
+    if (shouldAddHalfAFrameAtEnd) {
+        spatialDuration += 0.5;
+    }
+    if (shouldAddHalfAFrameAtStart) {
+        spatialDuration += 0.5;
+    }
+    const startFromWithOffset = shouldAddHalfAFrameAtStart
+        ? startFrom - 0.5
+        : startFrom;
     const marginLeft = lastFrame === 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
-    const negativeMarginLeft = Math.min(marginLeft, 0);
-    const width = (durationInFrames === Infinity || lastFrame === 0
-        ? windowWidth - timeline_layout_1.TIMELINE_PADDING * 2
-        : (spatialDuration / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2)) -
-        exports.SEQUENCE_BORDER_WIDTH +
-        negativeMarginLeft;
+        : (startFromWithOffset / lastFrame) *
+            (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     return {
         marginLeft: Math.round(Math.max(marginLeft, 0)),
-        width: Math.floor(width),
+        width: Math.floor(getWidthOfTrack({
+            durationInFrames,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration,
+            windowWidth,
+        })),
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

package/dist/editor/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,4 +1,4 @@
-import { TSequence } from 'remotion';
+import type { TSequence } from 'remotion';
 export declare type Track = {
     sequence: TSequence;
     depth: number;

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,2 +1,2 @@
-import { TComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const isCompositionStill: (comp: TComposition) => boolean;

package/dist/editor/helpers/is-current-selected-still.d.ts

@@ -1 +1,5 @@
 export declare const useIsStill: () => boolean;
+export declare const useDimensions: () => {
+    width: number;
+    height: number;
+} | null;