@remotion/studio 4.0.516 → 4.0.517

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -1,7 +1,7 @@
 export { canEditEasingForInterpolationFunction } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusEasing, DragOverrideValue, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
-import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
+import type { TimelineEasingSelection } from './TimelineSelection';
 export type EasingSelection = TimelineEasingSelection;
 export type TimelineEasingValue = CanUpdateSequencePropStatusEasing;
 export type SelectedEasingUpdate = {
@@ -27,7 +27,7 @@ export type SelectedEasingUpdate = {
 export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";
-        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+        readonly nodePathInfo: import("@remotion/canvas").SequenceNodePathInfo;
         readonly fromFrame: number;
         readonly toFrame: number;
         readonly segmentIndex: number;
@@ -37,7 +37,7 @@ export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideI
     propStatuses: PropStatuses;
 }) => SelectedEasingUpdate | null;
 export declare const getSelectedEasingUpdates: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
@@ -47,9 +47,9 @@ export declare const makeEasingDragOverride: ({ status, segmentIndex, easing, }:
     readonly segmentIndex: number;
     readonly easing: CanUpdateSequencePropStatusEasing;
 }) => DragOverrideValue;
-export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
+export declare const getEasingSelections: (selections: readonly import("@remotion/canvas").CanvasSelectionItem[]) => {
     readonly type: "easing";
-    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+    readonly nodePathInfo: import("@remotion/canvas").SequenceNodePathInfo;
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly segmentIndex: number;
@@ -57,7 +57,7 @@ export declare const getEasingSelections: (selections: readonly TimelineSelectio
 export declare const getTimelineEasingValueForSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";
-        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
+        readonly nodePathInfo: import("@remotion/canvas").SequenceNodePathInfo;
         readonly fromFrame: number;
         readonly toFrame: number;
         readonly segmentIndex: number;
@@ -67,7 +67,7 @@ export declare const getTimelineEasingValueForSelection: ({ selection, sequences
     propStatuses: PropStatuses;
 }) => CanUpdateSequencePropStatusEasing | null;
 export declare const updateSelectedTimelineEasings: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, easing, }: {
-    selections: readonly TimelineSelection[];
+    selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses;

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -6,6 +6,8 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const modals_1 = require("../../state/modals");
+const canvas_capture_drop_1 = require("../canvas-capture-drop");
 const drop_handler_data_1 = require("../drop-handler-data");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
@@ -30,6 +32,7 @@ const useTimelineAssetDrop = () => {
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
@@ -96,6 +99,25 @@ const useTimelineAssetDrop = () => {
             !isEventInsideElement(event, timeline)) {
             return;
         }
+        const localFiles = (0, drop_handler_data_1.isFileDragEvent)(event)
+            ? Array.from(dataTransfer.files)
+            : null;
+        if (localFiles !== null && !window.remotion_isReadOnlyStudio) {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsAddingAsset(true);
+            try {
+                if (await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({
+                    files: localFiles,
+                    setSelectedModal,
+                })) {
+                    return;
+                }
+            }
+            finally {
+                setIsAddingAsset(false);
+            }
+        }
         if ((0, effect_drag_and_drop_1.getEffectDragData)(dataTransfer) !== null) {
             event.preventDefault();
             return;
@@ -132,7 +154,7 @@ const useTimelineAssetDrop = () => {
                 event,
                 fps: videoConfig.fps,
                 from: frame,
-                localFiles: null,
+                localFiles,
                 preferCompositionStart: false,
             });
         }
@@ -146,6 +168,7 @@ const useTimelineAssetDrop = () => {
         compositionFile,
         currentCompositionId,
         getDropFrame,
+        setSelectedModal,
         videoConfig,
     ]);
     const clearAssetDropFrame = (0, react_1.useCallback)(() => {

package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts

@@ -1,10 +1,9 @@
 import type React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineDraggedKeyframe } from './TimelineKeyframeDragState';
-import { type TimelineSelection, type TimelineSelectionInteraction } from './TimelineSelection';
 export declare const getKeyframesForTimelineEasingDrag: ({ currentSelections, interaction, selectionItem, selected, }: {
-    readonly currentSelections: readonly TimelineSelection[];
-    readonly interaction: TimelineSelectionInteraction;
+    readonly currentSelections: readonly import("@remotion/canvas").CanvasSelectionItem[];
+    readonly interaction: import("@remotion/canvas").CanvasSelectionInteraction;
     readonly selectionItem: {
         readonly type: "easing";
         readonly nodePathInfo: SequenceNodePathInfo;
@@ -22,18 +21,18 @@ export declare const getKeyframesForTimelineEasingDrag: ({ currentSelections, in
 })[];
 export declare const getTimelineSelectionsAfterEasingKeyframeDrag: ({ delta, selections, targets, }: {
     readonly delta: number;
-    readonly selections: readonly TimelineSelection[];
+    readonly selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly targets: readonly TimelineDraggedKeyframe[];
-}) => TimelineSelection[];
+}) => import("@remotion/canvas").CanvasSelectionItem[];
 export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
     readonly frame: number;
     readonly nodePathInfo: SequenceNodePathInfo;
-    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly selectable: boolean;
     readonly selected: boolean;
 }) => (e: React.PointerEvent<HTMLButtonElement>) => void;
 export declare const useTimelineEasingKeyframeDrag: ({ onSelect, selectable, selected, selectionItem, }: {
-    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly selectable: boolean;
     readonly selected: boolean;
     readonly selectionItem: {

package/dist/components/canvas-capture-drop.d.ts

@@ -0,0 +1,4 @@
+export declare const handleCanvasCaptureDrop: ({ files, setSelectedModal, }: {
+    readonly files: readonly File[];
+    readonly setSelectedModal: import("react").Dispatch<import("react").SetStateAction<import("../state/modals").ModalState | null>>;
+}) => Promise<boolean>;

package/dist/components/canvas-capture-drop.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCanvasCaptureDrop = void 0;
+const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
+const handleCanvasCaptureDrop = async ({ files, setSelectedModal, }) => {
+    if (files.length !== 1) {
+        return false;
+    }
+    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(files[0]);
+    if (canvasCapture === null) {
+        return false;
+    }
+    setSelectedModal({
+        type: 'new-comp',
+        canvasCapture,
+        folderName: null,
+        parentName: null,
+        stack: null,
+    });
+    return true;
+};
+exports.handleCanvasCaptureDrop = handleCanvasCaptureDrop;

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

@@ -1,7 +1,6 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
 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;
 export declare const getOutlineCenter: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => OutlinePoint;
@@ -47,18 +46,18 @@ export declare const cropOutlinePoints: (points: readonly [OutlinePoint, Outline
     readonly top: number;
     readonly bottom: number;
 }) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-export declare const getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
-export declare const getSequenceKeysContainingSelection: (selectedItems: readonly TimelineSelection[]) => Set<string>;
+export declare const getSelectedSequenceKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
+export declare const getSequenceKeysContainingSelection: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
-}) => TimelineSelectionInteraction;
+}) => import("@remotion/canvas").CanvasSelectionInteraction;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
 };
-export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly TimelineSelection[]) => Map<string, Map<number, SelectedEffectFields>>;
+export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Map<string, Map<number, SelectedEffectFields>>;
 type SelectedTransformOriginInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
@@ -71,9 +70,9 @@ export type SelectedCropInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
-export declare const getSelectedCropInfo: (selectedItems: readonly TimelineSelection[]) => SelectedCropInfo | null;
-export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSelectedRotationInfo: (selectedItems: readonly TimelineSelection[]) => SelectedRotationInfo | null;
+export declare const getSelectedCropInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedCropInfo | null;
+export declare const getSelectedTransformOriginInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedTransformOriginInfo | null;
+export declare const getSelectedRotationInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedRotationInfo | null;
 export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;