@remotion/studio 4.0.513 → 4.0.514

package/dist/components/InspectorPanel/styles.d.ts

@@ -20,7 +20,7 @@ export declare const selectedContainer: React.CSSProperties;
 export declare const centeredMessage: React.CSSProperties;
 export declare const detailsContainer: React.CSSProperties;
 export declare const detailsWithInlineAction: React.CSSProperties;
-export declare const inspectorActionSection: React.CSSProperties;
+export declare const inspectorQuickActionsSection: React.CSSProperties;
 export declare const detailsBeforeInlineAction: React.CSSProperties;
 export declare const guideDetailsContainer: React.CSSProperties;
 export declare const detailRow: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorActionSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -14,6 +14,7 @@ exports.container = {
 };
 exports.scrollableContainer = {
     ...exports.container,
+    overflowX: 'hidden',
     overflowY: 'auto',
 };
 exports.compositionDefaultPropsSection = {
@@ -127,6 +128,7 @@ exports.selectedContainer = {
     backgroundColor: colors_1.BACKGROUND,
     flex: 1,
     minHeight: 0,
+    overflowX: 'hidden',
     overflowY: 'auto',
 };
 exports.centeredMessage = {
@@ -145,7 +147,7 @@ exports.detailsContainer = {
 exports.detailsWithInlineAction = {
     paddingBottom: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
 };
-exports.inspectorActionSection = {
+exports.inspectorQuickActionsSection = {
     padding: '4px 0',
 };
 exports.detailsBeforeInlineAction = {

package/dist/components/InspectorSourceLocation.d.ts

@@ -5,5 +5,5 @@ export declare const InspectorSourceLocation: React.FC<{
     readonly canOpen: boolean;
     readonly onOpen: () => void;
     readonly renderIcon?: (color: string) => React.ReactNode;
-    readonly size?: 'default' | 'inline-action';
+    readonly size?: 'default' | 'quick-action';
 }>;

package/dist/components/InspectorSourceLocation.js

@@ -81,8 +81,8 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
     if (!label) {
         return null;
     }
-    if (size === 'inline-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), size: "compact", title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+    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), size: "compact", 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/LicenseKeyValidation.js

@@ -102,9 +102,9 @@ 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: [
+    return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(common_1.InspectorQuickAction, { 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(common_1.InspectorQuickAction, { 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" })

package/dist/components/Modals.js

@@ -12,6 +12,7 @@ const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
+const FixComputedValueModal_1 = require("./FixComputedValueModal");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
@@ -49,6 +50,6 @@ const Modals = ({ readOnlyStudio }) => {
     }, [setSelectedModal, subscribeToEvent]);
     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, canvasCapture: modalContextType.canvasCapture })), 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 === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${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, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), 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 === '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 === '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, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), 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/CodemodFooter.d.ts

@@ -18,5 +18,6 @@ export declare const CodemodFooter: React.FC<{
     readonly onSuccess: (() => void) | null;
     readonly fallbackToRootFile?: boolean;
     readonly applyCodemod: ApplyCodemodAction;
+    readonly applyCodemodForPreview: ApplyCodemodAction | null;
 }>;
 export {};

package/dist/components/NewComposition/CodemodFooter.js

@@ -21,7 +21,7 @@ const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel
                 ] })
         ] }));
 };
-const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, applyCodemodForPreview, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -79,12 +79,14 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         symbolicatedStack,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {
-        const res = await (0, actions_1.applyCodemod)({
-            codemod,
-            dryRun: true,
-            symbolicatedStack,
-            signal,
-        });
+        const res = applyCodemodForPreview
+            ? await applyCodemodForPreview({ signal, symbolicatedStack })
+            : await (0, actions_1.applyCodemod)({
+                codemod,
+                dryRun: true,
+                symbolicatedStack,
+                signal,
+            });
         if (res.success) {
             setCanApplyCodemod({ type: 'success', diff: res.diff });
         }
@@ -94,7 +96,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
                 error: res.reason,
             });
         }
-    }, [codemod, symbolicatedStack]);
+    }, [applyCodemodForPreview, codemod, symbolicatedStack]);
     (0, react_1.useEffect)(() => {
         if (!stack) {
             if (fallbackToRootFile) {

package/dist/components/NewComposition/DeleteComposition.js

@@ -44,7 +44,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
-                            }) }) })
+                            }), applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteFolder.js

