@remotion/studio 4.0.497 → 4.0.499

package/dist/components/ConfigureLicenseModal.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigureLicenseModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const modals_1 = require("../state/modals");
+const call_api_1 = require("./call-api");
+const Checkbox_1 = require("./Checkbox");
+const layout_1 = require("./layout");
+const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const RemInput_1 = require("./NewComposition/RemInput");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const content = {
+    padding: 16,
+    width: 540,
+    maxWidth: 'calc(100vw - 40px)',
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+    marginTop: 10,
+};
+const descriptionLink = {
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '21px',
+};
+const checkboxRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    cursor: 'pointer',
+    marginTop: 5,
+    marginBottom: 5,
+};
+const checkboxLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '20px',
+    cursor: 'pointer',
+    userSelect: 'none',
+};
+const inputLabel = {
+    color: colors_1.LIGHT_TEXT,
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '20px',
+    marginBottom: 6,
+    marginTop: 10,
+};
+const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const initialLicenseType = initialPublicLicenseKey === 'free-license'
+        ? 'free'
+        : initialPublicLicenseKey === null
+            ? null
+            : 'company';
+    const [licenseType, setLicenseType] = (0, react_1.useState)(initialLicenseType);
+    const [companyLicenseKey, setCompanyLicenseKey] = (0, react_1.useState)(initialLicenseType === 'company' ? (initialPublicLicenseKey !== null && initialPublicLicenseKey !== void 0 ? initialPublicLicenseKey : '') : '');
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isValidatingLicenseKey, setIsValidatingLicenseKey] = (0, react_1.useState)(false);
+    const [remoteValidationMessage, setRemoteValidationMessage] = (0, react_1.useState)(null);
+    const [licenseKeyDetails, setLicenseKeyDetails] = (0, react_1.useState)(null);
+    const dismiss = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const chooseFreeLicense = (0, react_1.useCallback)(() => {
+        setLicenseType('free');
+        setError(null);
+    }, []);
+    const chooseCompanyLicense = (0, react_1.useCallback)(() => {
+        setLicenseType('company');
+        setError(null);
+    }, []);
+    const publicLicenseKey = (0, react_1.useMemo)(() => {
+        if (licenseType === 'free') {
+            return 'free-license';
+        }
+        if (licenseType === 'company') {
+            return companyLicenseKey.trim();
+        }
+        return '';
+    }, [companyLicenseKey, licenseType]);
+    const localLicenseKeyValidation = (0, react_1.useMemo)(() => (0, LicenseKeyValidation_1.validateLicenseKey)(companyLicenseKey.trim()), [companyLicenseKey]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        setLicenseKeyDetails(null);
+        setRemoteValidationMessage(null);
+        if (licenseType !== 'company' || !localLicenseKeyValidation.valid) {
+            setIsValidatingLicenseKey(false);
+            return () => {
+                cancelled = true;
+            };
+        }
+        setIsValidatingLicenseKey(true);
+        (0, LicenseKeyValidation_1.fetchLicenseKeyDetails)(companyLicenseKey.trim())
+            .then((details) => {
+            if (cancelled) {
+                return;
+            }
+            setIsValidatingLicenseKey(false);
+            if (details.isValid) {
+                setLicenseKeyDetails(details);
+            }
+            else {
+                setRemoteValidationMessage('License key is invalid or has been reset');
+            }
+        })
+            .catch(() => {
+            if (cancelled) {
+                return;
+            }
+            setIsValidatingLicenseKey(false);
+            setRemoteValidationMessage('Failed to fetch license key details');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [companyLicenseKey, licenseType, localLicenseKeyValidation.valid]);
+    const companyLicenseKeyIsValid = localLicenseKeyValidation.valid &&
+        (licenseKeyDetails === null || licenseKeyDetails === void 0 ? void 0 : licenseKeyDetails.isValid) === true &&
+        !isValidatingLicenseKey;
+    const submit = (0, react_1.useCallback)(async () => {
+        if (publicLicenseKey.length === 0) {
+            setError(licenseType === null
+                ? 'Select a license type.'
+                : 'Enter your public license key.');
+            return;
+        }
+        if (licenseType === 'company' && !companyLicenseKeyIsValid) {
+            return;
+        }
+        setIsSubmitting(true);
+        setError(null);
+        try {
+            const response = await (0, call_api_1.callApi)('/api/update-public-license', {
+                publicLicenseKey,
+            });
+            if (!response.success) {
+                setError(response.reason);
+                setIsSubmitting(false);
+                return;
+            }
+            dismiss();
+        }
+        catch (err) {
+            setError(err.message);
+            setIsSubmitting(false);
+        }
+    }, [companyLicenseKeyIsValid, dismiss, licenseType, publicLicenseKey]);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: dismiss, onOutsideClick: dismiss, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Configure License", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsxs("p", { style: description, 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(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: chooseFreeLicense, children: [
+                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: chooseFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
+                        ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: chooseCompanyLicense, children: [
+                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: chooseCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
+                        ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
+                                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
+                                            remoteValidationMessage ||
+                                            (licenseKeyDetails !== null &&
+                                                !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
+                                            ? 'error'
+                                            : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
+                                            setCompanyLicenseKey(event.target.value);
+                                            setError(null);
+                                        }, placeholder: "rm_pub_...", autoFocus: true })
+                                ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
+                                ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
+                                ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
+                                ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, error ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" })
+                        ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(layout_1.Row, { justify: "flex-end", children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting ||
+                            publicLicenseKey.length === 0 ||
+                            (licenseType === 'company' && !companyLicenseKeyIsValid), autoFocus: licenseType !== 'company', children: isSubmitting ? 'Submitting...' : 'Submit and reload' }) }) })
+        ] }));
+};
+exports.ConfigureLicenseModal = ConfigureLicenseModal;

