@remotion/studio 4.0.438 → 4.0.440

package/dist/components/RenderModal/out-name-checker.d.ts

@@ -1,7 +1,7 @@
 import type { RenderType } from './RenderModalAdvanced';
 export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, separateAudioTo, }: {
     outName: string;
-    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     audioCodec: "aac" | "mp3" | "opus" | "pcm-16";
     renderMode: RenderType;
     stillImageFormat: "jpeg" | "pdf" | "png" | "webp" | null;

package/dist/components/RenderQueue/actions.d.ts

@@ -1,4 +1,4 @@
-import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, VisualControlChange } from '@remotion/studio-shared';
+import type { EnumPath, RecastCodemod, RenderJob, VisualControlChange } from '@remotion/studio-shared';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
@@ -50,7 +50,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     jpegQuality: number | null;
     scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     concurrency: number;
     crf: number | null;
     startFrame: number;
@@ -106,7 +106,6 @@ export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remot
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").UpdateAvailableResponse>;
 export declare const getProjectInfo: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").ProjectInfoResponse>;
 export declare const callUpdateDefaultPropsApi: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
-export declare const canUpdateDefaultProps: (compositionId: string, readOnlyStudio: boolean) => Promise<CanUpdateDefaultPropsResponse>;
 export declare const applyVisualControlChange: ({ fileName, changes, }: {
     fileName: string;
     changes: VisualControlChange[];

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyVisualControlChange = exports.canUpdateDefaultProps = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const call_api_1 = require("../call-api");
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }) => {
@@ -172,18 +172,6 @@ const callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
     });
 };
 exports.callUpdateDefaultPropsApi = callUpdateDefaultPropsApi;
-const canUpdateDefaultProps = (compositionId, readOnlyStudio) => {
-    if (readOnlyStudio) {
-        return Promise.resolve({
-            canUpdate: false,
-            reason: 'Read-only studio',
-        });
-    }
-    return (0, call_api_1.callApi)('/api/can-update-default-props', {
-        compositionId,
-    });
-};
-exports.canUpdateDefaultProps = canUpdateDefaultProps;
 const applyVisualControlChange = ({ fileName, changes, }) => {
     return (0, call_api_1.callApi)('/api/apply-visual-control-change', {
         fileName,

package/dist/components/Timeline/Timeline.js

@@ -100,7 +100,7 @@ const TimelineInner = () => {
                 var _a;
                 const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
                 return (acc +
-                    (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other') +
+                    (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                     Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
                     (isExpanded
                         ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -78,9 +78,15 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, node
             height: expandedHeight,
         };
     }, [expandedHeight]);
+    const keysToObserve = (0, react_1.useMemo)(() => {
+        if (!schemaFields) {
+            return [];
+        }
+        return schemaFields.map((f) => f.key);
+    }, [schemaFields]);
     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 })
+                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, keysToObserve: keysToObserve })
                     ] }, field.key));
             })
             : 'No schema' }));

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

@@ -8,4 +8,5 @@ export declare const TimelineFieldRow: React.FC<{
     readonly validatedLocation: CodePosition | null;
     readonly nestedDepth: number;
     readonly nodePath: SequenceNodePath | null;
+    readonly keysToObserve: string[];
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -18,6 +18,7 @@ const fieldRowBase = {
 const fieldName = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
 };
 const fieldLabelRow = {
     flex: '0 0 50%',
@@ -26,7 +27,7 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath, keysToObserve, }) => {
     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);
@@ -42,6 +43,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, n
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const onSave = (0, react_1.useCallback)((key, value) => {
         if (!propStatuses || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
@@ -59,8 +61,28 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, n
             key,
             value: JSON.stringify(value),
             defaultValue,
-        }).then(() => undefined);
-    }, [propStatuses, validatedLocation, nodePath, field.fieldSchema.default]);
+            observedKeys: keysToObserve,
+        }).then((data) => {
+            if (data.success) {
+                if (data.newStatus.canUpdate) {
+                    setCodeValues(overrideId, data.newStatus.props);
+                }
+                else {
+                    setCodeValues(overrideId, null);
+                }
+                return;
+            }
+            return Promise.reject(new Error(data.reason));
+        });
+    }, [
+        field.fieldSchema.default,
+        keysToObserve,
+        nodePath,
+        overrideId,
+        propStatuses,
+        setCodeValues,
+        validatedLocation,
+    ]);
     const onDragValueChange = (0, react_1.useCallback)((key, value) => {
         setDragOverrides(overrideId, key, value);
     }, [setDragOverrides, overrideId]);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const TimelineImageInfo: React.FC<{
+    readonly src: string;
+    readonly visualizationWidth: number;
+}>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineImageInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
+const containerStyle = {
+    height: HEIGHT,
+    width: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    display: 'flex',
+    borderTopLeftRadius: 2,
+    borderBottomLeftRadius: 2,
+};
+const TimelineImageInfo = ({ src, visualizationWidth }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = visualizationWidth * window.devicePixelRatio;
+        canvas.height = HEIGHT * window.devicePixelRatio;
+        canvas.style.width = visualizationWidth + 'px';
+        canvas.style.height = HEIGHT + 'px';
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        current.appendChild(canvas);
+        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);
+        };
+        img.src = src;
+        return () => {
+            current.removeChild(canvas);
+        };
+    }, [src, visualizationWidth]);
+    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
+};
+exports.TimelineImageInfo = TimelineImageInfo;

