@remotion/studio 4.0.486 → 4.0.487

package/dist/components/ContextMenu.js

@@ -170,7 +170,8 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
             return;
         }
         if (forwardedRef) {
-            forwardedRef.current = node;
+            forwardedRef.current =
+                node;
         }
     }, [forwardedRef]);
     (0, react_1.useEffect)(() => {

package/dist/components/CurrentComposition.js

@@ -6,6 +6,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const react_2 = require("../icons/react");
+const still_1 = require("../icons/still");
+const video_1 = require("../icons/video");
 const render_frame_1 = require("../state/render-frame");
 const InlineCompositionName_1 = require("./InlineCompositionName");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
@@ -13,8 +16,16 @@ const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 exports.CURRENT_COMPOSITION_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
+const sourceLocationIconStyle = {
+    flexShrink: 0,
+    height: 13,
+    width: 13,
+};
+const renderReactIcon = (color) => {
+    return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });
+};
 const CurrentComposition = () => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -36,6 +47,22 @@ const CurrentComposition = () => {
             source: resolvedCompositionLocation.source,
         };
     }, [resolvedCompositionLocation]);
+    const compositionFile = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionId = (_c = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.id) !== null && _c !== void 0 ? _c : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId,
+    });
+    const componentLocation = (_d = compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.location) !== null && _d !== void 0 ? _d : null;
+    (0, react_1.useEffect)(() => {
+        if (compositionFile === null || compositionId === null) {
+            return;
+        }
+        (0, open_in_editor_1.preloadCompositionComponentInfo)({
+            compositionFile,
+            compositionId,
+        });
+    }, [compositionFile, compositionId]);
     const openFileLocation = (0, react_1.useCallback)(() => {
         if (!validatedLocation) {
             return;
@@ -44,7 +71,21 @@ const CurrentComposition = () => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [validatedLocation]);
+    const openComponentLocation = (0, react_1.useCallback)(() => {
+        if (!componentLocation) {
+            return;
+        }
+        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        });
+    }, [componentLocation]);
+    const renderCompositionIcon = (0, react_1.useCallback)((color) => {
+        if (!video) {
+            return null;
+        }
+        return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
+    }, [video]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_b = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _b !== void 0 ? _b : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/EditorContexts.js

@@ -21,12 +21,13 @@ const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
+const SnappingProvider_1 = require("./SnappingProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: [
                     jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                         ] })
                 ] }) }) }));
 };

package/dist/components/GlobalKeybindings.js

@@ -9,6 +9,7 @@ const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const CompositionSelector_1 = require("./CompositionSelector");
@@ -25,6 +26,7 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -188,6 +190,21 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const shiftMKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'm',
+            callback: (event) => {
+                if (!event.shiftKey) {
+                    return;
+                }
+                setEditorSnapping((current) => !current);
+                event.preventDefault();
+            },
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
         return () => {
             for (const sequencePropKey of sequencePropKeys) {
                 sequencePropKey.unregister();
@@ -198,12 +215,14 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
             pageDown.unregister();
             pageUp.unregister();
+            shiftMKey.unregister();
         };
     }, [
         keybindings,
         openRenderModal,
         selectSequenceProp,
         setCheckerboard,
+        setEditorSnapping,
         setSelectedModal,
         navigateToNextComposition,
         navigateToPreviousComposition,

package/dist/components/InspectorSourceLocation.d.ts

@@ -4,4 +4,5 @@ export declare const InspectorSourceLocation: React.FC<{
     readonly location: OriginalPosition | null;
     readonly canOpen: boolean;
     readonly onOpen: () => void;
+    readonly renderIcon?: (color: string) => React.ReactNode;
 }>;

package/dist/components/InspectorSourceLocation.js

@@ -12,7 +12,9 @@ const sourceLocationStyle = {
     backgroundColor: colors_1.BACKGROUND,
     border: 'none',
     boxSizing: 'border-box',
-    display: 'block',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
     fontFamily: 'sans-serif',
     fontSize: 12,
     height: 18,
@@ -27,7 +29,18 @@ const sourceLocationStyle = {
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
-const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
+const sourceLocationLabelStyle = {
+    color: 'inherit',
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const validLocation = (0, react_1.useMemo)(() => {
         if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
@@ -57,6 +70,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
             cursor: canOpen ? 'pointer' : 'default',
         };
     }, [canOpen, hovered]);
+    const color = hovered ? colors_1.LIGHT_COLOR : colors_1.LIGHT_TEXT;
     const onClick = (0, react_1.useCallback)(() => {
         if (!canOpen) {
             return;
@@ -66,6 +80,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
     if (!label) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: label }));
+    return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
+        ] }));
 };
 exports.InspectorSourceLocation = InspectorSourceLocation;

