@remotion/studio 4.0.431 → 4.0.433

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -17,6 +17,32 @@ const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const tabContainer = {
     flex: 1,
 };
+const containerLabels = {
+    mp4: 'MP4',
+    webm: 'WebM',
+    mkv: 'MKV',
+    mov: 'MOV',
+    wav: 'WAV',
+    mp3: 'MP3',
+    aac: 'AAC',
+    ogg: 'OGG',
+    flac: 'FLAC',
+};
+const videoContainers = ['mp4', 'webm', 'mkv', 'mov'];
+const audioContainers = [
+    'wav',
+    'mp3',
+    'aac',
+    'ogg',
+    'flac',
+];
+const codecLabels = {
+    h264: 'H.264',
+    h265: 'H.265',
+    vp8: 'VP8',
+    vp9: 'VP9',
+    av1: 'AV1',
+};
 const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, setStillFormat, frame, onFrameChanged, onFrameSetDirectly, container, setContainerFormat, setCodec, encodableVideoCodecs, effectiveVideoCodec, startFrame, setStartFrame, endFrame, setEndFrame, outName, onOutNameChange, validationMessage, logLevel, setLogLevel, }) => {
     const imageFormatOptions = (0, react_1.useMemo)(() => {
         return [
@@ -56,38 +82,19 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
         });
     }, [logLevel, setLogLevel]);
     const containerOptions = (0, react_1.useMemo)(() => {
-        return [
-            {
-                label: 'MP4',
-                onClick: () => setContainerFormat('mp4'),
-                leftItem: container === 'mp4' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                id: 'mp4',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'mp4',
-            },
-            {
-                label: 'WebM',
-                onClick: () => setContainerFormat('webm'),
-                leftItem: container === 'webm' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                id: 'webm',
-                keyHint: null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'webm',
-            },
-        ];
-    }, [container, setContainerFormat]);
-    const codecLabels = (0, react_1.useMemo)(() => ({
-        h264: 'H.264',
-        h265: 'H.265',
-        vp8: 'VP8',
-        vp9: 'VP9',
-        av1: 'AV1',
-    }), []);
+        const containers = renderMode === 'audio' ? audioContainers : videoContainers;
+        return containers.map((c) => ({
+            label: containerLabels[c],
+            onClick: () => setContainerFormat(c),
+            leftItem: container === c ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            id: c,
+            keyHint: null,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: c,
+        }));
+    }, [container, setContainerFormat, renderMode]);
     const codecOptions = (0, react_1.useMemo)(() => {
         return encodableVideoCodecs.map((c) => ({
             label: codecLabels[c],
@@ -100,7 +107,7 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
             type: 'item',
             value: c,
         }));
-    }, [encodableVideoCodecs, effectiveVideoCodec, setCodec, codecLabels]);
+    }, [encodableVideoCodecs, effectiveVideoCodec, setCodec]);
     return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [renderMode === 'still' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })
@@ -109,11 +116,11 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                         ] })) : null] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Container" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })
-                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                        ] }), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Codec",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })
                                 ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
