@remotion/studio 4.0.505 → 4.0.507

package/dist/components/get-open-in-menu-items.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOpenInMenuItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editor_1 = require("../icons/editor");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, }) => {
+    var _a, _b;
+    const editors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+        .filter((editor) => editor.id !== excludeEditorId)
+        .map((editor) => ({
+        disabled: editorDisabled,
+        id: `open-in-${editor.id}`,
+        keyHint: null,
+        label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
+        leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: 18 }),
+        onClick: () => {
+            if (!editorDisabled) {
+                onOpenInEditor(editor.id);
+            }
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: editor.id,
+    }));
+    const codingAgents = ((_b = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _b !== void 0 ? _b : [])
+        .filter((codingAgent) => codingAgent.id !== excludeCodingAgentId)
+        .map((codingAgent) => ({
+        id: `open-in-coding-agent-${codingAgent.id}`,
+        keyHint: null,
+        label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
+        leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { iconDataUrl: codingAgent.iconDataUrl }),
+        onClick: () => onOpenInCodingAgent(codingAgent.id, codingAgent.nameWithType),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value: `coding-agent-${codingAgent.id}`,
+    }));
+    return [
+        ...(editors.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'editors-header',
+                    label: 'Editors',
+                },
+                ...editors,
+            ]
+            : []),
+        ...(codingAgents.length > 0
+            ? [
+                {
+                    type: 'section-header',
+                    id: 'agents-header',
+                    label: 'Agents',
+                },
+                ...codingAgents,
+            ]
+            : []),
+        ...(editors.length > 0 || codingAgents.length > 0
+            ? [{ type: 'divider', id: 'open-in-settings-divider' }]
+            : []),
+        {
+            id: 'change-default-apps',
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Change default apps..." }),
+            leftItem: null,
+            onClick: onConfigureApps,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'change-default-apps',
+        },
+    ];
+};
+exports.getOpenInMenuItems = getOpenInMenuItems;

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-measurement.d.ts

@@ -1,6 +1,6 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
-import type { SelectedOutlineTarget, SequenceWithSelectedOutline } from './selected-outline-types';
+import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
 import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
@@ -75,6 +75,6 @@ export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideI
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
     readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
+export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
 export {};

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

@@ -0,0 +1,12 @@
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineLayoutTarget } from './selected-outline-types';
+type OutlineSequenceParent = {
+    readonly id: string;
+    readonly parent: string | null;
+};
+export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
+    readonly outlines: readonly SelectedOutline[];
+    readonly sequences: readonly OutlineSequenceParent[];
+    readonly targetsByKey: ReadonlyMap<string, SelectedOutlineLayoutTarget>;
+}) => readonly SelectedOutline[];
+export {};