@remotion/studio 4.0.463 → 4.0.465

package/dist/components/Timeline/TimelineImageInfo.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineImageInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
@@ -33,23 +34,10 @@ const TimelineImageInfo = ({ src, visualizationWidth }) => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.onload = () => {
-            const scale = (HEIGHT * window.devicePixelRatio) / img.naturalHeight;
-            const scaledWidth = img.naturalWidth * scale;
-            const scaledHeight = HEIGHT * window.devicePixelRatio;
-            const offscreen = document.createElement('canvas');
-            offscreen.width = scaledWidth;
-            offscreen.height = scaledHeight;
-            const offCtx = offscreen.getContext('2d');
-            if (!offCtx) {
-                return;
-            }
-            offCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
-            const pattern = ctx.createPattern(offscreen, 'repeat-x');
-            if (!pattern) {
-                return;
-            }
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, visualizationWidth * window.devicePixelRatio, HEIGHT * window.devicePixelRatio);
+            (0, timeline_utils_1.drawRepeatingImageThumbnail)({
+                canvas,
+                image: img,
+            });
         };
         img.src = src;
         return () => {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const INDENT = 10;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;

package/dist/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = exports.INDENT = void 0;
+exports.TimelineListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,17 +11,16 @@ const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const Padder_1 = require("./Padder");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineStack_1 = require("./TimelineStack");
-const use_resolved_stack_1 = require("./use-resolved-stack");
-exports.INDENT = 10;
+const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     var _a;
-    var _b, _c;
+    var _b;
     const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -29,7 +28,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_c = sequence.stack) !== null && _c !== void 0 ? _c : null);
+    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -179,7 +178,8 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             !validatedLocation ||
             !codeValuesForOverride ||
             !codeHiddenStatus ||
-            !codeHiddenStatus.canUpdate) {
+            !codeHiddenStatus.canUpdate ||
+            previewServerState.type !== 'connected') {
             return;
         }
         const newValue = type !== 'enable';
@@ -196,11 +196,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             defaultValue,
             schema,
             setCodeValues,
+            clientId: previewServerState.clientId,
         });
     }, [
         codeHiddenStatus,
         codeValuesForOverride,
         nodePath,
+        previewServerState,
         sequence.controls,
         setCodeValues,
         validatedLocation,
@@ -217,23 +219,19 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
             wordBreak: 'break-all',
             textAlign: 'left',
-            paddingLeft: 5,
         };
     }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const canToggleVisibility = Boolean(sequence.controls) &&
+    const canToggleVisibility = previewConnected &&
+        Boolean(sequence.controls) &&
         nodePath !== null &&
         validatedLocation !== null &&
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.canUpdate;
-    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), previewConnected ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-            ] }) }));
+    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, children: jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation }) }) }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const TimelineRowChrome: React.FC<{
+    readonly depth: number;
+    readonly eye: React.ReactNode;
+    readonly arrow: React.ReactNode;
+    readonly children: React.ReactNode;
+    readonly style?: React.CSSProperties;
+}>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRowChrome = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Padder_1 = require("./Padder");
+const timeline_row_layout_1 = require("./timeline-row-layout");
+const rowBase = {
+    display: 'flex',
+    alignItems: 'center',
+};
+const TimelineRowChrome = ({ depth, eye, arrow, children, style }) => {
+    const rowStyle = (0, react_1.useMemo)(() => ({
+        ...rowBase,
+        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+        ...style,
+    }), [style]);
+    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    return (jsx_runtime_1.jsxs("div", { style: rowStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow, children] }));
+};
+exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -7,14 +7,13 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const render_frame_1 = require("../../state/render-frame");
-const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
-    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
     position: 'absolute',
     backgroundColor: colors_1.TIMELINE_BACKGROUND,
@@ -94,10 +93,8 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            width: windowWidth - SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+            width: windowWidth,
             overflow: 'hidden',
-            // Since
-            marginLeft: SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
             pointerEvents: 'none',
         };
     }, [windowWidth]);
@@ -119,9 +116,7 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
                 frame: index * fps,
                 style: {
                     ...secondTick,
-                    left: frameInterval * index * fps +
-                        timeline_layout_1.TIMELINE_PADDING -
-                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
                 },
                 showTime: index > 0,
             };
