@remotion/studio 4.0.489 → 4.0.491

package/dist/components/InspectorPanel/alignment-controls.d.ts

@@ -0,0 +1,12 @@
+export type AlignmentDirection = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom';
+export declare const computeAlignedTranslate: ({ direction, elementRect, compositionRect, currentTranslateX, currentTranslateY, scale, }: {
+    readonly direction: AlignmentDirection;
+    readonly elementRect: DOMRect;
+    readonly compositionRect: DOMRect;
+    readonly currentTranslateX: number;
+    readonly currentTranslateY: number;
+    readonly scale: number;
+}) => {
+    x: number;
+    y: number;
+};

package/dist/components/InspectorPanel/alignment-controls.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeAlignedTranslate = void 0;
+const computeAlignedTranslate = ({ direction, elementRect, compositionRect, currentTranslateX, currentTranslateY, scale, }) => {
+    let deltaX = 0;
+    let deltaY = 0;
+    // Note: elementRect and compositionRect are in screen space (pixels).
+    // We divide by scale to convert back to composition space.
+    switch (direction) {
+        case 'left':
+            deltaX = compositionRect.left - elementRect.left;
+            break;
+        case 'center-h': {
+            const compCenter = compositionRect.left + compositionRect.width / 2;
+            const elemCenter = elementRect.left + elementRect.width / 2;
+            deltaX = compCenter - elemCenter;
+            break;
+        }
+        case 'right':
+            deltaX = compositionRect.right - elementRect.right;
+            break;
+        case 'top':
+            deltaY = compositionRect.top - elementRect.top;
+            break;
+        case 'center-v': {
+            const compCenter = compositionRect.top + compositionRect.height / 2;
+            const elemCenter = elementRect.top + elementRect.height / 2;
+            deltaY = compCenter - elemCenter;
+            break;
+        }
+        case 'bottom':
+            deltaY = compositionRect.bottom - elementRect.bottom;
+            break;
+        default:
+            break;
+    }
+    return {
+        x: currentTranslateX + deltaX / scale,
+        y: currentTranslateY + deltaY / scale,
+    };
+};
+exports.computeAlignedTranslate = computeAlignedTranslate;

package/dist/components/InspectorSequenceSection.d.ts

@@ -15,5 +15,6 @@ export declare const InspectorSequenceSection: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
     readonly renderSectionHeader: (children: React.ReactNode) => React.ReactNode;
+    readonly renderTransformControls: () => React.ReactNode;
 }>;
 export {};

package/dist/components/InspectorSequenceSection.js

@@ -133,7 +133,7 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, }) => {
+const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, renderTransformControls, }) => {
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -222,6 +222,6 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.id === 'transforms' ? renderTransformControls() : null, group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/KeyboardShortcutsExplainer.js

@@ -167,6 +167,10 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "C" })
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Copy effects / values" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "X" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Cut effects" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "V" })

package/dist/components/MobilePanel.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const CancelButton_1 = require("./NewComposition/CancelButton");
 const container = {
@@ -25,13 +26,18 @@ const buttonContainer = {
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'flex-end',
+    paddingRight: 8,
 };
 const button = {
-    height: 20,
-    width: 20,
+    height: 16,
+    width: 16,
+    flexShrink: 0,
+};
+const renderCloseIcon = (color) => {
+    return jsx_runtime_1.jsx(CancelButton_1.CancelIcon, { style: { ...button, color } });
 };
 function MobilePanel({ children, onClose, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     return react_dom_1.default.createPortal(jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(CancelButton_1.CancelButton, { style: button, onPress: onClose }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
+            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClose, renderAction: renderCloseIcon, title: "Close sidebar" }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/Modals.js

@@ -26,14 +26,13 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
-const KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

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

@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react';
 import React from 'react';
+export declare const CancelIcon: React.FC<SVGProps<SVGSVGElement>>;
 export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
     readonly onPress: () => void;
 }>;

package/dist/components/NewComposition/CancelButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CancelButton = void 0;
+exports.CancelButton = exports.CancelIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
@@ -14,8 +14,12 @@ const style = {
     justifyContent: 'center',
     alignItems: 'center',
 };
+const CancelIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }));
+};
+exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
 };
 exports.CancelButton = CancelButton;

