@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/update-selected-easing.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = void 0;
+const remotion_1 = require("remotion");
+const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
+const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
+    interpolationFunction === 'interpolateColors';
+const isEasingSelection = (selection) => selection.type === 'easing';
+const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a;
+    var _b, _c, _d;
+    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+    if (field === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    const sequence = (_b = track === null || track === void 0 ? void 0 : track.sequence) !== null && _b !== void 0 ? _b : null;
+    if (!sequence) {
+        return null;
+    }
+    const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+    const fileName = nodePath.absolutePath;
+    if (field.type === 'sequence') {
+        if (!sequence.controls) {
+            return null;
+        }
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
+        if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
+            !canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction)) {
+            return null;
+        }
+        return {
+            type: 'sequence',
+            fileName,
+            nodePath,
+            fieldKey: field.fieldKey,
+            schema: sequence.controls.schema,
+            segmentIndex: selection.segmentIndex,
+            currentEasing: (_c = sequencePropStatus.easing[selection.segmentIndex]) !== null && _c !== void 0 ? _c : 'linear',
+        };
+    }
+    const effect = sequence.effects[field.effectIndex];
+    if (!effect) {
+        return null;
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: field.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? effectStatus.props[field.fieldKey]
+        : null;
+    if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
+        !canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction)) {
+        return null;
+    }
+    return {
+        type: 'effect',
+        fileName,
+        nodePath,
+        effectIndex: field.effectIndex,
+        fieldKey: field.fieldKey,
+        schema: effect.schema,
+        segmentIndex: selection.segmentIndex,
+        currentEasing: (_d = effectPropStatus.easing[selection.segmentIndex]) !== null && _d !== void 0 ? _d : 'linear',
+    };
+};
+const getEasingSelections = (selections) => selections.filter(isEasingSelection);
+exports.getEasingSelections = getEasingSelections;
+const getTimelineEasingValueForSelection = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a;
+    var _b;
+    return ((_b = (_a = getSelectedEasingUpdate({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    })) === null || _a === void 0 ? void 0 : _a.currentEasing) !== null && _b !== void 0 ? _b : null);
+};
+exports.getTimelineEasingValueForSelection = getTimelineEasingValueForSelection;
+const updateSelectedTimelineEasings = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, easing, }) => {
+    const easingSelections = (0, exports.getEasingSelections)(selections);
+    if (easingSelections.length === 0) {
+        return null;
+    }
+    const updates = easingSelections
+        .map((selection) => getSelectedEasingUpdate({
+        selection,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }))
+        .filter((update) => update !== null);
+    if (updates.length === 0) {
+        return null;
+    }
+    return Promise.all(updates.map((update) => {
+        const settings = {
+            type: 'easing',
+            segmentIndex: update.segmentIndex,
+            easing,
+        };
+        if (update.type === 'sequence') {
+            return (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                fileName: update.fileName,
+                nodePath: update.nodePath,
+                fieldKey: update.fieldKey,
+                settings,
+                schema: update.schema,
+                setPropStatuses,
+                clientId,
+            });
+        }
+        return (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+            fileName: update.fileName,
+            nodePath: update.nodePath,
+            effectIndex: update.effectIndex,
+            fieldKey: update.fieldKey,
+            settings,
+            schema: update.schema,
+            setPropStatuses,
+            clientId,
+        });
+    })).then(() => undefined);
+};
+exports.updateSelectedTimelineEasings = updateSelectedTimelineEasings;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts

@@ -4,6 +4,7 @@ import type { getTimelineKeyframes } from './get-timeline-keyframes';
 export type ExpandedTrackKeyframeRow = {
     readonly height: number;
     readonly keyframes: ReturnType<typeof getTimelineKeyframes>;
+    readonly canEditEasing: boolean;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly rowKey: string;
 };

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -7,9 +7,32 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
+const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
+    interpolationFunction === 'interpolateColors';
+const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
+    var _a;
+    if (node.kind !== 'field' || node.field === null) {
+        return false;
+    }
+    if (node.field.kind === 'sequence-field') {
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key];
+        return ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) === 'keyframed' &&
+            canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction));
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: node.field.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? effectStatus.props[node.field.key]
+        : null;
+    return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
+        canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction));
+};
 const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
