@remotion/cli 3.1.5 → 3.1.8

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

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { TComposition } from 'remotion';
-export declare const useSelectComposition: () => (c: TComposition) => void;
+export declare const useSelectComposition: () => (c: TComposition, push: boolean) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/editor/components/InitialCompositionLoader.js

@@ -12,10 +12,12 @@ const useSelectComposition = () => {
     const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    return (c) => {
+    return (c, push) => {
         var _a;
         (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
-        window.history.pushState({}, 'Preview', `/${c.id}`);
+        if (push) {
+            window.history.pushState({}, 'Preview', `/${c.id}`);
+        }
         const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
         const frameInBounds = Math.min(c.durationInFrames - 1, frame);
         setCurrentFrame(frameInBounds);
@@ -47,14 +49,25 @@ const InitialCompositionLoader = () => {
         if (compositionFromUrl) {
             const exists = compositions.find((c) => c.id === compositionFromUrl);
             if (exists) {
-                selectComposition(exists);
+                selectComposition(exists, true);
                 return;
             }
         }
         if (compositions.length > 0) {
-            selectComposition(compositions[0]);
+            selectComposition(compositions[0], true);
         }
     }, [compositions, currentComposition, selectComposition]);
+    (0, react_1.useEffect)(() => {
+        const onchange = () => {
+            const newComp = window.location.pathname.substring(1);
+            const exists = compositions.find((c) => c.id === newComp);
+            if (exists) {
+                selectComposition(exists, false);
+            }
+        };
+        window.addEventListener('popstate', onchange);
+        return () => window.removeEventListener('popstate', onchange);
+    }, [compositions, selectComposition]);
     return null;
 };
 exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/Menu/MenuItem.js

@@ -46,7 +46,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return null;
         }
         return {
-            ...styles_1.menuContainer,
+            ...styles_1.menuContainerTowardsBottom,
             left: size.left,
             top: size.top + size.height,
         };

package/dist/editor/components/Menu/MenuSubItem.js

@@ -70,7 +70,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             return null;
         }
         return {
-            ...styles_1.menuContainer,
+            ...styles_1.menuContainerTowardsBottom,
             left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
             top: size.top - styles_1.MENU_VERTICAL_PADDING,
         };

package/dist/editor/components/Menu/styles.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import type React from 'react';
 export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
-export declare const menuContainer: React.CSSProperties;
+export declare const menuContainerTowardsBottom: React.CSSProperties;
+export declare const menuContainerTowardsTop: React.CSSProperties;
 export declare const outerPortal: React.CSSProperties;

package/dist/editor/components/Menu/styles.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outerPortal = exports.menuContainer = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
+exports.outerPortal = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.MENU_VERTICAL_PADDING = 4;
 exports.SUBMENU_LEFT_INSET = -8;
-exports.menuContainer = {
+const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
     color: 'white',
     userSelect: 'none',
     minWidth: 200,
 };
+exports.menuContainerTowardsBottom = {
+    ...menuContainer,
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+};
+exports.menuContainerTowardsTop = {
+    ...menuContainer,
+    boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.5)',
+};
 exports.outerPortal = {
     position: 'fixed',
     height: '100%',

package/dist/editor/components/NewComposition/ComboBox.js

@@ -60,10 +60,20 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         if (!opened || !size) {
             return null;
         }
+        const spaceToBottom = size.windowSize.height - (size.top + size.height);
+        const spaceToTop = size.top;
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
         return {
-            ...styles_1.menuContainer,
+            ...(layout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
             left: size.left,
-            top: size.top + size.height,
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);

package/dist/editor/components/PlayPause.js

@@ -12,6 +12,7 @@ const pause_1 = require("../icons/pause");
 const play_1 = require("../icons/play");
 const step_back_1 = require("../icons/step-back");
 const step_forward_1 = require("../icons/step-forward");
+const in_out_1 = require("../state/in-out");
 const ControlButton_1 = require("./ControlButton");
 const forwardBackStyle = {
     height: 16,
@@ -19,12 +20,15 @@ const forwardBackStyle = {
 };
 const PlayPause = ({ playbackRate, loop }) => {
     var _a;
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const video = remotion_1.Internals.useVideo();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
         moveToBeginningWhenEnded: true,
+        inFrame,
+        outFrame,
     });
     const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, } = player_1.PlayerInternals.usePlayer();
     const isStill = (0, is_current_selected_still_1.useIsStill)();

package/dist/editor/components/Timeline/TimelineDragHandler.js

@@ -7,6 +7,7 @@ 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_layout_1 = require("../../helpers/timeline-layout");
+const in_out_1 = require("../../state/in-out");
 const FramePersistor_1 = require("../FramePersistor");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
@@ -42,8 +43,8 @@ const TimelineDragHandler = () => {
     });
     const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
     const left = (_b = size === null || size === void 0 ? void 0 : size.left) !== null && _b !== void 0 ? _b : 0;
