@remotion/studio 4.0.497 → 4.0.498

package/dist/components/Checkbox.js

@@ -30,7 +30,7 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'defau
     const bullet = (0, react_1.useMemo)(() => ({
         width: bulletSize,
         height: bulletSize,
-        backgroundColor: colors_1.LIGHT_TEXT,
+        backgroundColor: colors_1.WHITE,
         borderRadius: '50%',
     }), [bulletSize]);
     const box = (0, react_1.useMemo)(() => ({

package/dist/components/ConfigureLicenseModal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ConfigureLicenseModal: React.FC<{
+    readonly initialPublicLicenseKey: string | null;
+}>;

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/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/RenderButton.js

@@ -281,7 +281,6 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
             inFrameMark: inFrame,
             outFrameMark: outFrame,
             initialLogLevel: defaults.logLevel,
-            initialLicenseKey: defaults.publicLicenseKey,
             initialStillImageFormat: defaults.stillImageFormat,
             initialScale: defaults.scale,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,

package/dist/components/RenderModal/WebRenderModal.js

@@ -32,7 +32,6 @@ const use_encodable_video_codecs_1 = require("./use-encodable-video-codecs");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
 const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
 const WebRenderModalBasic_1 = require("./WebRenderModalBasic");
-const WebRenderModalLicense_1 = require("./WebRenderModalLicense");
 const WebRenderModalPicture_1 = require("./WebRenderModalPicture");
 const invalidCharacters = ['?', '*', '+', ':', '%'];
 const isValidStillExtension = (extension, stillImageFormat) => {
@@ -80,7 +79,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -89,6 +88,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
     }
+    const renderDefaults = window.remotion_renderDefaults;
+    if (!renderDefaults) {
+        throw new Error('Render defaults are not available');
+    }
+    const { publicLicenseKey } = renderDefaults;
     const { resolved: { result: resolvedComposition }, unresolved: unresolvedComposition, } = context;
     const [isVideo] = (0, react_1.useState)(() => {
         return typeof resolvedComposition.durationInFrames === 'undefined'
@@ -123,7 +127,6 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [transparent, setTransparent] = (0, react_1.useState)(initialTransparent !== null && initialTransparent !== void 0 ? initialTransparent : false);
     const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
     const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
-    const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
     const [pageResponsiveness, setPageResponsiveness] = (0, react_1.useState)(initialPageResponsiveness !== null && initialPageResponsiveness !== void 0 ? initialPageResponsiveness : 'medium');
     const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
     const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
@@ -335,7 +338,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 delayRenderTimeout,
                 mediaCacheSizeInBytes,
                 logLevel,
-                licenseKey,
+                licenseKey: publicLicenseKey,
                 scale,
             }, compositionRef);
         }
@@ -361,7 +364,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 delayRenderTimeout,
                 mediaCacheSizeInBytes,
                 logLevel,
-                licenseKey,
+                licenseKey: publicLicenseKey,
                 scale,
                 pageResponsiveness,
             }, compositionRef);
@@ -388,7 +391,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         delayRenderTimeout,
         mediaCacheSizeInBytes,
         logLevel,
-        licenseKey,
+        publicLicenseKey,
         container,
         effectiveVideoCodec,
         effectiveAudioCodec,
@@ -422,14 +425,17 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
                                     "Audio"] })) : null, jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [
+                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                                    type: 'configure-license',
+                                    initialPublicLicenseKey: publicLicenseKey,
+                                }), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }),
                                     "License"] })
                         ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,
-                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
+                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : null })
                 ] })
         ] }));
 };

package/dist/components/SelectedOutlineOverlay.js

@@ -398,7 +398,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!interactivity_enabled_1.studioInteractivityEnabled || !editorShowOutlines) {
+        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() || !editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);

package/dist/components/Timeline/MaxTimelineTracks.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-export declare const MAX_TIMELINE_TRACKS: number;
 export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 export declare const MaxTimelineTracksReached: React.FC;

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.MAX_TIMELINE_TRACKS = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
     height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -18,6 +17,7 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+    const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
+    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", maxTimelineTracks, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;