@remotion/cli 4.0.49 → 4.0.51

package/dist/config/chromium-flags.d.ts

@@ -3,7 +3,7 @@ export declare const getChromiumDisableWebSecurity: () => boolean;
 export declare const setChromiumDisableWebSecurity: (should: boolean) => void;
 export declare const getIgnoreCertificateErrors: () => boolean;
 export declare const setChromiumIgnoreCertificateErrors: (should: boolean) => void;
-export declare const getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | null;
+export declare const getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
 export declare const setChromiumOpenGlRenderer: (renderer: OpenGlRenderer) => void;
 export declare const getChromiumHeadlessMode: () => boolean;
 export declare const setChromiumHeadlessMode: (should: boolean) => void;

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;

package/dist/config/index.d.ts

@@ -103,10 +103,10 @@ declare global {
          */
         readonly setChromiumHeadlessMode: (should: boolean) => void;
         /**
-         * Set the OpenGL rendering backend for Chrome. Possible values: 'egl', 'angle', 'swiftshader', 'swangle' and 'vulkan'.
+         * Set the OpenGL rendering backend for Chrome. Possible values: 'egl', 'angle', 'swiftshader', 'swangle', 'vulkan' and 'angle-egl'.
          * Default: 'swangle' in Lambda, null elsewhere.
          */
-        readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader' | 'vulkan') => void;
+        readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader' | 'vulkan' | 'angle-egl') => void;
         /**
          * Set the user agent for Chrome. Only works during rendering.
          * Default is the default user agent for Chrome
@@ -306,7 +306,7 @@ export declare const ConfigInternals: {
     getChromiumDisableWebSecurity: () => boolean;
     getIgnoreCertificateErrors: () => boolean;
     getChromiumHeadlessMode: () => boolean;
-    getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | null;
+    getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl" | null;
     getEveryNthFrame: () => number;
     getConcurrency: () => string | number | null;
     getCurrentPuppeteerTimeout: () => number;
@@ -316,7 +316,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/RenderModal/RenderModalAdvanced.js

@@ -19,7 +19,15 @@ const container = {
 };
 const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
-        return ['angle', 'egl', 'swangle', 'swiftshader', 'vulkan', 'default'];
+        return [
+            'angle',
+            'egl',
+            'swangle',
+            'swiftshader',
+            'vulkan',
+            'angle-egl',
+            'default',
+        ];
     }, []);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 export declare const inPointerHandle: React.RefObject<HTMLDivElement>;
 export declare const outPointerHandle: React.RefObject<HTMLDivElement>;
-export declare const TimelineInOutPointerHandle: React.FC<{
+type Props = {
     dragging: boolean;
     type: 'in' | 'out';
     atFrame: number;
-}>;
+};
+export declare const TimelineInOutPointerHandle: React.FC<Props>;
+export {};

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

@@ -17,12 +17,8 @@ const line = {
 };
 exports.inPointerHandle = (0, react_1.createRef)();
 exports.outPointerHandle = (0, react_1.createRef)();
-const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, timelineWidth, type }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
-    if (timelineWidth === null) {
-        throw new Error('Timeline width is null');
-    }
     const style = (0, react_1.useMemo)(() => {
         return {
             ...line,
@@ -34,4 +30,13 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
+const TimelineInOutPointerHandle = ({ dragging, type, atFrame, }) => {
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    // When switching from a content which has no timeline (still or asset preview)
+    // the timeline first needs to mount, so we need to wait for the timeline width
+    if (timelineWidth === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(InnerTimelineInOutPointerHandle, { atFrame: atFrame, dragging: dragging, timelineWidth: timelineWidth, type: type }));
+};
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.25)" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

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

@@ -21,7 +21,7 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;
@@ -34,7 +34,7 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
     offthreadVideoCacheSizeInBytes: number | null;
     deleteAfter: ("1-day" | "3-days" | "7-days" | "30-days") | null;
     colorSpace: "default" | "bt709";

package/dist/index.d.ts

@@ -63,24 +63,24 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
         errorAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
@@ -106,7 +106,7 @@ export declare const CliInternals: {
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -119,7 +119,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
         offthreadVideoCacheSizeInBytes: number | null;
         deleteAfter: ("1-day" | "3-days" | "7-days" | "30-days") | null;
         colorSpace: "default" | "bt709";
@@ -131,7 +131,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
+        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "x264-preset": "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
         "bundle-cache": string;
@@ -175,7 +175,7 @@ export declare const CliInternals: {
         runs: number;
         concurrencies: string;
         "enforce-audio-track": boolean;
-        gl: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan";
+        gl: "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl";
         "package-manager": string;
         "webpack-poll": number;
         "no-open": boolean;
@@ -190,7 +190,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    printError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
+    printError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -202,7 +202,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
+        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -217,8 +217,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "none" | "png" | "jpeg" | null;
-    }) => "none" | "png" | "jpeg";
+        uiImageFormat: "png" | "jpeg" | "none" | null;
+    }) => "png" | "jpeg" | "none";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;
@@ -232,7 +232,7 @@ export declare const CliInternals: {
     };
     listOfRemotionPackages: string[];
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }) => boolean;
     getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, offthreadVideoCacheSizeInBytes, }: {
         height: number | null;
@@ -247,7 +247,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         serveUrlOrWebpackUrl: string;
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         serializedInputPropsWithCustomSchema: string;
         server: import("@remotion/renderer").RemotionServer;
         offthreadVideoCacheSizeInBytes: number | null;

package/dist/log.d.ts

@@ -2,24 +2,24 @@ export declare const Log: {
     verbose: (message?: any, ...optionalParams: any[]) => void;
     verboseAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }, message?: any, ...optionalParams: any[]) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     warnAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }, message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
     errorAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
+export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
 export {};

package/dist/preview-server/start-server.js

@@ -79,8 +79,10 @@ const startServer = async (options) => {
     });
     const desiredPort = (_d = (_c = options === null || options === void 0 ? void 0 : options.port) !== null && _c !== void 0 ? _c : (process.env.PORT ? Number(process.env.PORT) : undefined)) !== null && _d !== void 0 ? _d : undefined;
     const maxTries = 5;
-    // Default Node.js host, but explicity
-    const host = '::';
+    const host = renderer_1.RenderInternals.isIpV6Supported() ? '::' : '0.0.0.0';
+    const hostsToTry = renderer_1.RenderInternals.isIpV6Supported()
+        ? ['::', '::1']
+        : ['0.0.0.0', '127.0.0.1'];
     for (let i = 0; i < maxTries; i++) {
         try {
             const selectedPort = await new Promise((resolve, reject) => {
@@ -88,7 +90,7 @@ const startServer = async (options) => {
                     desiredPort,
                     from: 3000,
                     to: 3100,
-                    hostsToTry: ['::1', '::'],
+                    hostsToTry,
                 })
                     .then(({ port, didUsePort }) => {
                     server.listen({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.49",
+  "version": "4.0.51",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.49",
-    "@remotion/media-utils": "4.0.49",
-    "@remotion/player": "4.0.49",
-    "remotion": "4.0.49",
-    "@remotion/renderer": "4.0.49"
+    "@remotion/bundler": "4.0.51",
+    "@remotion/media-utils": "4.0.51",
+    "@remotion/player": "4.0.51",
+    "@remotion/renderer": "4.0.51",
+    "remotion": "4.0.51"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "react-dom": "^18.0.0",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.49",
-    "@remotion/tailwind": "4.0.49"
+    "@remotion/zod-types": "4.0.51",
+    "@remotion/tailwind": "4.0.51"
   },
   "keywords": [
     "remotion",