@@ -38,7 +38,7 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
-                            }) }) })
+                            }), applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DuplicateComposition.js

@@ -11,10 +11,10 @@ const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
-const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
+const duplicate_composition_api_1 = require("./duplicate-composition-api");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
@@ -203,11 +203,16 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (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 }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
                                 codemod,
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
+                            }), applyCodemodForPreview: ({ signal, symbolicatedStack }) => (0, duplicate_composition_api_1.duplicateComposition)({
+                                codemod,
+                                dryRun: true,
+                                signal,
+                                symbolicatedStack,
                             }) }) })
                 ] })
         ] }));

package/dist/components/NewComposition/NewComposition.js

@@ -160,7 +160,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
                         ] }), 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 }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
-                            }), fallbackToRootFile: true }) })
+                            }), applyCodemodForPreview: null, fallbackToRootFile: true }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/NewFolder.js

@@ -79,7 +79,7 @@ const NewFolder = ({ parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
-                            }) }) })
+                            }), applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameComposition.js

@@ -63,7 +63,7 @@ const RenameCompositionLoaded = () => {
                                 newCompositionId: newId,
                                 signal,
                                 symbolicatedStack,
-                            }) }) })
+                            }), applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameFolder.js

@@ -67,7 +67,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
                                 dryRun: false,
                                 signal,
                                 symbolicatedStack,
-                            }) }) })
+                            }), applyCodemodForPreview: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/duplicate-composition-api.d.ts

@@ -0,0 +1,16 @@
+import type { DuplicateCompositionResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const duplicateComposition: ({ codemod, dryRun, signal, symbolicatedStack, }: {
+    codemod: {
+        type: "duplicate-composition";
+        idToDuplicate: string;
+        newId: string;
+        newHeight: number | null;
+        newWidth: number | null;
+        newFps: number | null;
+        newDurationInFrames: number | null;
+        tag: "Composition" | "Still";
+    };
+    dryRun: boolean;
+    signal: AbortSignal;
+    symbolicatedStack: SymbolicatedStackFrame | null;
+}) => Promise<DuplicateCompositionResponse>;

package/dist/components/NewComposition/duplicate-composition-api.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateComposition = void 0;
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const actions_1 = require("../RenderQueue/actions");
+const duplicateComposition = ({ codemod, dryRun, signal, symbolicatedStack, }) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations === null) {
+        return (0, actions_1.applyCodemod)({ codemod, dryRun, signal, symbolicatedStack }).then((result) => (result.success ? result : { ...result, stack: '' }));
+    }
+    return browserStudioOperations.duplicateComposition({
+        codemod,
+        dryRun,
+    });
+};
+exports.duplicateComposition = duplicateComposition;

package/dist/components/NoRegisterRoot.js

@@ -36,7 +36,7 @@ const NoRegisterRoot = () => {
     if (!show) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: container, children: [
+    return (jsx_runtime_1.jsxs(remotion_1.Internals.AbsoluteFillElement, { style: container, children: [
             jsx_runtime_1.jsx("div", { style: label, children: "Waiting for registerRoot() to get called." }), jsx_runtime_1.jsxs("div", { style: label, children: ["Learn more:", ' ', jsx_runtime_1.jsx("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })
                 ] })
         ] }));

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -8,12 +8,13 @@ const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const quickSwitcherArea = {
-    padding: '4px 12px',
+    padding: '4px 0 4px 4px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
+    overflowY: 'auto',
 };
 const quickSwitcherTrigger = {
     backgroundColor: colors_1.WHITE_ALPHA_06,
-    borderRadius: 5,
+    borderRadius: 4,
     padding: '4px 10px',
     color: colors_1.LIGHT_TEXT,
     fontSize: 12,
@@ -40,6 +41,6 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
             compositionSelection: null,
         });
     }, [mode, setSelectedModal]);