-                        ] }), jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
+                        ] })) : null, jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
                 ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -53,7 +53,7 @@ const ClientRenderQueueProcessor = () => {
         };
     }, [getCompositionForJob]);
     const processVideoJob = (0, react_1.useCallback)(async (job, signal, onProgress) => {
-        var _a, _b;
+        var _a, _b, _c;
         const compositionRef = getCompositionForJob(job.id);
         if (!compositionRef) {
             throw new Error(`Composition not found for job ${job.id}`);
@@ -74,7 +74,7 @@ const ClientRenderQueueProcessor = () => {
             delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
             mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
             logLevel: job.logLevel,
-            videoCodec: job.videoCodec,
+            videoCodec: (_b = job.videoCodec) !== null && _b !== void 0 ? _b : undefined,
             audioCodec: job.audioCodec,
             audioBitrate: job.audioBitrate,
             container: job.container,
@@ -93,7 +93,7 @@ const ClientRenderQueueProcessor = () => {
                 });
             },
             outputTarget: 'web-fs',
-            licenseKey: (_b = job.licenseKey) !== null && _b !== void 0 ? _b : undefined,
+            licenseKey: (_c = job.licenseKey) !== null && _c !== void 0 ? _c : undefined,
         });
         return {
             getBlob,

package/dist/components/RenderQueue/client-side-render-types.d.ts

@@ -46,7 +46,7 @@ export type ClientStillRenderJob = ClientRenderJobBase & {
 export type ClientVideoRenderJob = ClientRenderJobBase & {
     type: 'client-video';
     container: WebRendererContainer;
-    videoCodec: WebRendererVideoCodec;
+    videoCodec: WebRendererVideoCodec | null;
     audioCodec: WebRendererAudioCodec;
     startFrame: number;
     endFrame: number;

package/dist/components/RendersTab.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RendersTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const layout_1 = require("./layout");
 const context_1 = require("./RenderQueue/context");
@@ -27,15 +26,8 @@ const badge = {
 };
 const RendersTab = ({ selected, onClick }) => {
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const failedJobs = jobs.filter((j) => j.status === 'failed').length;
     const jobCount = jobs.length;
-    const isActuallySelected = (0, react_1.useMemo)(() => {
-        if (!canvasContent || canvasContent.type !== 'composition') {
-            return true;
-        }
-        return selected;
-    }, [canvasContent, selected]);
     const badgeStyle = (0, react_1.useMemo)(() => {
         return {
             ...badge,
@@ -46,7 +38,7 @@ const RendersTab = ({ selected, onClick }) => {
             borderColor: colors_1.LIGHT_TEXT,
         };
     }, [failedJobs]);
-    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: isActuallySelected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx(Tabs_1.Tab, { selected: selected, onClick: onClick, children: jsx_runtime_1.jsxs("div", { style: row, children: ["Renders", jobCount > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx("div", { style: badgeStyle, children: jobCount })
                     ] })) : null] }) }));
 };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineBooleanField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly codeValue: unknown;
+    readonly effectiveValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+}>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineBooleanField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const checkboxContainer = {
+    marginLeft: 8,
+};
+const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+    const checked = Boolean(effectiveValue);
+    const onChange = (0, react_1.useCallback)(() => {
+        const newValue = !checked;
+        if (canUpdate && newValue !== codeValue) {
+            onSave(field.key, newValue);
+        }
+    }, [canUpdate, onSave, field.key, checked, codeValue]);
+    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 }) }));
+};
+exports.TimelineBooleanField = TimelineBooleanField;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimelineEmptyState: React.FC;

package/dist/components/Timeline/TimelineEmptyState.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    display: 'flex',
+    flex: 1,
+    height: 0,
+    backgroundColor: colors_1.BACKGROUND,
+};
+const TimelineEmptyState = () => {
+    return jsx_runtime_1.jsx("div", { style: container });
+};
+exports.TimelineEmptyState = TimelineEmptyState;

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

@@ -1,7 +1,12 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
+export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;
+    readonly nestedDepth: number;
+    readonly nodePath: SequenceNodePath | null;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -1,51 +1,62 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineExpandedSection = void 0;
+exports.TimelineExpandedSection = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = 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 react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
-const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const TimelineFieldRow_1 = require("./TimelineFieldRow");
+exports.EXPANDED_SECTION_PADDING_LEFT = 28;
+exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     display: 'flex',
     flexDirection: 'column',
