@remotion/studio 4.0.522 → 4.0.524

package/dist/components/InspectorPanel/MultiSequenceInspector.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSequenceInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const TimelineRowLayoutContext_1 = require("../Timeline/TimelineRowLayoutContext");
+const common_1 = require("./common");
+const MultiSequenceField_1 = require("./MultiSequenceField");
+const styles_1 = require("./styles");
+const selectionCountStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
+    lineHeight: `${layout_1.COMPACT_CONTROL_ROW_HEIGHT}px`,
+    overflow: 'hidden',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const targets = (0, react_1.useMemo)(() => {
+        const tracks = (0, calculate_timeline_1.calculateTimeline)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+        });
+        const result = [];
+        const seen = new Set();
+        for (const selection of selections) {
+            const key = (0, studio_shared_1.stringifySequenceExpandedRowKey)(selection.nodePathInfo.sequenceSubscriptionKey);
+            const track = tracks.find((candidate) => candidate.nodePathInfo !== null &&
+                (0, studio_shared_1.stringifySequenceExpandedRowKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key &&
+                candidate.nodePathInfo.index === selection.nodePathInfo.index);
+            if (!(track === null || track === void 0 ? void 0 : track.sequence.controls) || !track.nodePathInfo) {
+                return null;
+            }
+            // Multiple rendered instances can share the same editable source.
+            if (seen.has(key)) {
+                continue;
+            }
+            seen.add(key);
+            result.push({
+                nodePath: track.nodePathInfo.sequenceSubscriptionKey,
+                controls: track.sequence.controls,
+            });
+        }
+        return result;
+    }, [overrideIdToNodePathMappings, selections, sequences]);
+    const store = (0, react_1.useMemo)(() => {
+        const stores = (targets !== null && targets !== void 0 ? targets : []).map((target) => target.controls.runtimeValues);
+        let snapshots = stores.map((value) => value.getSnapshot());
+        return {
+            subscribe: (listener) => {
+                const unsubscribes = stores.map((value) => value.subscribe(listener));
+                return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+            },
+            getSnapshot: () => {
+                const next = stores.map((value) => value.getSnapshot());
+                if (next.some((value, index) => value !== snapshots[index])) {
+                    snapshots = next;
+                }
+                return snapshots;
+            },
+        };
+    }, [targets]);
+    const runtimeValues = (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+    const fields = (0, react_1.useMemo)(() => {
+        var _a;
+        const allFields = (targets !== null && targets !== void 0 ? targets : []).map((target, index) => {
+            var _a;
+            return (_a = (0, timeline_layout_1.getFieldsToShow)({
+                schema: target.controls.schema,
+                currentRuntimeValueDotNotation: runtimeValues[index],
+                getDragOverrides,
+                propStatuses,
+                nodePath: target.nodePath,
+                includeTextContent: true,
+            })) !== null && _a !== void 0 ? _a : [];
+        });
+        return ((_a = allFields[0]) !== null && _a !== void 0 ? _a : []).filter((field) => allFields.every((candidate) => candidate.some((other) => other.key === field.key && other.fieldSchema === field.fieldSchema)));
+    }, [getDragOverrides, propStatuses, runtimeValues, targets]);
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { padding: "4px 0", children: jsx_runtime_1.jsxs("div", { style: selectionCountStyle, children: [selections.length, " sequences selected"] }) }), jsx_runtime_1.jsx("div", { role: "separator", style: styles_1.sequenceHeaderDivider }), targets === null ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence controls unavailable" })) : fields.length === 0 ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "No shared controls" })) : (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => {
+                    const groupedFields = fields.filter((field) => field.group === group.id);
+                    return groupedFields.length === 0 ? null : (jsx_runtime_1.jsx(common_1.InspectorSection, { header: group.label, children: groupedFields.map((field) => (jsx_runtime_1.jsx(MultiSequenceField_1.MultiSequenceField, { field: field, targets: targets, readOnlyStudio: readOnlyStudio }, JSON.stringify(targets.map((target) => target.nodePath)) +
+                            field.key))) }, group.id));
+                }) }))] }));
+};
+exports.MultiSequenceInspector = MultiSequenceInspector;

