@remotion/studio 4.0.429 → 4.0.430

package/dist/components/NewComposition/InputDragger.js

@@ -53,6 +53,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             ...RemInput_1.inputBaseStyle,
             backgroundColor: 'transparent',
             borderColor: 'transparent',
+            padding: '4px 6px',
         };
     }, []);
     const span = (0, react_1.useMemo)(() => ({

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -4,6 +4,7 @@ exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
@@ -34,19 +35,17 @@ const fieldLabelRow = {
     gap: 6,
 };
 const TimelineFieldRow = ({ field, onSave, onDragValueChange, onDragEnd, propStatus }) => {
-    var _a;
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const onSavingChange = (0, react_1.useCallback)((s) => {
-        setSaving(s);
-    }, []);
+    var _a, _b;
     return (jsx_runtime_1.jsxs("div", { style: { ...fieldRow, height: field.rowHeight }, children: [
-            jsx_runtime_1.jsxs("div", { style: fieldLabelRow, children: [
-                    jsx_runtime_1.jsx("span", { style: fieldName, children: field.key }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldSavingSpinner, { saving: saving })
-                ] }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onSavingChange: onSavingChange, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_a = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _a !== void 0 ? _a : false })
+            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_b = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _b !== void 0 ? _b : false })
         ] }));
 };
 const TimelineExpandedSection = ({ sequence, originalLocation }) => {
+    var _a;
+    var _b, _c, _d, _e;
     const [propStatuses, setPropStatuses] = (0, react_1.useState)(null);
+    const { previewServerState: state, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const clientId = state.type === 'connected' ? state.clientId : undefined;
     const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -61,18 +60,39 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
+    const locationSource = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _b !== void 0 ? _b : null;
+    const locationLine = (_c = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.line) !== null && _c !== void 0 ? _c : null;
+    const locationColumn = (_d = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.column) !== null && _d !== void 0 ? _d : null;
+    const schemaKeysString = (0, react_1.useMemo)(() => (schemaFields ? schemaFields.map((f) => f.key).join(',') : null), [schemaFields]);
+    const currentLocationSource = (0, react_1.useRef)(locationSource);
+    currentLocationSource.current = locationSource;
+    const currentLocationLine = (0, react_1.useRef)(locationLine);
+    currentLocationLine.current = locationLine;
+    const currentLocationColumn = (0, react_1.useRef)(locationColumn);
+    currentLocationColumn.current = locationColumn;
     (0, react_1.useEffect)(() => {
-        if (!sequence.controls || !validatedLocation || !schemaFields) {
+        if (!clientId ||
+            !locationSource ||
+            !locationLine ||
+            locationColumn === null ||
+            !schemaKeysString) {
             setPropStatuses(null);
             return;
         }
-        (0, call_api_1.callApi)('/api/can-update-sequence-props', {
-            fileName: validatedLocation.source,
-            line: validatedLocation.line,
-            column: validatedLocation.column,
-            keys: schemaFields.map((f) => f.key),
+        const keys = schemaKeysString.split(',');
+        (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+            fileName: locationSource,
+            line: locationLine,
+            column: locationColumn,
+            keys,
+            clientId,
         })
             .then((result) => {
+            if (currentLocationSource.current !== locationSource ||
+                currentLocationLine.current !== locationLine ||
+                currentLocationColumn.current !== locationColumn) {
+                return;
+            }
             if (result.canUpdate) {
                 setPropStatuses(result.props);
             }
@@ -83,7 +103,48 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
             .catch(() => {
             setPropStatuses(null);
         });
-    }, [sequence.controls, validatedLocation, schemaFields]);
+        return () => {
+            (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+                fileName: locationSource,
+                line: locationLine,
+                column: locationColumn,
+                clientId,
+            }).catch(() => {
+                // Ignore unsubscribe errors
+            });
+        };
+    }, [
+        clientId,
+        locationSource,
+        locationLine,
+        locationColumn,
+        schemaKeysString,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!locationSource || !locationLine || locationColumn === null) {
+            return;
+        }
+        const listener = (event) => {
+            if (event.type !== 'sequence-props-updated') {
+                return;
+            }
+            if (event.fileName !== currentLocationSource.current ||
+                event.line !== currentLocationLine.current ||
+                event.column !== currentLocationColumn.current) {
+                return;
+            }
+            if (event.result.canUpdate) {
+                setPropStatuses(event.result.props);
+            }
+            else {
+                setPropStatuses(null);
+            }
+        };
+        const unsub = subscribeToEvent('sequence-props-updated', listener);
+        return () => {
+            unsub();
+        };
+    }, [locationSource, locationLine, locationColumn, subscribeToEvent]);
     const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence.controls), [sequence.controls]);
     const { setOverride, clearOverrides } = (0, react_1.useContext)(remotion_1.Internals.SequenceControlOverrideContext);
     const onSave = (0, react_1.useCallback)((key, value) => {
@@ -94,6 +155,10 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
         if (!status || !status.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
+        const field = schemaFields === null || schemaFields === void 0 ? void 0 : schemaFields.find((f) => f.key === key);
+        const defaultValue = field && field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
         return (0, call_api_1.callApi)('/api/save-sequence-props', {
             fileName: validatedLocation.source,
             line: validatedLocation.line,
@@ -101,14 +166,16 @@ const TimelineExpandedSection = ({ sequence, originalLocation }) => {
             key,
             value: JSON.stringify(value),
             enumPaths: [],
+            defaultValue,
         }).then(() => undefined);
-    }, [propStatuses, validatedLocation]);
+    }, [propStatuses, validatedLocation, schemaFields]);
+    const overrideId = (_e = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _e !== void 0 ? _e : sequence.id;
     const onDragValueChange = (0, react_1.useCallback)((key, value) => {
-        setOverride(sequence.id, key, value);
-    }, [setOverride, sequence.id]);
+        setOverride(overrideId, key, value);
+    }, [setOverride, overrideId]);
     const onDragEnd = (0, react_1.useCallback)(() => {
-        clearOverrides(sequence.id);
-    }, [clearOverrides, sequence.id]);
+        clearOverrides(overrideId);
+    }, [clearOverrides, overrideId]);
     return (jsx_runtime_1.jsx("div", { style: { ...expandedSectionBase, height: expandedHeight }, children: schemaFields
             ? schemaFields.map((field) => {
                 var _a;

package/dist/components/Timeline/TimelineListItem.js

@@ -4,6 +4,7 @@ exports.TimelineListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
@@ -36,7 +37,9 @@ const arrowButton = {
 };
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     var _a;
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
@@ -53,7 +56,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             console.error('Could not get original location of Sequence', err);
         });
     }, [sequence.stack]);
-    const isExpanded = (_a = expandedTracks[sequence.id]) !== null && _a !== void 0 ? _a : false;
+    const isExpanded = visualModeEnabled && ((_a = expandedTracks[sequence.id]) !== null && _a !== void 0 ? _a : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);

package/dist/components/Timeline/TimelineSchemaField.d.ts

@@ -4,7 +4,6 @@ import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onSavingChange: (saving: boolean) => void;
     readonly onDragValueChange: (key: string, value: unknown) => void;
     readonly onDragEnd: () => void;
     readonly canUpdate: boolean;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldSavingSpinner = exports.TimelineFieldValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
-const zod_number_constraints_1 = require("../RenderModal/SchemaEditor/zod-number-constraints");
 const Spinner_1 = require("../Spinner");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
@@ -16,12 +16,16 @@ const draggerStyle = {
     width: 80,
     marginLeft: 'auto',
 };
+const checkboxContainer = {
+    marginLeft: 'auto',
+};
 const notEditableBackground = {
     backgroundColor: 'rgba(255, 0, 0, 0.2)',
     borderRadius: 3,
     padding: '0 4px',
 };
-const TimelineNumberField = ({ field, canUpdate, onSave, onSavingChange, onDragValueChange, onDragEnd, }) => {
+const TimelineNumberField = ({ field, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd }) => {
+    var _a, _b, _c;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const dragging = (0, react_1.useRef)(false);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
@@ -31,37 +35,46 @@ const TimelineNumberField = ({ field, canUpdate, onSave, onSavingChange, onDragV
     }, [onDragValueChange, field.key]);
     (0, react_1.useEffect)(() => {
         setDragValue(null);
-        onSavingChange(false);
         onDragEnd();
-    }, [field.currentValue, onSavingChange, onDragEnd]);
+    }, [field.currentValue, onDragEnd]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate && newVal !== field.currentValue) {
-            onSavingChange(true);
+        if (canUpdate && newVal !== codeValue) {
             onSave(field.key, newVal).catch(() => {
-                onSavingChange(false);
                 setDragValue(null);
             });
         }
         else {
             setDragValue(null);
         }
-    }, [canUpdate, onSave, onSavingChange, field.key, field.currentValue]);
+    }, [canUpdate, onSave, field.key, codeValue]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) && parsed !== field.currentValue) {
+            if (!Number.isNaN(parsed) && parsed !== codeValue) {
                 setDragValue(parsed);
-                onSavingChange(true);
                 onSave(field.key, parsed).catch(() => {
-                    onSavingChange(false);
                     setDragValue(null);
                 });
             }
         }
