@remotion/studio 4.0.504 → 4.0.506

package/dist/components/TopPanel.js

@@ -32,12 +32,10 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const mobile_layout_1 = require("../helpers/mobile-layout");
@@ -48,7 +46,6 @@ const CanvasIfSizeIsAvailable_1 = require("./CanvasIfSizeIsAvailable");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
-const MobilePanel_1 = __importDefault(require("./MobilePanel"));
 const ObserveDefaultPropsContext_1 = require("./ObserveDefaultPropsContext");
 const OptionsPanel_1 = require("./OptionsPanel");
 const PreviewToolbar_1 = require("./PreviewToolbar");
@@ -72,8 +69,12 @@ const MAX_SIDEBAR_WIDTH = 350;
 const MIN_SIDEBAR_WIDTH = 250;
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
     const actualStateLeft = (0, react_1.useMemo)(() => {
+        if (isMobileLayout) {
+            return 'collapsed';
+        }
         if (sidebarCollapsedStateLeft === 'collapsed') {
             return 'collapsed';
         }
@@ -81,7 +82,7 @@ const useResponsiveSidebarStatus = () => {
             return 'expanded';
         }
         return responsiveLeftStatus;
-    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    }, [isMobileLayout, sidebarCollapsedStateLeft, responsiveLeftStatus]);
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
@@ -96,6 +97,21 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
+    const previousSidebarState = (0, react_1.useRef)({
+        left: actualStateLeft,
+        right: actualStateRight,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        if (previousSidebarState.current.left === actualStateLeft &&
+            previousSidebarState.current.right === actualStateRight) {
+            return;
+        }
+        previousSidebarState.current = {
+            left: actualStateLeft,
+            right: actualStateRight,
+        };
+        player_1.PlayerInternals.updateAllElementsSizes();
+    }, [actualStateLeft, actualStateRight]);
     (0, react_1.useEffect)(() => {
         onMounted();
     }, [onMounted]);
@@ -111,11 +127,10 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, minAntiFlexerSize: MIN_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
                                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));

package/dist/components/UpdateCheck.js

@@ -27,7 +27,7 @@ const updateIconContainer = {
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);

package/dist/components/effect-drag-and-drop.js

@@ -33,7 +33,7 @@ exports.addEffectFromDragData = addEffectFromDragData;
 const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
         const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
-        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
+        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
         const result = await (0, call_api_1.callApi)('/api/add-effect', {
             fileName,
             sequenceNodePath: nodePath,

package/dist/components/handle-drop.d.ts

@@ -1,7 +1,7 @@
 import type { Dimensions } from '../helpers/is-current-selected-still';
 import { type InsertElementDropPosition } from './import-assets';
 import type { SvgImportMode } from './SvgImportDialog';
-export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }: {
     chooseSvgImportMode: () => Promise<SvgImportMode | null>;
     compositionFile: string;
     compositionId: string;
@@ -10,4 +10,5 @@ export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compos
     event: DragEvent;
     fps: number;
     from: number | null;
+    preferCompositionStart: boolean;
 }) => Promise<void>;

package/dist/components/handle-drop.js

@@ -6,7 +6,7 @@ const drop_handler_data_1 = require("./drop-handler-data");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
-const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, preferCompositionStart, }) => {
     var _a;
     var _b;
     if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
@@ -28,6 +28,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             files,
             fps,
             from,
+            preferCompositionStart,
             svgImportMode,
         });
         return;
@@ -45,6 +46,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             dropPosition,
             fps,
             from,
+            preferCompositionStart,
         });
         return;
     }
@@ -58,6 +60,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionId,
             fps,
             from,
+            preferCompositionStart,
             url: sfxUrl,
         });
         return;
@@ -73,6 +76,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionId,
             dropPosition,
             from,
+            preferCompositionStart,
         });
         return;
     }
@@ -85,7 +89,11 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionFile,
             compositionId,
             element: element.element,
-            from,
+            from: (0, import_assets_1.getFromForDrop)({
+                durationInFrames: element.element.durationInFrames,
+                from,
+                preferCompositionStart,
+            }),
             position: (0, import_assets_1.getElementPositionForDrop)({
                 dimensions: element.element.dimensions,
                 dropPosition,
@@ -102,6 +110,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             compositionId,
             dropPosition,
             from,
+            preferCompositionStart,
         });
         return;
     }
@@ -116,6 +125,7 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
         dropPosition,
         fps,
         from,
+        preferCompositionStart,
         url: remoteAssetUrl,
     });
 };

package/dist/components/import-assets.d.ts

@@ -5,6 +5,11 @@ export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
 };
