@remotion/studio 4.0.498 → 4.0.499

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
+exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.deriveInputDraggerArrowValue = exports.validateInputDraggerValue = exports.isInputDraggerValueAlignedToStep = exports.parseInputDraggerNumber = exports.inputDraggerContainerStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -60,6 +60,93 @@ const roundToDecimalPlaces = (val, decimalPlaces) => {
     const rounded = Math.round(val * factor) / factor;
     return Object.is(rounded, -0) ? 0 : rounded;
 };
+const validNumberPattern = /^[+-]?(?:(?:\d+(?:\.\d*)?)|(?:\.\d+))(?:e[+-]?\d+)?$/i;
+const parseInputDraggerNumber = (value) => {
+    const trimmedValue = value.trim();
+    if (!validNumberPattern.test(trimmedValue)) {
+        return null;
+    }
+    const parsed = Number(trimmedValue);
+    return Number.isFinite(parsed) ? parsed : null;
+};
+exports.parseInputDraggerNumber = parseInputDraggerNumber;
+const getFiniteAttribute = (value) => {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+};
+const getPositiveStep = (step) => {
+    if (step === 'any') {
+        return null;
+    }
+    const parsed = Number(step);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
+};
+const isInputDraggerValueAlignedToStep = ({ min, step, value, }) => {
+    var _a;
+    const numericStep = getPositiveStep(step);
+    if (numericStep === null) {
+        return true;
+    }
+    const stepBase = (_a = getFiniteAttribute(min)) !== null && _a !== void 0 ? _a : 0;
+    const stepsFromBase = (value - stepBase) / numericStep;
+    const tolerance = Number.EPSILON *
+        10 *
+        Math.max(1, Math.abs(value / numericStep), Math.abs(stepBase / numericStep));
+    return Math.abs(stepsFromBase - Math.round(stepsFromBase)) <= tolerance;
+};
+exports.isInputDraggerValueAlignedToStep = isInputDraggerValueAlignedToStep;
+const validateInputDraggerValue = ({ max, min, step, value, }) => {
+    const parsed = (0, exports.parseInputDraggerNumber)(value);
+    if (parsed === null) {
+        return {
+            valid: false,
+            message: 'Enter a valid number.',
+        };
+    }
+    const numericMin = getFiniteAttribute(min);
+    if (numericMin !== null && parsed < numericMin) {
+        return {
+            valid: false,
+            message: `Value must be greater than or equal to ${numericMin}.`,
+        };
+    }
+    const numericMax = getFiniteAttribute(max);
+    if (numericMax !== null && parsed > numericMax) {
+        return {
+            valid: false,
+            message: `Value must be less than or equal to ${numericMax}.`,
+        };
+    }
+    if (!(0, exports.isInputDraggerValueAlignedToStep)({ min, step, value: parsed })) {
+        return {
+            valid: false,
+            message: `Value must align to a step of ${step}.`,
+        };
+    }
+    return { valid: true, value: parsed };
+};
+exports.validateInputDraggerValue = validateInputDraggerValue;
+const getDecimalPlaces = (value) => {
+    var _a;
+    var _b;
+    const [mantissa, exponentString] = String(value).toLowerCase().split('e');
+    const exponent = Number(exponentString !== null && exponentString !== void 0 ? exponentString : 0);
+    const fractionLength = (_b = (_a = mantissa.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return Math.max(0, fractionLength - exponent);
+};
+const deriveInputDraggerArrowValue = ({ direction, max, min, step, value, }) => {
+    var _a, _b, _c;
+    const numericStep = (_a = getPositiveStep(step)) !== null && _a !== void 0 ? _a : 1;
+    const decimalPlaces = Math.max(getDecimalPlaces(value), getDecimalPlaces(numericStep));
+    const unroundedValue = value + direction * numericStep;
+    const steppedValue = decimalPlaces <= 15
+        ? roundToDecimalPlaces(unroundedValue, decimalPlaces)
+        : Number(unroundedValue.toPrecision(15));
+    const numericMin = (_b = getFiniteAttribute(min)) !== null && _b !== void 0 ? _b : -Infinity;
+    const numericMax = (_c = getFiniteAttribute(max)) !== null && _c !== void 0 ? _c : Infinity;
+    return Math.min(numericMax, Math.max(numericMin, steppedValue));
+};
+exports.deriveInputDraggerArrowValue = deriveInputDraggerArrowValue;
 const deriveInputDraggerStep = ({ min, snapToStep, step, }) => {
     if (!snapToStep) {
         return 'any';
@@ -96,11 +183,18 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const pointerDownRef = (0, react_1.useRef)(false);
+    const deriveStep = (0, react_1.useMemo)(() => {
+        return (0, exports.deriveInputDraggerStep)({
+            min: _min,
+            snapToStep,
+            step: _step,
+        });
+    }, [_min, _step, snapToStep]);
     const span = (0, react_1.useMemo)(() => ({
         color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
@@ -136,9 +230,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         setInputFallback(false);
     }, []);
     const onInputChange = (0, react_1.useCallback)((e) => {
-        const parsed = Number(e.target.value);
-        if (e.target.value !== '' &&
-            !Number.isNaN(parsed) &&
+        e.target.setCustomValidity('');
+        const parsed = (0, exports.parseInputDraggerNumber)(e.target.value);
+        if (parsed !== null &&
             (0, exports.isInputDraggerValueInRange)({
                 max: _max,
                 min: _min,
@@ -156,20 +250,48 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             onEscape();
             return;
         }
-        if (fallbackRef.current.checkValidity()) {
-            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(Number(newValue));
+        const validation = (0, exports.validateInputDraggerValue)({
+            max: _max,
+            min: _min,
+            step: deriveStep,
+            value: newValue,
+        });
+        if (validation.valid) {
+            fallbackRef.current.setCustomValidity('');
+            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(validation.value);
             setInputFallback(false);
         }
         else {
+            fallbackRef.current.setCustomValidity(validation.message);
             fallbackRef.current.reportValidity();
         }
-    }, [onEscape, onValueChangeEnd]);
-    const onKeyPress = (0, react_1.useCallback)((e) => {
+    }, [_max, _min, deriveStep, onEscape, onValueChangeEnd]);
+    const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Enter') {
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            return;
         }
-    }, []);
+        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+            return;
+        }
+        e.preventDefault();
+        const parsedInputValue = (0, exports.parseInputDraggerNumber)(e.currentTarget.value);
+        const currentValue = parsedInputValue !== null && parsedInputValue !== void 0 ? parsedInputValue : (0, exports.deriveInputDraggerDragStartValue)({
+            min: _min,
+            value,
+        });
+        const nextValue = (0, exports.deriveInputDraggerArrowValue)({
+            direction: e.key === 'ArrowUp' ? 1 : -1,
+            max: _max,
+            min: _min,
+            step: deriveStep,
+            value: currentValue,
+        });
+        e.currentTarget.value = String(nextValue);
+        e.currentTarget.setCustomValidity('');
+        onValueChange(nextValue);
+    }, [_max, _min, deriveStep, onValueChange, value]);
     const roundToStep = (val, stepSize) => {
         const factor = 1 / stepSize;
         return Math.ceil(val * factor) / factor;
@@ -214,20 +336,33 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             onValueChange(nextValue);
         };
         window.addEventListener('mousemove', moveListener);
-        window.addEventListener('pointerup', () => {
+        const endDrag = (commit) => {
             window.removeEventListener('mousemove', moveListener);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerCancel);
+            window.removeEventListener('blur', onWindowBlur);
             pointerDownRef.current = false;
             setDragging(false);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            if (lastDragValue !== null && onValueChangeEnd) {
+            if (commit && lastDragValue !== null && onValueChangeEnd) {
                 onValueChangeEnd(lastDragValue);
             }
             setTimeout(() => {
                 (0, input_dragger_click_lock_1.setClickLock)(false);
             }, 2);
-        }, {
-            once: true,
-        });
+        };
+        const onPointerUp = () => {
+            endDrag(true);
+        };
+        const onPointerCancel = () => {
+            endDrag(false);
+        };
+        const onWindowBlur = () => {
+            endDrag(false);
+        };
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerCancel);
+        window.addEventListener('blur', onWindowBlur);
     }, [
         _step,
         _min,
@@ -245,15 +380,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
         }
     }, [inputFallback]);
