@remotion/studio 4.0.514 → 4.0.516

package/dist/components/RenderButton.js

@@ -32,15 +32,11 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
@@ -50,48 +46,10 @@ const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
 const in_out_1 = require("../state/in-out");
 const modals_1 = require("../state/modals");
-const z_index_1 = require("../state/z-index");
 const layout_1 = require("./layout");
-const is_menu_item_1 = require("./Menu/is-menu-item");
-const portals_1 = require("./Menu/portals");
-const styles_1 = require("./Menu/styles");
-const MenuContent_1 = require("./NewComposition/MenuContent");
-const splitButtonContainer = {
-    display: 'inline-flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 3,
-    gap: 1,
-    overflow: 'hidden',
-};
-const mainButtonStyle = {
-    paddingLeft: 7,
-    paddingRight: 7,
-    paddingTop: 7,
-    paddingBottom: 7,
-    background: colors_1.TRANSPARENT,
-    border: 'none',
-    borderRadius: '3px 0 0 3px',
-    color: colors_1.WHITE,
-    cursor: 'default',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 14,
-    fontFamily: 'inherit',
-};
-const dropdownTriggerStyle = {
-    paddingLeft: 6,
-    paddingRight: 6,
-    paddingTop: 7,
-    paddingBottom: 7,
-    background: colors_1.TRANSPARENT,
-    border: 'none',
-    borderRadius: '0 3px 3px 0',
-    color: colors_1.WHITE,
-    cursor: 'default',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+const SegmentedButton_1 = require("./SegmentedButton");
+const segmentedButtonStyle = {
+    height: 28,
 };
 const mainButtonContent = {
     paddingLeft: 4,
@@ -110,21 +68,21 @@ const label = {
     WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const compactSplitButtonSegmentHeight = 24;
-const compactMainButtonStyle = {
-    ...mainButtonStyle,
-    boxSizing: 'border-box',
-    height: compactSplitButtonSegmentHeight,
-    padding: '0 4px',
-    fontSize: 12,
+const compactMainSegmentStyle = {
+    padding: '0 6px',
 };
-const compactDropdownTriggerStyle = {
-    ...dropdownTriggerStyle,
-    boxSizing: 'border-box',
-    height: compactSplitButtonSegmentHeight,
+const defaultMainSegmentStyle = {
+    fontFamily: 'inherit',
+    fontSize: 14,
+    padding: '0 7px',
+};
+const compactDropdownSegmentStyle = {
     padding: 0,
     width: 20,
 };
+const defaultDropdownSegmentStyle = {
+    padding: '0 6px',
+};
 const compactMainButtonContent = {
     ...mainButtonContent,
     paddingLeft: 0,
@@ -155,50 +113,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
-    const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const dropdownRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const size = player_1.PlayerInternals.useElementSize(dropdownRef, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        // Prevent deselection of currently selected items
-        e.stopPropagation();
-        setDropdownOpened((o) => {
-            if (!o) {
-                refresh === null || refresh === void 0 ? void 0 : refresh();
-            }
-            return !o;
-        });
-    }, [refresh]);
-    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
-        // Prevent deselection of currently selected items
-        e.stopPropagation();
-    }, []);
-    const onClickDropdown = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        const isKeyboardInitiated = e.detail === 0;
-        if (!isKeyboardInitiated) {
-            return;
-        }
-        setDropdownOpened((o) => {
-            if (!o) {
-                refresh === null || refresh === void 0 ? void 0 : refresh();
-                window.addEventListener('pointerup', (evt) => {
-                    if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                        setDropdownOpened(false);
-                    }
-                }, {
-                    once: true,
-                });
-            }
-            return !o;
-        });
-    }, [refresh]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
@@ -343,9 +257,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             openClientRenderModal();
         }
     }, [renderType, openServerRenderModal, openClientRenderModal]);