package/dist/components/Editor.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const BUFFER_STATE_DELAY_IN_MILLISECONDS: number;
 export declare const Editor: React.FC<{
     readonly Root: React.FC;
     readonly readOnlyStudio: boolean;

package/dist/components/Editor.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
+exports.Editor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -63,7 +63,6 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
-exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)();
 const Editor = ({ Root, readOnlyStudio }) => {
     const [drawElement, setDrawElement] = (0, react_1.useState)(null);
     const size = player_1.PlayerInternals.useElementSize(drawElement, {
@@ -98,7 +97,7 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const editor = (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
                             jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
-                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
+                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: (0, studio_runtime_config_1.getStudioBufferStateDelayInMilliseconds)(), onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }) })
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));

package/dist/components/EditorContent.js

@@ -35,7 +35,7 @@ const StudioClearSelectionArea = ({ children }) => {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
-    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/EditorRuler/Ruler.js

@@ -6,8 +6,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
+const ruler_canvas_size_1 = require("../../helpers/ruler-canvas-size");
 const editor_guides_1 = require("../../state/editor-guides");
-const editor_rulers_1 = require("../../state/editor-rulers");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -30,8 +30,10 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         hoveredGuideId,
         draggingGuideId,
     }), [draggingGuideId, guidesList, hoveredGuideId, selectedItems]);
-    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : size.width - editor_rulers_1.RULER_WIDTH;
-    const rulerHeight = isVerticalRuler ? size.height - editor_rulers_1.RULER_WIDTH : editor_rulers_1.RULER_WIDTH;
+    const { width: rulerWidth, height: rulerHeight } = (0, ruler_canvas_size_1.getRulerCanvasSize)({
+        orientation,
+        size,
+    });
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,

package/dist/components/ForceSpecificCursor.js

@@ -37,17 +37,29 @@ exports.ForceSpecificCursor = exports.stopForcingSpecificCursor = exports.forceS
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const ref = react_1.default.createRef();
+const removeAutomaticCleanupListeners = () => {
+    window.removeEventListener('pointerup', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('blur', exports.stopForcingSpecificCursor, true);
+};
 const forceSpecificCursor = (cursor) => {
     if (!ref.current) {
         throw new Error('ForceSpecificCursor is not mounted');
     }
     ref.current.style.cursor = cursor;
     ref.current.style.pointerEvents = 'auto';
+    // The component which initiated the drag may unmount before it gets a chance
+    // to handle the end of the gesture. Keep this fallback independent from the
+    // initiator so the cursor overlay can never remain stuck.
+    window.addEventListener('pointerup', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('blur', exports.stopForcingSpecificCursor, true);
 };
 exports.forceSpecificCursor = forceSpecificCursor;
 const stopForcingSpecificCursor = () => {
+    removeAutomaticCleanupListeners();
     if (!ref.current) {
-        throw new Error('ForceSpecificCursor is not mounted');
+        return;
     }
     ref.current.style.cursor = '';
     ref.current.style.pointerEvents = 'none';

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -94,7 +94,8 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setD
 };
 const CompositionVisualControlsSection = () => {
     const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
-    const hasVisualControls = interactivity_enabled_1.studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
+    const hasVisualControls = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+        Object.keys(visualControlHandles).length > 0;
     if (!hasVisualControls) {
         return null;
     }

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -44,7 +44,7 @@ const SplitSequenceAction = ({ selection, track }) => {
         splitFrame: timelinePosition,
         propStatuses: sequencePropStatuses,
     }), [selection, sequencePropStatuses, timelinePosition, track.sequence]);
-    const canSplit = interactivity_enabled_1.studioInteractivityEnabled &&
+    const canSplit = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         sequencePropStatuses !== undefined &&
         eligibility.canSplit;
     const onSplit = (0, react_1.useCallback)(() => {
@@ -56,7 +56,7 @@ const SplitSequenceAction = ({ selection, track }) => {
             splitFrame: timelinePosition,
         }).catch(() => undefined);
     }, [canSplit, eligibility, timelinePosition]);
-    const disabledReason = !interactivity_enabled_1.studioInteractivityEnabled
+    const disabledReason = !(0, interactivity_enabled_1.isStudioInteractivityEnabled)()
         ? 'Studio is read-only'
         : sequencePropStatuses === undefined
             ? 'Waiting for sequence prop status'
@@ -73,7 +73,7 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const propStatusesForOverride = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
     const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewServerState.type === 'connected' && interactivity_enabled_1.studioInteractivityEnabled