-    }, [canUpdate, onSave, onSavingChange, field.key, field.currentValue]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : field.currentValue, style: draggerStyle, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: (0, zod_number_constraints_1.getZodNumberMinimum)(field.fieldSchema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(field.fieldSchema), step: (0, zod_number_constraints_1.getZodNumberStep)(field.fieldSchema), rightAlign: true }));
+    }, [canUpdate, onSave, field.key, codeValue]);
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : codeValue, style: draggerStyle, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
+            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
+            : -Infinity, max: field.fieldSchema.type === 'number'
+            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
+            : Infinity, step: field.fieldSchema.type === 'number' ? ((_c = field.fieldSchema.step) !== null && _c !== void 0 ? _c : 1) : 1, rightAlign: true }));
+};
+const TimelineBooleanField = ({ field, codeValue, canUpdate, onSave }) => {
+    const checked = Boolean(codeValue);
+    const onChange = (0, react_1.useCallback)(() => {
+        if (canUpdate) {
+            onSave(field.key, !checked);
+        }
+    }, [canUpdate, onSave, field.key, checked]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
 };
-const TimelineFieldValue = ({ field, onSave, onSavingChange, onDragValueChange, onDragEnd, propStatus, canUpdate, }) => {
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate }) => {
+    var _a, _b;
     const wrapperStyle = canUpdate === null || canUpdate === false
         ? notEditableBackground
         : undefined;
@@ -74,10 +87,14 @@ const TimelineFieldValue = ({ field, onSave, onSavingChange, onDragValueChange,
     if (propStatus === null) {
         return (jsx_runtime_1.jsx("span", { style: { ...notEditableBackground }, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
     }
+    const effectiveCodeValue = (_b = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.currentValue) !== null && _b !== void 0 ? _b : field.fieldSchema.default;
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, canUpdate: canUpdate, onSave: onSave, onSavingChange: onSavingChange, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
+    if (field.typeName === 'boolean') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave }) }));
     }