-    const onHideDropdown = (0, react_1.useCallback)(() => {
-        setDropdownOpened(false);
-    }, []);
     const handleRenderTypeChange = (0, react_1.useCallback)((newType) => {
         setPreferredRenderType(newType);
         try {
@@ -354,7 +265,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         catch (_a) {
             // localStorage might not be available
         }
-        setDropdownOpened(false);
         if (newType === 'server-render') {
             openServerRenderModal(false);
         }
@@ -421,94 +331,67 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             },
         ];
     }, [canServerRender, handleRenderTypeChange, readOnlyStudio]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && dropdownOpened) {
-            return size.windowSize.height - (size.top + size.height) - margin;
-        }
-        return 0;
-    }, [dropdownOpened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        const margin = 10;
-        if (size && dropdownOpened) {
-            return size.top - margin;
-        }
-        return 0;
-    }, [dropdownOpened, size]);
-    const derivedMaxHeight = (0, react_1.useMemo)(() => {
-        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
-    }, [spaceToBottom, spaceToTop]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!dropdownOpened || !size) {
-            return null;
-        }
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        return {
-            ...(verticalLayout === 'top'
-                ? {
-                    ...styles_1.menuContainerTowardsBottom,
-                    top: size.top + size.height,
-                }
-                : {
-                    ...styles_1.menuContainerTowardsTop,
-                    bottom: size.windowSize.height - size.top,
-                }),
-            right: size.windowSize.width - size.left - size.width,
-        };
-    }, [dropdownOpened, size, spaceToBottom, spaceToTop]);
-    const containerStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...splitButtonContainer,
-            borderRadius: controlSize === 'compact' ? 3 : 4,
-            opacity: 1,
-            cursor: 'default',
-        };
-    }, [controlSize]);
     const renderLabel = renderType === 'server-render'
         ? 'Render'
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
     const showRenderLabel = !narrow || renderType !== 'server-render';
-    const mainHovered = hovered && !dropdownOpened;
-    const mainForegroundColor = mainHovered ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
-    const mainSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
-        hovered: mainHovered,
-        selected: false,
-    });
-    const dropdownSegmentBackground = (0, colors_1.getBackgroundFromHoverState)({
-        hovered,
-        selected: dropdownOpened,
-    });
+    const segments = (0, react_1.useMemo)(() => {
+        return [
+            {
+                ariaLabel: renderLabel,
+                buttonId: 'render-modal-button',
+                disabled: false,
+                idleColor: colors_1.WHITE_ALPHA_80,
+                onClick,
+                onPointerDown: null,
+                renderContent: (color) => (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+                        ? compactMainButtonContent
+                        : mainButtonContent, children: [
+                        jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
+                            ] })) : null] })),
+                segmentId: 'render',
+                style: controlSize === 'compact'
+                    ? compactMainSegmentStyle
+                    : defaultMainSegmentStyle,
+                title: tooltip,
+                type: 'action',
+            },
+            {
+                ariaLabel: 'Select render type',
+                buttonId: null,
+                disabled: false,
+                idleColor: colors_1.WHITE_ALPHA_80,
+                leaveLeftSpace: false,
+                onOpenChange: null,
+                renderContent: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }),
+                segmentId: 'render-type',
+                selectedId: renderType,
+                style: controlSize === 'compact'
+                    ? compactDropdownSegmentStyle
+                    : defaultDropdownSegmentStyle,
+                title: 'Select render type',
+                type: 'menu',
+                values: dropdownValues,
+            },
+        ];
+    }, [
+        controlSize,
+        dropdownValues,
+        iconStyle,
+        onClick,
+        renderLabel,
+        renderType,
+        showRenderLabel,
+        tooltip,
+    ]);
     if (!video) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-                    jsx_runtime_1.jsx("button", { type: "button", "aria-label": renderLabel, style: {
-                            ...(controlSize === 'compact'
-                                ? compactMainButtonStyle
-                                : mainButtonStyle),
-                            backgroundColor: mainSegmentBackground,
-                            color: mainForegroundColor,
-                        }, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
-                                ? compactMainButtonContent
-                                : mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: mainForegroundColor, svgProps: iconStyle }), showRenderLabel ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                        jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: {
-                                                ...(controlSize === 'compact' ? compactLabel : label),
-                                                color: mainForegroundColor,
-                                            }, children: renderLabel })
-                                    ] })) : null] }) }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: {
-                            ...(controlSize === 'compact'
-                                ? compactDropdownTriggerStyle
-                                : dropdownTriggerStyle),
-                            backgroundColor: dropdownSegmentBackground,
-                            color: dropdownForegroundColor,
-                        }, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: dropdownForegroundColor }) })
-                ] }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: tooltip })
+        ] }));
 };
 exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/DataEditor.js

