@remotion/studio 4.0.486 → 4.0.488

package/dist/components/Canvas.js

@@ -19,6 +19,8 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const call_api_1 = require("./call-api");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
@@ -29,6 +31,31 @@ const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const elementInstallCompositionIdStyle = {
+    fontFamily: 'monospace',
+    fontSize: 13,
+};
+const elementInstallCodeDetailsStyle = {
+    marginTop: 12,
+    fontSize: 13,
+};
+const elementInstallCodeSummaryStyle = {
+    cursor: 'pointer',
+    fontSize: 13,
+    fontWeight: 500,
+};
+const elementInstallCodeBlockStyle = {
+    marginTop: 8,
+    marginBottom: 0,
+    maxHeight: 240,
+    overflow: 'auto',
+    padding: 12,
+    borderRadius: 6,
+    backgroundColor: 'rgba(255, 255, 255, 0.06)',
+    fontSize: 12,
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+};
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -183,12 +210,20 @@ const Canvas = ({ canvasContent, size }) => {
     const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewServerClientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const [installingElementName, setInstallingElementName] = (0, react_1.useState)(null);
+    const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
+    const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
+    const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -204,12 +239,12 @@ const Canvas = ({ canvasContent, size }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canDropAssets = previewServerState.type === 'connected' &&
+    const canInstallElements = previewServerClientId !== null &&
         !window.remotion_isReadOnlyStudio &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
-        compositionFile !== null &&
-        !isAddingAsset;
+        compositionFile !== null;
+    const canDropAssets = canInstallElements && !isAddingAsset;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
             canvasContent.type === 'output' ||
@@ -576,6 +611,123 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
+    const updateElementInstallTarget = (0, react_1.useCallback)(() => {
+        if (previewServerClientId === null) {
+            return;
+        }
+        (0, call_api_1.callApi)('/api/update-element-install-target', {
+            clientId: previewServerClientId,
+            compositionFile: canInstallElements ? compositionFile : null,
+            compositionId: canInstallElements ? currentCompositionId : null,
+            canInstall: canInstallElements,
+            lastFocusedAt: lastFocusedAtRef.current,
+            readOnly: window.remotion_isReadOnlyStudio,
+        }).catch(() => undefined);
+    }, [
+        canInstallElements,
+        compositionFile,
+        currentCompositionId,
+        previewServerClientId,
+    ]);
+    (0, react_1.useEffect)(() => {
+        updateElementInstallTarget();
+        const interval = window.setInterval(updateElementInstallTarget, 2000);
+        return () => {
+            window.clearInterval(interval);
+        };
+    }, [updateElementInstallTarget]);
+    (0, react_1.useEffect)(() => {
+        const markFocused = () => {
+            lastFocusedAtRef.current = Date.now();
+            updateElementInstallTarget();
+        };
+        window.addEventListener('focus', markFocused);
+        document.addEventListener('pointerdown', markFocused, { capture: true });
+        return () => {
+            window.removeEventListener('focus', markFocused);
+            document.removeEventListener('pointerdown', markFocused, { capture: true });
+        };
+    }, [updateElementInstallTarget]);
+    (0, react_1.useEffect)(() => {
+        if (installingElementName === null) {
+            return;
+        }
+        const previousTitle = document.title;
+        document.title = `📦 Install ${installingElementName} - Remotion Studio`;
+        return () => {
+            document.title = previousTitle;
+        };
+    }, [installingElementName]);
+    (0, react_1.useEffect)(() => {
+        if (previewServerClientId === null) {
+            return;
+        }
+        return subscribeToEvent('element-install-request', (event) => {
+            if (event.type !== 'element-install-request' ||
+                event.request.clientId !== previewServerClientId) {
+                return;
+            }
+            setPendingElementInstallRequests((requests) => [
+                ...requests,
+                event.request,
+            ]);
+        });
+    }, [previewServerClientId, subscribeToEvent]);
+    (0, react_1.useEffect)(() => {
+        if (activeElementInstallRequest !== null ||
+            pendingElementInstallRequests.length === 0) {
+            return;
+        }
+        const [nextRequest, ...remainingRequests] = pendingElementInstallRequests;
+        if (!nextRequest) {
+            throw new Error('Expected pending Element install request');
+        }
+        setActiveElementInstallRequest(nextRequest);
+        setPendingElementInstallRequests(remainingRequests);
+    }, [activeElementInstallRequest, pendingElementInstallRequests]);
+    (0, react_1.useEffect)(() => {
+        if (activeElementInstallRequest === null) {
+            return;
+        }
+        let canceled = false;
+        const handleInstallRequest = async () => {
+            setInstallingElementName(activeElementInstallRequest.element.displayName);
+            const accepted = await confirm({
+                title: 'Install Element',
+                message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Install \u201C", activeElementInstallRequest.element.displayName, "\u201D into", ' ', jsx_runtime_1.jsx("code", { style: elementInstallCompositionIdStyle, children: activeElementInstallRequest.compositionId }), ' ', "composition? This will create an Element source file and update the composition source.",
+                        jsx_runtime_1.jsxs("details", { style: elementInstallCodeDetailsStyle, children: [
+                                jsx_runtime_1.jsx("summary", { style: elementInstallCodeSummaryStyle, children: "Preview Element source" }), jsx_runtime_1.jsx("pre", { style: elementInstallCodeBlockStyle, children: jsx_runtime_1.jsx("code", { children: activeElementInstallRequest.element.sourceCode }) })
+                            ] })
+                    ] })),
+                confirmLabel: 'Install',
+                cancelLabel: 'Cancel',
+            });
+            if (accepted && !canceled) {
+                await (0, import_assets_1.insertElement)({
+                    element: activeElementInstallRequest.element,
+                    compositionFile: activeElementInstallRequest.compositionFile,
+                    compositionId: activeElementInstallRequest.compositionId,
+                    dropPosition: null,
+                });
+            }
+        };
+        handleInstallRequest()
+            .finally(() => {
+            if (canceled) {
+                return;
+            }
+            setInstallingElementName(null);
+            setActiveElementInstallRequest(null);
+        })
+            .catch((err) => {
+            setTimeout(() => {
+                throw err;
+            }, 0);
+        });
+        return () => {
+            canceled = true;
+        };
+    }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         if (!canDropAssets ||
             (!isFileDragEvent(event) &&

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/InspectorPanel/DefaultInspector.js

@@ -4,6 +4,7 @@ exports.DefaultInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const CurrentAsset_1 = require("../CurrentAsset");
 const CurrentComposition_1 = require("../CurrentComposition");
@@ -27,7 +28,7 @@ const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, se
     const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
     const compositionId = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : null;
-    const hasVisualControls = Object.keys(visualControlHandles).length > 0;
+    const hasVisualControls = interactivity_enabled_1.studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
     (0, react_1.useEffect)(() => {
         setDefaultPropsMode('schema');
     }, [compositionId]);

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;