@remotion/studio 4.0.518 → 4.0.520

package/dist/components/CompositionSelectorItem.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_protocol_1 = require("@remotion/studio-protocol");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
+const composition_drag_data_1 = require("./composition-drag-data");
 const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const CompositionOrStillIcon_1 = require("./CompositionOrStillIcon");
@@ -39,7 +39,6 @@ const itemStyle = {
     borderRadius: 4,
     width: 'calc(100% - 12px)',
     textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
 };
@@ -64,13 +63,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         return false;
     }, [item, currentComposition]);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragHovered, setDragHovered] = (0, react_1.useState)(false);
     const compositionRowRef = (0, react_1.useRef)(null);
@@ -86,22 +78,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         });
     }, [compositionId, selected]);
     const style = (0, react_1.useMemo)(() => {
+        const idleBackground = dragHovered
+            ? colors_1.WHITE_ALPHA_12
+            : selected
+                ? colors_1.WHITE_ALPHA_06
+                : colors_1.TRANSPARENT;
         return {
             ...itemStyle,
-            backgroundColor: dragHovered
-                ? colors_1.WHITE_ALPHA_12
-                : hovered || selected
-                    ? colors_1.WHITE_ALPHA_06
-                    : colors_1.TRANSPARENT,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground,
+                hoverBackground: dragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.WHITE_ALPHA_06,
+                idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
             paddingLeft: 12 + level * 8,
         };
-    }, [dragHovered, hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
+    }, [dragHovered, level, selected]);
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
@@ -162,8 +154,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        const dragData = studio_protocol_1.StudioProtocolInternals.makeDragData({
-            type: 'composition',
+        const dragData = (0, composition_drag_data_1.makeCompositionDragData)({
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
             width: (_b = item.composition.width) !== null && _b !== void 0 ? _b : null,
@@ -176,10 +167,9 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         setIsDragging(false);
     }, []);
     const onFolderDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             return;
         }
         event.preventDefault();
@@ -192,10 +182,9 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         setDragHovered(false);
     }, []);
     const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
             return;
         }
         event.preventDefault();
@@ -207,11 +196,10 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
-        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
+        const compositionDragData = (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer);
+        if (compositionDragData === null) {
             return;
         }
-        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         clearRootDragHover();
@@ -235,7 +223,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                symbolicatedStack: (0, composition_drag_data_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             if (result.success) {
                 notification.dismiss();
@@ -253,13 +241,13 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.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.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
                             ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, 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, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.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, { getItems: getContextMenuItems, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ConfigureLicenseModal.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 layout_1 = require("./layout");
+const LicenseExplanation_1 = require("./LicenseExplanation");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -28,16 +29,12 @@ const description = {
     lineHeight: 1.5,
     margin: 0,
 };
-const descriptionLink = {
-    color: colors_1.WHITE,
+const externalDescriptionLink = {
+    color: colors_1.BLUE,
     fontFamily: 'sans-serif',
     fontSize: 14,
     lineHeight: '21px',
 };
-const externalDescriptionLink = {
-    ...descriptionLink,
-    color: colors_1.BLUE,
-};
 const externalLinkIndicator = {
     display: 'inline-block',
     height: 12,
@@ -45,32 +42,6 @@ const externalLinkIndicator = {
     verticalAlign: -2,
     width: 12,
 };
-const licenseExplanation = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-};
-const licenseExplanationRow = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-};
-const people = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(4, 9px)',
-    gap: 3,
-    flexShrink: 0,
-};
-const person = {
-    display: 'block',
-    height: 24,
-    overflow: 'visible',
-    width: 9,
-};
-const PersonIcon = ({ handsUp, opacity }) => {
-    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
-            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
-};
 const freeLicenseMessage = {
     ...description,
     marginBottom: 5,
@@ -199,22 +170,7 @@ const LicenseSettings = () => {
     });
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
-                jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
-                        jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
-                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
-                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
-                                    ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
-                                        "."] })
-                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
-                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
-                            ] })
-                    ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
+                jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
                                 jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsxs("a", { style: externalDescriptionLink, href: "https://remotion.pro/license", target: "_blank", rel: "noopener noreferrer", children: ["remotion.pro/license",
                                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.BLUE, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })

package/dist/components/CurrentAsset.js

@@ -215,7 +215,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                             jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                         ] })) : null, fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
         ] }));

package/dist/components/CurrentCompositionSideEffects.js

@@ -4,10 +4,12 @@ exports.TitleUpdater = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const document_title_1 = require("../helpers/document-title");
+const modals_1 = require("../state/modals");
 const context_1 = require("./RenderQueue/context");
 const TitleUpdater = () => {
     const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectedModal = (0, react_1.useContext)(modals_1.SelectedModalContext);
     const { jobs } = renderQueue;
     (0, react_1.useEffect)(() => {
         if (!canvasContent) {
@@ -31,6 +33,9 @@ const TitleUpdater = () => {
     (0, react_1.useEffect)(() => {
         (0, document_title_1.setRenderJobs)(jobs);
     }, [jobs]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setCurrentModal)(selectedModal);
+    }, [selectedModal]);
     return null;
 };
 exports.TitleUpdater = TitleUpdater;

package/dist/components/ElementInstallConfirmation.d.ts

@@ -1,18 +1,10 @@
 import React from 'react';
+import type { ElementInstallModalState } from '../state/modals';
 export declare const ElementLibraryAddConfirmation: React.FC<{
     readonly displayName: string | null;
     readonly origin: string;
     readonly url: string;
 }>;
 export declare const ElementInstallConfirmation: React.FC<{
-    readonly displayName: string;
-    readonly sourceLabel: string;
-    readonly sourceIsUnverified: boolean;
-    readonly compositionId: string;
-    readonly filePath: string;
-    readonly overwritesExistingFile: boolean;
-    readonly dependenciesToReview: string[];
-    readonly missingPackages: string[];
-    readonly sourceCode: string;
-    readonly usesBrowserDependencyResolution: boolean;
+    readonly state: ElementInstallModalState;
 }>;