@remotion/studio 4.0.497 → 4.0.499

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-pk1zwsn1.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-effective-translation.d.ts

@@ -13,7 +13,19 @@ export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionH
     x: number;
     y: number;
 };
-export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+export declare const getUnboundedCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};
+export declare const getCenterPointWhileScrolling: (options: {
     size: Size;
     clientX: number;
     clientY: number;

package/dist/helpers/get-effective-translation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getUnboundedCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
 const remotion_1 = require("remotion");
 const smooth_zoom_1 = require("./smooth-zoom");
 const studio_fit_padding_1 = require("./studio-fit-padding");
@@ -33,16 +33,22 @@ const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, composi
     };
 };
 exports.getEffectiveTranslation = getEffectiveTranslation;
-const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+const getUnboundedCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
     const mouseLeft = clientX - size.left;
     const mouseTop = clientY - size.top;
     const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
     const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
-    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
-    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
     return {
-        centerX: offsetFromVideoLeft,
-        centerY: offsetFromVideoTop,
+        centerX: (mouseLeft - contentLeftPoint) / scale,
+        centerY: (mouseTop - contentTopPoint) / scale,
+    };
+};
+exports.getUnboundedCenterPointWhileScrolling = getUnboundedCenterPointWhileScrolling;
+const getCenterPointWhileScrolling = (options) => {
+    const { centerX, centerY } = (0, exports.getUnboundedCenterPointWhileScrolling)(options);
+    return {
+        centerX: Math.min(options.compositionWidth, Math.max(0, centerX)),
+        centerY: Math.min(options.compositionHeight, Math.max(0, centerY)),
     };
 };
 exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

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/ruler-canvas-size.d.ts

@@ -3,3 +3,10 @@ export declare const applyRulerInsetsToCanvasSize: ({ rulersAreVisible, size, }:
     readonly rulersAreVisible: boolean;
     readonly size: Size;
 }) => Size;
+export declare const getRulerCanvasSize: ({ orientation, size, }: {
+    readonly orientation: "horizontal" | "vertical";
+    readonly size: Size;
+}) => {
+    height: number;
+    width: number;
+};

package/dist/helpers/ruler-canvas-size.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyRulerInsetsToCanvasSize = void 0;
+exports.getRulerCanvasSize = exports.applyRulerInsetsToCanvasSize = void 0;
 const editor_rulers_1 = require("../state/editor-rulers");
 const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
     if (!rulersAreVisible) {
@@ -15,3 +15,16 @@ const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
     };
 };
 exports.applyRulerInsetsToCanvasSize = applyRulerInsetsToCanvasSize;
+const getRulerCanvasSize = ({ orientation, size, }) => {
+    if (orientation === 'vertical') {
+        return {
+            height: size.height,
+            width: editor_rulers_1.RULER_WIDTH,
+        };
+    }
+    return {
+        height: editor_rulers_1.RULER_WIDTH,
+        width: size.width,
+    };
+};
+exports.getRulerCanvasSize = getRulerCanvasSize;

package/dist/helpers/use-image-metadata.d.ts

@@ -3,6 +3,7 @@ export type ImageMetadata = {
     readonly width: number;
     readonly height: number;
 };
+export declare const getCachedImageMetadata: (src: string) => ImageMetadata | null;
 export declare const getImageMetadataFromData: (data: Uint8Array<ArrayBufferLike>) => ImageMetadata | null;
 export declare const getImageMetadata: (src: string) => Promise<ImageMetadata | null>;
 export declare const useImageMetadata: (src: string | null) => ImageMetadata | null;

package/dist/helpers/use-image-metadata.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = void 0;
+exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = exports.getCachedImageMetadata = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const cache = new Map();
 const pendingRequests = new Map();
+const getCachedImageMetadata = (src) => {
+    var _a;
+    return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getCachedImageMetadata = getCachedImageMetadata;
 const formatImageType = (fileType) => {
     if (fileType === 'webp') {
         return 'WebP';
@@ -58,11 +63,9 @@ const getImageMetadata = (src) => {
 };
 exports.getImageMetadata = getImageMetadata;
 const useImageMetadata = (src) => {
-    var _a;
-    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedImageMetadata)(src) : null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        const cached = src ? (0, exports.getCachedImageMetadata)(src) : null;
         setImageMetadata(cached);
         if (!src || cached) {
             return;

package/dist/helpers/use-media-metadata.d.ts

@@ -12,5 +12,6 @@ export type MediaMetadata = {
     hasVideoTrack: boolean | null;
     hasAudioTrack: boolean | null;
 };
+export declare const getCachedMediaMetadata: (src: string) => MediaMetadata | null;
 export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
 export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMetadata = exports.getMediaMetadata = void 0;
+exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 const cache = new Map();
 const pendingRequests = new Map();
+const getCachedMediaMetadata = (src) => {
+    var _a;
+    return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getCachedMediaMetadata = getCachedMediaMetadata;
 const safeCall = async (fn) => {
     try {
         return await fn();
@@ -116,11 +121,9 @@ const getMediaMetadata = (src) => {
 };
 exports.getMediaMetadata = getMediaMetadata;
 const useMediaMetadata = (src) => {
-    var _a;
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedMediaMetadata)(src) : null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        const cached = src ? (0, exports.getCachedMediaMetadata)(src) : null;
         setMediaMetadata(cached);
         if (!src || cached) {
             return;

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.499",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,27 +24,28 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
+		"@remotion/drag-and-drop": "4.0.499",
 		"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.499",
+		"@remotion/canvas-capture": "4.0.499",
+		"@remotion/player": "4.0.499",
+		"@remotion/media-utils": "4.0.499",
+		"@remotion/renderer": "4.0.499",
+		"@remotion/web-renderer": "4.0.499",
+		"@remotion/studio-shared": "4.0.499",
+		"@remotion/timeline-utils": "4.0.499",
+		"@remotion/zod-types": "4.0.499",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
-		"zod": "4.3.6"
+		"zod": "4.4.3"
 	},
 	"devDependencies": {
 		"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.499",
 		"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;