@@ -17,9 +40,9 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        codeValues,
+        propStatuses,
     }), [
-        codeValues,
+        propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
@@ -30,23 +53,28 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         sequence,
         nodePathInfo,
         getIsExpanded,
-        codeValues,
-    }), [codeValues, getIsExpanded, nodePathInfo, sequence]);
+        propStatuses,
+    }), [propStatuses, getIsExpanded, nodePathInfo, sequence]);
     const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => ({
         height: (0, timeline_layout_1.getTreeRowHeight)(node),
         keyframes: (0, get_node_keyframes_1.getNodeKeyframes)({
             node,
             nodePath: nodePathInfo.sequenceSubscriptionKey,
-            codeValues,
+            propStatuses,
             keyframeDisplayOffset,
             getDragOverrides,
             getEffectDragOverrides,
             timelinePosition,
         }),
+        canEditEasing: getNodeCanEditEasing({
+            node,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            propStatuses,
+        }),
         rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
         nodePathInfo: node.nodePathInfo,
     })), [
-        codeValues,
+        propStatuses,
         flat,
         getDragOverrides,
         getEffectDragOverrides,

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -9,7 +9,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
     var _a, _b, _c;
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
@@ -57,7 +57,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
                 if (!result.success) {
                     return;
                 }
-                setCodeValues(result.nodePath, () => result.status);
+                setPropStatuses(result.nodePath, () => result.status);
             },
             applyEach: (result) => {
                 var _a;
@@ -93,7 +93,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
         migrateExpandedTracksForSubscriptionKey,
         overrideId,
         schema,
-        setCodeValues,
+        setPropStatuses,
         setOverrideIdToNodePath,
     ]);
 };

package/dist/components/Timeline/use-timeline-height.js

@@ -11,7 +11,7 @@ const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const previewServerConnected = previewServerState.type === 'connected';
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
@@ -25,7 +25,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     sequence: track.sequence,
                     nodePathInfo: track.nodePathInfo,
                     getIsExpanded,
-                    codeValues,
+                    propStatuses,
                 }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                 : 0;
             return acc + layerHeight + expandedHeight;
@@ -34,6 +34,6 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
             TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
-    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, codeValues]);
+    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, propStatuses]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -15,8 +15,8 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const pointerDragThreshold = 3;
 const isKeyframeSelection = (selection) => selection.type === 'keyframe';