-    paddingLeft: 28,
-    paddingRight: 10,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const fieldRow = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-};
-const fieldName = {
-    fontSize: 12,
-};
-const fieldLabelRow = {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-};
-const TimelineFieldRow = ({ field, onSave, onDragValueChange, onDragEnd, propStatus }) => {
-    var _a, _b;
-    return (jsx_runtime_1.jsxs("div", { style: { ...fieldRow, height: field.rowHeight }, children: [
-            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 separator = {
+    height: 1,
+    backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation }) => {
+const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
     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;
+    var _b;
+    const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
     const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -60,126 +71,17 @@ 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 (!clientId ||
-            !locationSource ||
-            !locationLine ||
-            locationColumn === null ||
-            !schemaKeysString) {
-            setPropStatuses(null);
-            return;
-        }
-        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);
-            }
-            else {
-                setPropStatuses(null);
-            }
-        })
-            .catch(() => {
-            setPropStatuses(null);
-        });
-        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) => {
-        if (!propStatuses || !validatedLocation) {
-            return Promise.reject(new Error('Cannot save'));
-        }
-        const status = propStatuses[key];
-        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,
-            column: validatedLocation.column,
-            key,
-            value: JSON.stringify(value),
-            enumPaths: [],
-            defaultValue,
-        }).then(() => undefined);
-    }, [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(overrideId, key, value);
-    }, [setOverride, overrideId]);
-    const onDragEnd = (0, react_1.useCallback)(() => {
-        clearOverrides(overrideId);
-    }, [clearOverrides, overrideId]);
-    return (jsx_runtime_1.jsx("div", { style: { ...expandedSectionBase, height: expandedHeight }, children: schemaFields
-            ? schemaFields.map((field) => {
-                var _a;
-                return (jsx_runtime_1.jsx(TimelineFieldRow, { field: field, propStatus: (_a = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[field.key]) !== null && _a !== void 0 ? _a : null, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }, field.key));
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...expandedSectionBase,
+            height: expandedHeight,
+        };
+    }, [expandedHeight]);
+    return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
+            ? schemaFields.map((field, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath })
+                    ] }, field.key));
             })
             : 'No schema' }));
 };

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

@@ -0,0 +1,11 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
+import React from 'react';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineFieldRow: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly overrideId: string;
+    readonly validatedLocation: CodePosition | null;
+    readonly nestedDepth: number;
+    readonly nodePath: SequenceNodePath | null;
+}>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFieldRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const call_api_1 = require("../call-api");
+const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
+const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const FIELD_ROW_PADDING_LEFT = 24;
+const fieldRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    paddingRight: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const fieldName = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+};
+const fieldLabelRow = {
+    flex: '0 0 50%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+};
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath }) => {
+    var _a, _b, _c, _d;
+    const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
+    const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
+    const propStatus = (_b = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[field.key]) !== null && _b !== void 0 ? _b : null;
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = dragOverrides[overrideId]) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [dragOverrides, overrideId, field.key]);
+    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+        codeValue: propStatus,
+        runtimeValue: field.currentValue,
+        dragOverrideValue,
+        defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
+    });
+    const onSave = (0, react_1.useCallback)((key, value) => {
+        if (!propStatuses || !validatedLocation || !nodePath) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        const status = propStatuses[key];
+        if (!status || !status.canUpdate) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        const defaultValue = field.fieldSchema.default !== undefined
+            ? JSON.stringify(field.fieldSchema.default)
+            : null;
+        return (0, call_api_1.callApi)('/api/save-sequence-props', {
+            fileName: validatedLocation.source,
+            nodePath,
+            key,
+            value: JSON.stringify(value),
+            defaultValue,
+        }).then(() => undefined);
+    }, [propStatuses, validatedLocation, nodePath, field.fieldSchema.default]);
+    const onDragValueChange = (0, react_1.useCallback)((key, value) => {
+        setDragOverrides(overrideId, key, value);
+    }, [setDragOverrides, overrideId]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        clearDragOverrides(overrideId);
+    }, [clearDragOverrides, overrideId]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...fieldRowBase,
+            height: field.rowHeight,
+            paddingLeft: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_LEFT +
+                FIELD_ROW_PADDING_LEFT +
+                TimelineListItem_1.SPACING * 3 * nestedDepth,
+        };
+    }, [field.rowHeight, nestedDepth]);
+    return (jsx_runtime_1.jsxs("div", { style: style, children: [
+            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
+        ] }));
+};
+exports.TimelineFieldRow = TimelineFieldRow;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
+export declare const SPACING = 5;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;