-    const deriveStep = (0, react_1.useMemo)(() => {
-        return (0, exports.deriveInputDraggerStep)({
-            min: _min,
-            snapToStep,
-            step: _step,
-        });
-    }, [_min, _step, snapToStep]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
     }
     return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };

package/dist/components/Splitter/SplitterContainer.d.ts

@@ -5,6 +5,8 @@ export declare const SplitterContainer: React.FC<{
     readonly orientation: SplitterOrientation;
     readonly maxFlex: number;
     readonly minFlex: number;
+    readonly maxFlexerSize: number | null;
+    readonly maxAntiFlexerSize: number | null;
     readonly id: string;
     readonly defaultFlex: number;
     readonly children: React.ReactNode;

package/dist/components/Splitter/SplitterContainer.js

@@ -19,7 +19,7 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, maxAntiFlexerSize, id, }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
     const ref = (0, react_1.useRef)(null);
@@ -34,6 +34,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             id,
             maxFlex,
             minFlex,
+            maxFlexerSize,
+            maxAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
@@ -42,6 +44,8 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         flexValue,
         id,
         maxFlex,
+        maxFlexerSize,
+        maxAntiFlexerSize,
         minFlex,
         orientation,
         persistFlex,

package/dist/components/Splitter/SplitterContext.d.ts