package/dist/components/InspectorPanel/MultiSequenceNumberField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const MultiSequenceNumberField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly values: unknown[];
+    readonly onPreview: (values: unknown[]) => void;
+    readonly onSave: (values: unknown[]) => Promise<void>;
+    readonly onClear: () => void;
+}>;

package/dist/components/InspectorPanel/MultiSequenceNumberField.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSequenceNumberField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const noop_1 = require("../../helpers/noop");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("../Timeline/timeline-field-display-utils");
+const timeline_field_utils_1 = require("../Timeline/timeline-field-utils");
+const timeline_translate_utils_1 = require("../Timeline/timeline-translate-utils");
+const NumericAxis = ({ field, values, axis, onPreview, onSave, onClear }) => {
+    var _a, _b, _c, _d;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const initialValues = (0, react_1.useRef)(null);
+    const coordinates = values.map((value) => {
+        var _a;
+        return axis === null ? Number(value) : ((_a = (0, timeline_translate_utils_1.parseTranslate)(String(value))[axis]) !== null && _a !== void 0 ? _a : 0);
+    });
+    const mixed = coordinates.some((value) => value !== coordinates[0]);
+    const schema = field.fieldSchema;
+    const step = 'step' in schema ? ((_a = schema.step) !== null && _a !== void 0 ? _a : 1) : 1;
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step,
+    });
+    const min = schema.type === 'number' ? ((_b = schema.min) !== null && _b !== void 0 ? _b : -Infinity) : -Infinity;
+    const max = schema.type === 'number' ? ((_c = schema.max) !== null && _c !== void 0 ? _c : Infinity) : Infinity;
+    const nextValues = (value, source) => {
+        var _a, _b;
+        const baseline = (_a = initialValues.current) !== null && _a !== void 0 ? _a : values;
+        const first = axis === null
+            ? Number(baseline[0])
+            : ((_b = (0, timeline_translate_utils_1.parseTranslate)(String(baseline[0]))[axis]) !== null && _b !== void 0 ? _b : 0);
+        return baseline.map((original) => {
+            var _a;
+            const coordinatesForValue = axis === null ? null : (0, timeline_translate_utils_1.parseTranslate)(String(original));
+            const current = coordinatesForValue === null || axis === null
+                ? Number(original)
+                : ((_a = coordinatesForValue[axis]) !== null && _a !== void 0 ? _a : 0);
+            const next = Math.min(max, Math.max(min, source === 'drag'
+                ? (0, timeline_field_utils_1.roundToDecimalPlaces)(current + value - first, Math.max((0, timeline_field_utils_1.getDecimalPlaces)(current), (0, timeline_field_utils_1.getDecimalPlaces)(value), (0, timeline_field_utils_1.getDecimalPlaces)(first)))
+                : value));
+            if (coordinatesForValue === null || axis === null) {
+                return next;
+            }
+            const [x, y, z] = coordinatesForValue;
+            return (0, timeline_translate_utils_1.serializeTranslate)([axis === 0 ? next : x, axis === 1 ? next : y, axis === 2 ? next : z], decimalPlaces);
+        });
+    };
+    const clear = () => {
+        initialValues.current = null;
+        setDragValue(null);
+        onClear();
+    };
+    return (jsx_runtime_1.jsx("span", { onKeyDownCapture: (event) => {
+            if (event.key === 'Escape') {
+                clear();
+            }
+        }, onPointerCancelCapture: clear, onBlurCapture: (event) => {
+            if (event.target instanceof HTMLInputElement &&
+                event.target.value.trim() === '') {
+                clear();
+            }
+        }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : coordinates[0], "aria-label": axis === null
+                ? ((_d = field.description) !== null && _d !== void 0 ? _d : field.key)
+                : `Offset ${['X', 'Y', 'Z'][axis]}`, title: "Type to set all values; drag to adjust each value", status: "ok", small: true, rightAlign: false, min: min, max: max, step: step, snapToStep: axis === null, dragDecimalPlaces: decimalPlaces, dragSensitivity: axis === null ? 1 : 3, buttonStyle: { paddingLeft: 0 }, style: { width: 70 }, formatter: (value) => mixed && dragValue === null
+                ? 'Mixed'
+                : (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({ fieldSchema: schema, value }), onTextChange: noop_1.noop, onValueChange: (value, source) => {
+                var _a;
+                (_a = initialValues.current) !== null && _a !== void 0 ? _a : (initialValues.current = values);
+                setDragValue(value);
+                onPreview(nextValues(value, source));
+            }, onValueChangeEnd: (value, source) => {
+                if (initialValues.current === null) {
+                    return;
+                }
+                onSave(nextValues(value, source)).finally(clear);
+            } }) }));
+};
+const MultiSequenceNumberField = (props) => {
+    const axes = props.field.typeName === 'translate'
+        ? props.values.some((value) => (0, timeline_translate_utils_1.parseTranslate)(String(value))[2] !== null)
+            ? [0, 1, 2]
+            : [0, 1]
+        : [null];
+    return (jsx_runtime_1.jsx("span", { style: { display: 'flex', gap: 4 }, children: axes.map((axis) => (jsx_runtime_1.jsx(NumericAxis, { ...props, axis: axis }, axis !== null && axis !== void 0 ? axis : 'value'))) }));
+};
+exports.MultiSequenceNumberField = MultiSequenceNumberField;