+        clientId: previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
             ? previewServerState.clientId
             : null,
         nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
@@ -84,7 +84,7 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
         timelinePosition,
         validatedSource,
     });
-    const sourceActionsDisabled = previewServerState.type !== 'connected' || !interactivity_enabled_1.studioInteractivityEnabled;
+    const sourceActionsDisabled = previewServerState.type !== 'connected' || !(0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const onDuplicate = (0, react_1.useCallback)(() => {
         if (sourceActionsDisabled) {
             return;

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -18,7 +18,7 @@ const useCompositionActions = () => {
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;

package/dist/components/LicenseKeyValidation.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type LicenseKeyDetails = {
+    readonly isValid: boolean;
+    readonly hasActiveSubscription: boolean | null;
+    readonly projectName: string;
+    readonly projectSlug: string;
+};
+export declare const hasActiveCompanyLicense: (details: LicenseKeyDetails) => boolean;
+export type LicenseKeyValidationResult = {
+    readonly valid: boolean;
+    readonly message: string | null;
+};
+export declare const validateLicenseKey: (key: string) => LicenseKeyValidationResult;
+export declare const fetchLicenseKeyDetails: (licenseKey: string) => Promise<LicenseKeyDetails>;
+export declare const LicenseKeyDetailsDisplay: React.FC<{
+    readonly details: LicenseKeyDetails;
+}>;

package/dist/components/LicenseKeyValidation.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseKeyDetailsDisplay = exports.fetchLicenseKeyDetails = exports.validateLicenseKey = exports.hasActiveCompanyLicense = 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 common_1 = require("./InspectorPanel/common");
+const LICENSE_KEY_LENGTH = 55;
+const LICENSE_KEY_PREFIX = 'rm_pub_';
+const PRO_HOST = 'https://www.remotion.pro';
+const hasActiveCompanyLicense = (details) => {
+    return details.hasActiveSubscription === true;
+};
+exports.hasActiveCompanyLicense = hasActiveCompanyLicense;
+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 };
+};
+exports.validateLicenseKey = validateLicenseKey;
+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 actionStyle = {
+    cursor: 'pointer',
+    marginLeft: 0,
+    marginRight: 0,
+    width: '100%',
+};
+const actionContent = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    gap: 8,
+    lineHeight: '18px',
+    minWidth: 0,
+    width: '100%',
+};
+const actionText = {
+    color: 'inherit',
+    flex: 1,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const actionLabel = {
+    color: 'inherit',
+    flexShrink: 0,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+};
+const inactiveLicenseText = {
+    ...actionText,
+    color: colors_1.FAIL_COLOR,
+};
+const iconStyle = {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+};
+const ErrorIcon = () => {
+    return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
+};
+const LicenseKeyDetailsDisplay = ({ details }) => {
+    const projectUrl = `${PRO_HOST}/projects/${details.projectSlug}`;
+    const usageUrl = `${projectUrl}/usage#client-renders-usage`;
+    const hasActiveLicense = (0, exports.hasActiveCompanyLicense)(details);
+    return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => window.open(usageUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })), style: actionStyle, title: "View license usage", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
+                        jsx_runtime_1.jsxs("span", { style: actionText, children: ["Belongs to ", details.projectName] }), jsx_runtime_1.jsx("span", { style: actionLabel, children: "View usage" })
+                    ] }) }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => window.open(projectUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => hasActiveLicense ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })) : (jsx_runtime_1.jsx(ErrorIcon, {})), style: actionStyle, title: "Manage Company License", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
+                        jsx_runtime_1.jsx("span", { style: hasActiveLicense ? actionText : inactiveLicenseText, children: hasActiveLicense
+                                ? 'Active Company License'
+                                : 'No active Company License' }), jsx_runtime_1.jsx("span", { style: actionLabel, children: "Manage" })
+                    ] }) })] }));
+};
+exports.LicenseKeyDetailsDisplay = LicenseKeyDetailsDisplay;

package/dist/components/Modals.js

@@ -10,6 +10,7 @@ const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
+const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
@@ -33,7 +34,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/InputDragger.d.ts

@@ -1,7 +1,33 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 import type { RemInputStatus } from './RemInput';
+type InputDraggerValidationResult = {
+    readonly valid: true;
+    readonly value: number;
+} | {
+    readonly valid: false;
+    readonly message: string;
+};
 export declare const inputDraggerContainerStyle: React.CSSProperties;
+export declare const parseInputDraggerNumber: (value: string) => number | null;
+export declare const isInputDraggerValueAlignedToStep: ({ min, step, value, }: {
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: number;
+}) => boolean;
+export declare const validateInputDraggerValue: ({ max, min, step, value, }: {
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: string;
+}) => InputDraggerValidationResult;
+export declare const deriveInputDraggerArrowValue: ({ direction, max, min, step, value, }: {
+    readonly direction: -1 | 1;
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly step: string | number | undefined;
+    readonly value: number;
+}) => number;
 export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
     readonly min: string | number | undefined;
     readonly snapToStep: boolean;
@@ -33,3 +59,4 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+export {};