@@ -134,9 +129,7 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
                 frame: index,
                 style: {
                     ...tick,
-                    left: frameInterval * index +
-                        timeline_layout_1.TIMELINE_PADDING -
-                        SplitterHandle_1.SPLITTER_HANDLE_SIZE / 2,
+                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
                     height: index % fps === 0
                         ? 10
                         : (index / frameMarkerEveryNth) % 2 === 0

package/dist/components/Timeline/TimelineTracks.js

@@ -40,7 +40,6 @@ const remotion_1 = require("remotion");
 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");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
@@ -74,9 +73,6 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
             jsx_runtime_1.jsxs("div", { style: content, children: [
                     jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                        if ((0, is_collapsed_1.isTrackHidden)(track)) {
-                            return null;
-                        }
                         const isExpanded = track.nodePathInfo !== null && getIsExpanded(track.nodePathInfo);
                         return (jsx_runtime_1.jsxs("div", { children: [
                                 jsx_runtime_1.jsx("div", { style: {

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
+const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
 const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 const outerStyle = {
     width: '100%',
@@ -16,7 +17,6 @@ const outerStyle = {
 };
 const filmstripContainerStyle = {
     height: FILMSTRIP_HEIGHT,
-    width: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     display: 'flex',
     borderTopLeftRadius: 2,
@@ -28,6 +28,14 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
+    const { mediaVisualizationWidth, mediaNaturalWidth } = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_video_info_widths_1.getTimelineVideoInfoWidths)({
+            visualizationWidth,
+            naturalWidth,
+            premountWidth,
+            postmountWidth,
+        });
+    }, [naturalWidth, postmountWidth, premountWidth, visualizationWidth]);
     // for rendering frames
     (0, react_1.useEffect)(() => {
         if (error) {
@@ -39,7 +47,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         }
         const controller = new AbortController();
         const canvas = document.createElement('canvas');
-        canvas.width = visualizationWidth;
+        canvas.width = mediaVisualizationWidth;
         canvas.height = FILMSTRIP_HEIGHT;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
@@ -47,7 +55,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         }
         current.appendChild(canvas);
         const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
-            visualizationWidth: naturalWidth,
+            visualizationWidth: mediaNaturalWidth,
             loopDisplay,
         });
         const shouldRepeatVideo = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay);
@@ -85,7 +93,9 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         // Trim is applied first, then playbackRate. Each composition frame
         // advances the source video by `playbackRate` source frames.
         const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
-        const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
+        const targetWidth = shouldRepeatVideo
+            ? targetCanvas.width
+            : mediaNaturalWidth;
         if (aspectRatio.current !== null) {
             (0, timeline_utils_1.ensureSlots)({
                 filledSlots,
@@ -207,13 +217,20 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         error,
         fps,
         loopDisplay,
-        naturalWidth,
+        mediaNaturalWidth,
+        mediaVisualizationWidth,
         playbackRate,
         src,
         trimBefore,
-        visualizationWidth,
     ]);
-    const audioWidth = visualizationWidth - premountWidth - postmountWidth;
+    const audioWidth = mediaVisualizationWidth;
+    const filmstripStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...filmstripContainerStyle,
+            width: mediaVisualizationWidth,
+            marginLeft: premountWidth,
+        };
+    }, [mediaVisualizationWidth, premountWidth]);
     const audioStyle = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
@@ -223,7 +240,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
     }, [audioWidth, premountWidth]);
     return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripContainerStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/get-timeline-video-info-widths.d.ts

@@ -0,0 +1,9 @@
+export declare const getTimelineVideoInfoWidths: ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }: {
+    visualizationWidth: number;
+    naturalWidth: number;
+    premountWidth: number;
+    postmountWidth: number;
+}) => {
+    mediaVisualizationWidth: number;
+    mediaNaturalWidth: number;
+};

package/dist/components/Timeline/get-timeline-video-info-widths.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVideoInfoWidths = void 0;
+const getTimelineVideoInfoWidths = ({ visualizationWidth, naturalWidth, premountWidth, postmountWidth, }) => {
+    const mountWidth = premountWidth + postmountWidth;
+    return {
+        mediaVisualizationWidth: Math.max(0, visualizationWidth - mountWidth),
+        mediaNaturalWidth: Math.max(0, naturalWidth - mountWidth),
+    };
+};
+exports.getTimelineVideoInfoWidths = getTimelineVideoInfoWidths;

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -1,6 +1,6 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { SetCodeValues } from './save-sequence-prop';
-export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, }: {
+export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
@@ -9,4 +9,5 @@ export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKe
     defaultValue: string | null;
     schema: SequenceSchema;
     setCodeValues: SetCodeValues;
+    clientId: string;
 }) => Promise<void>;

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