package/dist/components/InspectorPanel.js

@@ -8,6 +8,7 @@ const AssetInspector_1 = require("./InspectorPanel/AssetInspector");
 const common_1 = require("./InspectorPanel/common");
 const CompositionInspector_1 = require("./InspectorPanel/CompositionInspector");
 const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
+const MultiSequenceInspector_1 = require("./InspectorPanel/MultiSequenceInspector");
 const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
 const styles_1 = require("./InspectorPanel/styles");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
@@ -28,6 +29,9 @@ const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setD
         if (sameSequenceInspectorSelection) {
             return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection, readOnlyStudio: readOnlyStudio }) }));
         }
+        if (selectedItems.every((item) => item.type === 'sequence')) {
+            return (jsx_runtime_1.jsx(MultiSequenceInspector_1.MultiSequenceInspector, { selections: selectedItems, readOnlyStudio: readOnlyStudio }));
+        }
         return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsxs(common_1.InspectorMessage, { children: [selectedItems.length, " items selected"] }) }));
     }
     return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0], readOnlyStudio: readOnlyStudio }) }));

package/dist/components/InspectorSequenceSection.js

@@ -213,6 +213,15 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         includeTextContent: true,
         includeSourceControls: true,
     });
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const selectedEffect = selectedItems.length === 1 &&
+        (selectedItems[0].type === 'sequence-effect' ||
+            selectedItems[0].type === 'sequence-effect-prop')
+        ? selectedItems[0]
+        : null;
+    const selectedEffectKey = selectedEffect === null ? null : (0, TimelineSelection_1.getTimelineSelectionKey)(selectedEffect);
+    const selectedEffectRowRef = (0, react_1.useRef)(null);
+    const scrolledEffectKey = (0, react_1.useRef)(null);
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
     const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
@@ -299,6 +308,55 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 }),
         };
     }, [getIsExpanded, tree]);