-const getCodeValueForTarget = ({ codeValues, nodePath, }) => codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
-const getTimelineKeyframeDragTarget = ({ codeValues, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
+const getCodeValueForTarget = ({ propStatuses, nodePath, }) => propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
+const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
     var _a, _b;
     const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
     if (field === null) {
@@ -34,7 +34,7 @@ const getTimelineKeyframeDragTarget = ({ codeValues, displayFrame, nodePathInfo,
     const sourceFrame = displayFrame - ((_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0);
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
     const fileName = nodePath.absolutePath;
-    const sequenceStatus = getCodeValueForTarget({ codeValues, nodePath });
+    const sequenceStatus = getCodeValueForTarget({ propStatuses, nodePath });
     if (!(sequenceStatus === null || sequenceStatus === void 0 ? void 0 : sequenceStatus.canUpdate)) {
         return null;
     }
@@ -187,10 +187,10 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { clearDragOverrides, clearEffectDragOverrides, setCodeValues, setDragOverrides, setEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { clearDragOverrides, clearEffectDragOverrides, setPropStatuses, setDragOverrides, setEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { clearDraggedKeyframes, setDraggedKeyframes } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
     return (0, react_1.useCallback)((e) => {
@@ -223,13 +223,15 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
         let dragTargets = null;
         let hasDragged = false;
         let lastDelta = 0;
+        const propStatuses = propStatusesRef.current;
+        const sequences = sequencesRef.current;
         const resolveDragTargets = () => {
             if (dragTargets !== null) {
                 return dragTargets;
             }
             dragTargets = keyframesToDrag
                 .map((keyframe) => getTimelineKeyframeDragTarget({
-                codeValues,
+                propStatuses,
                 displayFrame: keyframe.frame,
                 nodePathInfo: keyframe.nodePathInfo,
                 overrideIdsToNodePaths: overrideIdToNodePathMappings,
@@ -341,7 +343,7 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                     toFrame: target.sourceFrame + lastDelta,
                     schema: target.schema,
                 })),
-                setCodeValues,
+                setPropStatuses,
                 clientId: previewServerState.clientId,
             }).catch(() => undefined);
         };
@@ -357,17 +359,17 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
         clearDragOverrides,
         clearEffectDragOverrides,
         clearDraggedKeyframes,
-        codeValues,
         currentSelection,
         frame,
         nodePathInfo,
         onSelect,
         overrideIdToNodePathMappings,
+        propStatusesRef,
         previewServerState,
         selectable,
         selected,
-        sequences,
-        setCodeValues,
+        sequencesRef,
+        setPropStatuses,
         setDragOverrides,
         setDraggedKeyframes,
         setEffectDragOverrides,

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

@@ -0,0 +1 @@
+export declare const CANVAS_CAPTURE_ENABLED = false;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CANVAS_CAPTURE_ENABLED = void 0;
+exports.CANVAS_CAPTURE_ENABLED = false;

package/dist/components/effect-drag-and-drop.d.ts

@@ -0,0 +1,11 @@
+import { type EffectDragData } from '@remotion/studio-shared';
+import type { SequencePropsSubscriptionKey } from 'remotion';
+export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
+export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;
+export declare const getEffectDragData: (dataTransfer: DataTransfer) => EffectDragData | null;
+export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nodePath, }: {
+    readonly clientId: string;
+    readonly dragData: EffectDragData;
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}) => Promise<void>;

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const install_required_package_1 = require("../helpers/install-required-package");
+const call_api_1 = require("./call-api");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const hasEffectDragType = (dataTransfer) => {
+    const types = Array.from(dataTransfer.types);
+    const hasExplicitEffectType = types.includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
+    if (!hasExplicitEffectType && hasImportableAssetDragType(dataTransfer)) {
+        return false;
+    }
+    return types.some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE || isGenericDragType(type));
+};
+exports.hasEffectDragType = hasEffectDragType;
+const hasExplicitEffectDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
+};
+exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
+const isGenericDragType = (type) => {
+    return type === 'application/json' || type === 'text/plain';
+};
+const hasImportableAssetDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => type === 'Files' ||
+        type === studio_shared_1.ASSET_DRAG_MIME_TYPE ||
+        type === studio_shared_1.COMPONENT_DRAG_MIME_TYPE ||
+        type === studio_shared_1.SFX_DRAG_MIME_TYPE ||
+        type === 'text/uri-list' ||
+        type === 'text/html');
+};
+const getEffectDragData = (dataTransfer) => {
+    for (const type of [
+        studio_shared_1.EFFECT_DRAG_MIME_TYPE,
+        'application/json',
+        'text/plain',
+    ]) {
+        const value = dataTransfer.getData(type);
+        if (!value) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseEffectDragData)(value);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+};
+exports.getEffectDragData = getEffectDragData;
+const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }) => {
+    try {
+        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
+        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
+        const result = await (0, call_api_1.callApi)('/api/add-effect', {
+            fileName,
+            sequenceNodePath: nodePath,
+            effectName: dragData.effect.name,
+            effectImportPath: dragData.effect.importPath,
+            effectConfig: dragData.effect.config,
+            clientId,
+        });
+        if (result.success) {
+            (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
+        }
+        else {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+    }
+    catch (err) {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    }
+};
+exports.addEffectFromDragData = addEffectFromDragData;

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

@@ -15,8 +15,23 @@ export declare const importRemoteAsset: ({ compositionFile, compositionId, url,
     compositionId: string;
     url: string;
 }) => Promise<void>;
+export declare const insertRemoteAudio: ({ compositionFile, compositionId, url, }: {
+    compositionFile: string;
+    compositionId: string;
+    url: string;
+}) => Promise<void>;
 export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
 }) => Promise<void>;
+export declare const insertComponent: ({ component, compositionFile, compositionId, }: {
+    component: {
+        componentName: string;
+        importName: string;
+        importPath: string;
+        props: import("@remotion/studio-shared").ComponentProp[];
+    };
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<void>;

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertExistingAssets = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
@@ -16,6 +16,7 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'image',
             src,
+            srcType: 'static',
             dimensions: fileType.dimensions,
         };
     }