package/dist/components/OptionsPanel.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
-const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const InspectorPanel_1 = require("./InspectorPanel");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -19,10 +18,7 @@ const actions_1 = require("./RenderQueue/actions");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
 const localStorageKey = 'remotion.sidebarPanel';
-const getSelectedPanel = (renderingAvailable) => {
-    if (!renderingAvailable) {
-        return 'inspector';
-    }
+const getSelectedPanel = () => {
     const panel = localStorage.getItem(localStorageKey);
     if (panel === 'renders') {
         return 'renders';
@@ -38,7 +34,6 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
 exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
 const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const renderingAvailable = !readOnlyStudio || show_browser_rendering_1.SHOW_BROWSER_RENDERING;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const container = (0, react_1.useMemo)(() => ({
         height: '100%',
@@ -48,7 +43,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
         flexDirection: 'column',
         flex: 1,
     }), [isMobileLayout]);
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(renderingAvailable));
+    const [panel, setPanel] = (0, react_1.useState)(getSelectedPanel);
     const onInspectorSelected = (0, react_1.useCallback)(() => {
         setPanel('inspector');
         (0, exports.persistSelectedOptionsSidebarPanel)('inspector');
@@ -181,6 +176,7 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
-                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })
+                    ] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps })) : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/OutlineToggle.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const OutlineToggle: React.FC;
+export declare const OutlineToggle: React.FC<{
+    readonly disabled: boolean;
+}>;

package/dist/components/OutlineToggle.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const editor_outlines_1 = require("../state/editor-outlines");
 const ControlButton_1 = require("./ControlButton");
-const OutlineToggle = () => {
+const OutlineToggle = ({ disabled }) => {
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
@@ -15,6 +15,6 @@ const OutlineToggle = () => {
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, disabled: disabled, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/Preview.js

@@ -121,7 +121,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
     if (canvasContent.type === 'output-blob') {
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
+    return (jsx_runtime_1.jsxs("div", { className: "remotion-studio-composition-container", style: outer, children: [
             jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };

package/dist/components/PreviewToolbar.js

@@ -166,7 +166,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
+                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, { disabled: readOnlyStudio }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, { disabled: readOnlyStudio }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })

package/dist/components/RenderButton.js

@@ -11,7 +11,6 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const caret_1 = require("../icons/caret");
 const render_1 = require("../icons/render");
@@ -72,9 +71,6 @@ const label = {
 };
 const RENDER_TYPE_STORAGE_KEY = 'remotion.renderType';
 const getInitialRenderType = (readOnlyStudio) => {
-    if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
-        return readOnlyStudio ? 'render-command' : 'server-render';
-    }
     if (readOnlyStudio) {
         return 'client-render';
     }
@@ -139,30 +135,21 @@ const RenderButton = ({ readOnlyStudio, }) => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const canServerRender = connectionStatus === 'connected';
-    const canRender = canServerRender || show_browser_rendering_1.SHOW_BROWSER_RENDERING || readOnlyStudio;
     const renderType = (0, react_1.useMemo)(() => {
         if (readOnlyStudio) {
-            if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
-                return 'render-command';
-            }
             return preferredRenderType === 'render-command'
                 ? 'render-command'
                 : 'client-render';
         }
-        if (connectionStatus === 'disconnected' && show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
+        if (connectionStatus === 'disconnected') {
             return 'client-render';
         }
-        if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
-            return 'server-render';
-        }
         return preferredRenderType;
     }, [connectionStatus, preferredRenderType, readOnlyStudio]);
     const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
     const tooltip = renderType === 'render-command'
         ? 'Copy a CLI command to render this composition ' + shortcut
-        : canRender
-            ? 'Export the current composition ' + shortcut
-            : 'Connect to the Studio server to render';
+        : 'Export the current composition ' + shortcut;
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -270,7 +257,6 @@ const RenderButton = ({ readOnlyStudio, }) => {
             initialTransparent: null,
             initialMuted: null,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
-            initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
             initialPageResponsiveness: 'medium',
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
@@ -279,7 +265,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
             openServerRenderModal(true);
             return;
         }
-        if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING || renderType === 'server-render') {
+        if (renderType === 'server-render') {
             openServerRenderModal(false);
         }
         else {
@@ -399,34 +385,24 @@ const RenderButton = ({ readOnlyStudio, }) => {
         return {
             ...splitButtonContainer,
             borderColor: colors_1.BLACK_ALPHA_60,
-            opacity: canRender ? 1 : 0.7,
-            cursor: canRender ? 'pointer' : 'inherit',
+            opacity: 1,
+            cursor: 'pointer',
         };
-    }, [canRender]);
+    }, []);
     const renderLabel = renderType === 'server-render'
         ? 'Render'
         : renderType === 'render-command'
             ? 'Render via CLI'
             : 'Render on web';
-    const shouldShowDropdown = (0, react_1.useMemo)(() => {
-        if (readOnlyStudio) {
-            return show_browser_rendering_1.SHOW_BROWSER_RENDERING;
-        }
-        if (!show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
-            return false;
-        }
-        return true;
-    }, [readOnlyStudio]);
     if (!video) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: !canRender, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
+                    jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
                                 jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
-                            ] }) }), shouldShowDropdown ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: !readOnlyStudio && connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
-                        ] })) : null] }), portalStyle
+                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
+                ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/RenderModal/WebRenderModal.js