-    return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));
+    return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, className: "__remotion-vertical-scrollbar", children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -353,6 +353,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const container = (0, react_1.useMemo)(() => {
         return {
             width: showKeyboardShortcuts ? 800 : 400,
+            maxWidth: 'calc(100vw - 40px)',
         };
     }, [showKeyboardShortcuts]);
     const results = (0, react_1.useMemo)(() => {

package/dist/components/QuickSwitcher/fuzzy-search.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fuzzySearch = fuzzySearch;
 function fuzzySearch(query, dataset) {
-    const q = query ? query.trim().toLowerCase() : '';
+    const q = query.trim().toLowerCase().replace(/[\s-]/g, '');
     const matchingIndices = [];
     if (q.length === 0) {
         for (let i = 0; i < dataset.length; i++) {

package/dist/components/RefreshCompositionOverlay.js

@@ -15,6 +15,6 @@ const shadow = {
     boxShadow: colors_1.SHADOW_BLACK,
 };
 const RefreshCompositionOverlay = () => {
-    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: exports.container, children: jsx_runtime_1.jsx("div", { style: shadow, children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: exports.container, children: jsx_runtime_1.jsx("div", { style: shadow, children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));
 };
 exports.RefreshCompositionOverlay = RefreshCompositionOverlay;

package/dist/components/RenderButton.js

@@ -42,6 +42,7 @@ const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -200,18 +201,19 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
     }, [refresh]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const canServerRender = connectionStatus === 'connected';
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const canServerRender = connectionStatus === 'connected' && !isBrowserStudio;
     const renderType = (0, react_1.useMemo)(() => {
         if (readOnlyStudio) {
             return preferredRenderType === 'render-command'
                 ? 'render-command'
                 : 'client-render';
         }
-        if (connectionStatus === 'disconnected') {
+        if (connectionStatus === 'disconnected' || isBrowserStudio) {
             return 'client-render';
         }
         return preferredRenderType;
-    }, [connectionStatus, preferredRenderType, readOnlyStudio]);
+    }, [connectionStatus, isBrowserStudio, preferredRenderType, readOnlyStudio]);
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
     const tooltip = renderType === 'render-command'
         ? 'Copy a CLI command to render this composition ' + shortcut
@@ -325,6 +327,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
             initialTransparent: null,
             initialMuted: null,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+            initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
             initialPageResponsiveness: 'medium',
         });
     }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);

package/dist/components/RenderModal/WebRenderModal.js

@@ -79,7 +79,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, 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, initialAllowHtmlInCanvas, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -127,6 +127,7 @@ 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 [allowHtmlInCanvas, setAllowHtmlInCanvas] = (0, react_1.useState)(initialAllowHtmlInCanvas !== null && initialAllowHtmlInCanvas !== void 0 ? initialAllowHtmlInCanvas : false);
     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);
@@ -340,6 +341,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey: publicLicenseKey,
                 scale,
+                allowHtmlInCanvas,
             }, compositionRef);
         }
         else {
@@ -366,6 +368,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey: publicLicenseKey,
                 scale,
+                allowHtmlInCanvas,
                 pageResponsiveness,
             }, compositionRef);
         }
@@ -407,6 +410,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         addClientStillJob,
         addClientVideoJob,
         scale,
+        allowHtmlInCanvas,
         pageResponsiveness,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
@@ -422,7 +426,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                                 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 })) : null })
+                            } })) : 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, allowHtmlInCanvas: allowHtmlInCanvas, setAllowHtmlInCanvas: setAllowHtmlInCanvas, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : null })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalAdvanced.d.ts

@@ -9,6 +9,8 @@ type WebRenderModalAdvancedProps = {
     readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly hardwareAcceleration: 'no-preference' | 'prefer-hardware' | 'prefer-software';
     readonly setHardwareAcceleration: (value: 'no-preference' | 'prefer-hardware' | 'prefer-software') => void;
+    readonly allowHtmlInCanvas: boolean;
+    readonly setAllowHtmlInCanvas: React.Dispatch<React.SetStateAction<boolean>>;
     readonly pageResponsiveness: WebRendererPageResponsiveness;
     readonly setPageResponsiveness: React.Dispatch<React.SetStateAction<WebRendererPageResponsiveness>>;
 };

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -30,7 +30,7 @@ const PageResponsivenessDescription = () => {
                     " to give the browser more chances to update."] })
         ] }));
 };
-const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, pageResponsiveness, setPageResponsiveness, }) => {
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, allowHtmlInCanvas, setAllowHtmlInCanvas, pageResponsiveness, setPageResponsiveness, }) => {
     const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
         setMediaCacheSizeInBytes((previous) => {
             if (previous === null) {
@@ -39,6 +39,9 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             return null;
         });
     }, [setMediaCacheSizeInBytes]);
