@remotion/studio 4.0.514 → 4.0.515

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -26,6 +26,7 @@ const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
+exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = colors_1.BACKGROUND;
 exports.TIMELINE_HOVER_BACKGROUND = colors_1.WHITE_ALPHA_05;
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND = colors_1.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR;
 exports.TIMELINE_SELECTED_LABEL_TEXT = colors_1.BLACK;
@@ -60,9 +61,9 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor =
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
-const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, hovered, }) => {
+const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }) => {
     if (showSelectedBackground && (selected || containsSelection)) {
-        return exports.TIMELINE_SELECTED_BACKGROUND;
+        return selectedBackground;
     }
     return hovered ? exports.TIMELINE_HOVER_BACKGROUND : undefined;
 };
@@ -1134,7 +1135,7 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
     return containsSelection(nodePathInfo);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
-const useTimelineRowHighlightBackground = (nodePathInfo, hovered = false) => {
+const useTimelineRowHighlightBackground = (nodePathInfo, { hovered, selectedBackground, }) => {
     const { selected } = (0, exports.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, exports.useTimelineRowContainsSelection)(nodePathInfo);
     return (0, exports.getTimelineRowHighlightBackground)({
@@ -1142,6 +1143,7 @@ const useTimelineRowHighlightBackground = (nodePathInfo, hovered = false) => {
         selected,
         containsSelection,
         hovered,
+        selectedBackground,
     });
 };
 exports.useTimelineRowHighlightBackground = useTimelineRowHighlightBackground;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
@@ -83,6 +84,7 @@ const labelContainerStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
     display: 'flex',
+    flex: 1,
     flexDirection: 'row',
     minWidth: 0,
 };
@@ -184,6 +186,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const canMutateEffects = previewConnected && (0, interactivity_enabled_1.isStudioSelectionEnabled)() && (0, browser_studio_operations_1.canUseEffectOperations)();
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
@@ -620,7 +623,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         setIsRenaming(true);
     }, [canRenameThisSequence]);
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
-        previewInteractive &&
+        canMutateEffects &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
     const canCrop = (0, use_runtime_values_1.useRuntimeValueSelector)({
         controls: sequence.controls,
@@ -850,7 +853,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const canDropEffect = previewInteractive &&
+    const canDropEffect = canMutateEffects &&
         nodePath !== null &&
         validatedLocation !== null &&
         ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
@@ -908,9 +911,9 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, isFieldRow: false, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, isFieldRow: false, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : null, numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
                     ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),

package/dist/components/Timeline/TimelineSequenceName.js

@@ -24,7 +24,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             alignSelf: 'stretch',
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
-            flexShrink: 0,
+            flexShrink: 1,
             fontFamily: 'inherit',
             fontSize: 12,
             lineHeight: 'normal',

package/dist/components/Timeline/TimelineTrack.js

@@ -52,7 +52,10 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(track.nodePathInfo);
-    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo, hovered);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo, {
+        hovered,
+        selectedBackground: TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND,
+    });
     const layerStyle = (0, react_1.useMemo)(() => ({
         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -61,6 +61,7 @@ const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE *
 const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, sourceOffsetInFrames, tiledLoop, playbackRate, volume, doesVolumeChange, muted, frozenMediaFrame, extendLastFrame, }) => {
     var _a, _b;
     const { fps } = (0, remotion_1.useVideoConfig)();
+    const resolvedSrc = remotion_1.Internals.usePreload(src);
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
@@ -143,7 +144,7 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
                     timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
                     return [times.timestampInSeconds];
                 },
-                src,
+                src: resolvedSrc,
                 onVideoSample: (sample) => {
                     let frame;
                     try {
@@ -274,7 +275,7 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
                     .filter((timestamp) => filledSlots.get(timestamp) === undefined)
                     .map((timestamp) => timestamp / timeline_utils_1.WEBCODECS_TIMESCALE);
             },
-            src,
+            src: resolvedSrc,
             onVideoSample: (sample) => {
                 let frame;
                 try {
@@ -356,6 +357,7 @@ const TimelineVideoInfoSegment = ({ src, visualizationWidth, startMediaFrom, med
         frozenMediaFrame,
         mediaStartFrame,
         playbackRate,
+        resolvedSrc,
         src,
         tiledLoop,
         visualizationWidth,

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
-const call_api_1 = require("../call-api");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const delete_jsx_node_api_1 = require("../delete-jsx-node-api");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -63,7 +64,10 @@ const deleteEffects = (effects) => {
     if (effects.length === 0) {
         return Promise.resolve(false);
     }
-    return (0, call_api_1.callApi)('/api/delete-effect', effects.map((effect) => {
+    if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+        return Promise.resolve(false);
+    }
+    return (0, effect_operations_api_1.deleteEffects)(effects.map((effect) => {
         const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
         return effect.type === 'single-effect'
             ? {

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateSelectedTimelineItems = exports.isDuplicatableEffectSelection = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
     if (nodePathInfos.length === 0) {
@@ -64,7 +66,7 @@ exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
 const isDuplicatableEffectSelection = (selection) => selection.type === 'sequence-effect';
 exports.isDuplicatableEffectSelection = isDuplicatableEffectSelection;
 const duplicateEffectsFromSource = (effects) => {
-    return (0, call_api_1.callApi)('/api/duplicate-effect', effects.map((effect) => {
+    return (0, effect_operations_api_1.duplicateEffects)(effects.map((effect) => {
         const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
         return {
             fileName: nodePath.absolutePath,
@@ -92,7 +94,7 @@ const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
         return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
     }
     const effectSelections = selections.filter(exports.isDuplicatableEffectSelection);
-    if (effectSelections.length === 0) {
+    if (effectSelections.length === 0 || !(0, browser_studio_operations_1.canUseEffectOperations)()) {
         return null;
     }
     return duplicateEffectsFromSource(effectSelections);

package/dist/components/Timeline/save-effect-prop.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = exports.saveMultipleEffectProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const call_api_1 = require("../call-api");
+const effect_operations_api_1 = require("../effect-operations-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
 const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
@@ -21,7 +21,7 @@ const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel
             schema: change.schema,
         }));
     }
-    return (0, call_api_1.callApi)('/api/save-multiple-effect-props', {
+    return (0, effect_operations_api_1.saveMultipleEffectProps)({
         edits: changes.map((change) => change.type === 'effect-param'
             ? {
                 type: 'effect-param',
@@ -71,7 +71,7 @@ const saveEffectProp = (input) => {
                 schema,
             }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
+        apiCall: () => (0, effect_operations_api_1.saveEffectProps)(input.type === 'effect-param'
             ? {
                 type: 'effect-param',
                 fileName,

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

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
 const studio_protocol_1 = require("@remotion/studio-protocol");
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const install_required_package_1 = require("../helpers/install-required-package");
-const call_api_1 = require("./call-api");
+const effect_operations_api_1 = require("./effect-operations-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     var _a;
@@ -33,8 +34,10 @@ 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 ? [{ name: requiredPackage, version: null }] : []);
-        const result = await (0, call_api_1.callApi)('/api/add-effect', {
+        if ((0, browser_studio_operations_1.getBrowserStudioEffectOperations)() === null) {
+            await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
+        }
+        const result = await (0, effect_operations_api_1.addEffect)({
             fileName,
             sequenceNodePath: nodePath,
             effectName: effect.name,

package/dist/components/effect-operations-api.d.ts

@@ -0,0 +1,8 @@
+import type { AddEffectRequest, DeleteEffectRequest, DuplicateEffectRequest, PasteEffectsRequest, ReorderEffectRequest, SaveEffectPropsRequest, SaveMultipleEffectPropsRequest } from '@remotion/studio-shared';
+export declare const addEffect: (request: AddEffectRequest) => Promise<import("@remotion/studio-shared").AddEffectResponse>;
+export declare const deleteEffects: (request: DeleteEffectRequest) => Promise<import("@remotion/studio-shared").DeleteEffectResponse>;
+export declare const duplicateEffects: (request: DuplicateEffectRequest) => Promise<import("@remotion/studio-shared").DuplicateEffectResponse>;
+export declare const pasteEffects: (request: PasteEffectsRequest) => Promise<import("@remotion/studio-shared").PasteEffectsResponse>;
+export declare const reorderEffect: (request: ReorderEffectRequest) => Promise<import("@remotion/studio-shared").ReorderEffectResponse>;
+export declare const saveEffectProps: (request: SaveEffectPropsRequest) => Promise<import("remotion").CanUpdateEffectPropsResponse>;
+export declare const saveMultipleEffectProps: (request: SaveMultipleEffectPropsRequest) => Promise<import("@remotion/studio-shared").SaveMultipleEffectPropsResponse>;

package/dist/components/effect-operations-api.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveMultipleEffectProps = exports.saveEffectProps = exports.reorderEffect = exports.pasteEffects = exports.duplicateEffects = exports.deleteEffects = exports.addEffect = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const getBrowserEffectOperations = () => {
+    var _a;
+    var _b;
+    return (_b = (_a = (0, browser_studio_operations_1.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.effects) !== null && _b !== void 0 ? _b : null;
+};
+const addEffect = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.addEffect(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/add-effect', request);
+};
+exports.addEffect = addEffect;
+const deleteEffects = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.deleteEffects(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/delete-effect', request);
+};
+exports.deleteEffects = deleteEffects;
+const duplicateEffects = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.duplicateEffects(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/duplicate-effect', request);
+};
+exports.duplicateEffects = duplicateEffects;
+const pasteEffects = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.pasteEffects(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/paste-effects', request);
+};
+exports.pasteEffects = pasteEffects;
+const reorderEffect = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.reorderEffect(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/reorder-effect', request);
+};
+exports.reorderEffect = reorderEffect;
+const saveEffectProps = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.saveEffectProps(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/save-effect-props', request);
+};
+exports.saveEffectProps = saveEffectProps;
+const saveMultipleEffectProps = (request) => {
+    var _a;
+    var _b;
+    return (_b = (_a = getBrowserEffectOperations()) === null || _a === void 0 ? void 0 : _a.saveMultipleEffectProps(request)) !== null && _b !== void 0 ? _b : (0, call_api_1.callApi)('/api/save-multiple-effect-props', request);
+};
+exports.saveMultipleEffectProps = saveMultipleEffectProps;

package/dist/error-overlay/remotion-overlay/log-studio-error.js

@@ -2,9 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logStudioError = exports.logStudioErrorData = void 0;
 const call_api_1 = require("../../components/call-api");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const loggedErrors = new Set();
 const maxLoggedErrors = 100;
 const logStudioErrorData = (data) => {
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        return;
+    }
     const key = JSON.stringify([data.name, data.message, data.stack]);
     if (loggedErrors.has(key)) {
         return;

package/dist/esm/{chunk-r46yxrjr.js → chunk-s6k99gh2.js}

@@ -87,7 +87,7 @@ var ERROR_LINK_COLOR = "#58a6ff";
 var INFO_BLUE = "#60a5fa";
 var SERVER_DISCONNECTED_BACKGROUND = "#e74c3c";
 var STACK_FRAME_BORDER_BLUE = "rgb(66, 144, 245)";
-var TIMELINE_BACKGROUND_COLOR = "#0F1113";
+var TIMELINE_BACKGROUND_COLOR = "#15181B";
 var TIMELINE_SELECTED_BACKGROUND_COLOR = "#3B3F42";
 var TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR = "#B0B0B0";
 var TIMELINE_BLUE = "#0b84ff";