package/dist/components/KeyboardShortcutsExplainer.js

@@ -102,6 +102,10 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "F" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Enter fullscreen" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Esc" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Exit fullscreen" })
+                                ] }), 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: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "M" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Enable snapping" })
                                 ] })
                         ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 8 }), jsx_runtime_1.jsxs(layout_1.Column, { children: [
                             jsx_runtime_1.jsx("div", { style: title, children: "Navigation" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [

package/dist/components/Preview.js

@@ -122,7 +122,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         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: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+            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 })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {

package/dist/components/PreviewToolbar.js

@@ -23,6 +23,7 @@ const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
+const SnappingToggle_1 = require("./SnappingToggle");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 50;
@@ -165,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(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, {}) })
                 ] })) : 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

@@ -271,6 +271,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
             initialMuted: null,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
+            initialPageResponsiveness: 'medium',
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
     const onClick = (0, react_1.useCallback)(() => {

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

@@ -1,5 +1,15 @@
 import type { AnyRemotionOption } from '@remotion/renderer';
 import React from 'react';
+export type OptionExplainerOption = Pick<AnyRemotionOption<unknown>, 'name' | 'description' | 'docLink' | 'ssrName'> & {
+    readonly cliFlag?: string;
+};
+export type OptionExplainerInfoRow = {
+    readonly label: string;
+    readonly value: string;
+};
 export declare const OptionExplainer: React.FC<{
-    readonly option: AnyRemotionOption<unknown>;
+    readonly option: OptionExplainerOption;
+    readonly extraInfoRows?: readonly OptionExplainerInfoRow[];
+    readonly showApiOption?: boolean;
+    readonly showCliFlag?: boolean;
 }>;

package/dist/components/RenderModal/OptionExplainer.js

@@ -11,6 +11,7 @@ const container = {
     paddingTop: 10,
     paddingBottom: 10,
     backgroundColor: colors_1.INPUT_BACKGROUND,
+    color: colors_1.WHITE,
 };
 const padding = {
     paddingLeft: 20,
@@ -21,7 +22,9 @@ const title = {
 };
 const DESCRIPTION_FONT_SIZE_PX = 14;
 const description = {
+    color: colors_1.LIGHT_TEXT,
     fontSize: DESCRIPTION_FONT_SIZE_PX,
+    lineHeight: 1.5,
     maxWidth: 400,
 };
 const link = {
@@ -51,7 +54,10 @@ const copyWrapper = {
     display: 'flex',
     justifyContent: 'flex-end',
 };
-const OptionExplainer = ({ option }) => {
+const OptionExplainer = ({ option, extraInfoRows = [], showApiOption = true, showCliFlag = true, }) => {
+    const shouldShowApiOption = showApiOption && option.ssrName !== null;
+    const shouldShowCliFlag = showCliFlag && option.cliFlag !== undefined;
+    const hasInfoRows = extraInfoRows.length > 0 || shouldShowCliFlag || shouldShowApiOption;
     return (jsx_runtime_1.jsxs("div", { style: container, className: "__remotion-info-button-container", children: [
             jsx_runtime_1.jsxs("div", { style: padding, children: [
                     jsx_runtime_1.jsxs("div", { children: [
@@ -59,19 +65,33 @@ const OptionExplainer = ({ option }) => {
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })
                                 ] })) : null] }), jsx_runtime_1.jsxs("div", { style: description, children: [
                             jsx_runtime_1.jsx("style", { children: `
-							.__remotion-option-explainer-description a,
-							.__remotion-option-explainer-description code {
+							.__remotion-option-explainer-description,
+							.__remotion-option-explainer-description * {
+								color: inherit;
 								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+								line-height: inherit;
+							}
+
+							.__remotion-option-explainer-description a {
+								color: ${colors_1.BLUE};
+								text-decoration: none;
+							}
+
+							.__remotion-option-explainer-description code {
+								color: ${colors_1.BLUE};
+								font-family: monospace;
 							}
 						` }), jsx_runtime_1.jsx("div", { className: "__remotion-option-explainer-description", children: option.description('ssr') })
                         ] })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [
-                    jsx_runtime_1.jsxs("div", { style: infoRow, children: [
-                            jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })
-                        ] }), option.ssrName ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
-                            jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "Node.JS option" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: option.ssrName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 3.75 })
-                        ] })) : null, jsx_runtime_1.jsx("div", { style: infoRow })
-                ] })
-        ] }));
+                ] }), hasInfoRows ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [extraInfoRows.map((row) => (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: infoRowLabel, children: row.label }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: row.value }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: row.value }) })
+                                ] }, row.label))), shouldShowCliFlag ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })
+                                ] })) : null, shouldShowApiOption ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "API option" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: option.ssrName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 3.75 })
+                                ] })) : null, jsx_runtime_1.jsx("div", { style: infoRow })
+                        ] })
+                ] })) : null] }));
 };
 exports.OptionExplainer = OptionExplainer;

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