+    const toggleAllowHtmlInCanvas = (0, react_1.useCallback)(() => {
+        setAllowHtmlInCanvas((previous) => !previous);
+    }, [setAllowHtmlInCanvas]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -160,7 +163,11 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
                 ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
-                ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Allow HTML-in-canvas ",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "allowHtmlInCanvas", id: "allowHtmlInCanvasOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: allowHtmlInCanvas, onChange: toggleAllowHtmlInCanvas, name: "allow-html-in-canvas" }) })
+                ] }), renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Page Responsiveness ",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererCustomOptionExplainerBubble, { apiName: "pageResponsiveness", description: jsx_runtime_1.jsx(PageResponsivenessDescription, {}), docLink: "https://www.remotion.dev/docs/client-side-rendering/page-responsiveness", name: "Page responsiveness" })

package/dist/components/RenderModal/render-modals.js

@@ -20,15 +20,19 @@ exports.container = {
 exports.optionsPanel = {
     display: 'flex',
     flex: 1,
+    minHeight: 0,
     minWidth: 0,
+    overflowY: 'auto',
 };
 exports.horizontalLayout = {
     display: 'flex',
     flexDirection: 'row',
-    overflowY: 'auto',
     flex: 1,
+    minHeight: 0,
+    overflow: 'hidden',
 };
 exports.leftSidebar = {
+    flexShrink: 0,
     padding: 6,
 };
 exports.horizontalTab = {

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -4,6 +4,7 @@ exports.ClientRenderQueueProcessor = void 0;
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const save_render_output_1 = require("../../api/save-render-output");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const download_blob_1 = require("../../helpers/download-blob");
 const context_1 = require("./context");
 const ClientRenderQueueProcessor = () => {
@@ -33,6 +34,7 @@ const ClientRenderQueueProcessor = () => {
             licenseKey: (_b = job.licenseKey) !== null && _b !== void 0 ? _b : undefined,
             scale: job.scale,
             signal,
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
         })).blob({ format: job.imageFormat });
         return {
             getBlob: () => Promise.resolve(blob),
@@ -86,6 +88,7 @@ const ClientRenderQueueProcessor = () => {
             outputTarget: 'web-fs',
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
             pageResponsiveness: job.pageResponsiveness,
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
         });
         return {
             getBlob,
@@ -118,7 +121,8 @@ const ClientRenderQueueProcessor = () => {
                 (0, download_blob_1.downloadBlob)(blob, job.outName);
                 markClientJobDone(job.id, metadata, getBlob);
             };
-            if (window.remotion_isReadOnlyStudio) {
+            if (window.remotion_isReadOnlyStudio ||
+                (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
                 downloadAndFinish();
             }
             else {

package/dist/components/RenderQueue/actions.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, licenseKey, }) => {
     return (0, call_api_1.callApi)('/api/render', {
@@ -142,6 +143,10 @@ const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, }) => {
         dryRun,
         symbolicatedStack,
     };
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        return browserStudioOperations.applyCodemod(body);
+    }
     return (0, call_api_1.callApi)('/api/apply-codemod', body, signal);
 };
 exports.applyCodemod = applyCodemod;
@@ -166,7 +171,7 @@ const getProjectInfo = (signal) => {
 };
 exports.getProjectInfo = getProjectInfo;
 const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
-    return (0, call_api_1.callApi)('/api/update-default-props', {
+    const body = {
         compositionId,
         defaultProps: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
             data: defaultProps,
@@ -174,7 +179,12 @@ const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
             staticBase: window.remotion_staticBase,
         }).serializedString,
         enumPaths,
-    });
+    };
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        return browserStudioOperations.updateDefaultProps(body);
+    }
+    return (0, call_api_1.callApi)('/api/update-default-props', body);
 };
 exports.callUpdateDefaultPropsApi = callUpdateDefaultPropsApi;
 const applyVisualControlChange = ({ fileName, changes, }) => {

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -40,6 +40,7 @@ type ClientRenderJobBase = {
     logLevel: LogLevel;
     licenseKey: string | null;
     scale: number;
+    allowHtmlInCanvas: boolean;
 };
 export type ClientStillRenderJob = ClientRenderJobBase & {
     type: 'client-still';

package/dist/components/RenderingSettings.d.ts

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