@@ -24,6 +25,7 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'gif',
             src,
+            srcType: 'static',
             dimensions: fileType.dimensions,
         };
     }
@@ -35,6 +37,7 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'video',
             src,
+            srcType: 'static',
             dimensions: null,
         };
     }
@@ -46,6 +49,7 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'audio',
             src,
+            srcType: 'static',
             dimensions: null,
         };
     }
@@ -66,6 +70,7 @@ const getAssetElementFromPath = (assetPath) => {
             type: 'asset',
             assetType: 'image',
             src: assetPath,
+            srcType: 'static',
             dimensions: null,
         };
     }
@@ -74,6 +79,7 @@ const getAssetElementFromPath = (assetPath) => {
             type: 'asset',
             assetType: 'gif',
             src: assetPath,
+            srcType: 'static',
             dimensions: null,
         };
     }
@@ -82,6 +88,7 @@ const getAssetElementFromPath = (assetPath) => {
             type: 'asset',
             assetType: 'video',
             src: assetPath,
+            srcType: 'static',
             dimensions: null,
         };
     }
@@ -90,6 +97,7 @@ const getAssetElementFromPath = (assetPath) => {
             type: 'asset',
             assetType: 'audio',
             src: assetPath,
+            srcType: 'static',
             dimensions: null,
         };
     }
@@ -114,6 +122,9 @@ const getAssetLabel = (element) => {
     }
     throw new Error('Unsupported asset type');
 };
+const getComponentLabel = (component) => {
+    return `<${component.componentName}>`;
+};
 const pickFilesToImport = () => {
     return new Promise((resolve) => {
         const input = document.createElement('input');
@@ -261,6 +272,34 @@ const importRemoteAsset = async ({ compositionFile, compositionId, url, }) => {
     }
 };
 exports.importRemoteAsset = importRemoteAsset;
+const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
+    if (!(0, studio_shared_1.isUrl)(url)) {
+        (0, NotificationCenter_1.showNotification)('Cannot add sound effect: Unsupported URL', 3000);
+        return;
+    }
+    const element = {
+        type: 'asset',
+        assetType: 'audio',
+        src: url,
+        srcType: 'remote',
+        dimensions: null,
+    };
+    try {
+        const inserted = await insertAssetElement({
+            compositionFile,
+            compositionId,
+            element,
+        });
+        if (!inserted) {
+            return;
+        }
+        notifyInsertedAssets([getAssetLabel(element)]);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add sound effect: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertRemoteAudio = insertRemoteAudio;
 const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, }) => {
     if (assetPaths.length === 0) {
         return;
@@ -292,3 +331,26 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     }
 };
 exports.insertExistingAssets = insertExistingAssets;
+const insertComponent = async ({ component, compositionFile, compositionId, }) => {
+    try {
+        const inserted = await insertAssetElement({
+            compositionFile,
+            compositionId,
+            element: {
+                type: 'component',
+                componentName: component.componentName,
+                importName: component.importName,
+                importPath: component.importPath,
+                props: component.props,
+            },
+        });
+        if (!inserted) {
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(`Added ${getComponentLabel(component)} to source file`, 2000);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add component: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertComponent = insertComponent;

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

@@ -0,0 +1,20 @@
+export type OutlinePoint = {
+    readonly x: number;
+    readonly y: number;
+};
+export type SelectedOutline = {
+    readonly key: string;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly points: readonly [
+        OutlinePoint,
+        OutlinePoint,
+        OutlinePoint,
+        OutlinePoint
+    ];
+};
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const mix: (from: number, to: number, progress: number) => number;
+export declare const mixPoint: (from: OutlinePoint, to: OutlinePoint, progress: number) => OutlinePoint;

package/dist/components/selected-outline-geometry.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mixPoint = exports.mix = exports.clamp = void 0;
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+exports.clamp = clamp;
+const mix = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+exports.mix = mix;
+const mixPoint = (from, to, progress) => {
+    return {
+        x: (0, exports.mix)(from.x, to.x, progress),
+        y: (0, exports.mix)(from.y, to.y, progress),
+    };
+};
+exports.mixPoint = mixPoint;