+    (0, react_1.useEffect)(() => {
+        if (selectedEffectKey === null ||
+            scrolledEffectKey.current === selectedEffectKey) {
+            return;
+        }
+        const rows = (0, timeline_layout_1.flattenVisibleTreeNodes)({
+            nodes: tree,
+            getIsExpanded: () => true,
+        });
+        const targetIndex = rows.findIndex(({ node }) => {
+            const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
+            return (selection !== null &&
+                (0, TimelineSelection_1.getTimelineSelectionKey)(selection) === selectedEffectKey);
+        });
+        if (targetIndex === -1) {
+            return;
+        }
+        const parentKeys = [];
+        let { depth } = rows[targetIndex];
+        for (let i = targetIndex - 1; i >= 0 && depth > 0; i--) {
+            if (rows[i].depth < depth) {
+                parentKeys.push(getInspectorExpansionKey(rows[i].node.nodePathInfo));
+                depth = rows[i].depth;
+            }
+        }
+        setCollapsedKeys((previous) => {
+            if (!parentKeys.some((key) => previous.has(key))) {
+                return previous;
+            }
+            const next = new Set(previous);
+            for (const key of parentKeys) {
+                next.delete(key);
+            }
+            persistInspectorCollapsedKeys(next);
+            return next;
+        });
+    }, [selectedEffectKey, tree]);
+    (0, react_1.useEffect)(() => {
+        if (selectedEffectKey === null) {
+            scrolledEffectKey.current = null;
+            return;
+        }
+        if (scrolledEffectKey.current === selectedEffectKey ||
+            selectedEffectRowRef.current === null) {
+            return;
+        }
+        selectedEffectRowRef.current.scrollIntoView({ block: 'center' });
+        scrolledEffectKey.current = selectedEffectKey;
+    }, [effectRows, selectedEffectKey]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');
@@ -426,11 +484,11 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) === border_radius_representation_1.BORDER_RADIUS_SHORTHAND_KEY;
     });
     const borderRadiusConversion = (0, border_radius_representation_1.getBorderRadiusConversion)(sequencePropStatuses, getDragOverrides(nodePathInfo.sequenceSubscriptionKey));
-    const inlineCaptionValue = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions'
-        ? runtimeValues.captions
-        : null;
-    const inlineCaptions = Array.isArray(inlineCaptionValue)
-        ? inlineCaptionValue
+    const hasCaptionsSchema = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions';
+    const inlineCaptions = hasCaptionsSchema
+        ? Array.isArray(runtimeValues.captions)
+            ? runtimeValues.captions
+            : []
         : null;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const canAddEffect = nodePathInfo.supportsEffects &&
@@ -516,7 +574,12 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (group.id === 'transforms' ? (jsx_runtime_1.jsxs(Transform3DModeContext_1.Transform3DModeContext.Provider, { value: show3DTransformControls, children: [renderTransformControls(), group.rows.map(renderRow)] })) : (group.rows.map(renderRow))) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, expanded: captionsExpanded, nodePath: nodePathInfo.sequenceSubscriptionKey, onToggle: () => toggleAdditionalSection('captions'), readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map((row) => {
+                            const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(row.node.nodePathInfo);
+                            const selected = selection !== null &&
+                                (0, TimelineSelection_1.getTimelineSelectionKey)(selection) === selectedEffectKey;
+                            return (jsx_runtime_1.jsx("div", { ref: selected ? selectedEffectRowRef : null, children: renderRow(row) }, getInspectorExpansionKey(row.node.nodePathInfo)));
+                        }) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
                             ? layoutGroup.rows.map(renderRow)
                             : null }) })) : null] }) }));
 };

package/dist/components/InstallPackage.js

@@ -55,6 +55,7 @@ const layout_1 = require("./layout");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalButton_1 = require("./ModalButton");
 const ModalFooter_1 = require("./ModalFooter");
+const OptionalPackageModal_1 = require("./OptionalPackageModal");
 const container = {
     boxSizing: 'border-box',
     flex: 1,
@@ -103,7 +104,6 @@ const InstallPackageSettings = ({ footerContainer, packageManager }) => {
         });
     });
     const onClick = (0, react_1.useCallback)(async () => {
-        var _a;
         if (state.type === 'done') {
             if (packageManager === null) {
                 setSelectedModal(null);
@@ -116,10 +116,9 @@ const InstallPackageSettings = ({ footerContainer, packageManager }) => {
         setState({ type: 'installing' });
         try {
             await (0, install_package_1.installPackages)(selectedPackageSpecs);
-            window.remotion_installedPackages = Array.from(new Set([
-                ...((_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : []),
-                ...selectedPackages,
-            ]));
+            for (const packageName of selectedPackages) {
+                (0, OptionalPackageModal_1.markOptionalPackageInstalled)(packageName);
+            }
             setState({ type: 'done' });
         }
         catch (err) {