@remotion/studio 4.0.396 → 4.0.398

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -0,0 +1,130 @@
+"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 RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const layout_1 = require("../layout");
+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.INPUT_BORDER_COLOR_UNHOVERED,
+    borderRadius: 8,
+    lineHeight: 1.5,
+    marginLeft: 16,
+    marginRight: 16,
+};
+const descriptionLink = {
+    color: '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 };
+    }
+    if (!key.startsWith(LICENSE_KEY_PREFIX)) {
+        return {
+            valid: false,
+            message: `License key must start with "${LICENSE_KEY_PREFIX}"`,
+        };
+    }
+    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',
+        };
+    }
+    if (key.length !== LICENSE_KEY_LENGTH) {
+        return {
+            valid: false,
+            message: `License key must be ${LICENSE_KEY_LENGTH} characters long`,
+        };
+    }
+    return { valid: true, message: null };
+};
+const WebRenderModalLicense = ({ licenseKey, setLicenseKey, initialPublicLicenseKey, }) => {
+    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]);
+    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] }));
+};
+exports.WebRenderModalLicense = WebRenderModalLicense;

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

@@ -0,0 +1 @@
+export declare const WebRendererExperimentalBadge: React.FC;

package/dist/components/RenderModal/WebRendererExperimentalBadge.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebRendererExperimentalBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const text = {
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    color: colors_1.LIGHT_TEXT,
+};
+const icon = {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+    fill: colors_1.WARNING_COLOR,
+    marginRight: 8,
+};
+const link = {
+    color: 'inherit',
+    textDecoration: 'underline',
+    fontSize: 14,
+};
+const WebRendererExperimentalBadge = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: row, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { type: "warning", style: icon }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["The Remotion Web Renderer is experimental.", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/remotion-dev/remotion/issues/5913", target: "_blank", rel: "noopener noreferrer", style: link, children: "Track progress on GitHub" }), ' ', "and discuss in the", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/discord", target: "_blank", rel: "noopener noreferrer", style: link, children: "#web-renderer" }), ' ', "channel on Discord."] })] }));
+};
+exports.WebRendererExperimentalBadge = WebRendererExperimentalBadge;