@remotion/studio 4.0.497 → 4.0.498

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-5wj95bdd.js").then(({ StudioInternals }) => {
+    import("./chunk-7a6q9hk2.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/interactivity-enabled.d.ts

@@ -1 +1 @@
-export declare const studioInteractivityEnabled: boolean;
+export declare const isStudioInteractivityEnabled: () => boolean;

package/dist/helpers/interactivity-enabled.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.studioInteractivityEnabled = void 0;
+exports.isStudioInteractivityEnabled = void 0;
 const studio_runtime_config_1 = require("./studio-runtime-config");
-exports.studioInteractivityEnabled = (0, studio_runtime_config_1.getStudioInteractivityEnabled)();
+exports.isStudioInteractivityEnabled = studio_runtime_config_1.getStudioInteractivityEnabled;

package/dist/helpers/retry-payload.js

@@ -182,7 +182,6 @@ const makeClientRetryPayload = (job) => {
         compositionId: job.compositionId,
         initialFrame: job.type === 'client-still' ? job.frame : 0,
         initialLogLevel: job.logLevel,
-        initialLicenseKey: job.licenseKey,
         defaultProps: job.inputProps,
         inFrameMark: job.type === 'client-video' ? job.startFrame : null,
         outFrameMark: job.type === 'client-video' ? job.endFrame : null,

package/dist/helpers/use-menu-structure.js

@@ -269,16 +269,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     {
                         id: 'license',
                         value: 'license',
-                        label: 'License',
+                        label: 'Configure License...',
                         onClick: () => {
+                            var _a;
+                            var _b;
                             closeMenu();
-                            openExternal('https://github.com/remotion-dev/remotion/blob/main/LICENSE.md');
+                            setSelectedModal({
+                                type: 'configure-license',
+                                initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                            });
                         },
                         type: 'item',
                         keyHint: null,
                         leftItem: null,
                         subMenu: null,
-                        quickSwitcherLabel: 'Help: License',
+                        quickSwitcherLabel: 'Configure License...',
+                        disabled: readOnlyStudio || type !== 'connected',
                     },
                     {
                         id: 'acknowledgements',

package/dist/state/modals.d.ts

@@ -29,7 +29,6 @@ export type WebRenderModalState = {
     initialKeyframeIntervalInSeconds: number | null;
     initialTransparent: boolean | null;
     initialMuted: boolean | null;
-    initialLicenseKey: string | null;
     initialMediaCacheSizeInBytes: number | null;
     initialPageResponsiveness: WebRendererPageResponsiveness;
 };
@@ -143,6 +142,9 @@ export type ModalState = {
     relativePath: string;
 } | {
     type: 'input-props-override';
+} | {
+    type: 'configure-license';
+    initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;

package/dist/visual-controls/VisualControls.js

@@ -70,7 +70,7 @@ const VisualControlsProvider = ({ children }) => {
         if (!env.isStudio) {
             return value;
         }
-        if (!interactivity_enabled_1.studioInteractivityEnabled) {
+        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)()) {
             return value;
         }
         if (!z) {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.497",
+	"version": "4.0.498",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.497",
-		"@remotion/canvas-capture": "4.0.497",
-		"@remotion/player": "4.0.497",
-		"@remotion/media-utils": "4.0.497",
-		"@remotion/renderer": "4.0.497",
-		"@remotion/web-renderer": "4.0.497",
-		"@remotion/studio-shared": "4.0.497",
-		"@remotion/timeline-utils": "4.0.497",
-		"@remotion/zod-types": "4.0.497",
+		"remotion": "4.0.498",
+		"@remotion/canvas-capture": "4.0.498",
+		"@remotion/player": "4.0.498",
+		"@remotion/media-utils": "4.0.498",
+		"@remotion/renderer": "4.0.498",
+		"@remotion/web-renderer": "4.0.498",
+		"@remotion/studio-shared": "4.0.498",
+		"@remotion/timeline-utils": "4.0.498",
+		"@remotion/zod-types": "4.0.498",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.497",
+		"@remotion/eslint-config-internal": "4.0.498",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/RenderModal/WebRenderModalLicense.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-type WebRenderModalLicenseProps = {
-    readonly licenseKey: string | null;
-    readonly setLicenseKey: React.Dispatch<React.SetStateAction<string | null>>;
-    readonly initialPublicLicenseKey: string | null;
-};
-export declare const row: React.CSSProperties;
-export declare const WebRenderModalLicense: React.FC<WebRenderModalLicenseProps>;
-export {};

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -1,189 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebRenderModalLicense = exports.row = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const Checkbox_1 = require("../Checkbox");
-const layout_1 = require("../layout");
-const RemInput_1 = require("../NewComposition/RemInput");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const WebRenderModalLicenseKeyDetails_1 = require("./WebRenderModalLicenseKeyDetails");
-exports.row = {
-    display: 'flex',
-    flexDirection: 'row',
-    paddingLeft: 16,
-    paddingRight: 16,
-};
-const tabContainer = {
-    flex: 1,
-};
-const descriptionStyle = {
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 14,
-    fontFamily: 'sans-serif',
-    paddingLeft: 16,
-    paddingRight: 16,
-    paddingTop: 16,
-    paddingBottom: 8,
-    lineHeight: 1.5,
-};
-const paddedDescriptionStyle = {
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 14,
-    fontFamily: 'sans-serif',
-    padding: 9,
-    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
-    borderRadius: 8,
-    lineHeight: 1.5,
-    marginLeft: 16,
-    marginRight: 16,
-};
-const descriptionLink = {
-    color: colors_1.WHITE,
-    fontSize: 14,
-};
-const checkboxLabel = {
-    fontSize: 14,
-    lineHeight: '40px',
-    color: colors_1.LIGHT_TEXT,
-    flex: 1,
-    fontFamily: 'sans-serif',
-    cursor: 'pointer',
-    userSelect: 'none',
-};
-const inputStyle = {
-    minWidth: 250,
-};
-const justifyCenter = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 10,
-    flex: 1,
-};
-const codeStyle = {
-    fontSize: 14,
-    fontFamily: 'monospace',
-    color: colors_1.BLUE,
-};
-const codeLine = {
-    fontSize: 14,
-    fontFamily: 'monospace',
-    color: colors_1.LIGHT_TEXT,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    padding: 6,
-    borderRadius: 3,
-    marginTop: 6,
-    overflowX: 'auto',
-    maxWidth: '100%',
-};
-const codeLineSmall = {
-    ...codeLine,
-    fontSize: 11,
-};
-const LICENSE_KEY_LENGTH = 55;
-const LICENSE_KEY_PREFIX = 'rm_pub_';
-const validateLicenseKey = (key) => {
-    if (key.length === 0) {
-        return { valid: false, message: null, details: null };
-    }
-    if (!key.startsWith(LICENSE_KEY_PREFIX)) {
-        return {
-            valid: false,
-            message: `License key must start with "${LICENSE_KEY_PREFIX}"`,
-            details: null,
-        };
-    }
-    const afterPrefix = key.slice(LICENSE_KEY_PREFIX.length);
-    if (!/^[a-zA-Z0-9]*$/.test(afterPrefix)) {
-        return {
-            valid: false,
-            message: 'License key must contain only alphanumeric characters after the prefix',
-            details: null,
-        };
-    }
-    if (key.length !== LICENSE_KEY_LENGTH) {
-        return {
-            valid: false,
-            message: `License key must be ${LICENSE_KEY_LENGTH} characters long`,
-            details: null,
-        };
-    }
-    return { valid: true, message: null, details: null };
-};
-const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicenseKey, }) => {
-    const [licenseValidation, setLicenseValidation] = (0, react_1.useState)({ valid: true, message: null, details: null });
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (licenseKey === null || licenseKey === 'free-license') {
-            return setLicenseValidation({
-                valid: true,
-                message: null,
-                details: null,
-            });
-        }
-        const validation = validateLicenseKey(licenseKey);
-        if (!validation.valid) {
-            return setLicenseValidation(validation);
-        }
-        setLicenseValidation({ valid: true, message: null, details: null });
-        setIsLoading(true);
-        (0, WebRenderModalLicenseKeyDetails_1.fetchLicenseKeyDetails)(licenseKey)
-            .then((details) => {
-            setIsLoading(false);
-            if (details.isValid) {
-                setLicenseValidation({ valid: true, message: null, details });
-            }
-            else {
-                setLicenseValidation({
-                    valid: false,
-                    message: 'License key is invalid or has been reset',
-                    details: null,
-                });
-            }
-        })
-            .catch(() => {
-            setIsLoading(false);
-            setLicenseValidation({
-                valid: false,
-                message: 'Failed to fetch license key details',
-                details: null,
-            });
-        });
-    }, [licenseKey]);
-    const onFreeLicenseChange = (0, react_1.useCallback)(() => {
-        setLicenseKey('free-license');
-    }, [setLicenseKey]);
-    const onCompanyLicenseChange = (0, react_1.useCallback)(() => {
-        setLicenseKey(initialPublicLicenseKey !== null && initialPublicLicenseKey !== void 0 ? initialPublicLicenseKey : '');
-    }, [initialPublicLicenseKey, setLicenseKey]);
-    const onLicenseKeyChange = (0, react_1.useCallback)((e) => {
-        setLicenseKey(e.target.value);
-    }, [setLicenseKey]);
-    return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [
-            jsx_runtime_1.jsxs("div", { style: descriptionStyle, children: ["Remotion is free if you are an individual or company with a headcount of 3 or less. See", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }),
-                    "."] }), jsx_runtime_1.jsx("div", { style: exports.row, children: jsx_runtime_1.jsxs("div", { style: justifyCenter, children: [
-                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseKey === 'free-license', onChange: onFreeLicenseChange, name: "free-license", rounded: true }), jsx_runtime_1.jsxs("div", { style: checkboxLabel, onClick: onFreeLicenseChange, children: ["I am eligible for the Free License, ", "don't", " print a warning"] })
-                    ] }) }), licenseKey === 'free-license' ? (jsx_runtime_1.jsxs("div", { style: paddedDescriptionStyle, children: ["Enjoy Remotion! Add the following to", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: "remotion.config.ts" }),
-                    " to persist this setting:",
-                    jsx_runtime_1.jsx("div", { style: codeLine, children: "Config.setPublicLicenseKey('free-license');" })
-                ] })) : null, jsx_runtime_1.jsx("div", { style: exports.row, children: jsx_runtime_1.jsxs("div", { style: justifyCenter, children: [
-                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseKey !== 'free-license' && licenseKey !== null, onChange: onCompanyLicenseChange, name: "company-license", rounded: true }), jsx_runtime_1.jsx("div", { style: checkboxLabel, onClick: onCompanyLicenseChange, children: "I have a Company License" })
-                    ] }) }), licenseKey !== 'free-license' && licenseKey !== null ? (jsx_runtime_1.jsxs("div", { style: paddedDescriptionStyle, children: ["Add your public license key from", ' ', jsx_runtime_1.jsx("a", { href: "https://remotion.pro/dashboard", target: "_blank", style: descriptionLink, children: "remotion.pro" }), ' ', "below.",
-                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: licenseKey, onChange: onLicenseKeyChange, placeholder: "remotion.pro public license key (starts with rm_pub_)", status: licenseValidation.valid || licenseKey.length === 0
-                            ? 'ok'
-                            : 'error', rightAlign: false, style: inputStyle, autoFocus: true }), licenseValidation.message ? (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, { message: licenseValidation.message, align: "flex-start", type: "error" })
-                        ] })) : null, licenseValidation.valid && licenseKey.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }),
-                            "Add the following to", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: "remotion.config.ts" }),
-                            " to persist this setting:",
-                            jsx_runtime_1.jsx("div", { style: codeLineSmall, children: "Config.setPublicLicenseKey('" + licenseKey + "');" })
-                        ] })) : null, isLoading && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }),
-                            "Loading license key details..."] })), licenseValidation.details && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(WebRenderModalLicenseKeyDetails_1.WebRenderModalLicenseKeyDetails, { details: licenseValidation.details })
-                        ] }))] })) : null, licenseKey === null ? (jsx_runtime_1.jsxs("div", { style: descriptionStyle, children: ["If you are not eligible for the free license, you need to obtain a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, target: "_blank", href: "https://remotion.pro/license", children: "Company License" }),
-                    "."] })) : null] }));
-};
-exports.WebRenderModalLicense = WebRenderModalLicense;