@@ -29,7 +29,6 @@ const render_modals_1 = require("./render-modals");
 const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
 const use_encodable_audio_codecs_1 = require("./use-encodable-audio-codecs");
 const use_encodable_video_codecs_1 = require("./use-encodable-video-codecs");
-const WebRendererExperimentalBadge_1 = require("./WebRendererExperimentalBadge");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
 const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
 const WebRenderModalBasic_1 = require("./WebRenderModalBasic");
@@ -81,7 +80,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialAllowHtmlInCanvas, initialPageResponsiveness, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -125,7 +124,6 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
     const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
     const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
-    const [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);
@@ -339,7 +337,6 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey,
                 scale,
-                allowHtmlInCanvas,
             }, compositionRef);
         }
         else {
@@ -366,7 +363,6 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey,
                 scale,
-                allowHtmlInCanvas,
                 pageResponsiveness,
             }, compositionRef);
         }
@@ -408,14 +404,13 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         addClientStillJob,
         addClientVideoJob,
         scale,
-        allowHtmlInCanvas,
         pageResponsiveness,
     ]);
     return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
-                ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.container, children: jsx_runtime_1.jsx(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
+                ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
                     jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [
                             jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
@@ -434,7 +429,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, allowHtmlInCanvas: allowHtmlInCanvas, setAllowHtmlInCanvas: setAllowHtmlInCanvas, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
+                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
                 ] })
         ] }));
 };

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

@@ -9,8 +9,6 @@ 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, allowHtmlInCanvas, setAllowHtmlInCanvas, pageResponsiveness, setPageResponsiveness, }) => {
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, pageResponsiveness, setPageResponsiveness, }) => {
     const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
         setMediaCacheSizeInBytes((previous) => {
             if (previous === null) {
@@ -39,9 +39,6 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             return null;
         });
     }, [setMediaCacheSizeInBytes]);
-    const toggleAllowHtmlInCanvas = (0, react_1.useCallback)(() => {
-        setAllowHtmlInCanvas((prev) => !prev);
-    }, [setAllowHtmlInCanvas]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -163,11 +160,7 @@ 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, 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: [
+                ] })) : null, 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/RenderQueue/ClientRenderQueueProcessor.js

@@ -44,7 +44,6 @@ 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),
@@ -97,7 +96,6 @@ const ClientRenderQueueProcessor = () => {
             },
             outputTarget: 'web-fs',
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
-            allowHtmlInCanvas: job.allowHtmlInCanvas,
             pageResponsiveness: job.pageResponsiveness,
         });
         return {

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

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

package/dist/components/RenderQueue/index.js

@@ -37,9 +37,7 @@ exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const show_browser_rendering_1 = require("../../helpers/show-browser-rendering");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
@@ -69,8 +67,6 @@ const renderQueue = {
     overflowY: 'auto',
 };
 const RenderQueue = () => {
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const previousJobCount = react_1.default.useRef(jobs.length);
@@ -103,11 +99,6 @@ const RenderQueue = () => {
         }
         return -1;
     }, [canvasContent, jobs]);
-    if (connectionStatus === 'disconnected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING) {
-        return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The studio server has disconnected." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
-            ] }));
-    }
     if (jobCount === 0) {
         return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "No renders in the queue." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })