@remotion/studio 4.0.460 → 4.0.462

package/dist/components/Timeline/TimelineTranslateField.js

@@ -23,7 +23,7 @@ const containerStyle = {
     display: 'flex',
     gap: 4,
 };
-const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
@@ -41,13 +41,13 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange(field.key, makeString(newVal, currentY));
-    }, [onDragValueChange, field.key, dragY, codeY, makeString]);
+        onDragValueChange(makeString(newVal, currentY));
+    }, [onDragValueChange, dragY, codeY, makeString]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newStr = makeString(newVal, currentY);
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragX(null);
                 onDragEnd();
             });
@@ -56,40 +56,33 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
             setDragX(null);
             onDragEnd();
         }
-    }, [
-        dragY,
-        codeY,
-        makeString,
-        canUpdate,
-        codeValue,
-        onSave,
-        field.key,
-        onDragEnd,
-    ]);
+    }, [dragY, codeY, makeString, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
                 const newStr = makeString(parsed, currentY);
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
-                    onSave(field.key, newStr);
+                    onSave(newStr).finally(() => {
+                        setDragX(null);
+                    });
                 }
             }
         }
-    }, [canUpdate, dragY, codeY, makeString, codeValue, onSave, field.key]);
+    }, [propStatus, dragY, codeY, makeString, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange(field.key, makeString(currentX, newVal));
-    }, [onDragValueChange, field.key, dragX, codeX, makeString]);
+        onDragValueChange(makeString(currentX, newVal));
+    }, [onDragValueChange, dragX, codeX, makeString]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newStr = makeString(currentX, newVal);
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragY(null);
                 onDragEnd();
             });
@@ -98,31 +91,22 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
             setDragY(null);
             onDragEnd();
         }
-    }, [
-        dragX,
-        codeX,
-        makeString,
-        canUpdate,
-        codeValue,
-        onSave,
-        field.key,
-        onDragEnd,
-    ]);
+    }, [dragX, codeX, makeString, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
                 const newStr = makeString(currentX, parsed);
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
-                    onSave(field.key, newStr).catch(() => {
+                    onSave(newStr).finally(() => {
                         setDragY(null);
                     });
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    }, [propStatus, onSave, dragX, codeX, makeString]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
         ] }));

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,11 +2,12 @@ import type { SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
+    effects: SequenceSchema[];
     clientId: string;
     applyOnce: ApplyResult;
     applyEach: ApplyResult;

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

@@ -1,19 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.acquireSequencePropsSubscription = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = (fileName, line, column) => `${fileName}\0${line}\0${column}`;
+const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, clientId, applyOnce, applyEach, }) => {
-    const key = makeKey(fileName, line, column);
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, clientId, applyOnce, applyEach, }) => {
+    const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
+    const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
+    const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
     let entry = entries.get(key);
     if (!entry) {
         const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
             fileName,
             line,
             column,
-            schema,
+            keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+            effects: effectKeys,
             clientId,
         });
         const created = {
@@ -65,13 +69,15 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, clie
             }
             acquired.promise
                 .then((result) => {
-                if (!result.canUpdate) {
+                if (!result.success) {
                     return;
                 }
                 return (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
                     fileName: acquired.fileName,
                     nodePath: result.nodePath,
                     clientId: acquired.clientId,
+                    sequenceKeys,
+                    effectKeys,
                 });
             })
                 .catch(() => {

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,7 +1,8 @@
 import type { SequenceSchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, effects, }: {
     overrideId: string;
     schema: SequenceSchema;
+    effects: SequenceSchema[];
     originalLocation: OriginalPosition | null;
 }) => void;

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
     var _a, _b, _c;
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -40,15 +40,16 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, })
             line: locationLine,
             column: locationColumn,
             schema,