package/dist/components/RenderModal/WebRenderModalLicenseKeyDetails.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export type LicenseKeyDetails = {
-    readonly isValid: boolean;
-    readonly hasActiveSubscription: boolean;
-    readonly projectName: string;
-    readonly projectSlug: string;
-};
-type WebRenderModalLicenseKeyDetailsProps = {
-    readonly details: LicenseKeyDetails;
-};
-export declare const fetchLicenseKeyDetails: (licenseKey: string) => Promise<LicenseKeyDetails>;
-export declare const WebRenderModalLicenseKeyDetails: React.FC<WebRenderModalLicenseKeyDetailsProps>;
-export {};

package/dist/components/RenderModal/WebRenderModalLicenseKeyDetails.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebRenderModalLicenseKeyDetails = exports.fetchLicenseKeyDetails = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../../helpers/colors");
-const check_circle_filled_1 = require("../../icons/check-circle-filled");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const textStyle = {
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 14,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-    display: 'flex',
-    alignItems: 'center',
-};
-const linkStyle = {
-    fontSize: 14,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-    cursor: 'pointer',
-};
-const bulletStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-};
-const icon = {
-    width: 14,
-    height: 14,
-    flexShrink: 0,
-};
-const PRO_HOST = 'https://remotion.pro';
-const fetchLicenseKeyDetails = async (licenseKey) => {
-    const response = await fetch(`${PRO_HOST}/api/validate-license-key`, {
-        method: 'POST',
-        body: JSON.stringify({
-            licenseKey,
-        }),
-        headers: {
-            'Content-Type': 'application/json',
-        },
-    });
-    return response.json();
-};
-exports.fetchLicenseKeyDetails = fetchLicenseKeyDetails;
-const WebRenderModalLicenseKeyDetails = ({ details }) => {
-    return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: bulletStyle, children: [
-                    jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), jsx_runtime_1.jsxs("div", { style: textStyle, children: ["Belongs to\u00A0",
-                            jsx_runtime_1.jsx("a", { href: `${PRO_HOST}/projects/${details.projectSlug}`, target: "_blank", style: linkStyle, children: details.projectName }),
-                            "\u00A0-\u00A0",
-                            jsx_runtime_1.jsx("a", { href: `${PRO_HOST}/projects/${details.projectSlug}/usage#client-renders-usage`, target: "_blank", style: linkStyle, children: "View usage" })
-                        ] })
-                ] }), details.hasActiveSubscription ? (jsx_runtime_1.jsxs("div", { style: bulletStyle, children: [
-                    jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), jsx_runtime_1.jsx("div", { style: textStyle, children: "Active Company License" })
-                ] })) : (jsx_runtime_1.jsxs("div", { style: bulletStyle, children: [
-                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { type: "warning", style: { ...icon, fill: colors_1.WARNING_COLOR } }), jsx_runtime_1.jsx("div", { style: textStyle, children: "No active Company License" })
-                ] }))] }));
-};
-exports.WebRenderModalLicenseKeyDetails = WebRenderModalLicenseKeyDetails;