@@ -1,4 +1,18 @@
 import type { AvailableOptions } from '@remotion/renderer/client';
+import { type OptionExplainerInfoRow } from './OptionExplainer';
 export declare const OptionExplainerBubble: React.FC<{
-    id: AvailableOptions;
+    readonly id: AvailableOptions;
+    readonly extraInfoRows?: readonly OptionExplainerInfoRow[];
+    readonly showApiOption?: boolean;
+    readonly showCliFlag?: boolean;
+}>;
+export declare const WebRendererOptionExplainerBubble: React.FC<{
+    readonly id: AvailableOptions;
+    readonly apiName: string;
+}>;
+export declare const WebRendererCustomOptionExplainerBubble: React.FC<{
+    readonly apiName: string;
+    readonly description: React.ReactNode;
+    readonly docLink: string | null;
+    readonly name: string;
 }>;

package/dist/components/RenderModal/OptionExplainerBubble.js

@@ -1,12 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionExplainerBubble = void 0;
+exports.WebRendererCustomOptionExplainerBubble = exports.WebRendererOptionExplainerBubble = exports.OptionExplainerBubble = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const InfoBubble_1 = require("./InfoBubble");
 const OptionExplainer_1 = require("./OptionExplainer");
-const OptionExplainerBubble = ({ id }) => {
+const OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag }) => {
     const option = client_1.BrowserSafeApis.options[id];
-    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { option: option }) }));
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: extraInfoRows, option: option, showApiOption: showApiOption, showCliFlag: showCliFlag }) }));
 };
 exports.OptionExplainerBubble = OptionExplainerBubble;
+const WebRendererOptionExplainerBubble = ({ id, apiName }) => {
+    return (jsx_runtime_1.jsx(exports.OptionExplainerBubble, { extraInfoRows: [{ label: 'API option', value: apiName }], id: id, showApiOption: false, showCliFlag: false }));
+};
+exports.WebRendererOptionExplainerBubble = WebRendererOptionExplainerBubble;
+const WebRendererCustomOptionExplainerBubble = ({ apiName, description, docLink, name }) => {
+    const option = {
+        description: () => description,
+        docLink,
+        name,
+        ssrName: null,
+    };
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: [{ label: 'API option', value: apiName }], option: option, showApiOption: false, showCliFlag: false }) }));
+};
+exports.WebRendererCustomOptionExplainerBubble = WebRendererCustomOptionExplainerBubble;

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 {};