+            effects,
             clientId,
             applyOnce: (result) => {
-                if (!result.canUpdate) {
+                if (!result.success) {
                     return;
                 }
-                setCodeValues(result.nodePath, result);
+                setCodeValues(result.nodePath, () => result.status);
             },
             applyEach: (result) => {
-                if (!result.canUpdate) {
+                if (!result.success) {
                     return;
                 }
                 setOverrideIdToNodePath(overrideId, result.nodePath);
@@ -59,6 +60,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, })
         };
     }, [
         clientId,
+        effects,
         locationColumn,
         locationLine,
         locationSource,

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

@@ -11,12 +11,11 @@ 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 { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const previewServerConnected = previewServerState.type === 'connected';
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
-            const isExpanded = visualModeEnabled &&
+            const isExpanded = previewServerConnected &&
                 track.nodePathInfo !== null &&
                 getIsExpanded(track.nodePathInfo);
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
@@ -26,8 +25,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     sequence: track.sequence,
                     nodePathInfo: track.nodePathInfo,
                     getIsExpanded,
-                    getDragOverrides,
-                    getCodeValues,
+                    codeValues,
                 }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                 : 0;
             return acc + layerHeight + expandedHeight;
@@ -36,13 +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,
-        visualModeEnabled,
-        getIsExpanded,
-        getDragOverrides,
-        getCodeValues,
-    ]);
+    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, codeValues]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/error-overlay/react-overlay/utils/get-source-map.d.ts

@@ -1,4 +1,4 @@
-import { SourceMapConsumer } from 'source-map';
+import { TraceMap } from '@jridgewell/trace-mapping';
 export type OriginalPosition = {
     line: number | null;
     column: number | null;
@@ -9,5 +9,5 @@ export type CodePosition = {
     column: number;
     source: string;
 };
-export declare const getOriginalPosition: (source_map: SourceMapConsumer, line: number, column: number) => OriginalPosition;
-export declare function getSourceMap(fileUri: string, fileContents: string): Promise<SourceMapConsumer | null>;
+export declare const getOriginalPosition: (sourceMap: TraceMap, line: number, column: number) => OriginalPosition;
+export declare function getSourceMap(fileUri: string, fileContents: string): Promise<TraceMap | null>;

package/dist/error-overlay/react-overlay/utils/get-source-map.js

@@ -5,9 +5,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOriginalPosition = void 0;
 exports.getSourceMap = getSourceMap;
-const source_map_1 = require("source-map");
-const getOriginalPosition = (source_map, line, column) => {
-    const result = source_map.originalPositionFor({
+const trace_mapping_1 = require("@jridgewell/trace-mapping");
+const getOriginalPosition = (sourceMap, line, column) => {
+    const result = (0, trace_mapping_1.originalPositionFor)(sourceMap, {
         line,
         column,
     });
@@ -42,10 +42,10 @@ async function getSourceMap(fileUri, fileContents) {
             throw new Error('Sorry, non-base64 inline source-map encoding is not supported.');
         }
         const converted = window.atob(sm.substring(match2[0].length));
-        return new source_map_1.SourceMapConsumer(JSON.parse(converted));
+        return new trace_mapping_1.TraceMap(JSON.parse(converted));
     }
     const index = fileUri.lastIndexOf('/');
     const url = fileUri.substring(0, index + 1) + sm;
     const obj = await fetch(url).then((res) => res.json());
-    return new source_map_1.SourceMapConsumer(obj);
+    return new trace_mapping_1.TraceMap(obj);
 }

package/dist/error-overlay/react-overlay/utils/unmapper.d.ts

@@ -1,9 +1,3 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 import type { SomeStackFrame, SymbolicatedStackFrame } from '@remotion/studio-shared';
 export declare const getFileContents: (fileName: string) => Promise<string>;
 export declare const unmap: (frames: SomeStackFrame[], contextLines: number) => Promise<SymbolicatedStackFrame[]>;

package/dist/error-overlay/react-overlay/utils/unmapper.js

@@ -4,6 +4,13 @@
 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unmap = exports.getFileContents = void 0;
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const trace_mapping_1 = require("@jridgewell/trace-mapping");
 const remotion_1 = require("remotion");
 const get_lines_around_1 = require("./get-lines-around");
 const get_source_map_1 = require("./get-source-map");
@@ -40,7 +47,7 @@ const unmap = async (frames, contextLines) => {
         const pos = (0, get_source_map_1.getOriginalPosition)(map, frame.frame.lineNumber, frame.frame.columnNumber);
         const { functionName } = frame.frame;
         let hasSource = null;
-        hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+        hasSource = pos.source ? (0, trace_mapping_1.sourceContentFor)(map, pos.source) : null;
         const scriptCode = hasSource && pos.line
             ? (0, get_lines_around_1.getLinesAround)(pos.line, contextLines, hasSource.split('\n'))
             : null;