package/dist/components/Timeline/TimelineListItem.js

@@ -69,8 +69,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [sequence.id, setHidden]);
     const outer = (0, react_1.useMemo)(() => {
         return {
-            height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type === 'video' ? 'video' : 'other') +
-                timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+            height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
             display: 'flex',

package/dist/components/Timeline/TimelineNumberField.js

@@ -12,20 +12,18 @@ const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragV
         setDragValue(newVal);
         onDragValueChange(field.key, newVal);
     }, [onDragValueChange, field.key]);
-    (0, react_1.useEffect)(() => {
-        setDragValue(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
         if (canUpdate && newVal !== codeValue) {
-            onSave(field.key, newVal).catch(() => {
+            onSave(field.key, newVal).finally(() => {
                 setDragValue(null);
+                onDragEnd();
             });
         }
         else {
             setDragValue(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);

package/dist/components/Timeline/TimelineRotationField.js

@@ -22,21 +22,19 @@ const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, on
         setDragValue(newVal);
         onDragValueChange(field.key, `${newVal}deg`);
     }, [onDragValueChange, field.key]);
-    (0, react_1.useEffect)(() => {
-        setDragValue(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
         const newStr = `${newVal}deg`;
         if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).catch(() => {
+            onSave(field.key, newStr).finally(() => {
                 setDragValue(null);
+                onDragEnd();
             });
         }
         else {
             setDragValue(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);

package/dist/components/Timeline/TimelineSequence.js

@@ -10,11 +10,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
+const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
 const TimelineSequence = ({ s }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
@@ -51,7 +53,7 @@ const Inner = ({ s, windowWidth }) => {
                 ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
                 : s.duration,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
-            startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
+            startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
             maxMediaDuration,
             video,
             windowWidth,
@@ -65,11 +67,13 @@ const Inner = ({ s, windowWidth }) => {
                 ? AUDIO_GRADIENT
                 : s.type === 'video'
                     ? VIDEO_GRADIENT
-                    : colors_1.BLUE,
+                    : s.type === 'image'
+                        ? IMAGE_GRADIENT
+                        : colors_1.BLUE,
             border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
             borderRadius: 2,
             position: 'absolute',
-            height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type === 'video' ? 'video' : 'other'),
+            height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
             marginLeft,
             width,
             color: 'white',
@@ -103,8 +107,9 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
+                s.type !== 'image' &&
                 s.loopDisplay === undefined &&
                 (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
                     paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),

package/dist/components/Timeline/TimelineStack/index.js

@@ -31,7 +31,9 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const assetPath = (0, react_1.useMemo)(() => {
-        if (sequence.type !== 'video' && sequence.type !== 'audio') {
+        if (sequence.type !== 'video' &&
+            sequence.type !== 'audio' &&
+            sequence.type !== 'image') {
             return null;
         }
         const isStatic = sequence.src.startsWith(window.remotion_staticBase);

package/dist/components/Timeline/TimelineTracks.js

@@ -42,7 +42,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                         const isExpanded = (_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false;
                         return (jsx_runtime_1.jsxs("div", { children: [
                                 jsx_runtime_1.jsx("div", { style: {
-                                        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
+                                        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
                                     }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence.controls) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));

package/dist/components/Timeline/TimelineTranslateField.js

@@ -29,11 +29,6 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [codeX, codeY] = (0, react_1.useMemo)(() => parseTranslate(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
     const makeString = (0, react_1.useCallback)((x, y) => `${x}px ${y}px`, []);
-    (0, react_1.useEffect)(() => {
-        setDragX(null);
-        setDragY(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
     const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {
@@ -52,14 +47,25 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newStr = makeString(newVal, currentY);
         if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).catch(() => {
+            onSave(field.key, newStr).finally(() => {
                 setDragX(null);
+                onDragEnd();
             });
         }
         else {
             setDragX(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    }, [
+        dragY,
+        codeY,
+        makeString,
+        canUpdate,
+        codeValue,
+        onSave,
+        field.key,
+        onDragEnd,
+    ]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);
@@ -68,13 +74,11 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
                 const newStr = makeString(parsed, currentY);
                 if (newStr !== codeValue) {
                     setDragX(parsed);
-                    onSave(field.key, newStr).catch(() => {
-                        setDragX(null);
-                    });
+                    onSave(field.key, newStr);
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    }, [canUpdate, dragY, codeY, makeString, codeValue, onSave, field.key]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
@@ -85,14 +89,25 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newStr = makeString(currentX, newVal);
         if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).catch(() => {
+            onSave(field.key, newStr).finally(() => {
                 setDragY(null);
+                onDragEnd();
             });
         }
         else {
             setDragY(null);
+            onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    }, [
+        dragX,
+        codeX,
+        makeString,
+        canUpdate,
+        codeValue,
+        onSave,
+        field.key,
+        onDragEnd,
+    ]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         if (canUpdate) {
             const parsed = Number(newVal);

package/dist/components/TopPanel.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
@@ -48,6 +49,7 @@ const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const MobilePanel_1 = __importDefault(require("./MobilePanel"));
+const ObserveDefaultPropsContext_1 = require("./ObserveDefaultPropsContext");
 const OptionsPanel_1 = require("./OptionsPanel");
 const PreviewToolbar_1 = require("./PreviewToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -84,6 +86,7 @@ exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
 const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMilliseconds }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
     const actualStateRight = (0, react_1.useMemo)(() => {
         if (sidebarCollapsedStateRight === 'collapsed') {
@@ -107,10 +110,12 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
-                    ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
-        ] }));
+    return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+            ? canvasContent.compositionId
+            : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
+            ] }) }));
 };
 exports.TopPanel = react_1.default.memo(TopPanelInner);

package/dist/components/UndoRedoButtons.d.ts

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

package/dist/components/UndoRedoButtons.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UndoRedoButtons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const redo_1 = require("../icons/redo");
+const undo_1 = require("../icons/undo");
+const call_api_1 = require("./call-api");
+const InlineAction_1 = require("./InlineAction");
+const iconStyle = {
+    width: 16,
+    height: 16,
+};
+const UndoRedoButtons = () => {
+    const [undoFile, setUndoFile] = (0, react_1.useState)(null);
+    const [redoFile, setRedoFile] = (0, react_1.useState)(null);
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const undoInFlight = (0, react_1.useRef)(false);
+    const redoInFlight = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        const unsub = subscribeToEvent('undo-redo-stack-changed', (event) => {
+            if (event.type !== 'undo-redo-stack-changed') {
+                return;
+            }
+            setUndoFile(event.undoFile);
+            setRedoFile(event.redoFile);
+        });
+        return () => unsub();
+    }, [subscribeToEvent]);
+    const onUndo = (0, react_1.useCallback)(() => {
+        if (undoInFlight.current) {
+            return;
+        }
+        undoInFlight.current = true;
+        (0, call_api_1.callApi)('/api/undo', {})
+            .catch(() => {
+            // Ignore errors
+        })
+            .finally(() => {
+            undoInFlight.current = false;
+        });
+    }, []);
+    const onRedo = (0, react_1.useCallback)(() => {
+        if (redoInFlight.current) {
+            return;
+        }
+        redoInFlight.current = true;
+        (0, call_api_1.callApi)('/api/redo', {})
+            .catch(() => {
+            // Ignore errors
+        })
+            .finally(() => {
+            redoInFlight.current = false;
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const undo = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'z',
+            commandCtrlKey: true,
+            callback: (e) => {
+                if (e.shiftKey) {
+                    return;
+                }
+                if (undoFile) {
+                    onUndo();
+                }
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const redo = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'y',
+            commandCtrlKey: true,
+            callback: () => {
+                if (redoFile) {
+                    onRedo();
+                }
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            undo.unregister();
+            redo.unregister();
+        };
+    }, [keybindings, onRedo, onUndo, redoFile, undoFile]);
+    const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Undo'
+        : `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
+    const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Redo'
+        : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
+    const renderUndo = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
+    }, [undoFile]);
+    const renderRedo = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx(redo_1.RedoIcon, { style: { ...iconStyle, color, opacity: redoFile ? 1 : 0.5 } }));
+    }, [redoFile]);
+    const canUndo = undoFile !== null;
+    const canRedo = redoFile !== null;
+    if (!canUndo && !canRedo) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+        ] }));
+};
+exports.UndoRedoButtons = UndoRedoButtons;