@remotion/studio 4.0.512 → 4.0.514

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;