@remotion/cli 4.0.0-alpha5 → 4.0.0-alpha7

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

@@ -32,17 +32,50 @@ const ZodOrNullishEditor = ({ jsonPath, compact, schema, setValue, onSave, defau
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const isChecked = value === nullishValue;
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
-        setValue(newValue);
-    }, [setValue]);
+    const [localNonNullishValueValue, setLocalNonNullishValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: value === nullishValue
+                ? { success: true, data: value }
+                : schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((updater) => {
+        setLocalNonNullishValue((oldState) => {
+            const newValue = updater(oldState.value);
+            if (newValue === nullishValue) {
+                return oldState;
+            }
+            return {
+                value: newValue,
+                zodValidation: schema.safeParse(newValue),
+            };
+        });
+        setValue(updater);
+    }, [nullishValue, schema, setValue]);
     const onCheckBoxChange = (0, react_1.useCallback)((e) => {
         const val = e.target.checked
             ? nullishValue
-            : (0, create_zod_values_1.createZodValues)(schema, z, zodTypes);
-        onValueChange(val);
-    }, [nullishValue, onValueChange, schema, z, zodTypes]);
+            : localNonNullishValueValue.value === nullishValue
+                ? (0, create_zod_values_1.createZodValues)(schema, z, zodTypes)
+                : localNonNullishValueValue.value;
+        if (val !== nullishValue) {
+            setLocalNonNullishValue({
+                value: val,
+                zodValidation: schema.safeParse(val),
+            });
+        }
+        onValueChange(() => val);
+    }, [
+        localNonNullishValueValue,
+        nullishValue,
+        onValueChange,
+        schema,
+        z,
+        zodTypes,
+    ]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(() => defaultValue);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);

package/dist/editor/components/RenderModal/SchemaEditor/ZodStaticFileEditor.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+export declare const ZodStaticFileEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: UpdaterFunction<string>;
+    onSave: (updater: (oldState: string) => string) => void;
+    compact: boolean;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+    saving: boolean;
+}>;

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodStaticFileEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const Checkmark_1 = require("../../../icons/Checkmark");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const layout_1 = require("../../layout");
+const ComboBox_1 = require("../../NewComposition/ComboBox");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const container = {
+    width: '100%',
+};
+const ZodStaticFileEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+            revision: 0,
+        };
+    });
+    const def = schema._def;
+    const typeName = def.typeName;
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodString) {
+        throw new Error('expected enum');
+    }
+    const isRoot = jsonPath.length === 0;
+    const onChange = (0, react_1.useCallback)((updater, forceApply) => {
+        setLocalValue((oldLocalState) => {
+            const newValue = updater(oldLocalState.value);
+            const safeParse = schema.safeParse(newValue);
+            if (safeParse.success || forceApply) {
+                updateValue(updater);
+            }
+            return {
+                value: newValue,
+                zodValidation: safeParse,
+            };
+        });
+    }, [schema, updateValue]);
+    const reset = (0, react_1.useCallback)(() => {
+        onChange(() => defaultValue, true);
+    }, [defaultValue, onChange]);
+    const comboBoxValues = (0, react_1.useMemo)(() => {
+        return (0, remotion_1.getStaticFiles)().map((option) => {
+            return {
+                value: option.src,
+                label: option.name,
+                id: option.src,
+                keyHint: null,
+                leftItem: option.src === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                onClick: (id) => {
+                    onChange(() => id, false);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+            };
+        });
+    }, [onChange, value]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: localValue.value, title: value }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }));
+};
+exports.ZodStaticFileEditor = ZodStaticFileEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodStringEditor.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodStringEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: string;
     defaultValue: string;
-    setValue: React.Dispatch<React.SetStateAction<string>>;
+    setValue: UpdaterFunction<string>;
     onSave: (updater: (oldNum: unknown) => string) => void;
     onRemove: null | (() => void);
     compact: boolean;

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

@@ -23,22 +23,22 @@ const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultVal
             zodValidation: schema.safeParse(value),
         };
     });