@@ -48,6 +48,7 @@ const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
+const infer_zod_schema_from_value_1 = require("./SchemaEditor/infer-zod-schema-from-value");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const zod_schema_type_1 = require("./SchemaEditor/zod-schema-type");
@@ -196,19 +197,21 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
         setDefaultProps((p) => p, { shouldSave: true });
     }, [setDefaultProps]);
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
-        if (!z) {
-            return 'no-zod';
-        }
-        if (!unresolvedComposition.schema) {
-            return 'no-schema';
-        }
-        if (!(typeof unresolvedComposition.schema
-            .safeParse === 'function')) {
-            throw new Error('A value which is not a Zod schema was passed to `schema`');
-        }
-        return unresolvedComposition.schema;
-    }, [unresolvedComposition.schema, z]);
+        var _a;
+        return (0, infer_zod_schema_from_value_1.resolveCompositionSchema)({
+            explicitSchema: unresolvedComposition.schema,
+            defaultProps: (_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {},
+            z,
+            zodTypes,
+        });
+    }, [
+        unresolvedComposition.defaultProps,
+        unresolvedComposition.schema,
+        z,
+        zodTypes,
+    ]);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         if (schema === 'no-zod') {
             return 'no-zod';

package/dist/components/RenderModal/GuiRenderStatus.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuiRenderStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const actions_1 = require("../RenderQueue/actions");
@@ -78,6 +79,7 @@ const DownloadsProgress = ({ downloads }) => {
         ] }));
 };
 const OpenFile = ({ job }) => {
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...label,
@@ -93,7 +95,7 @@ const OpenFile = ({ job }) => {
         (0, actions_1.openInFileExplorer)({ directory: job.outName });
     }, [job.outName]);
     return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
