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

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

@@ -1,10 +1,14 @@
 import React from 'react';
 export declare type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
+declare type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
 declare type Context = {
-    sidebarCollapsedState: SidebarCollapsedState;
-    setSidebarCollapsedState: (newState: SidebarCollapsedState) => void;
+    sidebarCollapsedStateLeft: SidebarCollapsedState;
+    setSidebarCollapsedState: (options: {
+        left: null | React.SetStateAction<SidebarCollapsedState>;
+        right: null | React.SetStateAction<RightSidebarCollapsedState>;
+    }) => void;
+    sidebarCollapsedStateRight: RightSidebarCollapsedState;
 };
-export declare const getSavedCollapsedState: () => SidebarCollapsedState;
 export declare const SidebarContext: React.Context<Context>;
 export declare const SidebarContextProvider: React.FC<{
     children: React.ReactNode;

package/dist/editor/state/sidebar.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarContextProvider = exports.SidebarContext = exports.getSavedCollapsedState = void 0;
+exports.SidebarContextProvider = exports.SidebarContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const storageKey = 'remotion.sidebarCollapsing';
-const getSavedCollapsedState = () => {
-    const state = window.localStorage.getItem(storageKey);
+const storageKey = (sidebar) => {
+    if (sidebar === 'right') {
+        return 'remotion.sidebarRightCollapsing';
+    }
+    return 'remotion.sidebarCollapsing';
+};
+const getSavedCollapsedStateLeft = () => {
+    const state = window.localStorage.getItem(storageKey('left'));
     if (state === 'collapsed') {
         return 'collapsed';
     }
@@ -14,25 +19,49 @@ const getSavedCollapsedState = () => {
     }
     return 'responsive';
 };
-exports.getSavedCollapsedState = getSavedCollapsedState;
-const setSavedCollapsedState = (type) => {
-    window.localStorage.setItem(storageKey, type);
+const getSavedCollapsedStateRight = () => {
+    const state = window.localStorage.getItem(storageKey('right'));
+    if (state === 'expanded') {
+        return 'expanded';
+    }
+    return 'collapsed';
+};
+const saveCollapsedState = (type, sidebar) => {
+    window.localStorage.setItem(storageKey(sidebar), type);
 };
 exports.SidebarContext = (0, react_1.createContext)({
-    sidebarCollapsedState: 'collapsed',
+    sidebarCollapsedStateLeft: 'collapsed',
     setSidebarCollapsedState: () => {
         throw new Error('sidebar collapsed state');
     },
+    sidebarCollapsedStateRight: 'collapsed',
 });
 const SidebarContextProvider = ({ children }) => {
-    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => (0, exports.getSavedCollapsedState)());
+    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => ({
+        left: getSavedCollapsedStateLeft(),
+        right: getSavedCollapsedStateRight(),
+    }));
     const value = (0, react_1.useMemo)(() => {
         return {
-            setSidebarCollapsedState: (state) => {
-                setSidebarCollapsedState(state);
-                setSavedCollapsedState(state);
+            sidebarCollapsedStateLeft: sidebarCollapsedState.left,
+            sidebarCollapsedStateRight: sidebarCollapsedState.right,
+            setSidebarCollapsedState: (options) => {
+                const { left, right } = options;
+                setSidebarCollapsedState((f) => {
+                    const copied = { ...f };
+                    if (left) {
+                        const updatedLeft = typeof left === 'function' ? left(f.left) : left;
+                        saveCollapsedState(updatedLeft, 'left');
+                        copied.left = updatedLeft;
+                    }
+                    if (right) {
+                        const updatedRight = typeof right === 'function' ? right(f.right) : right;
+                        saveCollapsedState(updatedRight, 'right');
+                        copied.right = updatedRight;
+                    }
+                    return copied;
+                });
             },
-            sidebarCollapsedState,
         };
     }, [sidebarCollapsedState]);
     return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export declare type TimelineRef = {
+declare type TimelineRef = {
     collapseAll: () => void;
     expandAll: () => void;
 };
 export declare const timelineRef: import("react").RefObject<TimelineRef>;
+export {};

package/dist/editor/state/z-index.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-declare type ZIndex = {
-    currentIndex: number;
-};
-export declare const ZIndexContext: React.Context<ZIndex>;
 export declare const HigherZIndex: React.FC<{
     onEscape: () => void;
     onOutsideClick: () => void;
@@ -14,4 +10,3 @@ export declare const useZIndex: () => {
     isHighestContext: boolean;
     tabIndex: number;
 };
-export {};

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

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZIndex = exports.HigherZIndex = exports.ZIndexContext = void 0;
+exports.useZIndex = exports.HigherZIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const highest_z_index_1 = require("./highest-z-index");
 const input_dragger_click_lock_1 = require("./input-dragger-click-lock");
-exports.ZIndexContext = (0, react_1.createContext)({
+const ZIndexContext = (0, react_1.createContext)({
     currentIndex: 0,
 });
+const margin = {
+    margin: 'auto',
+};
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
@@ -17,6 +20,9 @@ const EscapeHook = ({ onEscape }) => {
             key: 'Escape',
             callback: onEscape,
             commandCtrlKey: false,
+            preventDefault: true,
+            // To dismiss the Quick Switcher menu if input is focused
+            triggerIfInputFieldFocused: true,
         });
         return () => {
             escape.unregister();
@@ -25,7 +31,7 @@ const EscapeHook = ({ onEscape }) => {
     return null;
 };
 const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
-    const context = (0, react_1.useContext)(exports.ZIndexContext);
+    const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
     const currentIndex = context.currentIndex + 1;
@@ -34,31 +40,49 @@ 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 });
+        };
+        // If a menu is opened, then this component will also still receive the pointerdown event.
+        // However we may not interpret it as a outside click, so we need to wait for the next tick
+        requestAnimationFrame(() => {
+            window.addEventListener('pointerdown', listener);
+        });
+        return () => {
+            onUp = null;
+            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 {
             currentIndex,
         };
     }, [currentIndex]);
-    return ((0, jsx_runtime_1.jsxs)(exports.ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
 };
 exports.HigherZIndex = HigherZIndex;
 const useZIndex = () => {
-    const context = (0, react_1.useContext)(exports.ZIndexContext);
+    const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const isHighestContext = highestContext.highestIndex === context.currentIndex;
     return (0, react_1.useMemo)(() => ({

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 node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const config_1 = require("./config");
+const log_1 = require("./log");
+const candidates = [
+    node_path_1.default.join('src', 'index.ts'),
+    node_path_1.default.join('src', 'index.tsx'),
+    node_path_1.default.join('src', 'index.js'),
+    node_path_1.default.join('remotion', 'index.tsx'),
+    node_path_1.default.join('remotion', 'index.ts'),
+    node_path_1.default.join('remotion', 'index.js'),
+];
+const findCommonPath = (remotionRoot) => {
+    return candidates.find((candidate) => (0, node_fs_1.existsSync)(node_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, node_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, node_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 = node_path_1.default.resolve(process.cwd(), file);
+        const remotionRootResolution = node_path_1.default.resolve(remotionRoot, file);
+        // Checking if file was found in CWD
+        if ((0, node_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, node_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: node_path_1.default.resolve(remotionRoot, file),
+            remainingArgs: args,
+            reason: 'config file',
+        };
+    }
+    // 3rd priority: Common paths
+    const found = findCommonPath(remotionRoot);
+    if (found) {
+        const absolutePath = node_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,30 @@
+import type { StaticFile } from 'remotion';
+import type { RenderJob } from './preview-server/render-queue/job';
 export declare type EventSourceEvent = {
     type: 'new-input-props';
     newProps: object;
 } | {
     type: 'init';
+    clientId: string;
+} | {
+    type: 'new-env-variables';
+    newEnvVariables: Record<string, string>;
+} | {
+    type: 'root-file-changed';
+} | {
+    type: 'render-queue-updated';
+    queue: RenderJob[];
+} | {
+    type: 'render-job-failed';
+    compositionId: string;
+    error: Error;
+} | {
+    type: 'watched-file-undeleted';
+    file: string;
+} | {
+    type: 'watched-file-deleted';
+    file: string;
+} | {
+    type: 'new-public-folder';
+    files: StaticFile[];
 };

package/dist/event-source.d.ts

@@ -1 +1,3 @@
+import type { EventSourceEvent } from './event-source-events';
+export declare const subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
 export declare const openEventSource: () => void;

package/dist/event-source.js

@@ -1,14 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openEventSource = void 0;
+exports.openEventSource = exports.subscribeToEvent = void 0;
+const NotificationCenter_1 = require("./editor/components/Notifications/NotificationCenter");
+const context_1 = require("./editor/components/RenderQueue/context");
+const client_id_1 = require("./editor/helpers/client-id");
 let source = null;
+let listeners = [];
+const subscribeToEvent = (type, listener) => {
+    listeners.push({ type, listener });
+    return () => {
+        listeners = listeners.filter((l) => l.type !== type || l.listener !== listener);
+    };
+};
+exports.subscribeToEvent = subscribeToEvent;
 const openEventSource = () => {
     source = new EventSource('/events');
     source.addEventListener('message', (event) => {
+        var _a, _b;
         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 === 'init') {
+            (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({
+                type: 'connected',
+                clientId: newEvent.clientId,
+            });
+        }
+        if (newEvent.type === 'render-queue-updated') {
+            (_b = context_1.renderJobsRef.current) === null || _b === void 0 ? void 0 : _b.updateRenderJobs(newEvent.queue);
+        }
+        if (newEvent.type === 'render-job-failed') {
+            (0, NotificationCenter_1.sendErrorNotification)(`Rendering "${newEvent.compositionId}" failed`);
+        }
+        if (newEvent.type === 'new-public-folder') {
+            window.remotion_staticFiles = newEvent.files;
+        }
+        listeners.forEach((l) => {
+            if (l.type === newEvent.type) {
+                l.listener(newEvent);
+            }
+        });
+    });
+    source.addEventListener('open', () => {
+        source.addEventListener('error', () => {
+            var _a;
+            (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
+            // Display an error message that the studio server has disconnected.
+            source === null || source === void 0 ? void 0 : source.close();
+            // Retry later
+            setTimeout(() => {
+                (0, exports.openEventSource)();
+            }, 1000);
+        }, { once: true });
     });
 };
 exports.openEventSource = openEventSource;

package/dist/ffmpeg.d.ts

@@ -0,0 +1,2 @@
+export declare const ffmpegCommand: (_root: string, args: string[]) => never;
+export declare const ffprobeCommand: (_root: string, args: string[]) => never;

package/dist/ffmpeg.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ffprobeCommand = exports.ffmpegCommand = void 0;
+const renderer_1 = require("@remotion/renderer");
+const node_child_process_1 = require("node:child_process");
+const node_fs_1 = require("node:fs");
+const ffmpegCommand = (_root, args) => {
+    const binary = renderer_1.RenderInternals.getExecutablePath('ffmpeg');
+    if (!process.env.READ_ONLY_FS) {
+        (0, node_fs_1.chmodSync)(binary, 0o755);
+    }
+    const done = (0, node_child_process_1.spawnSync)(binary, args, {
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
+        stdio: 'inherit',
+    });
+    process.exit(done.status);
+};
+exports.ffmpegCommand = ffmpegCommand;
+const ffprobeCommand = (_root, args) => {
+    const binary = renderer_1.RenderInternals.getExecutablePath('ffprobe');
+    if (!process.env.READ_ONLY_FS) {
+        (0, node_fs_1.chmodSync)(binary, 0o755);
+    }
+    const done = (0, node_child_process_1.spawnSync)(binary, args, {
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
+        stdio: 'inherit',
+    });
+    process.exit(done.status);
+};
+exports.ffprobeCommand = ffprobeCommand;

package/dist/file-watcher.d.ts

@@ -0,0 +1,9 @@
+declare type FileChangeType = 'created' | 'deleted' | 'changed';
+export declare const installFileWatcher: ({ file, onChange, }: {
+    file: string;
+    onChange: (type: FileChangeType) => void;
+}) => {
+    exists: boolean;
+    unwatch: () => void;
+};
+export {};

package/dist/file-watcher.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.installFileWatcher = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const installFileWatcher = ({ file, onChange, }) => {
+    const existedAtBeginning = node_fs_1.default.existsSync(file);
+    let existedBefore = existedAtBeginning;
+    const listener = () => {
+        const existsNow = node_fs_1.default.existsSync(file);
+        if (!existedBefore && existsNow) {
+            onChange('created');
+            existedBefore = true;
+            return;
+        }
+        if (existedBefore && !existsNow) {
+            onChange('deleted');
+            existedBefore = false;
+            return;
+        }
+        if (existsNow) {
+            onChange('changed');
+        }
+    };
+    node_fs_1.default.watchFile(file, { interval: 100 }, listener);
+    return {
+        exists: existedAtBeginning,
+        unwatch: () => {
+            node_fs_1.default.unwatchFile(file, listener);
+        },
+    };
+};
+exports.installFileWatcher = installFileWatcher;

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

@@ -3,29 +3,35 @@ export declare const getAndValidateAbsoluteOutputFile: (relativeOutputLocation:
 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;
+    inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
-    quality: number | undefined;
+    jpegQuality: 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;
-    ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
     logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     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;
+    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
 }>;