-    const onValueChange = (0, react_1.useCallback)((newValue) => {
+    const onValueChange = (0, react_1.useCallback)((newValue, forceApply) => {
         const safeParse = schema.safeParse(newValue);
         const newLocalState = {
             value: newValue,
             zodValidation: safeParse,
         };
         setLocalValue(newLocalState);
-        if (safeParse.success) {
-            setValue(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(() => newValue);
         }
     }, [schema, setValue]);
     const onChange = (0, react_1.useCallback)((e) => {
-        onValueChange(e.target.value);
+        onValueChange(e.target.value, false);
     }, [onValueChange]);
     const reset = (0, react_1.useCallback)(() => {
-        onValueChange(defaultValue);
+        onValueChange(defaultValue, true);
     }, [defaultValue, onValueChange]);
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value);

package/dist/editor/components/RenderModal/SchemaEditor/ZodSwitch.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
+export declare type UpdaterFunction<T> = (updater: (oldValue: T) => T) => void;
 export declare const ZodSwitch: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
     value: unknown;
     defaultValue: unknown;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: UpdaterFunction<unknown>;
     onSave: (newValue: (oldVal: unknown) => unknown) => void;
     compact: boolean;
     showSaveButton: boolean;

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

@@ -14,6 +14,7 @@ const ZodNullableEditor_1 = require("./ZodNullableEditor");
 const ZodNumberEditor_1 = require("./ZodNumberEditor");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const ZodOptionalEditor_1 = require("./ZodOptionalEditor");
+const ZodStaticFileEditor_1 = require("./ZodStaticFileEditor");
 const ZodStringEditor_1 = require("./ZodStringEditor");
 const ZodUnionEditor_1 = require("./ZodUnionEditor");
 const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, saving, }) => {
@@ -30,6 +31,9 @@ const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, o
         return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodString) {
+        if (value.startsWith(window.remotion_staticBase)) {
+            return ((0, jsx_runtime_1.jsx)(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        }
         return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDate) {

package/dist/editor/components/RenderModal/SchemaEditor/ZodUnionEditor.d.ts

@@ -8,7 +8,7 @@ export declare const ZodUnionEditor: React.FC<{
     value: unknown;
     defaultValue: unknown;
     schema: z.ZodTypeAny;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: (updater: (oldState: unknown) => unknown) => void;
     onSave: (updater: (oldNum: unknown) => unknown) => void;
     onRemove: null | (() => void);
     saving: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/extract-enum-json-paths.d.ts

@@ -0,0 +1,3 @@
+import type { ZodType } from '../../get-zod-if-possible';
+export declare type EnumPath = (string | number)[];
+export declare const extractEnumJsonPaths: (schema: Zod.ZodTypeAny, zodRuntime: ZodType, currentPath: (string | number)[]) => (string | number)[][];

package/dist/editor/components/RenderModal/SchemaEditor/extract-enum-json-paths.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractEnumJsonPaths = void 0;
+const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
+    const def = schema._def;
+    const typeName = def.typeName;
+    switch (typeName) {
+        case zodRuntime.ZodFirstPartyTypeKind.ZodObject: {
+            const shape = def.shape();
+            const keys = Object.keys(shape);
+            return keys
+                .map((key) => {
+                return (0, exports.extractEnumJsonPaths)(shape[key], zodRuntime, [
+                    ...currentPath,
+                    key,
+                ]);
+            })
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodArray: {
+            return (0, exports.extractEnumJsonPaths)(def.type, zodRuntime, [
+                ...currentPath,
+                '[]',
+            ]);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUnion: {
+            return def.options
+                .map((option) => {
+                return (0, exports.extractEnumJsonPaths)(option, zodRuntime, currentPath);
+            })
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
+            return def.options
+                .map((op) => {
+                return (0, exports.extractEnumJsonPaths)(op, zodRuntime, currentPath);
+            })
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodLiteral: {
+            return [currentPath];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodEffects: {
+            return (0, exports.extractEnumJsonPaths)(def.schema, zodRuntime, currentPath);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {
+            const { left, right } = def;
+            const leftValue = (0, exports.extractEnumJsonPaths)(left, zodRuntime, currentPath);
+            const rightValue = (0, exports.extractEnumJsonPaths)(right, zodRuntime, currentPath);
+            return [...leftValue, ...rightValue];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodTuple: {
+            return def.items
+                .map((item, i) => (0, exports.extractEnumJsonPaths)(item, zodRuntime, [...currentPath, i]))
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodRecord: {
+            const values = (0, exports.extractEnumJsonPaths)(def.valueType, zodRuntime, [...currentPath, '{}']);
+            return values;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodFunction: {
+            throw new Error('Cannot create a value for type function');
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodEnum: {
+            return [currentPath];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNativeEnum: {
+            return [];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodOptional: {
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNullable: {
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDefault: {
+            const defType = def;
+            return (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodCatch: {
+            const defType = def;
+            return (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodPromise: {
+            return [];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBranded: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.type, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodPipeline: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.out, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodString:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNumber:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBigInt:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBoolean:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNaN:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDate:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodSymbol:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUndefined:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNull:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodAny:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUnknown:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNever:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodVoid:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodMap: // Maps are not serializable
+        case zodRuntime.ZodFirstPartyTypeKind.ZodLazy:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodSet: {
+            // Sets are not serializable
+            return [];
+        }
+        default:
+            throw new Error('Not implemented: ' + typeName);
+    }
+};
+exports.extractEnumJsonPaths = extractEnumJsonPaths;

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

@@ -0,0 +1,12 @@
+export declare type SerializedJSONWithCustomFields = {
+    serializedString: string;
+    customDateUsed: boolean;
+    customFileUsed: boolean;
+};
+export declare const FILE_TOKEN = "remotion-file:";
+export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
+    data: unknown;
+    indent: number | undefined;
+    staticBase: string;
+}) => SerializedJSONWithCustomFields;
+export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
+const DATE_TOKEN = 'remotion-date:';
+exports.FILE_TOKEN = 'remotion-file:';
+const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
+    let customDateUsed = false;
+    let customFileUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        const item = this[key];
+        if (item instanceof Date) {
+            customDateUsed = true;
+            return `${DATE_TOKEN}${item.toISOString()}`;
+        }
+        if (typeof item === 'string' && item.startsWith(staticBase)) {
+            customFileUsed = true;
+            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed };
+};
+exports.serializeJSONWithDate = serializeJSONWithDate;
+const deserializeJSONWithCustomFields = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
+            return new Date(value.replace(DATE_TOKEN, ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/editor/components/RenderModal/get-render-modal-warnings.d.ts

@@ -6,10 +6,11 @@ export declare type TypeCanSaveState = {
     reason: string;
     determined: boolean;
 };
-export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, inJSONEditor, propsEditType, }: {
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, inJSONEditor, propsEditType, }: {
     cliProps: unknown;
     canSaveDefaultProps: TypeCanSaveState;
-    isCustomDateUsed: boolean | undefined;
+    isCustomDateUsed: boolean;
+    customFileUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
 }) => string[];

package/dist/editor/components/RenderModal/get-render-modal-warnings.js

@@ -20,15 +20,22 @@ const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
 };
 const customDateUsed = (used, inJSONEditor) => {
     if (used && inJSONEditor) {
-        return "There is a Date in the schema which can't be serialized. It has been converted into a string.";
+        return 'There is a Date in the schema which was serialized. Note the custom syntax.';
     }
     return null;
 };
-const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, inJSONEditor, propsEditType, }) => {
+const staticFileUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'There is a staticFile() in the schema which was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, inJSONEditor, propsEditType, }) => {
     return [
         getInputPropsWarning({ cliProps, propsEditType }),
         getCannotSaveDefaultProps(canSaveDefaultProps),
         customDateUsed(isCustomDateUsed, inJSONEditor),
+        staticFileUsed(customFileUsed, inJSONEditor),
     ].filter(truthy_1.truthy);
 };
 exports.getRenderModalWarnings = getRenderModalWarnings;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -1,6 +1,7 @@
 import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 import type { RequiredChromiumOptions } from '../../../required-chromium-options';
+import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
     compositionId: string;
     outName: string;
@@ -54,5 +55,5 @@ export declare const openInFileExplorer: ({ directory }: {
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown) => Promise<void>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<void>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

package/dist/editor/components/RenderQueue/actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
-const date_serialization_1 = require("../RenderModal/SchemaEditor/date-serialization");
+const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
 const callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -104,11 +104,15 @@ const cancelRenderJob = (job) => {
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
-const updateDefaultProps = (compositionId, defaultProps) => {
+const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,
-        defaultProps: (0, date_serialization_1.serializeJSONWithDate)(defaultProps, undefined)
-            .serializedString,
+        defaultProps: (0, input_props_serialization_1.serializeJSONWithDate)({
+            data: defaultProps,
+            indent: undefined,
+            staticBase: window.remotion_staticBase,
+        }).serializedString,
+        enumPaths,
     });
 };
 exports.updateDefaultProps = updateDefaultProps;

package/dist/editor/components/SidebarCollapserControls.js

@@ -7,11 +7,11 @@ const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-over
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
-const layout_1 = require("./layout");
 const TopPanel_1 = require("./TopPanel");
 const style = {
     width: 16,
     height: 16,
+    minWidth: 16,
     border: '1px solid currentColor',
     borderRadius: 3,
     color: 'currentColor',
@@ -118,12 +118,18 @@ const SidebarCollapserControls = () => {
     const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Toggle Right Sidebar'
         : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+    const colorStyle = (0, react_1.useCallback)((color) => {
+        return {
+            ...style,
+            color,
+        };
+    }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: style, title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
-    }, [leftIcon, toggleLeftTooltip]);
+        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
+    }, [colorStyle, leftIcon, toggleLeftTooltip]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: style, title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
-    }, [rightIcon, toggleRightTooltip]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
+    }, [colorStyle, rightIcon, toggleRightTooltip]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
 };
 exports.SidebarCollapserControls = SidebarCollapserControls;

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

@@ -15,7 +15,7 @@ const SEQUENCE_GRADIENT = 'var(--blue)';
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const TimelineSequence = ({ s, fps }) => {
-    var _a, _b;
+    var _a;
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
@@ -30,8 +30,10 @@ const TimelineSequence = ({ s, fps }) => {
         throw new TypeError('Expected video config');
     }
     const { marginLeft, width } = (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
-        durationInFrames: s.duration * ((_b = s.showLoopTimesInTimeline) !== null && _b !== void 0 ? _b : 1),
-        startFrom: s.from,
+        durationInFrames: s.loopDisplay
+            ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
+            : s.duration,
+        startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
         startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
         maxMediaDuration,
         video,
@@ -55,6 +57,6 @@ const TimelineSequence = ({ s, fps }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }, s.id));
 };
 exports.TimelineSequence = TimelineSequence;

package/dist/editor/helpers/calculate-timeline.js

@@ -29,7 +29,7 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
                     rootId: '-',
                     showInTimeline: true,
                     nonce: 0,
-                    showLoopTimesInTimeline: undefined,
+                    loopDisplay: undefined,
                 },
                 depth: 0,
                 hash: '-',

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

@@ -3,7 +3,7 @@ export declare const INPUT_BACKGROUND = "#2f363d";
 export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
-export declare const LIGHT_TEXT = "rgba(255, 255, 255, 0.6)";
+export declare const LIGHT_TEXT = "#A6A7A9";
 export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";

package/dist/editor/helpers/colors.js

@@ -6,7 +6,7 @@ exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
-exports.LIGHT_TEXT = 'rgba(255, 255, 255, 0.6)';
+exports.LIGHT_TEXT = '#A6A7A9';
 exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
 const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';