@@ -4,7 +4,7 @@ exports.saveEffectProp = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, }) => {
+const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
         setCodeValues,
@@ -23,19 +23,8 @@ const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defa
             value: JSON.stringify(value),
             defaultValue,
             schema,
+            clientId,
         }),
-        mergeServerResponse: (prev, data) => {
-            if (!prev.canUpdate) {
-                return prev;
-            }
-            const idx = prev.effects.findIndex((e) => e.effectIndex === effectIndex);
-            if (idx === -1) {
-                return { ...prev, effects: [...prev.effects, data] };
-            }
-            const nextEffects = [...prev.effects];
-            nextEffects[idx] = data;
-            return { ...prev, effects: nextEffects };
-        },
         errorLabel: 'Could not save effect prop',
     });
 };

package/dist/components/Timeline/save-prop-queue.d.ts

@@ -5,8 +5,7 @@ export type EnqueueSaveOptions<TResponse> = {
     setCodeValues: SetCodeValues;
     applyOptimistic: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse;
     apiCall: () => Promise<TResponse>;
-    mergeServerResponse: (prev: CanUpdateSequencePropsResponse, response: TResponse) => CanUpdateSequencePropsResponse;
     errorLabel: string;
 };
-export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, mergeServerResponse, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
 export {};

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

@@ -8,7 +8,7 @@ const getQueue = (nodePath) => {
     const key = remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath);
     let q = queues.get(key);
     if (!q) {
-        q = { chain: Promise.resolve(), cancelled: false, committed: null };
+        q = { chain: Promise.resolve(), cancelled: false };
         queues.set(key, q);
     }
     return q;
@@ -19,15 +19,12 @@ const dropQueue = (nodePath, q) => {
         queues.delete(key);
     }
 };
-const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, mergeServerResponse, errorLabel, }) => {
+const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }) => {
     const q = getQueue(nodePath);
     if (q.cancelled) {
         return Promise.resolve();
     }
     setCodeValues(nodePath, (prev) => {
-        if (q.committed === null) {
-            q.committed = prev;
-        }
         return applyOptimistic(prev);
     });
     const myQueue = q;
@@ -36,12 +33,10 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
             return;
         }
         try {
-            const response = await apiCall();
+            await apiCall();
             if (myQueue.cancelled) {
                 return;
             }
-            setCodeValues(nodePath, (prev) => mergeServerResponse(prev, response));
-            myQueue.committed = mergeServerResponse(myQueue.committed, response);
             // If nothing more is queued, reset baseline so the next round starts fresh.
             if (myQueue.chain === next) {
                 dropQueue(nodePath, myQueue);
@@ -49,10 +44,6 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
         }
         catch (err) {
             myQueue.cancelled = true;
-            const { committed } = myQueue;
-            if (committed !== null) {
-                setCodeValues(nodePath, () => committed);
-            }
             dropQueue(nodePath, myQueue);
             (0, NotificationCenter_1.showNotification)(`${errorLabel}: ${err instanceof Error ? err.message : String(err)}`, 4000);
         }

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,6 +1,6 @@
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 export type SetCodeValues = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
-export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, }: {
+export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
@@ -8,4 +8,5 @@ export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, d
     defaultValue: string | null;
     schema: SequenceSchema;
     setCodeValues: SetCodeValues;
+    clientId: string;
 }) => Promise<void>;

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

@@ -4,7 +4,7 @@ exports.saveSequenceProp = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, }) => {
+const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
         setCodeValues,
@@ -21,17 +21,8 @@ const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, s
             value: JSON.stringify(value),
             defaultValue,
             schema,
+            clientId,
         }),
-        mergeServerResponse: (prev, data) => {
-            if (!data.canUpdate) {
-                return data;
-            }
-            return {
-                canUpdate: true,
-                props: data.props,
-                effects: prev.canUpdate ? prev.effects : [],
-            };
-        },
         errorLabel: 'Could not save sequence prop',
     });
 };

