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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type State = {
+    editorZoomGestures: boolean;
+    setEditorZoomGestures: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorZoomGesturesOption: (option: boolean) => void;
+export declare const loadEditorZoomGesturesOption: () => boolean;
+export declare const EditorZoomGesturesContext: import("react").Context<State>;
+export {};

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorZoomGesturesContext = exports.loadEditorZoomGesturesOption = exports.persistEditorZoomGesturesOption = void 0;
+const react_1 = require("react");
+const persistEditorZoomGesturesOption = (option) => {
+    localStorage.setItem('remotion.editorZoomGestures', String(option));
+};
+exports.persistEditorZoomGesturesOption = persistEditorZoomGesturesOption;
+const loadEditorZoomGesturesOption = () => {
+    const item = localStorage.getItem('remotion.editorZoomGestures');
+    return item !== 'false';
+};
+exports.loadEditorZoomGesturesOption = loadEditorZoomGesturesOption;
+exports.EditorZoomGesturesContext = (0, react_1.createContext)({
+    editorZoomGestures: (0, exports.loadEditorZoomGesturesOption)(),
+    setEditorZoomGestures: () => undefined,
+});

package/dist/editor/state/modals.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { UpdateInfo } from '../components/UpdateCheck';
 export declare type CompType = 'composition' | 'still';
 export declare type ModalState = {
@@ -8,7 +9,9 @@ export declare type ModalState = {
     type: 'update';
     info: UpdateInfo;
 } | {
-    type: 'shortcuts';
+    type: 'quick-switcher';
+    mode: QuickSwitcherMode;
+    invocationTimestamp: number;
 };
 export declare type ModalContextType = {
     selectedModal: ModalState | null;

package/dist/editor/state/preview-size.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="react" />
 import type { PreviewSize } from '@remotion/player';
+import React from 'react';
 declare type PreviewSizeCtx = {
     size: PreviewSize;
     setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
 };
 export declare const persistPreviewSizeOption: (option: PreviewSize) => void;
 export declare const loadPreviewSizeOption: () => PreviewSize;
-export declare const PreviewSizeContext: import("react").Context<PreviewSizeCtx>;
+export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
+export declare const PreviewSizeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
 export {};

package/dist/editor/state/preview-size.js

@@ -1,20 +1,64 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewSizeContext = exports.loadPreviewSizeOption = exports.persistPreviewSizeOption = void 0;
+exports.PreviewSizeProvider = exports.PreviewSizeContext = exports.loadPreviewSizeOption = exports.persistPreviewSizeOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const editor_zoom_gestures_1 = require("./editor-zoom-gestures");
+const key = 'remotion.previewSize';
 const persistPreviewSizeOption = (option) => {
-    localStorage.setItem('previewSize', String(option));
+    localStorage.setItem(key, JSON.stringify(option));
 };
 exports.persistPreviewSizeOption = persistPreviewSizeOption;
 const loadPreviewSizeOption = () => {
-    const item = localStorage.getItem('previewSize');
+    const item = localStorage.getItem(key);
     if (item === null) {
-        return 'auto';
+        return {
+            size: 'auto',
+            translation: {
+                x: 0,
+                y: 0,
+            },
+        };
     }
-    return item;
+    return JSON.parse(item);
 };
 exports.loadPreviewSizeOption = loadPreviewSizeOption;
 exports.PreviewSizeContext = (0, react_1.createContext)({
     setSize: () => undefined,
     size: (0, exports.loadPreviewSizeOption)(),
 });
+const PreviewSizeProvider = ({ children }) => {
+    const [size, setSizeState] = (0, react_1.useState)(() => (0, exports.loadPreviewSizeOption)());
+    const [translation, setTranslation] = (0, react_1.useState)(() => {
+        return {
+            x: 0,
+            y: 0,
+        };
+    });
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const setSize = (0, react_1.useCallback)((newValue) => {
+        setSizeState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, exports.persistPreviewSizeOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const previewSizeCtx = (0, react_1.useMemo)(() => {
+        return {
+            size: editorZoomGestures
+                ? size
+                : {
+                    size: size.size,
+                    translation: {
+                        x: 0,
+                        y: 0,
+                    },
+                },
+            setSize,
+            translation,
+            setTranslation,
+        };
+    }, [editorZoomGestures, size, setSize, translation]);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
+};
+exports.PreviewSizeProvider = PreviewSizeProvider;

package/dist/editor/state/z-index.js

@@ -17,6 +17,7 @@ const EscapeHook = ({ onEscape }) => {
             key: 'Escape',
             callback: onEscape,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             escape.unregister();
@@ -34,20 +35,33 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
         return () => highestContext.unregisterZIndex(currentIndex);
     }, [currentIndex, highestContext]);
     (0, react_1.useEffect)(() => {
-        const listener = (e) => {
+        let onUp = null;
+        const listener = (downEvent) => {
             var _a;
-            const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target));
-            if (outsideClick &&
-                highestContext.highestIndex === currentIndex &&
-                !(0, input_dragger_click_lock_1.getClickLock)() &&
-                // Don't trigger if that click removed that node
-                document.contains(e.target)) {
-                e.stopPropagation();
-                onOutsideClick();
+            const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
+            if (!outsideClick) {
+                return;
             }
+            onUp = (upEvent) => {
+                if (outsideClick &&
+                    highestContext.highestIndex === currentIndex &&
+                    !(0, input_dragger_click_lock_1.getClickLock)() &&
+                    // Don't trigger if that click removed that node
+                    document.contains(upEvent.target)) {
+                    upEvent.stopPropagation();
+                    onOutsideClick();
+                }
+            };
+            window.addEventListener('pointerup', onUp, { once: true });
+        };
+        window.addEventListener('pointerdown', listener);
+        return () => {
+            if (onUp) {
+                // @ts-expect-error
+                window.removeEventListener('pointerup', onUp, { once: true });
+            }
+            return window.removeEventListener('pointerdown', listener);
         };
-        window.addEventListener('click', listener);
-        return () => window.removeEventListener('click', listener);
     }, [currentIndex, highestContext.highestIndex, onOutsideClick]);
     const value = (0, react_1.useMemo)(() => {
         return {

package/dist/entry-point.d.ts

@@ -0,0 +1,5 @@
+export declare const findEntryPoint: (args: string[], remotionRoot: string) => {
+    file: string | null;
+    remainingArgs: string[];
+    reason: string;
+};

package/dist/entry-point.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findEntryPoint = void 0;
+const renderer_1 = require("@remotion/renderer");
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const config_1 = require("./config");
+const log_1 = require("./log");
+const candidates = [
+    path_1.default.join('src', 'index.ts'),
+    path_1.default.join('src', 'index.tsx'),
+    path_1.default.join('src', 'index.js'),
+    path_1.default.join('remotion', 'index.tsx'),
+    path_1.default.join('remotion', 'index.ts'),
+    path_1.default.join('remotion', 'index.js'),
+];
+const findCommonPath = (remotionRoot) => {
+    return candidates.find((candidate) => (0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, candidate)));
+};
+const findEntryPoint = (args, remotionRoot) => {
+    const result = findEntryPointInner(args, remotionRoot);
+    if (result.file === null) {
+        return result;
+    }
+    if (renderer_1.RenderInternals.isServeUrl(result.file)) {
+        return result;
+    }
+    if (!(0, fs_1.existsSync)(result.file)) {
+        throw new Error(`${result.file} was chosen as the entry point (reason = ${result.reason}) but it does not exist.`);
+    }
+    if ((0, fs_1.lstatSync)(result.file).isDirectory()) {
+        throw new Error(`${result.file} was chosen as the entry point (reason = ${result.reason}) but it is a directory - it needs to be a file.`);
+    }
+    return result;
+};
+exports.findEntryPoint = findEntryPoint;
+const findEntryPointInner = (args, remotionRoot) => {
+    // 1st priority: Explicitly passed entry point
+    let file = args[0];
+    if (file) {
+        log_1.Log.verbose('Checking if', file, 'is the entry file');
+        const cwdResolution = path_1.default.resolve(process.cwd(), file);
+        const remotionRootResolution = path_1.default.resolve(remotionRoot, file);
+        // Checking if file was found in CWD
+        if ((0, fs_1.existsSync)(cwdResolution)) {
+            return {
+                file: cwdResolution,
+                remainingArgs: args.slice(1),
+                reason: 'argument passed - found in cwd',
+            };
+        }
+        // Checking if file was found in remotion root
+        if ((0, fs_1.existsSync)(remotionRootResolution)) {
+            return {
+                file: remotionRootResolution,
+                remainingArgs: args.slice(1),
+                reason: 'argument passed - found in root',
+            };
+        }
+        if (renderer_1.RenderInternals.isServeUrl(file)) {
+            return { file, remainingArgs: args.slice(1), reason: 'argument passed' };
+        }
+    }
+    // 2nd priority: Config file
+    file = config_1.ConfigInternals.getEntryPoint();
+    if (file) {
+        log_1.Log.verbose('Entry point from config file is', file);
+        return {
+            file: path_1.default.resolve(remotionRoot, file),
+            remainingArgs: args,
+            reason: 'config file',
+        };
+    }
+    // 3rd priority: Common paths
+    const found = findCommonPath(remotionRoot);
+    if (found) {
+        const absolutePath = path_1.default.resolve(remotionRoot, found);
+        log_1.Log.verbose('Selected', absolutePath, 'as the entry point because file exists and is a common entry point and no entry point was explicitly selected');
+        return {
+            file: absolutePath,
+            remainingArgs: args,
+            reason: 'common paths',
+        };
+    }
+    return { file: null, remainingArgs: args, reason: 'none found' };
+};

package/dist/event-source-events.d.ts

@@ -1,6 +1,13 @@
+import type { StaticFile } from 'remotion';
 export declare type EventSourceEvent = {
     type: 'new-input-props';
     newProps: object;
 } | {
     type: 'init';
+} | {
+    type: 'new-env-variables';
+    newEnvVariables: Record<string, string>;
+} | {
+    type: 'new-public-folder';
+    files: StaticFile[];
 };

package/dist/event-source.js

@@ -1,14 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openEventSource = void 0;
+const ServerDisconnected_1 = require("./editor/components/Notifications/ServerDisconnected");
 let source = null;
 const openEventSource = () => {
     source = new EventSource('/events');
     source.addEventListener('message', (event) => {
         const newEvent = JSON.parse(event.data);
-        if (newEvent.type === 'new-input-props') {
+        if (newEvent.type === 'new-input-props' ||
+            newEvent.type === 'new-env-variables') {
             window.location.reload();
         }
+        if (newEvent.type === 'new-public-folder') {
+            window.remotion_staticFiles = newEvent.files;
+        }
+    });
+    source.addEventListener('open', () => {
+        var _a;
+        (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerConnected();
+        source.addEventListener('error', () => {
+            var _a;
+            // Display an error message that the preview server has disconnected.
+            (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerDisconnected();
+            source === null || source === void 0 ? void 0 : source.close();
+            // Retry later
+            setTimeout(() => {
+                (0, exports.openEventSource)();
+            }, 1000);
+        }, { once: true });
     });
 };
 exports.openEventSource = openEventSource;

package/dist/get-audio-codec.d.ts

@@ -0,0 +1,2 @@
+import type { AudioCodec } from '@remotion/renderer';
+export declare const getResolvedAudioCodec: () => AudioCodec | null;

package/dist/get-audio-codec.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResolvedAudioCodec = void 0;
+const config_1 = require("./config");
+const parse_command_line_1 = require("./parse-command-line");
+const getResolvedAudioCodec = () => {
+    var _a;
+    return (_a = parse_command_line_1.parsedCli['audio-codec']) !== null && _a !== void 0 ? _a : config_1.ConfigInternals.getAudioCodec();
+};
+exports.getResolvedAudioCodec = getResolvedAudioCodec;

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

@@ -1,24 +1,31 @@
-import type { BrowserExecutable, ChromiumOptions, FrameRange } from '@remotion/renderer';
+import type { BrowserExecutable, ChromiumOptions, Codec, FrameRange } from '@remotion/renderer';
+export declare const validateFfmpegCanUseCodec: (codec: Codec, remotionRoot: string) => Promise<void>;
+export declare const getFinalCodec: (options: {
+    downloadName: string | null;
+    outName: string | null;
+}) => {
+    codec: Codec;
+    reason: string;
+};
 export declare const getAndValidateAbsoluteOutputFile: (relativeOutputLocation: string, overwrite: boolean) => string;
 export declare const getCliOptions: (options: {
     isLambda: boolean;
     type: 'still' | 'series' | 'get-compositions';
+    remotionRoot: string;
 }) => Promise<{
     puppeteerTimeout: number;
-    parallelism: number | null;
+    concurrency: string | number | null;
     frameRange: FrameRange | null;
     shouldOutputImageSequence: boolean;
-    codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
     inputProps: object;
     envVariables: Record<string, string>;
     quality: number | undefined;
     browser: import("@remotion/renderer").Browser;
-    crf: number | null;
+    crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-    imageFormat: "png" | "jpeg" | "none";
     proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
     everyNthFrame: number;
-    numberOfGifLoops: number | null;
+    numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
@@ -28,4 +35,12 @@ export declare const getCliOptions: (options: {
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;
     port: number | null;
+    muted: boolean;
+    enforceAudioTrack: boolean;
+    publicDir: string | null;
+    ffmpegOverride: import("@remotion/renderer").FfmpegOverrideFn;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    height: number | null;
+    width: number | null;
 }>;