@remotion/studio 4.0.445 → 4.0.447

package/dist/components/AssetSelectorItem.js

@@ -44,6 +44,7 @@ const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
@@ -173,7 +174,16 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const rowRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        (0, sidebar_scroll_into_view_1.maybeScrollAssetSidebarRowIntoView)({
+            element: rowRef.current,
+            assetPath: relativePath,
+            selected,
+        });
+    }, [relativePath, selected]);
     const onClick = (0, react_1.useCallback)(() => {
+        (0, sidebar_scroll_into_view_1.markAssetSidebarScrollFromRowClick)(relativePath);
         setCanvasContent({ type: 'asset', asset: relativePath });
         (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
         if (isMobileLayout) {
@@ -234,7 +244,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [item.name, parentFolder]);
-    return (jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [
+    return (jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, tabIndex: tabIndex, title: item.name, children: [
                 jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), readOnlyStudio ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })

package/dist/components/Canvas.js

@@ -418,6 +418,6 @@ const Canvas = ({ canvasContent, size }) => {
         fetchMetadata();
     }, [fetchMetadata]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasOrLoading.js

@@ -45,7 +45,7 @@ const CanvasOrLoading = ({ size }) => {
         });
     }, [resolved, setZoom]);
     if (renderError) {
-        return jsx_runtime_1.jsx(ErrorLoading, { error: renderError });
+        return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false }));
     }
     if (!canvasContent) {
         const compname = window.location.pathname.replace('/', '');
@@ -65,7 +65,7 @@ const CanvasOrLoading = ({ size }) => {
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }));
     }
     if (resolved.type === 'error') {
-        return jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error });
+        return jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error, calculateMetadataContext: true });
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(FramePersistor_1.FramePersistor, {}),
@@ -80,9 +80,9 @@ const loaderContainer = {
     height: '100%',
     overflowY: 'auto',
 };
-const ErrorLoading = ({ error }) => {
+const ErrorLoading = ({ error, calculateMetadataContext }) => {
     return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => {
                 var _a;
                 return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
-            }, calculateMetadata: true }, error.stack) }));
+            }, calculateMetadata: calculateMetadataContext }, error.stack) }));
 };

package/dist/components/CompositionSelectorItem.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
+const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
@@ -61,6 +62,18 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const compositionRowRef = (0, react_1.useRef)(null);
+    const compositionId = item.type === 'composition' ? item.composition.id : null;
+    (0, react_1.useLayoutEffect)(() => {
+        if (compositionId === null) {
+            return;
+        }
+        (0, sidebar_scroll_into_view_1.maybeScrollCompositionSidebarRowIntoView)({
+            element: compositionRowRef.current,
+            compositionId,
+            selected,
+        });
+    }, [compositionId, selected]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
@@ -77,6 +90,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
+            (0, sidebar_scroll_into_view_1.markCompositionSidebarScrollFromRowClick)(item.composition.id);
             selectComposition(item.composition, true);
         }
         else {
@@ -180,7 +194,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                     })
                     : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/FilePreview.js

@@ -20,6 +20,9 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (assetMetadata.type === 'not-found') {
         throw new Error('expected to have assetMetadata, got "not-found"');
     }
+    if (assetMetadata.type === 'metadata-error') {
+        throw new Error('unexpected metadata-error in FilePreview');
+    }
     if (fileType === 'audio') {
         return jsx_runtime_1.jsx("audio", { src: src, controls: true });
     }

package/dist/components/InitialCompositionLoader.js

@@ -14,7 +14,7 @@ const use_static_files_1 = require("./use-static-files");
 const useSelectAsset = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    return (asset) => {
+    return (0, react_1.useCallback)((asset) => {
         var _a;
         setCanvasContent({ type: 'asset', asset });
         (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectAssetsPanel();
@@ -31,7 +31,7 @@ const useSelectAsset = () => {
             }
             return newState;
         });
-    };
+    }, [setAssetFoldersExpanded, setCanvasContent]);
 };
 exports.useSelectAsset = useSelectAsset;
 const useSelectComposition = () => {
@@ -134,7 +134,7 @@ const InitialCompositionLoader = () => {
                     return file.name === newCanvas.asset;
                 });
                 if (exists) {
-                    setCanvasContent(newCanvas);
+                    selectAsset(newCanvas.asset);
                 }
                 return;
             }
