@remotion/studio 4.0.485 → 4.0.487

package/dist/components/RenderModal/ServerRenderModal.js

@@ -1000,7 +1000,7 @@ const RenderModal = ({ readOnlyStudio, initialFrame, initialVideoImageFormat, in
                                     "Audio"] })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
                                     "GIF"] })) : null, shownTabs.includes('encoding') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'encoding', onClick: () => setTab('encoding'), children: [
-                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: "currentcolor" }) }),
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { style: render_modals_1.icon, color: colors_1.CURRENT_COLOR_LOWERCASE }) }),
                                     "Encoding"] })) : null, shownTabs.includes('environment') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'environment', onClick: () => setTab('environment'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
                                     "Environment"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [

package/dist/components/RenderModal/WarningIndicatorButton.js

@@ -11,7 +11,7 @@ const style = {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     color: colors_1.LIGHT_TEXT,
     borderStyle: 'solid',
     borderWidth: 1,
@@ -50,11 +50,9 @@ const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount, siz
     const buttonStyle = (0, react_1.useMemo)(() => {
         return {
             ...(size === 'compact' ? compactStyle : style),
-            backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : 'transparent',
-            borderColor: showWarning
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-            color: showWarning ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+            borderColor: showWarning ? colors_1.WHITE_ALPHA_05 : colors_1.BLACK_ALPHA_60,
+            color: showWarning ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [showWarning, size]);
     return (jsx_runtime_1.jsxs("button", { type: "button", style: buttonStyle, onClick: onClick, children: [

package/dist/components/RenderModal/WebRenderModal.js

@@ -81,7 +81,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, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, 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.ModalsContext);
@@ -126,6 +126,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     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);
     const effectiveAudioCodec = (0, react_1.useMemo)(() => {
@@ -366,6 +367,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 licenseKey,
                 scale,
                 allowHtmlInCanvas,
+                pageResponsiveness,
             }, compositionRef);
         }
         setSidebarCollapsedState({ left: null, right: 'expanded' });
@@ -407,6 +409,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         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: [
@@ -431,7 +434,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 })) : (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, allowHtmlInCanvas: allowHtmlInCanvas, setAllowHtmlInCanvas: setAllowHtmlInCanvas, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
                 ] })
         ] }));
 };

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

@@ -1,3 +1,4 @@
+import type { WebRendererPageResponsiveness } from '@remotion/web-renderer';
 import type React from 'react';
 import type { RenderType } from './WebRenderModal';
 type WebRenderModalAdvancedProps = {
@@ -10,6 +11,8 @@ type WebRenderModalAdvancedProps = {
     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>>;
 };
 export declare const WebRenderModalAdvanced: React.FC<WebRenderModalAdvancedProps>;
 export {};

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -13,7 +13,24 @@ const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const tabContainer = {
     flex: 1,
 };
-const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, allowHtmlInCanvas, setAllowHtmlInCanvas, }) => {
+const paragraph = {
+    margin: 0,
+    marginBottom: 8,
+};
+const lastParagraph = {
+    margin: 0,
+};
+const PageResponsivenessDescription = () => {
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("p", { style: paragraph, children: "The Web Renderer runs in the same browser tab as the Studio. Rendering can block the tab while Remotion captures frames." }), jsx_runtime_1.jsxs("p", { style: paragraph, children: ["The default is ",
+                    jsx_runtime_1.jsx("code", { children: "Medium" }),
+                    ", which tries to free the event loop every 33ms of rendering work so progress updates and UI interactions can stay responsive."] }), jsx_runtime_1.jsxs("p", { style: lastParagraph, children: ["Choose ",
+                    jsx_runtime_1.jsx("code", { children: "Disabled" }),
+                    " to prioritize render speed, or", ' ', jsx_runtime_1.jsx("code", { children: "High" }),
+                    " to give the browser more chances to update."] })
+        ] }));
+};
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, allowHtmlInCanvas, setAllowHtmlInCanvas, pageResponsiveness, setPageResponsiveness, }) => {
     const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
         setMediaCacheSizeInBytes((previous) => {
             if (previous === null) {
@@ -73,18 +90,88 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             },
         ];
     }, [hardwareAcceleration, setHardwareAcceleration]);
