@remotion/studio 4.0.470 → 4.0.471

package/dist/components/ContextMenu.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const ContextMenu: React.FC<{
+type ContextMenuProps = {
     readonly children: React.ReactNode;
     readonly values: ComboboxValue[];
     readonly onOpen: (() => void) | null;
-}>;
+    readonly style?: React.CSSProperties;
+    readonly className?: string;
+    readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+};
+export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ContextMenu.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
@@ -14,13 +47,20 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const ContextMenu = ({ children, values, onOpen }) => {
+exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        return {};
-    }, []);
+    const setRef = (0, react_1.useCallback)((node) => {
+        ref.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+            return;
+        }
+        if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -93,12 +133,12 @@ const ContextMenu = ({ children, values, onOpen }) => {
         setOpened({ type: 'not-open' });
     }, []);
     // Prevent deselection of a selected item
-    const onPointerDown = (0, react_1.useCallback)((e) => {
+    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, onContextMenu: () => false, style: style, children: children }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
-};
-exports.ContextMenu = ContextMenu;
+});
+exports.ContextMenu.displayName = 'ContextMenu';

package/dist/components/Preview.js

@@ -72,6 +72,7 @@ const containerStyle = (options) => {
         width: options.width,
         height: options.height,
         display: 'flex',
+        overflow: 'hidden',
         position: 'absolute',
         backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(options.checkerboard),
         backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(options.checkerboard),
@@ -122,7 +123,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
             position: 'absolute',
             left: centerX - previewSize.translation.x,
             top: centerY - previewSize.translation.y,
-            overflow: 'hidden',
+            overflow: canvasContent.type === 'composition' ? 'visible' : 'hidden',
             justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
             alignItems: canvasContent.type === 'asset' &&
                 (0, exports.getPreviewFileType)(canvasContent.asset) === 'audio'

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,10 +1,25 @@
 import React from 'react';
+import type { CanUpdateSequencePropStatusTrue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import { type TimelineSelection } from './Timeline/TimelineSelection';
 type OutlinePoint = {
     readonly x: number;
     readonly y: number;
 };
 type UvCoordinate = readonly [number, number];
+type SelectedOutlineDragTarget = {
+    readonly codeValue: CanUpdateSequencePropStatusTrue;
+    readonly clientId: string;
+    readonly fieldDefault: string | undefined;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: SequenceSchema;
+};
+export type SelectedOutlineDragState = {
+    readonly defaultValue: string | null;
+    readonly key: string;
+    readonly startX: number;
+    readonly startY: number;
+    readonly target: SelectedOutlineDragTarget;
+};
 export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
 export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
 type SelectedEffectFields = {
@@ -12,6 +27,22 @@ type SelectedEffectFields = {
     fieldKeys: Set<string>;
 };
 export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly TimelineSelection[]) => Map<string, Map<number, SelectedEffectFields>>;
+export declare const getSelectedOutlineDragValues: ({ dragStates, deltaX, deltaY, }: {
+    readonly dragStates: readonly SelectedOutlineDragState[];
+    readonly deltaX: number;
+    readonly deltaY: number;
+}) => Map<string, string>;
+export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineDragState[];
+    readonly lastValues: ReadonlyMap<string, string>;
+}) => {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    value: string;
+    defaultValue: string | null;
+    schema: SequenceSchema;
+}[];
 export declare const SelectedOutlineOverlay: React.FC<{
     readonly scale: number;
 }>;

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.getSelectedEffectFieldsBySequenceKey = exports.getUvCoordinateForPoint = exports.getUvHandlePosition = void 0;
+exports.SelectedOutlineOverlay = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineDragValues = exports.getSelectedEffectFieldsBySequenceKey = exports.getUvCoordinateForPoint = exports.getUvHandlePosition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -41,6 +41,7 @@ const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const save_effect_prop_1 = require("./Timeline/save-effect-prop");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
@@ -394,14 +395,73 @@ const outlinesAreEqual = (a, b) => {
     }
     return true;
 };