-    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(field.currentValue) }));
+    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveCodeValue) }));
 };
 exports.TimelineFieldValue = TimelineFieldValue;
 const TimelineFieldSavingSpinner = ({ saving }) => {

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -7,6 +7,7 @@ const relativeFrameStyle = {
     fontFamily: 'Arial, Helvetica, sans-serif',
     color: 'white',
     opacity: 0.5,
+    whiteSpace: 'nowrap',
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted

package/dist/components/Timeline/TimelineTracks.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const is_collapsed_1 = require("./is-collapsed");
@@ -22,7 +23,9 @@ const getExpandedPlaceholderStyle = (controls) => ({
 });
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
     const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -213,47 +213,62 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             },
             src,
             onVideoSample: (sample) => {
-                const frame = sample.toVideoFrame();
-                const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
-                const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
-                    frame,
-                    scale,
-                });
-                if (transformed !== frame) {
-                    frame.close();
+                let frame;
+                try {
+                    frame = sample.toVideoFrame();
+                    const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
+                    const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
+                        frame,
+                        scale,
+                    });
+                    if (transformed !== frame) {
+                        frame.close();
+                    }
+                    frame = undefined;
+                    const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
+                    const existingFrame = frame_database_1.frameDatabase.get(databaseKey);
+                    if (existingFrame) {
+                        existingFrame.frame.close();
+                    }
+                    frame_database_1.frameDatabase.set(databaseKey, {
+                        frame: transformed,
+                        lastUsed: Date.now(),
+                    });
+                    if (aspectRatio.current === null) {
+                        throw new Error('Aspect ratio is not set');
+                    }
+                    ensureSlots({
+                        filledSlots,
+                        fromSeconds,
+                        toSeconds,
+                        naturalWidth,
+                        aspectRatio: aspectRatio.current,
+                    });
+                    fillFrameWhereItFits({
+                        ctx,
+                        filledSlots,
+                        visualizationWidth: naturalWidth,
+                        frame: transformed,
+                        segmentDuration: toSeconds - fromSeconds,
+                        fromSeconds,
+                    });
                 }
-                const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
-                const existingFrame = frame_database_1.frameDatabase.get(databaseKey);
-                if (existingFrame) {
-                    existingFrame.frame.close();
+                catch (e) {
+                    if (frame) {
+                        frame.close();
+                    }
+                    throw e;
                 }
-                frame_database_1.frameDatabase.set(databaseKey, {
-                    frame: transformed,
-                    lastUsed: Date.now(),
-                });
-                if (aspectRatio.current === null) {
-                    throw new Error('Aspect ratio is not set');
+                finally {
+                    sample.close();
                 }
-                ensureSlots({
-                    filledSlots,
-                    fromSeconds,
-                    toSeconds,
-                    naturalWidth,
-                    aspectRatio: aspectRatio.current,
-                });
-                fillFrameWhereItFits({
-                    ctx,
-                    filledSlots,
-                    visualizationWidth: naturalWidth,
-                    frame: transformed,
-                    segmentDuration: toSeconds - fromSeconds,
-                    fromSeconds,
-                });
-                sample.close();
             },
             signal: controller.signal,
         })
             .then(() => {
+            if (controller.signal.aborted) {
+                return;
+            }
             fillWithCachedFrames({
                 ctx,
                 naturalWidth,