-    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 { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,

package/dist/editor/components/Timeline/TimelineInOutPointer.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 in_out_1 = require("../../state/in-out");
 const areaHighlight = {
     position: 'absolute',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -15,7 +16,7 @@ const areaHighlight = {
 exports.inMarkerAreaRef = (0, react_1.createRef)();
 exports.outMarkerAreaRef = (0, react_1.createRef)();
 const TimelineInOutPointer = () => {
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const { get, width } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     if (!videoConfig) {

package/dist/editor/components/Timeline/TimelineListItem.js

@@ -22,6 +22,7 @@ const outer = {
     alignItems: 'center',
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     wordBreak: 'break-all',
+    textAlign: 'left',
 };
 const hookContainer = {
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,

package/dist/editor/components/Timeline/TimelineScrollable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineScrollable: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/Timeline/TimelineScrollable.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineScrollable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_refs_1 = require("./timeline-refs");
+const outer = {
+    width: '100%',
+    height: '100%',
+    overflowX: 'auto',
+    position: 'relative',
+    backgroundColor: '#111',
+};
+const TimelineScrollable = ({ children }) => {
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            height: '100%',
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+};
+exports.TimelineScrollable = TimelineScrollable;

package/dist/editor/components/Timeline/TimelineZoomControls.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineZoomControls: React.FC;

package/dist/editor/components/Timeline/TimelineZoomControls.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineZoomControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const ControlButton_1 = require("../ControlButton");
+const container = {
+    color: 'black',
+    flexDirection: 'row',
+    display: 'flex',
+};
+const buttonStyle = {
+    fontSize: 24,
+};
+const TimelineZoomControls = () => {
+    const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const onMinusClicked = (0, react_1.useCallback)(() => {
+        setZoom((z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
+    }, [setZoom]);
+    const onPlusClicked = (0, react_1.useCallback)(() => {
+        setZoom((z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2));
+    }, [setZoom]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setZoom(Number(e.target.value));
+    }, [setZoom]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: "-" }), (0, jsx_runtime_1.jsx)("input", { type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: "+" })] }));
+};
+exports.TimelineZoomControls = TimelineZoomControls;

package/dist/editor/components/Timeline/timeline-scroll-logic.d.ts

@@ -0,0 +1,4 @@
+export declare const canScrollTimelineIntoDirection: () => {
+    canScrollRight: boolean;
+    canScrollLeft: boolean;
+};

package/dist/editor/components/Timeline/timeline-scroll-logic.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canScrollTimelineIntoDirection = void 0;
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_refs_1 = require("./timeline-refs");
+const canScrollTimelineIntoDirection = () => {
+    const current = timeline_refs_1.scrollableRef.current;
+    const { scrollWidth, scrollLeft, clientWidth } = current;
+    const canScrollRight = scrollWidth - scrollLeft - clientWidth > timeline_layout_1.TIMELINE_PADDING;
+    const canScrollLeft = scrollLeft > timeline_layout_1.TIMELINE_PADDING;
+    return { canScrollRight, canScrollLeft };
+};
+exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;

package/dist/editor/components/TimelineInOutToggle.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 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}`;
@@ -17,8 +18,8 @@ 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();

package/dist/editor/state/in-out.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export declare type TimelineInOutContextValue = {
+    inFrame: number | null;
+    outFrame: number | null;
+};
+export declare type SetTimelineInOutContextValue = {
+    setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
+};
+export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;
+export declare const SetTimelineInOutContext: React.Context<SetTimelineInOutContextValue>;
+export declare const useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+export declare const useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;

package/dist/editor/state/in-out.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineSetInOutFramePosition = exports.useTimelineInOutFramePosition = exports.SetTimelineInOutContext = exports.TimelineInOutContext = void 0;
+const react_1 = require("react");
+exports.TimelineInOutContext = (0, react_1.createContext)({
+    inFrame: null,
+    outFrame: null,
+});
+exports.SetTimelineInOutContext = (0, react_1.createContext)({
+    setInAndOutFrames: () => {
+        throw new Error('default');
+    },
+});
+const useTimelineInOutFramePosition = () => {
+    const state = (0, react_1.useContext)(exports.TimelineInOutContext);
+    return state;
+};
+exports.useTimelineInOutFramePosition = useTimelineInOutFramePosition;
+const useTimelineSetInOutFramePosition = () => {
+    const { setInAndOutFrames } = (0, react_1.useContext)(exports.SetTimelineInOutContext);
+    return { setInAndOutFrames };
+};
+exports.useTimelineSetInOutFramePosition = useTimelineSetInOutFramePosition;

package/dist/editor/state/timeline-zoom.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const TIMELINE_MIN_ZOOM = 1;
+export declare const TIMELINE_MAX_ZOOM = 5;
+export declare const TimelineZoomCtx: React.Context<{
+    zoom: number;
+    setZoom: React.Dispatch<React.SetStateAction<number>>;
+}>;
+export declare const TimelineZoomContext: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/state/timeline-zoom.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.TIMELINE_MIN_ZOOM = 1;
+exports.TIMELINE_MAX_ZOOM = 5;
+exports.TimelineZoomCtx = (0, react_1.createContext)({
+    zoom: -1,
+    setZoom: () => {
+        throw new Error('has no context');
+    },
+});
+const TimelineZoomContext = ({ children }) => {
+    const [zoom, setZoom] = (0, react_1.useState)(exports.TIMELINE_MIN_ZOOM);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            zoom,
+            setZoom,
+        };
+    }, [zoom]);
+    return ((0, jsx_runtime_1.jsx)(exports.TimelineZoomCtx.Provider, { value: value, children: children }));
+};
+exports.TimelineZoomContext = TimelineZoomContext;

package/dist/find-closest-package-json.d.ts

@@ -0,0 +1,2 @@
+export declare const findClosestPackageJson: () => string | null;
+export declare const findRemotionRoot: () => string;

package/dist/find-closest-package-json.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findRemotionRoot = exports.findClosestPackageJson = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const log_1 = require("./log");
+const recursionLimit = 5;
+const findClosestPackageJson = () => {
+    let currentDir = process.cwd();
+    let possiblePackageJson = '';
+    for (let i = 0; i < recursionLimit; i++) {
+        possiblePackageJson = path_1.default.join(currentDir, 'package.json');
+        const exists = fs_1.default.existsSync(possiblePackageJson);
+        if (exists) {
+            return possiblePackageJson;
+        }
+        currentDir = path_1.default.dirname(currentDir);
+    }
+    return null;
+};
+exports.findClosestPackageJson = findClosestPackageJson;
+const findRemotionRoot = () => {
+    const closestPackageJson = (0, exports.findClosestPackageJson)();
+    if (closestPackageJson === null) {
+        log_1.Log.error('Could not find a package.json in the current directory or any of the ' +
+            recursionLimit +
+            ' parent directories. Is this a Remotion project?');
+        process.exit(1);
+    }
+    return path_1.default.dirname(closestPackageJson);
+};
+exports.findRemotionRoot = findRemotionRoot;

package/dist/get-cli-options.d.ts

@@ -1,5 +1,5 @@
-import type { ChromiumOptions } from '@remotion/renderer';
-import type { BrowserExecutable, FrameRange } from 'remotion';
+import type { BrowserExecutable, ChromiumOptions, FrameRange } from '@remotion/renderer';
+export declare const getAndValidateAbsoluteOutputFile: (relativeOutputLocation: string, overwrite: boolean) => string;
 export declare const getCliOptions: (options: {
     isLambda: boolean;
     type: 'still' | 'series' | 'get-compositions';
@@ -9,12 +9,10 @@ export declare const getCliOptions: (options: {
     frameRange: FrameRange | null;
     shouldOutputImageSequence: boolean;
     codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
-    overwrite: boolean;
     inputProps: object;
     envVariables: Record<string, string>;
     quality: number | undefined;
-    absoluteOutputFile: string | null;
-    browser: import("remotion").Browser;
+    browser: import("@remotion/renderer").Browser;
     crf: number | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     imageFormat: "png" | "jpeg" | "none";
@@ -23,10 +21,11 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: number | null;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    ffmpegExecutable: import("remotion").FfmpegExecutable;
-    ffprobeExecutable: import("remotion").FfmpegExecutable;
+    ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
+    ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
     logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
+    overwrite: boolean;
     port: number | null;
 }>;