@remotion/studio 4.0.518 → 4.0.519

package/dist/components/InspectorSequenceSection.js

@@ -21,6 +21,7 @@ const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
 const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const inspector_section_collapse_1 = require("./InspectorPanel/inspector-section-collapse");
+const styles_1 = require("./InspectorPanel/styles");
 const asset_search_1 = require("./QuickSwitcher/asset-search");
 const border_radius_representation_1 = require("./Timeline/border-radius-representation");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
@@ -51,6 +52,10 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
+const effectsHeaderTitle = {
+    ...styles_1.sectionHeaderTitle,
+    flexShrink: 1,
+};
 const borderRadiusToggleIcon = {
     flexShrink: 0,
     height: 15,
@@ -411,7 +416,6 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         });
     }, [isAdditionalSectionExpanded, nodePathInfo]);
     const captionsExpanded = isAdditionalSectionExpanded('captions');
-    const effectsExpanded = isAdditionalSectionExpanded('effects');
     const visibleControlRows = controlGroups.flatMap((group) => {
         return isControlGroupExpanded(group) ? group.rows : [];
     });
@@ -495,7 +499,8 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             : show3DTransformControls
                 ? 'Hide 3D transform controls'
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
-    const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: () => toggleAdditionalSection('effects') }));
+    const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
@@ -514,7 +519,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectsExpanded && effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

package/dist/components/InspectorSourceLocation.js

@@ -27,9 +27,13 @@ const sourceLocationStyle = {
     textAlign: 'left',
     textDecoration: 'none',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
+const quickActionStyle = {
+    userSelect: 'none',
+};
 const sourceLocationLabelStyle = {
     color: 'inherit',
     display: 'block',
@@ -82,7 +86,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
         return null;
     }
     if (size === 'quick-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), style: quickActionStyle, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
     }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));

package/dist/components/KnownBugs.d.ts

@@ -1,4 +1,4 @@
-import type { Bug } from './UpdateCheck';
+import type { Bug } from './UpdateStatusContext';
 export declare const KnownBugs: React.FC<{
     bugs: Bug[];
 }>;

package/dist/components/KnownBugs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnownBugs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const OpenIssueButton_1 = require("./UpdateModal/OpenIssueButton");
+const OpenIssueButton_1 = require("./OpenIssueButton");
 const container = {
     display: 'flex',
     flexDirection: 'row',

package/dist/components/LicenseExplanation.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LicenseExplanation: React.FC;

package/dist/components/LicenseExplanation.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseExplanation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const descriptionLink = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '21px',
+};
+const licenseExplanation = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+const licenseExplanationRow = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+};
+const people = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 9px)',
+    gap: 3,
+    flexShrink: 0,
+};
+const person = {
+    display: 'block',
+    height: 24,
+    overflow: 'visible',
+    width: 9,
+};
+const PersonIcon = ({ handsUp, opacity }) => {
+    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
+            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
+};
+const LicenseExplanation = () => {
+    return (jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
+            jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
+                        ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
+                ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
+                        ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
+                            "."] })
+                ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: people, children: [
+                            jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
+                        ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
+                ] })
+        ] }));
+};
+exports.LicenseExplanation = LicenseExplanation;

package/dist/components/MenuToolbar.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
@@ -48,6 +49,11 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     const canUndoAndRedo = !readOnlyStudio ||
         (previewServerState.type === 'connected' &&
             browserStudioOperations !== null);
+    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
+        connectionStatus: previewServerState.type,
+        isBrowserStudio: browserStudioOperations !== null,
+        readOnlyStudio,
+    });
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const fixedWidthRight = (0, react_1.useMemo)(() => {
         return {
@@ -132,7 +138,7 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
                             return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                        }) }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                        }) }), showUpdates ? jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {}) : null] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/Modals.js

@@ -33,7 +33,6 @@ const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
 const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
-const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const modalContextType = (0, react_1.useContext)(modals_1.SelectedModalContext);
@@ -108,6 +107,6 @@ const Modals = ({ readOnlyStudio }) => {
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, 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 === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), 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, {})] }));
+                (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 === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), 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, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/InputDragger.js

@@ -62,6 +62,26 @@ const compactInputDraggerContainerStyle = {
     ...exports.inputDraggerContainerStyle,
     ...compactInputDraggerStyle,
 };
+let activateInputDraggerOnNextFocus = false;
+const clearInputDraggerActivationRequest = () => {
+    // Let the receiving dragger's React onFocus handler consume the request first.
+    setTimeout(() => {
+        activateInputDraggerOnNextFocus = false;
+    }, 0);
+    document.removeEventListener('focusin', clearInputDraggerActivationRequest, true);
+};
+const requestInputDraggerActivationOnNextFocus = () => {
+    activateInputDraggerOnNextFocus = true;
+    document.addEventListener('focusin', clearInputDraggerActivationRequest, true);
+};
+const consumeInputDraggerActivationRequest = () => {
+    if (!activateInputDraggerOnNextFocus) {
+        return false;
+    }
+    activateInputDraggerOnNextFocus = false;
+    document.removeEventListener('focusin', clearInputDraggerActivationRequest, true);
+    return true;
+};
 const isInt = (num) => {
     return num % 1 === 0;
 };
@@ -328,10 +348,13 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         ...formatterStyle,
     }), [dragging, formatterStyle, small]);
     const onFocus = (0, react_1.useCallback)(() => {
-        if (!small || pointerDownRef.current) {
+        if (pointerDownRef.current) {
             return;
         }
-        setInputFallback(true);
+        const wasActivatedByInputDragger = consumeInputDraggerActivationRequest();
+        if (small || wasActivatedByInputDragger) {
+            setInputFallback(true);
+        }
     }, [small]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {
@@ -392,6 +415,10 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     }, [_max, _min, onEscape, onValueChangeEnd, validationStep]);
     const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
+        if (e.key === 'Tab') {
+            requestInputDraggerActivationOnNextFocus();
+            return;
+        }
         if (e.key === 'Enter') {
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             return;

package/dist/components/NewComposition/NewCompDuration.js

@@ -19,7 +19,7 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "Duration in frames", type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
                             // Hitting Promise.all() limit in Chrome
                             max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })

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

@@ -1,5 +1,28 @@
+import type { Dispatch, RefObject, SetStateAction } from 'react';
 import React from 'react';
 import type { CanvasCaptureImport } from '../../state/modals';
+export type NewCompositionFormValues = {
+    readonly durationInFrames: number;
+    readonly folder: {
+        readonly folderName: string | null;
+        readonly parentName: string | null;
+        readonly stack: string | null;
+    };
+    readonly fps: number;
+    readonly id: string;
+    readonly size: {
+        readonly height: number;
+        readonly width: number;
+    };
+};
+export declare const NewCompositionFields: React.FC<{
+    readonly heightValidationMessage: string | null;
+    readonly inputRef: RefObject<HTMLInputElement | null>;
+    readonly nameValidationMessage: string | null;
+    readonly setValues: Dispatch<SetStateAction<NewCompositionFormValues>>;
+    readonly values: NewCompositionFormValues;
+    readonly widthValidationMessage: string | null;
+}>;
 export declare const NewComposition: React.FC<{
     readonly folderName: string | null;
     readonly parentName: string | null;