@@ -142,7 +142,13 @@ const InitialCompositionLoader = () => {
         };
         window.addEventListener('popstate', onchange);
         return () => window.removeEventListener('popstate', onchange);
-    }, [compositions, selectComposition, setCanvasContent, staticFiles]);
+    }, [
+        compositions,
+        selectAsset,
+        selectComposition,
+        setCanvasContent,
+        staticFiles,
+    ]);
     return null;
 };
 exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/components/NewComposition/MenuContent.js

@@ -10,6 +10,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
+const menu_typeahead_1 = require("./menu-typeahead");
 const BORDER_SIZE = 1;
 const container = {
     paddingTop: styles_1.MENU_VERTICAL_PADDING,
@@ -26,6 +27,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     const containerRef = (0, react_1.useRef)(null);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
+    const typeaheadQueryRef = (0, react_1.useRef)('');
+    const typeaheadTimeoutRef = (0, react_1.useRef)(null);
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
@@ -38,6 +41,13 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     const onItemSelected = (0, react_1.useCallback)((id) => {
         setSelectedItem(id);
     }, []);
+    const clearTypeahead = (0, react_1.useCallback)(() => {
+        typeaheadQueryRef.current = '';
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    }, []);
     const isItemSelectable = (0, react_1.useCallback)((v) => {
         return v.type !== 'divider' && !v.disabled;
     }, []);
@@ -114,6 +124,35 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
+    const onTypeahead = (0, react_1.useCallback)((event) => {
+        if (event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.key.length !== 1 ||
+            event.key.trim().length === 0) {
+            return;
+        }
+        const { activeElement } = document;
+        if (activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement) {
+            return;
+        }
+        typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+        const matchedId = (0, menu_typeahead_1.findTypeaheadMenuItem)({
+            query: typeaheadQueryRef.current,
+            values,
+        });
+        if (matchedId !== null) {
+            setSelectedItem(matchedId);
+        }
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+        }
+        typeaheadTimeoutRef.current = window.setTimeout(() => {
+            typeaheadQueryRef.current = '';
+            typeaheadTimeoutRef.current = null;
+        }, 700);
+    }, [values]);
     const containerWithHeight = (0, react_1.useMemo)(() => {
         const containerStyles = { ...container };
         if (fixedHeight === null) {
@@ -127,6 +166,25 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
         return containerStyles;
     }, [fixedHeight, isMobileLayout]);
+    (0, react_1.useEffect)(() => {
+        if (!keybindings.isHighestContext ||
+            !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            onTypeahead(event);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            clearTypeahead();
+        };
+    }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearTypeahead();
+        };
+    }, [clearTypeahead]);
     (0, react_1.useEffect)(() => {
         const escapeBinding = keybindings.registerKeybinding({
             event: 'keydown',

package/dist/components/NewComposition/menu-typeahead.d.ts

@@ -0,0 +1,5 @@
+import type { ComboboxValue } from './ComboBox';
+export declare const findTypeaheadMenuItem: ({ query, values, }: {
+    query: string;
+    values: ComboboxValue[];
+}) => string | null;

package/dist/components/NewComposition/menu-typeahead.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findTypeaheadMenuItem = void 0;
+const getLabelToMatch = (value) => {
+    if (value.type === 'divider' || value.disabled) {
+        return null;
+    }
+    if (typeof value.label === 'string') {
+        return value.label;
+    }
+    return null;
+};
+const findTypeaheadMenuItem = ({ query, values, }) => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (normalizedQuery.length === 0) {
+        return null;
+    }
+    const matched = values.find((value) => {
+        const label = getLabelToMatch(value);
+        return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
+    });
+    if (!matched || matched.type === 'divider') {
+        return null;
+    }
+    return matched.id;
+};
+exports.findTypeaheadMenuItem = findTypeaheadMenuItem;

package/dist/components/Preview.d.ts

@@ -10,4 +10,5 @@ export declare const VideoPreview: React.FC<{
     readonly contentDimensions: Dimensions | 'none' | null;
     readonly canvasContent: CanvasContent;
     readonly assetMetadata: AssetMetadata | null;
+    readonly onRetryAssetMetadata?: () => void;
 }>;

package/dist/components/Preview.js

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
 const checkerboard_1 = require("../state/checkerboard");
+const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
 const Spinner_1 = require("./Spinner");
 const StaticFilePreview_1 = require("./StaticFilePreview");
@@ -22,6 +24,14 @@ const label = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
 };
+const assetMetadataErrorContainer = {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '100%',
+    position: 'absolute',
+    height: '100%',
+    overflowY: 'auto',
+};
 const getPreviewFileType = (fileName) => {
     var _a;
     if (!fileName) {
@@ -68,10 +78,13 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
-const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
+const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, onRetryAssetMetadata, }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx("div", { style: label, children: "File does not exist" }) }));
     }