+    const selectedPageResponsiveness = typeof pageResponsiveness === 'number' ? 'custom' : pageResponsiveness;
+    const pageResponsivenessOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'Disabled',
+                onClick: () => setPageResponsiveness('disabled'),
+                leftItem: selectedPageResponsiveness === 'disabled' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                id: 'disabled',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'disabled',
+            },
+            {
+                label: 'Low (100ms)',
+                onClick: () => setPageResponsiveness('low'),
+                leftItem: selectedPageResponsiveness === 'low' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                id: 'low',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'low',
+            },
+            {
+                label: 'Medium (33ms)',
+                onClick: () => setPageResponsiveness('medium'),
+                leftItem: selectedPageResponsiveness === 'medium' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                id: 'medium',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'medium',
+            },
+            {
+                label: 'High (16ms)',
+                onClick: () => setPageResponsiveness('high'),
+                leftItem: selectedPageResponsiveness === 'high' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                id: 'high',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'high',
+            },
+            {
+                label: 'Custom',
+                onClick: () => setPageResponsiveness((previous) => typeof previous === 'number' ? previous : 33),
+                leftItem: selectedPageResponsiveness === 'custom' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                id: 'custom',
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'custom',
+            },
+        ];
+    }, [selectedPageResponsiveness, setPageResponsiveness]);
+    const setCustomPageResponsiveness = (0, react_1.useCallback)((value) => {
+        setPageResponsiveness((previous) => {
+            const currentValue = typeof previous === 'number' ? previous : 33;
+            return typeof value === 'function' ? value(currentValue) : value;
+        });
+    }, [setPageResponsiveness]);
     return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [
             jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Delay Render Timeout", formatter: (v) => `${v}ms`, min: 0, max: 1000000000, step: 1000, value: delayRenderTimeout, onValueChanged: setDelayRenderTimeout, hint: "delayRenderTimeoutInMillisecondsOption" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom @remotion/media cache size ",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "mediaCacheSizeInBytes", id: "mediaCacheSizeInBytesOption" })
                         ] }), 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.OptionExplainerBubble, { id: "allowHtmlInCanvasOption" })
+                            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" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pageResponsivenessOptions, selectedId: selectedPageResponsiveness, title: "Page Responsiveness" }) })
+                        ] }), typeof pageResponsiveness === 'number' ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Responsiveness Interval", formatter: (v) => `${v}ms`, min: 1, max: 1000000000, step: 1, value: pageResponsiveness, onValueChanged: setCustomPageResponsiveness })) : null] }))] }));
 };
 exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -4,6 +4,7 @@ exports.WebRenderModalAudio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Checkmark_1 = require("../../icons/Checkmark");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -17,8 +18,8 @@ const container = {
     overflowY: 'auto',
 };
 const fallbackNoticeStyle = {
-    backgroundColor: 'rgba(59, 130, 246, 0.15)',
-    border: '1px solid rgba(59, 130, 246, 0.4)',
+    backgroundColor: colors_1.INFO_BLUE_BACKGROUND,
+    border: colors_1.BORDER_INFO_BLUE,
     borderRadius: 4,
     padding: '8px 12px',
     marginLeft: 16,
@@ -26,7 +27,7 @@ const fallbackNoticeStyle = {
     marginTop: 8,
     fontSize: 13,
     lineHeight: 1.4,
-    color: '#60a5fa',
+    color: colors_1.INFO_BLUE,
 };
 const humanReadableWebAudioCodec = (audioCodec) => {
     switch (audioCodec) {

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -118,12 +118,12 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Container" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })
                         ] }), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Codec",
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "codec", id: "videoCodecOption" })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
                         ] })) : null, jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
                 ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "logLevel", id: "logLevelOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })
                 ] })
         ] }));

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -33,14 +33,14 @@ const paddedDescriptionStyle = {
     fontSize: 14,
     fontFamily: 'sans-serif',
     padding: 9,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     borderRadius: 8,
     lineHeight: 1.5,
     marginLeft: 16,
     marginRight: 16,
 };
 const descriptionLink = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 14,
 };
 const checkboxLabel = {

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalPicture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
@@ -22,7 +23,7 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
                     jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })
                         ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: colors_1.TRANSPARENT }) })
                         ] })
                 ] }))] }));
 };

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

