@remotion/studio 4.0.496 → 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-0v4n7nkh.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/is-video-with-last-frame-hold.d.ts

@@ -0,0 +1,2 @@
+import type { TSequence } from 'remotion';
+export declare const isVideoWithLastFrameHold: (sequence: TSequence) => boolean;

package/dist/helpers/is-video-with-last-frame-hold.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVideoWithLastFrameHold = void 0;
+const isVideoWithLastFrameHold = (sequence) => {
+    var _a;
+    return (sequence.type === 'video' &&
+        ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === 'dev.remotion.media.Video');
+};
+exports.isVideoWithLastFrameHold = isVideoWithLastFrameHold;

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/url-state.d.ts

@@ -1,5 +1,6 @@
 export declare const getUrlForRoute: (route: string) => string;
 export declare const pushUrl: (url: string) => void;
+export declare const replaceUrl: (url: string) => void;
 export declare const clearUrl: () => void;
 export declare const reloadUrl: () => void;
 export declare const getRoute: () => string;

package/dist/helpers/url-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
+exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
 const getUrlHandlingType = () => {
     if (window.remotion_isReadOnlyStudio) {
         return 'query-string';
@@ -18,6 +18,10 @@ const pushUrl = (url) => {
     window.history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
 };
 exports.pushUrl = pushUrl;
+const replaceUrl = (url) => {
+    window.history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
+};
+exports.replaceUrl = replaceUrl;
 const clearUrl = () => {
     window.location.href = window.location.pathname;
 };

package/dist/helpers/use-max-media-duration.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMaxMediaDuration = void 0;
 const react_1 = require("react");
+const is_video_with_last_frame_hold_1 = require("./is-video-with-last-frame-hold");
 const use_media_metadata_1 = require("./use-media-metadata");
 const cache = new Map();
 const getCacheKey = (src, fps) => JSON.stringify([src, fps]);
@@ -16,7 +17,8 @@ const getSrc = (s) => {
 };
 const useMaxMediaDuration = (s, fps) => {
     var _a;
-    const src = getSrc(s);
+    const holdsLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
+    const src = holdsLastFrame ? null : getSrc(s);
     const cacheKey = src ? getCacheKey(src, fps) : null;
     const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(cacheKey ? ((_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null) : Infinity);
     (0, react_1.useEffect)(() => {
@@ -49,8 +51,8 @@ const useMaxMediaDuration = (s, fps) => {
             cancelled = true;
         };
     }, [cacheKey, fps, src]);
-    if (maxMediaDuration !== null && (s.type === 'audio' || s.type === 'video')) {
-        return maxMediaDuration;
+    if (holdsLastFrame) {
+        return Infinity;
     }
     return maxMediaDuration;
 };

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',
@@ -671,6 +677,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     closeMenu,
                     composition: currentComposition,
                     connectionStatus: type,
+                    includeCompositionManagementItems: true,
+                    includeNewCompositionItem: true,
                     resolvedLocation: resolvedCompositionLocation,
                     setSelectedModal,
                     readOnlyStudio,

package/dist/icons/duplicate.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const DuplicateIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/duplicate.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DuplicateIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const DuplicateIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M352 544L128 544C110.3 544 96 529.7 96 512L96 288C96 270.3 110.3 256 128 256L176 256L176 224L128 224C92.7 224 64 252.7 64 288L64 512C64 547.3 92.7 576 128 576L352 576C387.3 576 416 547.3 416 512L416 464L384 464L384 512C384 529.7 369.7 544 352 544zM288 384C270.3 384 256 369.7 256 352L256 128C256 110.3 270.3 96 288 96L512 96C529.7 96 544 110.3 544 128L544 352C544 369.7 529.7 384 512 384L288 384zM224 352C224 387.3 252.7 416 288 416L512 416C547.3 416 576 387.3 576 352L576 128C576 92.7 547.3 64 512 64L288 64C252.7 64 224 92.7 224 128L224 352z" }) }));
+};
+exports.DuplicateIcon = DuplicateIcon;

package/dist/icons/snowflake.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const SnowflakeIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/snowflake.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnowflakeIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Free v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license/free
+const SnowflakeIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M344.1 56C344.1 42.7 333.4 32 320.1 32C306.8 32 296.1 42.7 296.1 56L296.1 134.1L273.1 111.1C263.7 101.7 248.5 101.7 239.2 111.1C229.9 120.5 229.8 135.7 239.2 145L296.2 202L296.2 278.5L230 240.3L209.1 162.5C205.7 149.7 192.5 142.1 179.7 145.5C166.9 148.9 159.2 162 162.7 174.8L171.1 206.3L103.5 167.3C92 160.6 77.3 164.5 70.7 176C64.1 187.5 68 202.2 79.5 208.8L147.1 247.8L115.6 256.2C102.8 259.6 95.2 272.8 98.6 285.6C102 298.4 115.2 306 128 302.6L205.8 281.7L272 319.9L205.8 358.1L128 337.2C115.2 333.8 102 341.4 98.6 354.2C95.2 367 102.8 380.2 115.6 383.6L147.1 392L79.5 431C68 437.8 64.1 452.5 70.7 464C77.3 475.5 92 479.4 103.5 472.8L171.1 433.8L162.7 465.3C159.3 478.1 166.9 491.3 179.7 494.7C192.5 498.1 205.7 490.5 209.1 477.7L230 399.9L296.2 361.7L296.2 438.2L239.2 495.2C229.8 504.6 229.8 519.8 239.2 529.1C248.6 538.4 263.8 538.5 273.1 529.1L296.1 506.1L296.1 584.2C296.1 597.5 306.8 608.2 320.1 608.2C333.4 608.2 344.1 597.5 344.1 584.2L344.1 506.1L367.1 529.1C376.5 538.5 391.7 538.5 401 529.1C410.3 519.7 410.4 504.5 401 495.2L344 438.2L344 361.7L410.2 399.9L431.1 477.7C434.5 490.5 447.7 498.1 460.5 494.7C473.3 491.3 480.9 478.1 477.5 465.3L469.1 433.8L536.7 472.8C548.2 479.4 562.9 475.5 569.5 464C576.1 452.5 572.2 437.8 560.7 431.2L493.1 392.2L524.6 383.8C537.4 380.4 545 367.2 541.6 354.4C538.2 341.6 525 334 512.2 337.4L434.4 358.3L368.2 320.1L434.4 281.9L512.2 302.8C525 306.2 538.2 298.6 541.6 285.8C545 273 537.4 259.8 524.6 256.4L493.1 248L560.7 209C572.2 202.4 576.1 187.7 569.5 176.2C562.9 164.7 548.2 160.8 536.7 167.4L469.1 206.4L477.5 174.9C480.9 162.1 473.3 148.9 460.5 145.5C447.7 142.1 434.5 149.7 431.1 162.5L410.2 240.3L344 278.5L344 202L401 145C410.4 135.6 410.4 120.4 401 111.1C391.6 101.8 376.4 101.7 367.1 111.1L344.1 134.1L344.1 56z" }) }));
+};
+exports.SnowflakeIcon = SnowflakeIcon;

package/dist/icons/trash.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const TrashIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/trash.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrashIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TrashIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z" }) }));
+};
+exports.TrashIcon = TrashIcon;

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.496",
+	"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.496",
-		"@remotion/canvas-capture": "4.0.496",
-		"@remotion/player": "4.0.496",
-		"@remotion/media-utils": "4.0.496",
-		"@remotion/renderer": "4.0.496",
-		"@remotion/web-renderer": "4.0.496",
-		"@remotion/studio-shared": "4.0.496",
-		"@remotion/timeline-utils": "4.0.496",
-		"@remotion/zod-types": "4.0.496",
+		"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.496",
+		"@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;