package/dist/components/Timeline/should-show-track-in-timeline.d.ts

@@ -0,0 +1,2 @@
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const shouldShowTrackInTimeline: (track: TrackWithHash, durationInFrames: number) => boolean;

package/dist/components/Timeline/should-show-track-in-timeline.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldShowTrackInTimeline = void 0;
+// A track is shown in the timeline list when:
+// - The sequence opted-in via `showInTimeline` (the default).
+//   Children of a sequence with `showInTimeline: false` keep being listed
+//   on their own; their depth is independently flattened by
+//   `getTimelineNestedLevel` so the parent does not contribute an indent.
+// - The sequence has a positive duration.
+// - The sequence starts before the composition ends.
+const shouldShowTrackInTimeline = (track, durationInFrames) => {
+    if (!track.sequence.showInTimeline) {
+        return false;
+    }
+    if (track.sequence.duration <= 0) {
+        return false;
+    }
+    if (track.sequence.from > durationInFrames) {
+        return false;
+    }
+    return true;
+};
+exports.shouldShowTrackInTimeline = shouldShowTrackInTimeline;

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineFieldLabelRowStyle = void 0;
+const timeline_row_layout_1 = require("./timeline-row-layout");
+const getTimelineFieldLabelRowStyle = (depth) => {
+    return {
+        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    };
+};
+exports.getTimelineFieldLabelRowStyle = getTimelineFieldLabelRowStyle;

package/dist/components/Timeline/timeline-indent.d.ts

@@ -0,0 +1 @@
+export declare const TIMELINE_INDENT = 10;

package/dist/components/Timeline/timeline-indent.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TIMELINE_INDENT = void 0;
+exports.TIMELINE_INDENT = 10;

package/dist/components/Timeline/timeline-row-layout.d.ts

@@ -0,0 +1,11 @@
+export declare const TIMELINE_ROW_BASE_PADDING = 5;
+export declare const TIMELINE_EYE_COLUMN_WIDTH = 22;
+export declare const TIMELINE_ARROW_COLUMN_WIDTH = 16;
+export declare const TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
+export declare const getTimelineRowIndentWidth: (depth: number) => number;
+export declare const getTimelineRowLeftChromeWidth: (depth: number) => number;
+export declare const getTimelineFieldLabelFlexBasis: (depth: number) => string;
+export declare const getExpandedRowDepth: ({ nestedDepth, treeDepth, }: {
+    nestedDepth: number;
+    treeDepth: number;
+}) => number;

package/dist/components/Timeline/timeline-row-layout.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
+const timeline_indent_1 = require("./timeline-indent");
+exports.TIMELINE_ROW_BASE_PADDING = 5;
+exports.TIMELINE_EYE_COLUMN_WIDTH = 22;
+exports.TIMELINE_ARROW_COLUMN_WIDTH = 16;
+exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
+const getTimelineRowIndentWidth = (depth) => {
+    return depth * timeline_indent_1.TIMELINE_INDENT;
+};
+exports.getTimelineRowIndentWidth = getTimelineRowIndentWidth;
+const getTimelineRowLeftChromeWidth = (depth) => {
+    return (exports.TIMELINE_ROW_BASE_PADDING +
+        exports.TIMELINE_EYE_COLUMN_WIDTH +
+        (0, exports.getTimelineRowIndentWidth)(depth) +
+        exports.TIMELINE_ARROW_COLUMN_WIDTH);
+};
+exports.getTimelineRowLeftChromeWidth = getTimelineRowLeftChromeWidth;
+const getTimelineFieldLabelFlexBasis = (depth) => {
+    return `calc(50% - ${(0, exports.getTimelineRowLeftChromeWidth)(depth) - exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH}px)`;
+};
+exports.getTimelineFieldLabelFlexBasis = getTimelineFieldLabelFlexBasis;
+const getExpandedRowDepth = ({ nestedDepth, treeDepth, }) => {
+    return nestedDepth + 1 + treeDepth;
+};
+exports.getExpandedRowDepth = getExpandedRowDepth;

package/dist/components/Timeline/use-resolved-stack-react-to-change.d.ts

@@ -0,0 +1,2 @@
+import type { ResolvedStackLocation } from 'remotion';
+export declare const useResolveStackAndReactToChange: (getStack: () => string | null) => ResolvedStackLocation | null;