@remotion/studio 4.0.496 → 4.0.498

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -4,9 +4,15 @@ exports.ConnectedCompositionsSection = exports.useConnectedCompositions = void 0
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const get_connected_compositions_1 = require("../../helpers/get-connected-compositions");
+const noop_1 = require("../../helpers/noop");
+const modals_1 = require("../../state/modals");
+const composition_menu_items_1 = require("../composition-menu-items");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
+const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const common_1 = require("./common");
 const compositionIconStyle = {
     height: 18,
@@ -17,6 +23,9 @@ const compositionListStyle = {
     flexDirection: 'column',
     padding: '6px 0',
 };
+const compositionContextMenuStyle = {
+    width: '100%',
+};
 const useConnectedCompositions = ({ track, }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     return (0, react_1.useMemo)(() => (0, get_connected_compositions_1.getConnectedCompositions)({
@@ -26,7 +35,23 @@ const useConnectedCompositions = ({ track, }) => {
 };
 exports.useConnectedCompositions = useConnectedCompositions;
 const ConnectedCompositionsSection = ({ connectedCompositions }) => {
-    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }, composition.id))) }));
+    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(ConnectedCompositionRow, { composition: composition }, composition.id))) }));
 };
 exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
+const ConnectedCompositionRow = ({ composition }) => {
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);
+    const contextMenuItems = (0, react_1.useMemo)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
+        closeMenu: noop_1.noop,
+        composition,
+        connectionStatus,
+        includeCompositionManagementItems: false,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+        resolvedLocation,
+        setSelectedModal,
+    }), [composition, connectionStatus, resolvedLocation, setSelectedModal]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuItems, onOpen: null, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
+};

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -5,21 +5,35 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const duplicate_1 = require("../../icons/duplicate");
 const scissors_1 = require("../../icons/scissors");
+const snowflake_1 = require("../../icons/snowflake");
+const trash_1 = require("../../icons/trash");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const delete_selected_timeline_item_1 = require("../Timeline/delete-selected-timeline-item");
+const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
+const use_sequence_freeze_frame_menu_item_1 = require("../Timeline/use-sequence-freeze-frame-menu-item");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
-const splitIconStyle = {
+const actionIconStyle = {
+    display: 'block',
     height: 16,
     width: 16,
 };
+const largeActionIconStyle = {
+    ...actionIconStyle,
+    height: 20,
+    width: 20,
+};
 const SplitSequenceAction = ({ selection, track }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -30,19 +44,60 @@ const SplitSequenceAction = ({ selection, track }) => {
         splitFrame: timelinePosition,
         propStatuses: sequencePropStatuses,
     }), [selection, sequencePropStatuses, timelinePosition, track.sequence]);
+    const canSplit = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+        sequencePropStatuses !== undefined &&
+        eligibility.canSplit;
     const onSplit = (0, react_1.useCallback)(() => {
-        if (!eligibility.canSplit) {
+        if (!canSplit || !eligibility.canSplit) {
             return;
         }
         (0, split_selected_timeline_item_1.splitTimelineSequenceFromSource)({
             nodePathInfo: eligibility.nodePathInfo,
             splitFrame: timelinePosition,
         }).catch(() => undefined);
-    }, [eligibility, timelinePosition]);
-    if (!eligibility.canSplit) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: onSplit, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: splitIconStyle, color: color })), children: "Split clip" }) }));
+    }, [canSplit, eligibility, timelinePosition]);
+    const disabledReason = !(0, interactivity_enabled_1.isStudioInteractivityEnabled)()
+        ? 'Studio is read-only'
+        : sequencePropStatuses === undefined
+            ? 'Waiting for sequence prop status'
+            : eligibility.canSplit
+                ? undefined
+                : eligibility.reason;
+    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
+};
+const SequenceSourceActions = ({ selection, track, validatedSource }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    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' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
+            ? previewServerState.clientId
+            : null,
+        nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
+        propStatusesForOverride,
+        sequence: track.sequence,
+        sequenceFrameOffset: track.sequenceFrameOffset,
+        setPropStatuses,
+        timelinePosition,
+        validatedSource,
+    });
+    const sourceActionsDisabled = previewServerState.type !== 'connected' || !(0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const onDuplicate = (0, react_1.useCallback)(() => {
+        if (sourceActionsDisabled) {
+            return;
+        }
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
+    const onDelete = (0, react_1.useCallback)(() => {
+        if (sourceActionsDisabled) {
+            return;
+        }
+        (0, delete_selected_timeline_item_1.deleteSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
 };
 const SequenceExpandedInspector = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -88,7 +143,9 @@ const SequenceExpandedInspector = ({ track }) => {
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
             jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track })
+                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
+                    jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
+                ] })
         ] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {

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;
@@ -57,6 +57,7 @@ const useCompositionActions = () => {
             const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
                 compositionFile,
                 compositionId: currentCompositionId,
+                from: null,
                 element: {
                     type: 'solid',
                     width: videoConfig.width,
@@ -80,7 +81,8 @@ const useCompositionActions = () => {
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
-            compositionFile === null) {
+            compositionFile === null ||
+            videoConfig === null) {
             return;
         }
         const files = await (0, import_assets_1.pickFilesToImport)();
@@ -91,17 +93,19 @@ const useCompositionActions = () => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: videoConfig.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: null,
                 dropPosition: null,
+                from: null,
                 svgImportMode: 'image',
             });
         }
         finally {
             setIsAddingAsset(false);
         }
