@remotion/studio 4.0.473 → 4.0.474

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

@@ -9,7 +9,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 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 +17,9 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        codeValues,
+        propStatuses,
     }), [
-        codeValues,
+        propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
@@ -30,14 +30,14 @@ 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,
@@ -46,7 +46,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         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/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;