-const SelectedOutlinePolygon = ({ outline, scale, target }) => {
+const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, }) => {
+    return dragTargets.map((target) => {
+        var _a;
+        const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[translateFieldKey];
+        const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: target.codeValue,
+            dragOverrideValue,
+            defaultValue: target.fieldDefault,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+        const [startX, startY] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
+        return {
+            defaultValue: target.fieldDefault !== undefined
+                ? JSON.stringify(target.fieldDefault)
+                : null,
+            key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            startX,
+            startY,
+            target,
+        };
+    });
+};
+const getSelectedOutlineDragValues = ({ dragStates, deltaX, deltaY, }) => {
+    return new Map(dragStates.map((dragState) => [
+        dragState.key,
+        (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX + deltaX, dragState.startY + deltaY),
+    ]));
+};
+exports.getSelectedOutlineDragValues = getSelectedOutlineDragValues;
+const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
+    return dragStates.flatMap((dragState) => {
+        const value = lastValues.get(dragState.key);
+        if (value === undefined) {
+            return [];
+        }
+        const stringifiedValue = JSON.stringify(value);
+        const shouldSave = value !== dragState.target.codeValue.codeValue &&
+            !(dragState.defaultValue === stringifiedValue &&
+                dragState.target.codeValue.codeValue === undefined);
+        if (!shouldSave) {
+            return [];
+        }
+        return [
+            {
+                fileName: dragState.target.nodePath.absolutePath,
+                nodePath: dragState.target.nodePath,
+                fieldKey: translateFieldKey,
+                value,
+                defaultValue: dragState.defaultValue,
+                schema: dragState.target.schema,
+            },
+        ];
+    });
+};
+exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+const clearSelectedOutlineDragOverrides = ({ clearDragOverrides, dragStates, }) => {
+    for (const dragState of dragStates) {
+        clearDragOverrides(dragState.target.nodePath);
+    }
+};
+const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
     var _a;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const points = (0, react_1.useMemo)(() => outline.points.map(pointToString).join(' '), [outline.points]);
     const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== null && _a !== void 0 ? _a : null;
     const onPointerDown = react_1.default.useCallback((event) => {
-        var _a;
         if (event.button !== 0 || drag === null) {
             return;
         }
@@ -409,55 +469,57 @@ const SelectedOutlinePolygon = ({ outline, scale, target }) => {
         event.stopPropagation();
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
-        const dragOverrideValue = ((_a = getDragOverrides(drag.nodePath)) !== null && _a !== void 0 ? _a : {})[translateFieldKey];
-        const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: drag.codeValue,
-            dragOverrideValue,
-            defaultValue: drag.fieldDefault,
-            shouldResortToDefaultValueIfUndefined: true,
+        const dragStates = getSelectedOutlineDragStates({
+            dragTargets: allDragTargets,
+            getDragOverrides,
         });
-        const [startX, startY] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
-        const defaultValue = drag.fieldDefault !== undefined
-            ? JSON.stringify(drag.fieldDefault)
-            : null;
-        let lastValue = null;
+        let lastValues = new Map();
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
-            const nextX = startX + (moveEvent.clientX - startPointerX) / scale;
-            const nextY = startY + (moveEvent.clientY - startPointerY) / scale;
-            lastValue = (0, timeline_translate_utils_1.serializeTranslate)(nextX, nextY);
-            setDragOverrides(drag.nodePath, translateFieldKey, lastValue);
+            lastValues = (0, exports.getSelectedOutlineDragValues)({
+                dragStates,
+                deltaX: (moveEvent.clientX - startPointerX) / scale,
+                deltaY: (moveEvent.clientY - startPointerY) / scale,
+            });
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected drag value to be available');
+                }
+                setDragOverrides(dragState.target.nodePath, translateFieldKey, value);
+            }
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
-            const stringifiedValue = lastValue === null ? null : JSON.stringify(lastValue);
-            const shouldSave = lastValue !== null &&
-                lastValue !== drag.codeValue.codeValue &&
-                !(defaultValue === stringifiedValue &&
-                    drag.codeValue.codeValue === undefined);
-            if (!shouldSave) {
-                clearDragOverrides(drag.nodePath);
+            const changes = (0, exports.getSelectedOutlineDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                clearSelectedOutlineDragOverrides({ clearDragOverrides, dragStates });
                 return;
             }
-            (0, save_sequence_prop_1.saveSequenceProp)({
-                fileName: drag.nodePath.absolutePath,
-                nodePath: drag.nodePath,
-                fieldKey: translateFieldKey,
-                value: lastValue,
-                defaultValue,
-                schema: drag.schema,
+            (0, save_sequence_prop_1.saveSequenceProps)({
+                changes,
                 setCodeValues,
                 clientId: drag.clientId,
-            }).finally(() => {
-                clearDragOverrides(drag.nodePath);
+                undoLabel: changes.length > 1 ? 'Move selected sequences' : null,
+                redoLabel: changes.length > 1 ? 'Move selected sequences back' : null,
+            })
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                clearSelectedOutlineDragOverrides({ clearDragOverrides, dragStates });
             });
         };
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerUp);
     }, [
+        allDragTargets,
         clearDragOverrides,
         drag,
         getDragOverrides,
@@ -611,6 +673,9 @@ const SelectedOutlineOverlay = ({ scale }) => {
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(selectedOutlineTargets.map((target) => [target.key, target]));
     }, [selectedOutlineTargets]);