-    }, [canInsertAsset, compositionFile, currentCompositionId]);
+    }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
     return {
         canInsertAsset,
         canInsertSolid,

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/CodemodFooter.d.ts

@@ -8,7 +8,7 @@ export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
     readonly stack: string | null;
-    readonly loadingNotification: React.ReactNode;
+    readonly loadingNotification: React.ReactNode | null;
     readonly successNotification: React.ReactNode;
     readonly errorNotification: string;
     readonly genericSubmitLabel: string;

package/dist/components/NewComposition/CodemodFooter.js

@@ -34,21 +34,40 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
     const trigger = (0, react_1.useCallback)(() => {
         setSubmitting(true);
         setSelectedModal(null);
-        const notification = (0, NotificationCenter_1.showNotification)(loadingNotification, null);
+        const notification = loadingNotification === null
+            ? null
+            : (0, NotificationCenter_1.showNotification)(loadingNotification, null);
         applyCodemod({
             symbolicatedStack,
             signal: new AbortController().signal,
         })
             .then((result) => {
             if (!result.success) {
-                notification.replaceContent(`${errorNotification}: ${result.reason}`, 2000);
+                const message = `${errorNotification}: ${result.reason}`;
+                if (notification) {
+                    notification.replaceContent(message, 2000);
+                }
+                else {
+                    (0, NotificationCenter_1.showNotification)(message, 2000);
+                }
                 return;
             }
-            notification.replaceContent(successNotification, 2000);
+            if (notification) {
+                notification.replaceContent(successNotification, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(successNotification, 2000);
+            }
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
             .catch((err) => {
-            notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
+            const message = `${errorNotification}: ${err.message}`;
+            if (notification) {
+                notification.replaceContent(message, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(message, 2000);
+            }
         });
     }, [
         applyCodemod,

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

@@ -16,6 +16,11 @@ export declare const isInputDraggerValueInRange: ({ max, min, value, }: {
     readonly min: string | number | undefined;
     readonly value: number;
 }) => boolean;
+export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDistance, }: {
+    readonly dragSensitivity: number;
+    readonly step: number;
+    readonly xDistance: number;
+}) => number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
     readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
@@ -26,4 +31,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
+    readonly dragSensitivity?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
+exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -92,7 +92,11 @@ const isInputDraggerValueInRange = ({ max, min, value, }) => {
         (!Number.isFinite(numericMax) || value <= numericMax));
 };
 exports.isInputDraggerValueInRange = isInputDraggerValueInRange;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, ...props }, ref) => {
+const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
+    return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
+};
+exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -195,7 +199,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
                 target.blur();
             }
-            const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
+            const diff = (0, exports.deriveInputDraggerValueDiff)({
+                dragSensitivity,
+                step,
+                xDistance,
+            });
             const newValue = Math.min(max, Math.max(min, dragStartValue + diff));
             const nextValue = snapToStep
                 ? roundToStep(newValue, step)
@@ -229,6 +237,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         onValueChangeEnd,
         snapToStep,
         dragDecimalPlaces,
+        dragSensitivity,
     ]);
     (0, react_1.useEffect)(() => {
         var _a;

package/dist/components/NewComposition/NewComposition.js

@@ -125,7 +125,7 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
                                 signal,
                                 symbolicatedStack,
                             }), fallbackToRootFile: true }) })

package/dist/components/NewComposition/use-rename-static-file.js

@@ -76,7 +76,7 @@ const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
             if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
                 canvasContent.asset === relativePath) {
                 setCanvasContent({ type: 'asset', asset: newRelativePath });
-                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+                (0, url_state_1.replaceUrl)(`/assets/${newRelativePath}`);
             }
             notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
             return true;

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