@remotion/studio
Version:
APIs for interacting with the Remotion Studio
190 lines (189 loc) • 9.52 kB
JavaScript
"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.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, 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;