@remotion/studio 4.0.496 → 4.0.498

package/dist/components/AudioWaveform.js

@@ -31,16 +31,6 @@ const getContainerStyle = (height) => {
         height,
     };
 };
-const errorMessage = {
-    fontSize: 13,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 12,
-    paddingRight: 12,
-    alignSelf: 'flex-start',
-    maxWidth: 450,
-    opacity: 0.75,
-};
 const getWaveformErrorMessage = () => {
     return new Error('No waveform available. The audio could not be decoded or may not support CORS.');
 };
@@ -302,7 +292,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         context.stroke();
     }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
     if (error) {
-        return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. The audio could not be decoded or may not support CORS." }) }));
+        return null;
     }
     if (!canUseWorkerPath && !peaks) {
         return null;

package/dist/components/Canvas.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
@@ -18,7 +17,6 @@ const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
-const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -27,11 +25,12 @@ const editor_guides_1 = require("../state/editor-guides");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
-const element_drag_and_drop_1 = require("./element-drag-and-drop");
+const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -101,97 +100,6 @@ const calculateCanvasScale = ({ addFitPadding, canvasSize, compositionHeight, co
         ? (0, studio_fit_padding_1.calculateStudioScale)(options)
         : remotion_1.Internals.calculateScale(options);
 };
-const isFileDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
-};
-const isAssetDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
-};
-const isComponentDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
-};
-const isCompositionDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-};
-const isElementDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
-};
-const isSfxDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.SFX_DRAG_MIME_TYPE);
-};
-const isRemoteAssetDragEvent = (event) => {
-    return (!isFileDragEvent(event) &&
-        !isAssetDragEvent(event) &&
-        !isCompositionDragEvent(event) &&
-        !isComponentDragEvent(event) &&
-        !isElementDragEvent(event) &&
-        !isSfxDragEvent(event) &&
-        (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
-};
-const getAssetDragPath = (event) => {
-    var _a, _b;
-    var _c;
-    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.ASSET_DRAG_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
-};
-const getCompositionDragData = (event) => {
-    var _a;
-    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    return (0, studio_shared_1.parseCompositionDragData)(value);
-};
-const getComponentDragData = (event) => {
-    var _a;
-    for (const type of [
-        studio_shared_1.COMPONENT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseComponentDragData)(value);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
-};
-const getSfxDragUrl = (event) => {
-    const { dataTransfer } = event;
-    if (!dataTransfer) {
-        return null;
-    }
-    for (const type of [studio_shared_1.SFX_DRAG_MIME_TYPE, 'application/json', 'text/plain']) {
-        const value = dataTransfer.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseSfxDragData)(value);
-        if (parsed) {
-            return parsed.sfx.url;
-        }
-    }
-    return null;
-};
 const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, previewSize, size, }) => {
     if (contentDimensions === null || contentDimensions === 'none') {
         return null;
@@ -766,6 +674,7 @@ const Canvas = ({ canvasContent, size }) => {
                     compositionFile: activeElementInstallRequest.compositionFile,
                     compositionId: activeElementInstallRequest.compositionId,
                     dropPosition: null,
+                    from: null,
                 });
             }
         };