+    const allDragTargets = (0, react_1.useMemo)(() => {
+        return selectedOutlineTargets.flatMap((target) => target.drag === null ? [] : [target.drag]);
+    }, [selectedOutlineTargets]);
     (0, react_1.useEffect)(() => {
         if (selectedOutlineTargets.length === 0) {
             setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
@@ -639,7 +704,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
     return (jsx_runtime_1.jsx("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: outlines.map((outline) => {
             var _a;
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                    jsx_runtime_1.jsx(SelectedOutlinePolygon, { outline: outline, scale: scale, target: targetsByKey.get(outline.key) }), (_a = targetsByKey.get(outline.key)) === null || _a === void 0 ? void 0 : _a.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))] }, outline.key));
+                    jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, outline: outline, scale: scale, target: targetsByKey.get(outline.key) }), (_a = targetsByKey.get(outline.key)) === null || _a === void 0 ? void 0 : _a.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))] }, outline.key));
         }) }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/Timeline/Timeline.js

@@ -41,7 +41,11 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
@@ -63,6 +67,7 @@ const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_resolved_stack_1 = require("./use-resolved-stack");
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -73,7 +78,25 @@ const container = {
 };
 const noop = () => undefined;
 const TimelineClearSelectionArea = ({ children }) => {
+    var _a, _b;
     const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
+    const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (currentCompositionId === null) {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, currentCompositionId]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId: currentCompositionId,
+    });
     // Selection-triggering click handlers in children call e.stopPropagation(),
     // so any pointerdown that bubbles up here is by definition on empty space
     // and should clear the current selection.
@@ -83,7 +106,59 @@ const TimelineClearSelectionArea = ({ children }) => {
         }
         clearSelection();
     }, [clearSelection]);
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
+    const canInsertSolid = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        videoConfig !== null &&
+        !isAddingSolid;
+    const insertSolid = (0, react_1.useCallback)(async () => {
+        if (!canInsertSolid ||
+            currentCompositionId === null ||
+            compositionFile === null ||
+            videoConfig === null) {
+            return;
+        }
+        setIsAddingSolid(true);
+        try {
+            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+                compositionFile,
+                compositionId: currentCompositionId,
+                element: {
+                    type: 'solid',
+                    width: videoConfig.width,
+                    height: videoConfig.height,
+                },
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
+                return;
+            }
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+        finally {
+            setIsAddingSolid(false);
+        }
+    }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    const contextMenuItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'insert-solid',
+                label: 'Add <Solid>',
+                value: 'insert-solid',
+                onClick: insertSolid,
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                disabled: !canInsertSolid,
+            },
+        ];
+    }, [insertSolid, canInsertSolid]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
 };
 const TimelineInner = () => {
     var _a;

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -7,12 +7,14 @@ const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
+const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -29,6 +31,18 @@ const TimelineDeleteKeybindings = () => {
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
+                    selections: selectedItems,
+                    sequences,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    codeValues,
+                    setCodeValues,
+                    clientId,
+                });
+                if (resetPromise !== null) {
+                    resetPromise.catch(() => undefined);
+                    return;
+                }
                 const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
                     selections: selectedItems,
                     sequences,
@@ -74,6 +88,7 @@ const TimelineDeleteKeybindings = () => {
         };
     }, [
         canSelect,
+        codeValues,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,

package/dist/components/Timeline/TimelineDragHandler.js

@@ -125,6 +125,7 @@ const TimelineDragHandlerInner = () => {
         if (!videoConfig) {
             return;
         }
+        e.stopPropagation();
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         const frame = (0, timeline_scroll_logic_1.getFrameFromX)({