-            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName }), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
+            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), isBrowserStudio ? (jsx_runtime_1.jsx("div", { style: labelStyle, children: job.outName })) : (jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName })), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
         ] }));
 };
 const GuiRenderStatus = ({ job }) => {

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
 const folder_1 = require("../../icons/folder");
@@ -47,14 +48,13 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
     }, []);
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     return (jsx_runtime_1.jsxs("div", { style: outputNameRow, children: [
             jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { style: outputNameInputContainer, children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
-                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
-                                            "Exists, will be overwritten"] }), type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };

package/dist/components/RenderModal/RenderStatusModal.js

@@ -68,7 +68,6 @@ const RenderStatusModal = ({ jobId, }) => {
         setSelectedModal(null);
         if (isClientJob) {
             removeClientJob(job.id);
-            (0, NotificationCenter_1.showNotification)('Removed render', 2000);
         }
         else {
             (0, actions_1.removeRenderJob)(job).catch((err) => {

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

@@ -36,7 +36,9 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, onRemove, mayPad }) => {
             description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
             return (jsx_runtime_1.jsx(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
         }
-        if (value.startsWith(window.remotion_staticBase)) {
+        if ((window.remotion_staticBase !== '' &&
+            value.startsWith(window.remotion_staticBase)) ||
+            window.remotion_staticFiles.some((file) => file.src === value)) {
             return (jsx_runtime_1.jsx(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, onRemove: onRemove, mayPad: mayPad }));
         }
         if (zodTypes &&

package/dist/components/RenderModal/SchemaEditor/infer-zod-schema-from-value.d.ts

@@ -0,0 +1,15 @@
+import type { ZodType as ZodNamespace, ZodTypesType } from '../../get-zod-if-possible';
+import type { AnyZodSchema } from './zod-schema-type';
+export declare function inferZodSchemaFromValue({ value, z, zodTypes, path }: {
+    readonly value: unknown;
+    readonly z: ZodNamespace;
+    readonly zodTypes: ZodTypesType | null;
+    readonly path: readonly string[];
+}): AnyZodSchema;
+export type ResolvedCompositionSchema = AnyZodSchema | 'no-schema' | 'no-zod';
+export declare function resolveCompositionSchema({ explicitSchema, defaultProps, z, zodTypes }: {
+    readonly explicitSchema: unknown;
+    readonly defaultProps: Record<string, unknown>;
+    readonly z: ZodNamespace | null;
+    readonly zodTypes: ZodTypesType | null;
+}): ResolvedCompositionSchema;

package/dist/components/RenderModal/SchemaEditor/infer-zod-schema-from-value.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inferZodSchemaFromValue = inferZodSchemaFromValue;
+exports.resolveCompositionSchema = resolveCompositionSchema;
+const zod_schema_type_1 = require("./zod-schema-type");
+const hasUnambiguousColorSyntax = (value) => {
+    return /^(?:#|(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)\()/i.test(value.trim());
+};
+const isPlainObject = (value) => {
+    if (value === null || typeof value !== 'object') {
+        return false;
+    }
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+};
+function inferZodSchemaFromValue({ value, z, zodTypes, path, }) {
+    var _a;
+    if (typeof value === 'string') {
+        const key = (_a = path.at(-1)) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (key === 'type') {
+            return z.literal(value);
+        }
+        const keySuggestsColor = key === null || key === void 0 ? void 0 : key.includes('color');
+        if (zodTypes && (keySuggestsColor || hasUnambiguousColorSyntax(value))) {
+            try {
+                zodTypes.ZodZypesInternals.parseColor(value);
+                return zodTypes.zColor();
+            }
+            catch (_b) { }
+        }
+        return z.string();
+    }
+    if (typeof value === 'number') {
+        return z.number();
+    }
+    if (typeof value === 'boolean') {
+        return z.boolean();
+    }
+    if (value === null) {
+        return z.null();
+    }
+    if (typeof value === 'undefined') {
+        return z.undefined();
+    }
+    if (value instanceof Date) {
+        return z.date();
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return z.any();
+        }
+        const elementSchema = inferZodSchemaFromValue({
+            value: value[0],
+            z,
+            zodTypes,
+            path,
+        });
+        if (!value.every((item) => (0, zod_schema_type_1.zodSafeParse)(elementSchema, item).success)) {
+            return z.any();
+        }
+        return z.array(elementSchema);
+    }
+    if (isPlainObject(value)) {
+        return z.object(Object.fromEntries(Object.entries(value).map(([key, child]) => [
+            key,
+            inferZodSchemaFromValue({
+                value: child,
+                z,
+                zodTypes,
+                path: [...path, key],
+            }),
+        ])));
+    }
+    return z.any();
+}
+function resolveCompositionSchema({ explicitSchema, defaultProps, z, zodTypes, }) {
+    if (!z) {
+        return 'no-zod';
+    }
+    if (explicitSchema) {
+        if (typeof explicitSchema.safeParse !== 'function') {
+            throw new Error('A value which is not a Zod schema was passed to `schema`');
+        }
+        return explicitSchema;
+    }
+    if (Object.keys(defaultProps).length === 0) {
+        return 'no-schema';
+    }
+    return inferZodSchemaFromValue({
+        value: defaultProps,
+        z,
+        zodTypes,
+        path: [],
+    });
+}

package/dist/components/RenderModal/WebRenderModal.js

@@ -6,6 +6,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
 const file_1 = require("../../icons/file");
@@ -105,6 +106,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             ? 'video'
             : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
@@ -418,11 +420,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'settings',
                                     initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -4,6 +4,7 @@ exports.RenderQueueItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
@@ -54,6 +55,7 @@ const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const { canDrag, isDragging, onDragEnd, onDragStart } = (0, use_render_output_file_drag_1.useRenderOutputFileDrag)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
@@ -147,6 +149,6 @@ const RenderQueueItem = ({ job, selected }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.compositionId }), jsx_runtime_1.jsx("div", { style: subtitle, children: job.status === 'done' ? (jsx_runtime_1.jsx(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? (jsx_runtime_1.jsx(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? (jsx_runtime_1.jsx(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOpenInFinderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueOpenInFinderItem = ({ job }) => {
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
@@ -24,6 +26,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;