@remotion/cli 4.0.0-alpha.115 → 4.0.0-alpha.130

package/dist/codemods/update-default-props.js

@@ -47,13 +47,24 @@ const findStarter = ({ input, compositionId, }) => {
     }
     throw new Error(`Could not find composition ID ${compositionId} in file`);
 };
+const findEndPosition = (input, currentPosition) => {
+    const asConstVersion = input
+        .slice(currentPosition + 1)
+        .search(/as\sconst[ \t\n\r]+\}/);
+    if (asConstVersion !== -1) {
+        const nextEnd = input.indexOf('}', asConstVersion + currentPosition + 1);
+        return nextEnd - 1;
+    }
+    const next = input.indexOf('}}', currentPosition + 1);
+    if (next !== -1) {
+        return next;
+    }
+    throw new Error('Could not find end of defaultProps');
+};
 const findEnder = (input, position, maxPosition) => {
     let currentPosition = position;
     while (currentPosition < maxPosition) {
-        const next = input.indexOf('}}', currentPosition + 1);
-        if (next === -1) {
-            throw new Error('Could not find end of defaultProps');
-        }
+        const next = findEndPosition(input, currentPosition);
         currentPosition = next;
         const nextChar = input[next + 1];
         if (nextChar === ',') {
@@ -80,10 +91,14 @@ const stringifyDefaultProps = (props) => {
         if (this[key] instanceof Date) {
             return `__REMOVEQUOTE__new Date('${new Date(this[key]).toISOString()}')__REMOVEQUOTE__`;
         }
+        if (typeof this[key] === 'string') {
+            return `${this[key]}__ADD_AS_CONST__`;
+        }
         return value;
     })
-        .replace('"__REMOVEQUOTE__', '')
-        .replace('__REMOVEQUOTE__"', '');
+        .replace(/"__REMOVEQUOTE__/g, '')
+        .replace(/__REMOVEQUOTE__"/g, '')
+        .replace(/__ADD_AS_CONST__"/g, '" as const');
 };
 // TODO: Add more sanity checks
 // TODO: better error messages

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: () => "png" | "jpeg" | "none" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;

package/dist/config/index.d.ts

@@ -261,7 +261,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

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

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

package/dist/editor/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -13,6 +13,7 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const container = {
     width: '100%',
 };
+// TODO: Long values break the layout
 const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
         return {

package/dist/editor/components/RenderModal/SchemaEditor/schema-serialization.d.ts

@@ -0,0 +1,2 @@
+export declare const serializeJSONWithSchema: (data: unknown, indent: number | undefined) => string;
+export declare const deserializeJSONWithSchema: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/schema-serialization.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithSchema = exports.serializeJSONWithSchema = void 0;
+const serializeJSONWithSchema = (data, indent) => {
+    return JSON.stringify(data, function (key, value) {
+        if (this[key] instanceof Date) {
+            return `remotion-date:${this[key].toISOString()}`;
+        }
+        return value;
+    }, indent);
+};
+exports.serializeJSONWithSchema = serializeJSONWithSchema;
+const deserializeJSONWithSchema = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith('remotion-date:')) {
+            return new Date(value.replace('remotion-date:', ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithSchema = deserializeJSONWithSchema;

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) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/TopPanel.js

@@ -71,6 +71,6 @@ const TopPanel = () => {
     const onExpandRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedStateRight('expanded');
     }, [setSidebarCollapsedStateRight]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [actualStateLeft === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedSidebarExpander_1.CollapsedSidebarExpander, { direction: "right", onExpand: onExpandLeft })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsxs)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: [(0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }), actualStateRight === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedSidebarExpander_1.CollapsedSidebarExpander, { direction: "left", onExpand: onExpandRight })) : null] })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [actualStateLeft === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedSidebarExpander_1.CollapsedSidebarExpander, { direction: "right", onExpand: onExpandLeft })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) }), (0, jsx_runtime_1.jsx)(CollapsedSidebarExpander_1.CollapsedSidebarExpander, { direction: "left", onExpand: onCollapseLeft })] })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsxs)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: [(0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CollapsedSidebarExpander_1.CollapsedSidebarExpander, { direction: "right", onExpand: onCollapseRight }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })] })) : null] }), actualStateRight === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedSidebarExpander_1.CollapsedSidebarExpander, { direction: "left", onExpand: onExpandRight })) : null] })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

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

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

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

@@ -20,7 +20,7 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "verbose" | "info" | "warn" | "error";
+    logLevel: "error" | "verbose" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;
@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
 }>;

package/dist/index.d.ts

@@ -64,17 +64,17 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "verbose" | "info" | "warn" | "error";
+            logLevel: "error" | "verbose" | "info" | "warn";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
     };
@@ -98,7 +98,7 @@ export declare const CliInternals: {
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -111,7 +111,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -132,7 +132,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -151,8 +151,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").AnyCompMetadata[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "4.0.0-alpha.115+764023ad5",
+	"version": "4.0.0-alpha.130+167d9bb7f",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -34,16 +34,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "4.0.0-alpha.115+764023ad5",
-		"@remotion/media-utils": "4.0.0-alpha.115+764023ad5",
-		"@remotion/player": "4.0.0-alpha.115+764023ad5",
-		"@remotion/renderer": "4.0.0-alpha.115+764023ad5",
+		"@remotion/bundler": "4.0.0-alpha.130+167d9bb7f",
+		"@remotion/media-utils": "4.0.0-alpha.130+167d9bb7f",
+		"@remotion/player": "4.0.0-alpha.130+167d9bb7f",
+		"@remotion/renderer": "4.0.0-alpha.130+167d9bb7f",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"open": "^8.4.2",
 		"prompts": "2.4.1",
-		"remotion": "4.0.0-alpha.115+764023ad5",
+		"remotion": "4.0.0-alpha.130+167d9bb7f",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "764023ad535f6f6bfd734880c8058933a52248b5"
+	"gitHead": "167d9bb7fc36e3cb939dec0e904be7a19a8eebb2"
 }