@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha4

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-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);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+    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/is-current-selected-still.d.ts

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

package/dist/editor/helpers/is-current-selected-still.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsStill = void 0;
+exports.useDimensions = exports.useIsStill = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
@@ -13,3 +13,17 @@ const useIsStill = () => {
     return (0, is_composition_still_1.isCompositionStill)(selected);
 };
 exports.useIsStill = useIsStill;
+const useDimensions = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    return (0, react_1.useMemo)(() => {
+        if (!selected) {
+            return null;
+        }
+        return {
+            width: selected.width,
+            height: selected.height,
+        };
+    }, [selected]);
+};
+exports.useDimensions = useDimensions;

package/dist/editor/helpers/open-in-editor.d.ts

@@ -0,0 +1,2 @@
+import type { SymbolicatedStackFrame } from '../../preview-server/error-overlay/react-overlay/utils/stack-frame';
+export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;

package/dist/editor/helpers/open-in-editor.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInEditor = void 0;
+const openInEditor = (stack) => {
+    const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
+    return fetch(`/api/open-in-editor`, {
+        method: 'post',
+        headers: {
+            'content-type': 'application/json',
+        },
+        body: JSON.stringify({
+            stack: {
+                originalFileName,
+                originalLineNumber,
+                originalColumnNumber,
+                originalFunctionName,
+                originalScriptCode,
+            },
+        }),
+    });
+};
+exports.openInEditor = openInEditor;

package/dist/editor/helpers/use-keybinding.d.ts

@@ -1,10 +1,12 @@
 import type { KeyEventType } from '../state/keybindings';
+export declare const areKeyboardShortcutsDisabled: () => boolean;
 export declare const useKeybinding: () => {
     registerKeybinding: (options: {
         event: KeyEventType;
         key: string;
         commandCtrlKey: boolean;
         callback: (e: KeyboardEvent) => void;
+        preventDefault: boolean;
     }) => {
         unregister: () => void;
     };

package/dist/editor/helpers/use-keybinding.js

@@ -1,14 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeybinding = void 0;
+exports.useKeybinding = exports.areKeyboardShortcutsDisabled = void 0;
 const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
+if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
+}
+const areKeyboardShortcutsDisabled = () => {
+    return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
+};
+exports.areKeyboardShortcutsDisabled = areKeyboardShortcutsDisabled;
 const useKeybinding = () => {
     const [paneId] = (0, react_1.useState)(() => String(Math.random()));
     const context = (0, react_1.useContext)(keybindings_1.KeybindingContext);
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const registerKeybinding = (0, react_1.useCallback)((options) => {
+        if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+            return {
+                unregister: () => undefined,
+            };
+        }
         if (!isHighestContext) {
             return {
                 unregister: () => undefined,
@@ -21,7 +33,9 @@ const useKeybinding = () => {
             if (e.key.toLowerCase() === options.key.toLowerCase() &&
                 options.commandCtrlKey === commandKey) {
                 options.callback(e);
-                e.preventDefault();
+                if (options.preventDefault) {
+                    e.preventDefault();
+                }
             }
         };
         const toRegister = {

package/dist/editor/helpers/use-menu-structure.d.ts

@@ -0,0 +1,7 @@
+import type { Menu } from '../components/Menu/MenuItem';
+import type { TQuickSwitcherResult } from '../components/QuickSwitcher/QuickSwitcherResult';
+import type { ModalState } from '../state/modals';
+declare type Structure = Menu[];
+export declare const useMenuStructure: (closeMenu: () => void) => Structure;
+export declare const makeSearchResults: (actions: Structure, setSelectedModal: (value: React.SetStateAction<ModalState | null>) => void) => TQuickSwitcherResult[];
+export {};