@remotion/studio 4.0.428 → 4.0.430

package/dist/components/RenderModal/SchemaEditor/ZodTextareaEditor.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodTextareaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RemTextarea_1 = require("../../NewComposition/RemTextarea");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const RemTextarea_1 = require("../../NewComposition/RemTextarea");
 const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
-const local_state_1 = require("./local-state");
 const fullWidth = {
     width: '100%',
 };

package/dist/components/RenderModal/SchemaEditor/ZodTupleItemEditor.d.ts

@@ -1,6 +1,6 @@
-import type { UpdaterFunction } from './ZodSwitch';
 import type { AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodTupleItemEditor: React.FC<{
     jsonPath: JSONPath;
     onChange: UpdaterFunction<unknown[]>;

package/dist/components/RenderModal/SchemaEditor/ZodUnionEditor.d.ts

@@ -1,6 +1,6 @@
-import type { UpdaterFunction } from './ZodSwitch';
 import type { AnyZodSchema } from './zod-schema-type';
 import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
 export declare const ZodUnionEditor: React.FC<{
     showSaveButton: boolean;
     jsonPath: JSONPath;

package/dist/components/RenderModal/SchemaEditor/ZodUnionEditor.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodUnionEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_schema_type_1 = require("./zod-schema-type");
 const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
 const ZodOrNullishEditor_1 = require("./ZodOrNullishEditor");
-const zod_schema_type_1 = require("./zod-schema-type");
 const findNull = (value) => {
     const nullIndex = value.findIndex((v) => {
         const type = (0, zod_schema_type_1.getZodSchemaType)(v);

package/dist/components/RenderModal/SchemaEditor/local-state.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { UpdaterFunction } from './ZodSwitch';
 import type { AnyZodSchema, ZodSafeParseResult } from './zod-schema-type';
+import type { UpdaterFunction } from './ZodSwitch';
 export type LocalState<T> = {
     value: T;
     zodValidation: ZodSafeParseResult;

package/dist/components/RenderModal/SchemaEditor/zod-number-constraints.d.ts

@@ -0,0 +1,4 @@
+import type { AnyZodSchema } from './zod-schema-type';
+export declare const getZodNumberMinimum: (schema: AnyZodSchema) => number;
+export declare const getZodNumberMaximum: (schema: AnyZodSchema) => number;
+export declare const getZodNumberStep: (schema: AnyZodSchema) => number | undefined;

package/dist/components/RenderModal/SchemaEditor/zod-number-constraints.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getZodNumberStep = exports.getZodNumberMaximum = exports.getZodNumberMinimum = void 0;
+const zod_schema_type_1 = require("./zod-schema-type");
+const getZodNumberMinimum = (schema) => {
+    var _a;
+    const { checks } = (0, zod_schema_type_1.getZodDef)(schema);
+    if (!checks)
+        return -Infinity;
+    if ((0, zod_schema_type_1.isZodV3Schema)(schema)) {
+        // v3: {kind: "min", value: 0, inclusive: true}
+        const minCheck = checks.find((c) => c.kind === 'min');
+        if (!minCheck || !minCheck.inclusive)
+            return -Infinity;
+        return minCheck.value;
+    }
+    // v4: check objects with _zod.def = {check: "greater_than", value: 0, inclusive: true}
+    for (const c of checks) {
+        const def = (_a = c._zod) === null || _a === void 0 ? void 0 : _a.def;
+        if ((def === null || def === void 0 ? void 0 : def.check) === 'greater_than' && def.inclusive) {
+            return def.value;
+        }
+    }
+    return -Infinity;
+};
+exports.getZodNumberMinimum = getZodNumberMinimum;
+const getZodNumberMaximum = (schema) => {
+    var _a;
+    const { checks } = (0, zod_schema_type_1.getZodDef)(schema);
+    if (!checks)
+        return Infinity;
+    if ((0, zod_schema_type_1.isZodV3Schema)(schema)) {
+        // v3: {kind: "max", value: 100, inclusive: true}
+        const maxCheck = checks.find((c) => c.kind === 'max');
+        if (!maxCheck || !maxCheck.inclusive)
+            return Infinity;
+        return maxCheck.value;
+    }
+    // v4: check objects with _zod.def = {check: "less_than", value: 100, inclusive: true}
+    for (const c of checks) {
+        const def = (_a = c._zod) === null || _a === void 0 ? void 0 : _a.def;
+        if ((def === null || def === void 0 ? void 0 : def.check) === 'less_than' && def.inclusive) {
+            return def.value;
+        }
+    }
+    return Infinity;
+};
+exports.getZodNumberMaximum = getZodNumberMaximum;
+const getZodNumberStep = (schema) => {
+    var _a;
+    const { checks } = (0, zod_schema_type_1.getZodDef)(schema);
+    if (!checks)
+        return undefined;
+    if ((0, zod_schema_type_1.isZodV3Schema)(schema)) {
+        // v3: {kind: "multipleOf", value: 5}
+        const multipleStep = checks.find((c) => c.kind === 'multipleOf');
+        if (!multipleStep)
+            return undefined;
+        return multipleStep.value;
+    }
+    // v4: check objects with _zod.def = {check: "multiple_of", value: 5}
+    for (const c of checks) {
+        const def = (_a = c._zod) === null || _a === void 0 ? void 0 : _a.def;
+        if ((def === null || def === void 0 ? void 0 : def.check) === 'multiple_of') {
+            return def.value;
+        }
+    }
+    return undefined;
+};
+exports.getZodNumberStep = getZodNumberStep;

package/dist/components/RenderModal/SeparateAudioOption.js

@@ -7,10 +7,10 @@ const react_1 = require("react");
 const use_file_existence_1 = require("../../helpers/use-file-existence");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("../layout");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const get_string_before_suffix_1 = require("./get-string-before-suffix");
 const layout_2 = require("./layout");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const RenderModalOutputName_1 = require("./RenderModalOutputName");
 const SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCodec }) => {
     const existence = (0, use_file_existence_1.useFileExistence)(separateAudioTo);
     const onValueChange = (0, react_1.useCallback)((e) => {

package/dist/components/RenderModal/ServerRenderModal.js

@@ -10,8 +10,8 @@ const colors_1 = require("../../helpers/colors");
 const convert_env_variables_1 = require("../../helpers/convert-env-variables");
 const render_modal_sections_1 = require("../../helpers/render-modal-sections");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const Checkmark_1 = require("../../icons/Checkmark");
 const audio_1 = require("../../icons/audio");
+const Checkmark_1 = require("../../icons/Checkmark");
 const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
@@ -29,16 +29,16 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const vertical_1 = require("../Tabs/vertical");
 const CrfSetting_1 = require("./CrfSetting");
 const DataEditor_1 = require("./DataEditor");
+const get_default_codecs_1 = require("./get-default-codecs");
+const get_string_before_suffix_1 = require("./get-string-before-suffix");
+const out_name_checker_1 = require("./out-name-checker");
+const render_modals_1 = require("./render-modals");
 const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
 const RenderModalAudio_1 = require("./RenderModalAudio");
 const RenderModalBasic_1 = require("./RenderModalBasic");
 const RenderModalGif_1 = require("./RenderModalGif");
 const RenderModalPicture_1 = require("./RenderModalPicture");
 const ResolveCompositionBeforeModal_1 = require("./ResolveCompositionBeforeModal");
-const get_default_codecs_1 = require("./get-default-codecs");
-const get_string_before_suffix_1 = require("./get-string-before-suffix");
-const out_name_checker_1 = require("./out-name-checker");
-const render_modals_1 = require("./render-modals");
 const initialState = { type: 'idle' };
 const reducer = (state, action) => {
     if (action.type === 'start') {

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const Checkmark_1 = require("../../icons/Checkmark");
+const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const ComboBox_1 = require("../NewComposition/ComboBox");
-const layout_1 = require("../layout");
-const MutedSetting_1 = require("./MutedSetting");
-const RenderModalHr_1 = require("./RenderModalHr");
 const layout_2 = require("./layout");
+const MutedSetting_1 = require("./MutedSetting");
 const quality_options_1 = require("./quality-options");
+const RenderModalHr_1 = require("./RenderModalHr");
 const container = {
     flex: 1,
     overflowY: 'auto',

package/dist/components/RenderModal/WebRenderModalLicense.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
 const RemInput_1 = require("../NewComposition/RemInput");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const layout_1 = require("../layout");
 const WebRenderModalLicenseKeyDetails_1 = require("./WebRenderModalLicenseKeyDetails");
 exports.row = {
     display: 'flex',

package/dist/components/RenderQueue/index.js

@@ -40,10 +40,10 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const show_browser_rendering_1 = require("../../helpers/show-browser-rendering");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const layout_1 = require("../layout");
-const RenderQueueItem_1 = require("./RenderQueueItem");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const context_1 = require("./context");
+const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };

package/dist/components/RendersTab.js

@@ -5,9 +5,9 @@ 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");
 const Tabs_1 = require("./Tabs");
-const layout_1 = require("./layout");
 const row = {
     display: 'flex',
     flexDirection: 'row',

package/dist/components/RunningCalculateMetadata.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RunningCalculateMetadata = exports.loaderLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
+const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const Spinner_1 = require("./Spinner");
-const layout_1 = require("./layout");
 exports.loaderLabel = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,

package/dist/components/TimeValue.js

@@ -9,8 +9,8 @@ const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_frame_1 = require("../state/render-frame");
-const InputDragger_1 = require("./NewComposition/InputDragger");
 const layout_1 = require("./layout");
+const InputDragger_1 = require("./NewComposition/InputDragger");
 const text = {
     color: 'white',
     display: 'flex',

package/dist/components/Timeline/Timeline.js

@@ -11,7 +11,9 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
+const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
@@ -21,8 +23,6 @@ const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const is_collapsed_1 = require("./is-collapsed");
-const timeline_refs_1 = require("./timeline-refs");
 const container = {
     minHeight: '100%',
     flex: 1,

package/dist/components/Timeline/TimelineDragHandler.js

@@ -13,12 +13,12 @@ const z_index_1 = require("../../state/z-index");
 const ContextMenu_1 = require("../ContextMenu");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const timeline_refs_1 = require("./timeline-refs");
-const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const TimelineExpandedSection: React.FC<{
+    readonly sequence: TSequence;
+    readonly originalLocation: OriginalPosition | null;
+}>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+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 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;
+        if (!originalLocation ||
+            !originalLocation.source ||
+            !originalLocation.line) {
+            return null;
+        }
+        return {
+            source: originalLocation.source,
+            line: originalLocation.line,
+            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));
+            })
+            : 'No schema' }));
+};
+exports.TimelineExpandedSection = TimelineExpandedSection;

package/dist/components/Timeline/TimelineListItem.js

@@ -4,11 +4,14 @@ 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");
+const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
+const get_stack_1 = require("./TimelineStack/get-stack");
 const SPACING = 5;
 const space = {
     width: SPACING,
@@ -32,22 +35,28 @@ const arrowButton = {
     outline: 'none',
     lineHeight: 1,
 };
-const expandedSection = {
-    height: timeline_layout_1.TIMELINE_TRACK_EXPANDED_HEIGHT,
-    color: 'white',
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    fontSize: 12,
-    display: 'flex',
-    alignItems: 'center',
-    paddingLeft: 28,
-    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
-};
 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 isExpanded = (_a = expandedTracks[sequence.id]) !== null && _a !== void 0 ? _a : false;
+    const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!sequence.stack) {
+            return;
+        }
+        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack, 'sequence')
+            .then((frame) => {
+            setOriginalLocation(frame);
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error('Could not get original location of Sequence', err);
+        });
+    }, [sequence.stack]);
+    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]);
@@ -92,7 +101,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [isExpanded]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: outer, children: [
-                    jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })
-                ] }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: expandedSection, children: "Expanded track details" })) : null] }));
+                    jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -0,0 +1,14 @@
+import type { CanUpdateSequencePropStatus } from '@remotion/studio-shared';
+import React from 'react';
+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 onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+    readonly canUpdate: boolean;
+    readonly propStatus: CanUpdateSequencePropStatus | null;
+}>;
+export declare const TimelineFieldSavingSpinner: React.FC<{
+    readonly saving: boolean;
+}>;