@@ -15,7 +15,7 @@ exports.container = {
     flexDirection: 'row',
     alignItems: 'center',
     padding: '12px 16px',
-    borderBottom: '1px solid black',
+    borderBottom: colors_1.BORDER_BLACK,
 };
 exports.optionsPanel = {
     display: 'flex',
@@ -51,12 +51,12 @@ exports.iconContainer = {
     alignItems: 'center',
 };
 exports.icon = {
-    color: 'currentcolor',
+    color: colors_1.CURRENT_COLOR_LOWERCASE,
     height: 20,
 };
 exports.buttonStyle = {
     backgroundColor: colors_1.BLUE,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 exports.flexer = {
     flex: 1,

package/dist/components/RenderPreview.js

@@ -10,7 +10,7 @@ const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
 const msgStyle = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     display: 'flex',
     justifyContent: 'center',

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -98,6 +98,7 @@ const ClientRenderQueueProcessor = () => {
             outputTarget: 'web-fs',
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
             allowHtmlInCanvas: job.allowHtmlInCanvas,
+            pageResponsiveness: job.pageResponsiveness,
         });
         return {
             getBlob,

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueCopyToClipboard = exports.supportsCopyingToClipboard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
 const clipboard_1 = require("../../icons/clipboard");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const revealIconStyle = {
     height: 12,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
 };
 const supportsCopyingToClipboard = (job) => {
     if (job.status !== 'done') {

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueDownloadItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ClientRenderQueueProcessor_1 = require("./ClientRenderQueueProcessor");
@@ -24,7 +25,7 @@ const RenderQueueDownloadItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueCancelButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -23,7 +24,7 @@ const RenderQueueCancelButton = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 14,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueItemStatus.js

@@ -75,7 +75,7 @@ const RenderQueueItemStatus = ({ job }) => {
         return (jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
     }
     if (job.status === 'done') {
-        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
+        return (jsx_runtime_1.jsx("button", { type: "button", style: invisibleStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: iconStyle, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }) }));
     }
     if (job.status === 'running') {
         let progressValue;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOpenInFinderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -17,7 +18,7 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const save_render_output_1 = require("../../api/save-render-output");
+const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -39,7 +40,7 @@ const RenderQueueRemoveItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 16,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const mobile_layout_1 = require("../../helpers/mobile-layout");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
@@ -37,7 +38,7 @@ const RenderQueueRepeatItem = ({ job }) => {
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,
-            color: 'currentColor',
+            color: colors_1.CURRENT_COLOR,
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {

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

@@ -1,5 +1,5 @@
 import type { CompletedClientRender } from '@remotion/studio-shared';
-import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
+import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type { LogLevel } from 'remotion';
 export type ClientRenderJobProgress = {
     encodedFrames: number;
@@ -60,6 +60,7 @@ export type ClientVideoRenderJob = ClientRenderJobBase & {
     keyframeIntervalInSeconds: number;
     transparent: boolean;
     muted: boolean;
+    pageResponsiveness: WebRendererPageResponsiveness;
 } & ClientRenderJobDynamicStatus;
 export type RestoredClientRenderJob = CompletedClientRender & {
     status: 'done';

package/dist/components/RenderQueue/index.js

@@ -45,7 +45,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
 };
 const errorExplanation = {
     fontSize: 14,

package/dist/components/RendersTab.js

@@ -31,8 +31,8 @@ const RendersTab = ({ selected, onClick }) => {
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
-            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
-            color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : colors_1.TRANSPARENT,
+            color: failedJobs > 0 ? colors_1.WHITE : colors_1.LIGHT_TEXT,
             borderWidth: failedJobs > 0 ? 0 : 1,
             borderStyle: 'solid',
             borderColor: colors_1.LIGHT_TEXT,

package/dist/components/SegmentedControl.js

@@ -9,7 +9,7 @@ const container = {
     display: 'flex',
     flexDirection: 'row',
     overflow: 'hidden',
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     flexWrap: 'wrap',
     maxWidth: 350,
     justifyContent: 'flex-end',
@@ -63,8 +63,8 @@ const Item = ({ selected, onClick, children, size }) => {
     const itemStyle = (0, react_1.useMemo)(() => {
         return {
             ...(size === 'compact' ? compactItem : item),
-            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
-            color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
+            backgroundColor: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+            color: selected ? colors_1.WHITE : hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [hovered, selected, size]);
     return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));

package/dist/components/SelectedOutlineElement.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineSnapPoint, type SelectedOutlineSnapTarget } from './selected-outline-snap';
 import { type SelectedOutlineDragTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineTransformOriginHandle: React.FC<{
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;
 export declare const SelectedOutlineElement: React.FC<{
     readonly allDragTargets: readonly SelectedOutlineDragTarget[];
+    readonly allDragOutlines: readonly SelectedOutline[];
     readonly allRotationDragTargets: readonly SelectedOutlineRotationDragTarget[];
     readonly allScaleDragTargets: readonly SelectedOutlineScaleDragTarget[];
     readonly dragging: boolean;
@@ -11,7 +18,9 @@ export declare const SelectedOutlineElement: React.FC<{
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;
+    readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
     readonly scale: number;
+    readonly snapTargets: readonly SelectedOutlineSnapTarget[];
     readonly target: SelectedOutlineTarget | undefined;
 }>;