@@ -787,14 +696,7 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
-        if ((!isFileDragEvent(event) &&
-            !isAssetDragEvent(event) &&
-            !isCompositionDragEvent(event) &&
-            !isComponentDragEvent(event) &&
-            !isElementDragEvent(event) &&
-            !isSfxDragEvent(event) &&
-            !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+        if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
         if (!canDropAssets && !cannotAddSequence) {
@@ -806,16 +708,7 @@ const Canvas = ({ canvasContent, size }) => {
         }
     }, [canDropAssets, cannotAddSequence]);
     const onDrop = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        var _b;
-        if ((!isFileDragEvent(event) &&
-            !isAssetDragEvent(event) &&
-            !isCompositionDragEvent(event) &&
-            !isComponentDragEvent(event) &&
-            !isElementDragEvent(event) &&
-            !isSfxDragEvent(event) &&
-            !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+        if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
         if (cannotAddSequence) {
@@ -826,7 +719,8 @@ const Canvas = ({ canvasContent, size }) => {
         }
         if (!canDropAssets ||
             compositionFile === null ||
-            currentCompositionId === null) {
+            currentCompositionId === null ||
+            config === null) {
             return;
         }
         if (event.dataTransfer &&
@@ -846,96 +740,16 @@ const Canvas = ({ canvasContent, size }) => {
                 previewSize,
                 size,
             });
-            if (isFileDragEvent(event)) {
-                const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
-                if (files.length === 0) {
-                    return;
-                }
-                const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
-                    ? await chooseSvgImportMode()
-                    : 'image';
-                if (svgImportMode === null) {
-                    return;
-                }
-                await (0, import_assets_1.importAssets)({
-                    files,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                    svgImportMode,
-                });
-            }
-            else if (isAssetDragEvent(event)) {
-                const assetPath = getAssetDragPath(event);
-                if (assetPath === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertExistingAssets)({
-                    assetPaths: [assetPath],
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
-            else if (isSfxDragEvent(event)) {
-                const url = getSfxDragUrl(event);
-                if (url === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertRemoteAudio)({
-                    url,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                });
-            }
-            else if (isCompositionDragEvent(event)) {
-                const compositionDragData = getCompositionDragData(event);
-                if (compositionDragData === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertComposition)({
-                    composition: compositionDragData,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
-            else {
-                const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
-                if (elementDragData !== null) {
-                    await (0, import_assets_1.insertElement)({
-                        element: elementDragData.element,
-                        compositionFile,
-                        compositionId: currentCompositionId,
-                        dropPosition,
-                    });
-                    return;
-                }
-                const componentDragData = getComponentDragData(event);
-                if (componentDragData !== null) {
-                    await (0, import_assets_1.insertComponent)({
-                        component: componentDragData.component,
-                        compositionFile,
-                        compositionId: currentCompositionId,
-                        dropPosition,
-                    });
-                    return;
-                }
-                const url = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
-                if (url === null) {
-                    return;
-                }
-                await (0, import_assets_1.importRemoteAsset)({
-                    url,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
+            await (0, handle_drop_1.handleDrop)({
+                chooseSvgImportMode,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                dropPosition,
+                event,
+                fps: config.fps,
+                from: null,
+            });
         }
         finally {
             setIsAddingAsset(false);
@@ -946,6 +760,7 @@ const Canvas = ({ canvasContent, size }) => {
         cannotAddSequence,
         chooseSvgImportMode,
         compositionFile,
+        config,
         contentDimensions,
         currentCompositionId,
         previewSize,
@@ -956,6 +771,7 @@ const Canvas = ({ canvasContent, size }) => {
         if (!canDropAssets ||
             compositionFile === null ||
             currentCompositionId === null ||
+            config === null ||
             event.clipboardData === null ||
             activeElement instanceof HTMLInputElement ||
             activeElement instanceof HTMLTextAreaElement ||
@@ -1023,10 +839,12 @@ const Canvas = ({ canvasContent, size }) => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: config.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                 dropPosition,
+                from: null,
                 svgImportMode,
             });
         }
@@ -1037,6 +855,7 @@ const Canvas = ({ canvasContent, size }) => {
         canDropAssets,
         chooseSvgImportMode,
         compositionFile,
+        config,
         contentDimensions,
         currentCompositionId,
     ]);

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

@@ -18,7 +18,6 @@ const ContextMenu_1 = require("./ContextMenu");
 const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -123,22 +122,15 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
-            const compositionMenuItems = (0, composition_menu_items_1.getCompositionMenuItems)({
+            return (0, composition_menu_items_1.getCompositionContextMenuItems)({
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
+                includeCompositionManagementItems: true,
                 resolvedLocation,
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
             });
-            return [
-                (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/${item.composition.id}`),
-                {
-                    type: 'divider',
-                    id: 'open-in-new-window-divider',
-                },
-                ...compositionMenuItems,
-            ];
         }
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,

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

@@ -136,6 +136,8 @@ const AlignmentControls = ({ track }) => {
         const label = undoLabels[direction];
         if (!propStatus || propStatus.status === 'static') {
             (0, save_sequence_prop_1.saveSequenceProps)({
+                addedKeyframes: null,
+                movedKeyframes: null,
                 changes: [
                     {
                         fileName: nodePath.absolutePath,

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;
     }