+    if (assetMetadata && assetMetadata.type === 'metadata-error') {
+        return (jsx_runtime_1.jsx("div", { style: assetMetadataErrorContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: assetMetadata.error, onRetry: onRetryAssetMetadata !== null && onRetryAssetMetadata !== void 0 ? onRetryAssetMetadata : null, calculateMetadata: false }, assetMetadata.error.stack) }));
+    }
     if (contentDimensions === null) {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }

package/dist/components/RenderButton.js

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

package/dist/components/RenderModal/OptionExplainer.js

@@ -19,8 +19,9 @@ const padding = {
 const title = {
     fontSize: 14,
 };
+const DESCRIPTION_FONT_SIZE_PX = 14;
 const description = {
-    fontSize: 14,
+    fontSize: DESCRIPTION_FONT_SIZE_PX,
     maxWidth: 400,
 };
 const link = {
@@ -56,7 +57,14 @@ const OptionExplainer = ({ option }) => {
                     jsx_runtime_1.jsxs("div", { children: [
                             jsx_runtime_1.jsx("strong", { style: title, children: option.name }), option.docLink ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     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.jsx("div", { style: description, children: option.description('ssr') })
+                                ] })) : 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 {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						` }), 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 }) })

package/dist/components/RenderModal/WebRenderModal.js

@@ -80,7 +80,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialAllowHtmlInCanvas, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -124,6 +124,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
     const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
     const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
+    const [allowHtmlInCanvas, setAllowHtmlInCanvas] = (0, react_1.useState)(initialAllowHtmlInCanvas !== null && initialAllowHtmlInCanvas !== void 0 ? initialAllowHtmlInCanvas : false);
     const 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)(() => {
@@ -336,6 +337,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey,
                 scale,
+                allowHtmlInCanvas,
             }, compositionRef);
         }
         else {
@@ -362,6 +364,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 logLevel,
                 licenseKey,
                 scale,
+                allowHtmlInCanvas,
             }, compositionRef);
         }
         setSidebarCollapsedState({ left: null, right: 'expanded' });
@@ -402,6 +405,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         addClientStillJob,
         addClientVideoJob,
         scale,
+        allowHtmlInCanvas,
     ]);
     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: [
@@ -426,7 +430,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 })) : (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 })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
                 ] })
         ] }));
 };

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

@@ -8,6 +8,8 @@ type WebRenderModalAdvancedProps = {
     readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly hardwareAcceleration: 'no-preference' | 'prefer-hardware' | 'prefer-software';
     readonly setHardwareAcceleration: (value: 'no-preference' | 'prefer-hardware' | 'prefer-software') => void;
+    readonly allowHtmlInCanvas: boolean;
+    readonly setAllowHtmlInCanvas: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export declare const WebRenderModalAdvanced: React.FC<WebRenderModalAdvancedProps>;
 export {};

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -13,7 +13,7 @@ const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
 const tabContainer = {
     flex: 1,
 };
-const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, }) => {
+const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRenderTimeout, mediaCacheSizeInBytes, setMediaCacheSizeInBytes, hardwareAcceleration, setHardwareAcceleration, allowHtmlInCanvas, setAllowHtmlInCanvas, }) => {
     const toggleCustomMediaCacheSizeInBytes = (0, react_1.useCallback)(() => {
         setMediaCacheSizeInBytes((previous) => {
             if (previous === null) {
@@ -22,6 +22,9 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             return null;
         });
     }, [setMediaCacheSizeInBytes]);
+    const toggleAllowHtmlInCanvas = (0, react_1.useCallback)(() => {
+        setAllowHtmlInCanvas((prev) => !prev);
+    }, [setAllowHtmlInCanvas]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -77,6 +80,11 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
                 ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
-                ] })) : null] }));
+                ] })) : 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("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: allowHtmlInCanvas, onChange: toggleAllowHtmlInCanvas, name: "allow-html-in-canvas" }) })
+                ] })
+        ] }));
 };
 exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -25,7 +25,7 @@ const ClientRenderQueueProcessor = () => {
         if (!compositionRef) {
             throw new Error(`Composition not found for job ${job.id}`);
         }
-        const { blob } = await (0, web_renderer_1.renderStillOnWeb)({
+        const blob = await (await (0, web_renderer_1.renderStillOnWeb)({
             composition: {
                 component: compositionRef.component,
                 width: compositionRef.width,
@@ -37,7 +37,6 @@ const ClientRenderQueueProcessor = () => {
                 id: job.compositionId,
             },
             frame: job.frame,
-            imageFormat: job.imageFormat,
             inputProps: job.inputProps,
             delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
             mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
@@ -45,7 +44,8 @@ const ClientRenderQueueProcessor = () => {
             licenseKey: (_b = job.licenseKey) !== null && _b !== void 0 ? _b : undefined,
             scale: job.scale,
             signal,
-        });
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
+        })).blob({ format: job.imageFormat });
         return {
             getBlob: () => Promise.resolve(blob),
             width: compositionRef.width,
@@ -97,6 +97,7 @@ const ClientRenderQueueProcessor = () => {
             },
             outputTarget: 'web-fs',
             licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
+            allowHtmlInCanvas: job.allowHtmlInCanvas,
         });
         return {
             getBlob,

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

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

package/dist/components/Timeline/TimelineListItem.js

@@ -48,7 +48,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
+    const { nodePath, jsxInMapCallback } = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -64,6 +64,34 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+    const duplicateDisabled = deleteDisabled;
+    const onDuplicateSequenceFromSource = (0, react_1.useCallback)(async () => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+            return;
+        }
+        if (jsxInMapCallback) {
+            const message = 'This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?';
+            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
+            if (!window.confirm(message)) {
+                return;
+            }
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
+                fileName: validatedLocation.source,
+                nodePath,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Duplicated sequence in source file', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [jsxInMapCallback, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
@@ -89,6 +117,23 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             return [];
         }
         return [
+            {
+                type: 'item',
+                id: 'duplicate-sequence',
+                keyHint: null,
+                label: 'Duplicate',
+                leftItem: null,
+                disabled: duplicateDisabled,
+                onClick: () => {
+                    if (duplicateDisabled) {
+                        return;
+                    }
+                    onDuplicateSequenceFromSource();
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'duplicate-sequence',
+            },
             {
                 type: 'item',
                 id: 'delete-sequence',
@@ -107,7 +152,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
                 value: 'delete-sequence',
             },
         ];
-    }, [deleteDisabled, onDeleteSequenceFromSource, visualModeEnvEnabled]);
+    }, [
+        deleteDisabled,
+        duplicateDisabled,
+        onDeleteSequenceFromSource,
+        onDuplicateSequenceFromSource,
+        visualModeEnvEnabled,
+    ]);
     const isExpanded = visualModeActive && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,4 +1,7 @@
 import type { SequenceNodePath } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null, visualModeEnabled: boolean) => SequenceNodePath | null;
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null, visualModeEnabled: boolean) => {
+    nodePath: SequenceNodePath | null;
+    jsxInMapCallback: boolean;
+};