@remotion/studio 4.0.486 → 4.0.488

package/dist/components/RenderModal/SchemaEditor/Fieldset.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 6;
 export declare const getSchemaEditorFieldsetPadding: () => number;
+export declare const getSchemaEditorRootInset: (contentInset: number) => number;
 export declare const Fieldset: React.FC<{
     readonly children: React.ReactNode;
     readonly shouldPad: boolean;

package/dist/components/RenderModal/SchemaEditor/Fieldset.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fieldset = exports.getSchemaEditorFieldsetPadding = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
+exports.Fieldset = exports.getSchemaEditorRootInset = exports.getSchemaEditorFieldsetPadding = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.SCHEMA_EDITOR_FIELDSET_PADDING = 6;
@@ -8,6 +8,11 @@ const getSchemaEditorFieldsetPadding = () => {
     return exports.SCHEMA_EDITOR_FIELDSET_PADDING;
 };
 exports.getSchemaEditorFieldsetPadding = getSchemaEditorFieldsetPadding;
+const getSchemaEditorRootInset = (contentInset) => {
+    const fieldsetPadding = (0, exports.getSchemaEditorFieldsetPadding)();
+    return Math.max(0, contentInset - fieldsetPadding);
+};
+exports.getSchemaEditorRootInset = getSchemaEditorRootInset;
 const AlreadyPaddedRightContext = (0, react_1.createContext)(false);
 const Fieldset = ({ children, shouldPad }) => {
     const alreadyPadded = (0, react_1.useContext)(AlreadyPaddedRightContext);

package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -24,8 +24,7 @@ const getContainerStyle = ({ contentInset, scrollableContainer, }) => {
     if (contentInset === undefined) {
         return base;
     }
-    const fieldsetPadding = (0, Fieldset_1.getSchemaEditorFieldsetPadding)();
-    const rootInset = Math.max(0, contentInset - fieldsetPadding);
+    const rootInset = (0, Fieldset_1.getSchemaEditorRootInset)(contentInset);
     return {
         ...base,
         boxSizing: 'border-box',

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/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/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/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/SelectedOutlineElement.d.ts

@@ -1,5 +1,6 @@
 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<{
@@ -9,6 +10,7 @@ export declare const SelectedOutlineTransformOriginHandle: React.FC<{
 }>;
 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;
@@ -16,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;
 }>;

package/dist/components/SelectedOutlineElement.js

@@ -43,6 +43,7 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
@@ -53,6 +54,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_snap_1 = require("./selected-outline-snap");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
@@ -70,6 +72,7 @@ const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
     var _a;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
     const parsed = (0, react_1.useMemo)(() => transformOriginDrag === null
         ? null
@@ -142,11 +145,13 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             const snapPoint = lockedAxis === null
                 ? point
                 : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, axisLockedUv);
-            const snappedUv = (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
-                point: snapPoint,
-                points: outline.points,
-                uv: axisLockedUv,
-            });
+            const snappedUv = editorSnapping
+                ? (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                    point: snapPoint,
+                    points: outline.points,
+                    uv: axisLockedUv,
+                })
+                : axisLockedUv;
             const nextUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
                 lockedAxis,
                 startUv: uv,
@@ -293,6 +298,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
+        editorSnapping,
         onDraggingChange,
         outline,
         parsed,
@@ -314,10 +320,11 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         ] }));
 };
 exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
-const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, onTextEditStart, scale, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onTextEditStart, scale, snapTargets, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
     timelinePositionRef.current = timelinePosition;
@@ -358,6 +365,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         let currentPointerY = startPointerY;
         let axisLocked = false;
         let dragStarted = false;
+        let snappingDisabled = event.metaKey || event.ctrlKey;
         const updateDragOverrides = () => {
             const screenDeltaX = currentPointerX - startPointerX;
             const screenDeltaY = currentPointerY - startPointerY;
@@ -370,16 +378,44 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                 }
                 dragStarted = true;
                 onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)('default');
             }
+            const axisLockedDirection = axisLocked
+                ? Math.abs(screenDeltaX) >= Math.abs(screenDeltaY)
+                    ? 'horizontal'
+                    : 'vertical'
+                : null;
             const dragDelta = (0, selected_outline_drag_1.applySelectedOutlineDragAxisLock)({
                 deltaX: screenDeltaX / scale,
                 deltaY: screenDeltaY / scale,
                 axisLocked,
             });
+            let { deltaX, deltaY } = dragDelta;
+            if (editorSnapping && !snappingDisabled) {
+                const snapResult = (0, selected_outline_snap_1.findSelectedOutlineSnap)({
+                    allowX: axisLockedDirection !== 'vertical',
+                    allowY: axisLockedDirection !== 'horizontal',
+                    deltaX,
+                    deltaY,
+                    outlines: selected ? allDragOutlines : [outline],
+                    scale,
+                    targets: snapTargets,
+                });
+                if (snapResult.snapOffsetX !== null) {
+                    deltaX += snapResult.snapOffsetX;
+                }
+                if (snapResult.snapOffsetY !== null) {
+                    deltaY += snapResult.snapOffsetY;
+                }
+                onSnapPointsChange(snapResult.activeSnapPoints);
+            }
+            else {
+                onSnapPointsChange([]);
+            }
             lastValues = (0, selected_outline_drag_1.getSelectedOutlineDragValues)({
                 dragStates,
-                deltaX: dragDelta.deltaX,
-                deltaY: dragDelta.deltaY,
+                deltaX,
+                deltaY,
             });
             for (const dragState of dragStates) {
                 const value = lastValues.get(dragState.key);
@@ -403,6 +439,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
             currentPointerX = moveEvent.clientX;
             currentPointerY = moveEvent.clientY;
             axisLocked = moveEvent.shiftKey;
+            snappingDisabled = moveEvent.metaKey || moveEvent.ctrlKey;
             updateDragOverrides();
         };
         const onKeyChange = (keyEvent) => {
@@ -423,6 +460,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
             }
             const changes = (0, selected_outline_drag_1.getSelectedOutlineDragChanges)({
@@ -474,15 +512,20 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         window.addEventListener('keyup', onKeyChange);
     }, [
         allDragTargets,
+        allDragOutlines,
         clearDragOverrides,
         drag,
+        editorSnapping,
         getDragOverrides,
         onDraggingChange,
         onSelect,
+        onSnapPointsChange,
+        outline,
         scale,
         selected,
         setPropStatuses,
         setDragOverrides,
+        snapTargets,
         target,
     ]);
     const onDoubleClick = react_1.default.useCallback((event) => {
@@ -718,6 +761,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
     timelinePositionRef.current = timelinePosition;
@@ -770,7 +814,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         let lastValues = new Map();
         let dragStarted = false;
         const updateRotationDragOverrides = () => {
-            const rotationDeltaDegrees = rotationLocked
+            const rotationDeltaDegrees = rotationLocked && editorSnapping
                 ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
                     dragStates,
                     rotationDeltaDegrees: accumulatedDelta,
@@ -904,6 +948,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         allRotationDragTargets,
         clearDragOverrides,
         cornerInfo,
+        editorSnapping,
         getDragOverrides,
         onDraggingChange,
         outline.dimensions,
@@ -930,7 +975,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
         ] }));
 };
-const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, scale, snapTargets, target, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
@@ -1114,7 +1159,7 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
         updateResolvedStackTrace,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, snapTargets: snapTargets, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -10,6 +10,8 @@ export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
     readonly targetsByKey: ReadonlyMap<string, SelectedOutlineTarget>;
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
     readonly scale: number;
     readonly translationX: number;
     readonly translationY: number;