@@ -11,6 +11,8 @@ export type TSplitterContext = {
     ref: React.RefObject<HTMLDivElement | null>;
     maxFlex: number;
     minFlex: number;
+    maxFlexerSize: number | null;
+    maxAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;

package/dist/components/Splitter/SplitterContext.js

@@ -13,6 +13,8 @@ exports.SplitterContext = react_1.default.createContext({
     orientation: 'horizontal',
     maxFlex: 1,
     minFlex: 1,
+    maxFlexerSize: null,
+    maxAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',
     persistFlex: () => undefined,

package/dist/components/Splitter/SplitterElement.js

@@ -8,6 +8,7 @@ const colors_1 = require("../../helpers/colors");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
+    const maxSize = type === 'flexer' ? context.maxFlexerSize : context.maxAntiFlexerSize;
     const style = (0, react_1.useMemo)(() => {
         return {
             flex: 
@@ -17,8 +18,12 @@ const SplitterElement = ({ children, type, sticky }) => {
             position: 'relative',
             overflow: 'hidden',
             flexDirection: 'column',
+            maxWidth: context.orientation === 'vertical' ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined) : undefined,
+            maxHeight: context.orientation === 'horizontal'
+                ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined)
+                : undefined,
         };
-    }, [context.flexValue, type]);
+    }, [context.flexValue, context.orientation, maxSize, type]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.js

@@ -31,6 +31,8 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         // Cleanup for the listeners that only exist for the duration of a drag.
         let endDrag = null;
         const onPointerDown = (e) => {
+            var _a;
+            var _b;
             if (e.button !== 0) {
                 return;
             }
@@ -40,7 +42,20 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             // value updates on every pointermove, so it must not be re-read live.
             const dragContext = latest.current.context;
             const start = { x: e.clientX, y: e.clientY };
-            const startFlex = dragContext.flexValue;
+            const { width: containerWidth, height: containerHeight } = (_b = (_a = dragContext.ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : {
+                width: 0,
+                height: 0,
+            };
+            const availableSize = (dragContext.orientation === 'vertical'
+                ? containerWidth
+                : containerHeight) - exports.SPLITTER_HANDLE_SIZE;
+            const minFlex = dragContext.maxAntiFlexerSize === null || availableSize <= 0
+                ? dragContext.minFlex
+                : Math.max(dragContext.minFlex, 1 - dragContext.maxAntiFlexerSize / availableSize);
+            const maxFlex = dragContext.maxFlexerSize === null || availableSize <= 0
+                ? dragContext.maxFlex
+                : Math.min(dragContext.maxFlex, dragContext.maxFlexerSize / availableSize);
+            const startFlex = Math.min(maxFlex, Math.max(minFlex, dragContext.flexValue));
             dragContext.isDragging.current = start;
             (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
             current.classList.add('remotion-splitter-active');
@@ -54,7 +69,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                     : (ev.clientY - start.y) / (height - exports.SPLITTER_HANDLE_SIZE);
                 const newFlex = startFlex + change;
                 if (clamp) {
-                    return Math.min(dragContext.maxFlex, Math.max(dragContext.minFlex, newFlex));
+                    return Math.min(maxFlex, Math.max(minFlex, newFlex));
                 }
                 return newFlex;
             };
@@ -64,6 +79,8 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 current.classList.remove('remotion-splitter-active');
                 window.removeEventListener('pointermove', onPointerMove);
                 window.removeEventListener('pointerup', onPointerUp);
+                window.removeEventListener('pointercancel', onPointerCancel);
+                window.removeEventListener('blur', onWindowBlur);
                 endDrag = null;
                 player_1.PlayerInternals.updateAllElementsSizes();
             };
@@ -95,8 +112,16 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 dragContext.persistFlex(getNewValue(ev, true));
                 endDrag === null || endDrag === void 0 ? void 0 : endDrag();
             };
+            const onPointerCancel = () => {
+                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+            };
+            const onWindowBlur = () => {
+                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
+            };
             window.addEventListener('pointermove', onPointerMove);
             window.addEventListener('pointerup', onPointerUp);
+            window.addEventListener('pointercancel', onPointerCancel);
+            window.addEventListener('blur', onWindowBlur);
         };
         current.addEventListener('pointerdown', onPointerDown);
         return () => {

package/dist/components/Timeline/Timeline.js

@@ -253,7 +253,7 @@ const TimelineInner = () => {
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
                                             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                                         jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -252,17 +252,41 @@ const TimelineInOutDragHandlerInner = () => {
         videoConfig,
         width,
     ]);
+    const onPointerCancelInOut = (0, react_1.useCallback)(() => {
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setInOutDragging({
+            dragging: false,
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (inOutDragging.dragging === false) {
             return;
         }
         window.addEventListener('pointermove', onPointerMoveInOut);
         window.addEventListener('pointerup', onPointerUpInOut);
+        window.addEventListener('pointercancel', onPointerCancelInOut);
+        window.addEventListener('blur', onPointerCancelInOut);
         return () => {
             window.removeEventListener('pointermove', onPointerMoveInOut);
             window.removeEventListener('pointerup', onPointerUpInOut);
+            window.removeEventListener('pointercancel', onPointerCancelInOut);
+            window.removeEventListener('blur', onPointerCancelInOut);
+        };
+    }, [
+        inOutDragging.dragging,
+        onPointerCancelInOut,
+        onPointerMoveInOut,
+        onPointerUpInOut,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            document.body.style.userSelect = '';
+            document.body.style.webkitUserSelect = '';
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         };
-    }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
+    }, []);
     const inContextMenu = (0, react_1.useMemo)(() => {
         return [
             {

package/dist/components/Timeline/TimelineLayerEye.js

@@ -64,7 +64,10 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    const onDoubleClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineSequence.js

@@ -185,6 +185,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const durationCanResize = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+        (0, TimelineSequenceRightEdgeDragHandle_1.canResizeTimelineSequenceDuration)({
+            sequence: s,
+            status: propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
+        }));
     const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const trimBeforeCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
@@ -446,7 +451,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
-        durationCanUpdate;
+        durationCanResize;
     const showLeftEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceLeftEdgeDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&

package/dist/components/Timeline/TimelineSequenceName.js

@@ -24,6 +24,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             alignSelf: 'stretch',
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
+            flexShrink: 0,
             fontFamily: 'inherit',
             fontSize: 12,
             lineHeight: 'normal',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';
@@ -42,6 +42,10 @@ type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarg
 export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
 export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
+export declare const canResizeTimelineSequenceDuration: ({ sequence, status, }: {
+    readonly sequence: TSequence;
+    readonly status: CanUpdateSequencePropStatus | undefined;
+}) => boolean;
 export declare const isTimelineSequenceLeftEdgeDraggable: (sequence: TSequence) => boolean;
 export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, minimumDuration, }: {
     readonly initialDuration: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -129,6 +129,16 @@ const isTimelineSequenceDurationDraggable = (sequence) => {
         Boolean(sequence.controls));
 };
 exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
+const canResizeTimelineSequenceDuration = ({ sequence, status, }) => {
+    if ((status === null || status === void 0 ? void 0 : status.status) !== 'static') {
+        return false;
+    }
+    if (sequence.type === 'audio' || sequence.type === 'video') {
+        return status.codeValue !== undefined;
+    }
+    return true;
+};
+exports.canResizeTimelineSequenceDuration = canResizeTimelineSequenceDuration;
 const isTimelineSequenceLeftEdgeDraggable = (sequence) => {
     return ((!sequence.isInsideSeries || (0, exports.isCascadingSequence)(sequence)) &&
         Boolean(sequence.controls) &&
@@ -338,6 +348,7 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
     });
 };
 const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a;
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -363,7 +374,11 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             return null;
         }
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
-        if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
+        const durationStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames;
+        if (!(0, exports.canResizeTimelineSequenceDuration)({
+            sequence: originalSequence,
+            status: durationStatus,
+        })) {
             return null;
         }
         const { controls } = originalSequence;
@@ -543,14 +558,14 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
+        if (!dragState) {
+            return;
+        }
         dragStateRef.current = null;
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         setDragging(false);
-        if (!dragState) {
-            return;
-        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceLeftEdgeDragChanges)({
             targets: dragState.targets,
@@ -685,6 +700,7 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     const style = {
@@ -729,13 +745,13 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
+        if (!dragState) {
+            return;
+        }
         dragStateRef.current = null;
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         setDragging(false);
-        if (!dragState) {
-            return;
-        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, clearEffectDragOverrides: latestClearEffect, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
@@ -897,6 +913,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     return {
@@ -933,14 +950,14 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
+        if (!dragState) {
+            return;
+        }
         dragStateRef.current = null;
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         setDragging(false);
-        if (!dragState) {
-            return;
-        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceDurationDragChanges)({
             targets: dragState.targets,
@@ -1069,6 +1086,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
             window.removeEventListener('pointerup', onUp);
             window.removeEventListener('pointercancel', onCancel);
             window.removeEventListener('blur', onWindowBlur);
+            finishDrag(false);
         };
     }, [dragging, finishDrag]);
     const style = {

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -366,10 +366,12 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 clearDraggedKeyframes();
                 return;
             }
-            setDraggedKeyframes(targets.map((target) => ({
-                nodePathInfo: target.nodePathInfo,
-                frame: target.displayFrame + delta,
-            })));
+            setDraggedKeyframes(shouldDragExistingSelection
+                ? targets.map((target) => ({
+                    nodePathInfo: target.nodePathInfo,
+                    frame: target.displayFrame + delta,
+                }))
+                : []);
             applyDragOverrides({
                 delta,
                 setDragOverrides,