@remotion/studio 4.0.403 → 4.0.404

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -8,6 +8,7 @@ const Checkbox_1 = require("../Checkbox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const layout_1 = require("../layout");
+const WebRenderModalLicenseKeyDetails_1 = require("./WebRenderModalLicenseKeyDetails");
 exports.row = {
     display: 'flex',
     flexDirection: 'row',
@@ -84,12 +85,13 @@ const LICENSE_KEY_LENGTH = 55;
 const LICENSE_KEY_PREFIX = 'rm_pub_';
 const validateLicenseKey = (key) => {
     if (key.length === 0) {
-        return { valid: false, message: null };
+        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);
@@ -97,17 +99,58 @@ const validateLicenseKey = (key) => {
         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 };
+    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]);
@@ -117,14 +160,8 @@ const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicense
     const onLicenseKeyChange = (0, react_1.useCallback)((e) => {
         setLicenseKey(e.target.value);
     }, [setLicenseKey]);
-    const licenseValidation = (0, react_1.useMemo)(() => {
-        if (licenseKey === null || licenseKey === 'free-license') {
-            return { valid: true, message: null };
-        }
-        return validateLicenseKey(licenseKey);
-    }, [licenseKey]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, 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", ' ', (0, jsx_runtime_1.jsx)("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }), "."] }), (0, jsx_runtime_1.jsx)("div", { style: exports.row, children: (0, jsx_runtime_1.jsxs)("div", { style: justifyCenter, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: licenseKey === 'free-license', onChange: onFreeLicenseChange, name: "free-license", rounded: true }), (0, 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' ? ((0, jsx_runtime_1.jsxs)("div", { style: paddedDescriptionStyle, children: ["Enjoy Remotion! Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLine, children: "Config.setPublicLicenseKey('free-license');" })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: exports.row, children: (0, jsx_runtime_1.jsxs)("div", { style: justifyCenter, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: licenseKey !== 'free-license' && licenseKey !== null, onChange: onCompanyLicenseChange, name: "company-license", rounded: true }), (0, jsx_runtime_1.jsx)("div", { style: checkboxLabel, onClick: onCompanyLicenseChange, children: "I have a Company License" })] }) }), licenseKey !== 'free-license' && licenseKey !== null ? ((0, jsx_runtime_1.jsxs)("div", { style: paddedDescriptionStyle, children: ["Add your public license from", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.pro/dashboard", target: "_blank", style: descriptionLink, children: "remotion.pro" }), ' ', "key below.", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: licenseValidation.message, align: "flex-start", type: "error" })] })) : null, licenseValidation.valid && licenseKey.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLineSmall, children: "Config.setPublicLicenseKey('" + licenseKey + "');" })] })) : null] })) : null, licenseKey === null ? ((0, jsx_runtime_1.jsxs)("div", { style: descriptionStyle, children: ["If you are not eligible for the free license, you need to obtain a", ' ', (0, jsx_runtime_1.jsx)("a", { style: descriptionLink, target: "_blank", href: "https://remotion.pro/license", children: "Company License" }), "."] })) : null] }));
+                            : 'error', rightAlign: false, style: inputStyle, autoFocus: true }), licenseValidation.message ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: licenseValidation.message, align: "flex-start", type: "error" })] })) : null, licenseValidation.valid && licenseKey.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Add the following to", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeStyle, children: "remotion.config.ts" }), " to persist this setting:", (0, jsx_runtime_1.jsx)("div", { style: codeLineSmall, children: "Config.setPublicLicenseKey('" + licenseKey + "');" })] })) : null, isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), "Loading license key details..."] })), licenseValidation.details && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(WebRenderModalLicenseKeyDetails_1.WebRenderModalLicenseKeyDetails, { details: licenseValidation.details })] }))] })) : null, licenseKey === null ? ((0, jsx_runtime_1.jsxs)("div", { style: descriptionStyle, children: ["If you are not eligible for the free license, you need to obtain a", ' ', (0, 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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,49 @@
+"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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: ["Belongs to\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${PRO_HOST}/projects/${details.projectSlug}`, target: "_blank", style: linkStyle, children: details.projectName }), "\u00A0-\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${PRO_HOST}/projects/${details.projectSlug}/usage#client-renders-usage`, target: "_blank", style: linkStyle, children: "View usage" })] })] }), details.hasActiveSubscription ? ((0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(check_circle_filled_1.CheckCircleFilled, { style: { ...icon, fill: colors_1.LIGHT_TEXT } }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: "Active Company License" })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: bulletStyle, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { type: "warning", style: { ...icon, fill: colors_1.WARNING_COLOR } }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: "No active Company License" })] }))] }));
+};
+exports.WebRenderModalLicenseKeyDetails = WebRenderModalLicenseKeyDetails;