+export declare const getFromForDrop: ({ durationInFrames, from, preferCompositionStart, }: {
+    durationInFrames: number | null | undefined;
+    from: number | null;
+    preferCompositionStart: boolean | null;
+}) => number | null;
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
@@ -75,7 +80,7 @@ export declare const getDurationInFrames: ({ durationInSeconds, fps, }: {
 export declare const pickFilesToImport: ({ multiple, }?: {
     readonly multiple?: boolean | undefined;
 }) => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, svgImportMode, }: {
+export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, preferCompositionStart, svgImportMode, }: {
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
@@ -83,6 +88,7 @@ export declare const importAssets: ({ compositionFile, compositionId, destinatio
     files: File[];
     fps: number;
     from: number | null;
+    preferCompositionStart: boolean | null;
     svgImportMode: "image" | "inline";
 }) => Promise<void>;
 export declare const importFigmaClipboard: ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }: {
@@ -99,23 +105,25 @@ export declare const insertSvgMarkup: ({ compositionFile, compositionId, destina
     dropPosition: InsertElementDropPosition | null;
     markup: string;
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, url, }: {
+export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, preferCompositionStart, url, }: {
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     fps: number;
     from: number | null;
+    preferCompositionStart: boolean | null;
     url: string;
 }) => Promise<void>;
-export declare const insertRemoteAudio: ({ compositionFile, compositionId, fps, from, url, }: {
+export declare const insertRemoteAudio: ({ compositionFile, compositionId, fps, from, preferCompositionStart, url, }: {
     compositionFile: string;
     compositionId: string;
     fps: number;
     from: number | null;
+    preferCompositionStart: boolean | null;
     url: string;
 }) => Promise<void>;
-export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, }: {
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, preferCompositionStart, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
@@ -123,8 +131,9 @@ export declare const insertExistingAssets: ({ assetPaths, compositionFile, compo
     dropPosition: InsertElementDropPosition | null;
     fps: number;
     from: number | null;
+    preferCompositionStart: boolean | null;
 }) => Promise<void>;
-export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, from, }: {
+export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, from, preferCompositionStart, }: {
     component: {
         componentName: string;
         dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
@@ -136,13 +145,15 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
+    preferCompositionStart: boolean | null;
 }) => Promise<void>;
-export declare const insertComposition: ({ composition, compositionFile, compositionId, dropPosition, from, }: {
+export declare const insertComposition: ({ composition, compositionFile, compositionId, dropPosition, from, preferCompositionStart, }: {
     composition: CompositionDragData;
     compositionFile: string;
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
     from: number | null;
+    preferCompositionStart: boolean | null;
 }) => Promise<void>;
 export declare const insertElement: ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
     compositionFile: string;
@@ -150,6 +161,7 @@ export declare const insertElement: ({ compositionFile, compositionId, element,
     element: {
         dependencies: import("@remotion/studio-protocol").ElementDependency[];
         durationInFrames?: number | undefined;
+        installationMode?: import("@remotion/studio-protocol").ElementInstallationMode | undefined;
         slug: string;
         displayName: string;
         sourceCode: string;

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.insertSvgMarkup = exports.importFigmaClipboard = exports.importAssets = exports.pickFilesToImport = exports.getDurationInFrames = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.hasSvgFile = exports.getAssetElementForDroppedFile = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.insertSvgMarkup = exports.importFigmaClipboard = exports.importAssets = exports.pickFilesToImport = exports.getDurationInFrames = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.hasSvgFile = exports.getAssetElementForDroppedFile = exports.getAssetElementFromPath = exports.getAssetElement = exports.getFromForDrop = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -11,6 +11,19 @@ const install_required_package_1 = require("../helpers/install-required-package"
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getFromForDrop = ({ durationInFrames, from, preferCompositionStart, }) => {
+    if (preferCompositionStart !== true) {
+        return from;
+    }
+    if (durationInFrames !== null &&
+        durationInFrames !== undefined &&
+        from !== null &&
+        from >= durationInFrames) {
+        return from;
+    }
+    return null;
+};
+exports.getFromForDrop = getFromForDrop;
 const getAssetElement = ({ fileType, src, }) => {
     if (fileType.type === 'webp' && fileType.animated) {
         return {
@@ -496,7 +509,7 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
 const downloadRemoteAsset = (url) => {
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
-const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, svgImportMode, }) => {
+const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, preferCompositionStart, svgImportMode, }) => {
     var _a;
     if (files.length === 0) {
         return;
@@ -534,7 +547,11 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                 const svgInserted = await insertCompositionElement({
                     compositionFile,
                     compositionId,
-                    from,
+                    from: (0, exports.getFromForDrop)({
+                        durationInFrames: null,
+                        from,
+                        preferCompositionStart,
+                    }),
                     element: {
                         type: 'svg',
                         markup: new TextDecoder().decode(contents),
@@ -570,19 +587,24 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                 addedStaticFiles.push(file.name);
             }
             const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : metadata.dimensions;
+            const durationInFrames = assetTypeHasDuration(element.assetType)
+                ? (0, exports.getDurationInFrames)({
+                    durationInSeconds: metadata.durationInSeconds,
+                    fps,
+                })
+                : null;
             const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
-                from,
+                from: (0, exports.getFromForDrop)({
+                    durationInFrames,
+                    from,
+                    preferCompositionStart,
+                }),
                 element: {
                     ...element,
                     dimensions: resolvedDimensions,
-                    durationInFrames: assetTypeHasDuration(element.assetType)
-                        ? (0, exports.getDurationInFrames)({
-                            durationInSeconds: metadata.durationInSeconds,
-                            fps,
-                        })
-                        : null,
+                    durationInFrames,
                     position: (0, exports.getAssetPositionForDrop)({
                         assetDimensions: resolvedDimensions,
                         destinationDimensions,
@@ -663,7 +685,7 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
     }
 };
 exports.insertSvgMarkup = insertSvgMarkup;
-const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, url, }) => {
+const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, preferCompositionStart, url, }) => {
     var _a;
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
@@ -676,19 +698,24 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
         }
         const metadata = await getStaticAssetMetadataOrNull(assetPath, element.assetType);
         const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : metadata.dimensions;
+        const durationInFrames = assetTypeHasDuration(element.assetType)
+            ? (0, exports.getDurationInFrames)({
+                durationInSeconds: metadata.durationInSeconds,
+                fps,
+            })
+            : null;
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
-            from,
+            from: (0, exports.getFromForDrop)({
+                durationInFrames,
+                from,
+                preferCompositionStart,
+            }),
             element: {
                 ...element,
                 dimensions,
-                durationInFrames: assetTypeHasDuration(element.assetType)
-                    ? (0, exports.getDurationInFrames)({
-                        durationInSeconds: metadata.durationInSeconds,
-                        fps,
-                    })
-                    : null,
+                durationInFrames,
                 position: (0, exports.getAssetPositionForDrop)({
                     assetDimensions: dimensions,
                     destinationDimensions,
@@ -706,7 +733,7 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
     }
 };
 exports.importRemoteAsset = importRemoteAsset;
-const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, url, }) => {
+const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, preferCompositionStart, url, }) => {
     if (!(0, studio_shared_1.isUrl)(url)) {
         (0, NotificationCenter_1.showNotification)('Cannot add sound effect: Unsupported URL', 3000);
         return;
@@ -729,7 +756,11 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, ur
             compositionFile,
             compositionId,
             element,
-            from,
+            from: (0, exports.getFromForDrop)({
+                durationInFrames: element.durationInFrames,
+                from,
+                preferCompositionStart,
+            }),
         });
         if (!inserted) {
             return;
@@ -741,7 +772,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, ur
     }
 };
 exports.insertRemoteAudio = insertRemoteAudio;
-const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, }) => {
+const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, preferCompositionStart, }) => {
     var _a;
     if (assetPaths.length === 0) {
         return;
@@ -757,19 +788,24 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
             }
             const metadata = await getStaticAssetMetadataOrNull(assetPath, element.assetType);
             const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : metadata.dimensions;
+            const durationInFrames = assetTypeHasDuration(element.assetType)
+                ? (0, exports.getDurationInFrames)({
+                    durationInSeconds: metadata.durationInSeconds,
+                    fps,
+                })
+                : null;
             const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
-                from,
+                from: (0, exports.getFromForDrop)({
+                    durationInFrames,
+                    from,
+                    preferCompositionStart,
+                }),
                 element: {
                     ...element,
                     dimensions,
-                    durationInFrames: assetTypeHasDuration(element.assetType)
-                        ? (0, exports.getDurationInFrames)({
-                            durationInSeconds: metadata.durationInSeconds,
-                            fps,
-                        })
-                        : null,
+                    durationInFrames,
                     position: (0, exports.getAssetPositionForDrop)({
                         assetDimensions: dimensions,
                         destinationDimensions,
@@ -790,12 +826,16 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     }
 };
 exports.insertExistingAssets = insertExistingAssets;
-const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, from, }) => {
+const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, from, preferCompositionStart, }) => {
     try {
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
-            from,
+            from: (0, exports.getFromForDrop)({
+                durationInFrames: null,
+                from,
+                preferCompositionStart,
+            }),
             element: {
                 type: 'component',
                 componentName: component.componentName,
@@ -825,7 +865,7 @@ const serializeResolvedPropsForSourceCode = (props) => {
         staticBase: window.remotion_staticBase,
     }).serializedString;
 };
-const insertComposition = async ({ composition, compositionFile, compositionId, dropPosition, from, }) => {
+const insertComposition = async ({ composition, compositionFile, compositionId, dropPosition, from, preferCompositionStart, }) => {
     if (composition.compositionId === compositionId) {
         (0, NotificationCenter_1.showNotification)('Cannot add a composition to itself', 3000);
         return;
@@ -847,7 +887,11 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
-            from,
+            from: (0, exports.getFromForDrop)({
+                durationInFrames: calculated.durationInFrames,
+                from,
+                preferCompositionStart,
+            }),
             element: {
                 type: 'composition',
                 compositionId: composition.compositionId,

package/dist/components/selected-outline-types.d.ts

@@ -3,7 +3,7 @@ import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { SelectedOutlineUvHandle } from './selected-outline-uv';
 import type { TimelineSelection } from './Timeline/TimelineSelection';
-export type SelectedOutlineContextMenuOpenResult = false | void | readonly ComboboxValue[];
+export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
 export type SelectedOutlineTarget = {
     readonly key: string;