@remotion/studio 4.0.497 → 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/RenderButton.js

@@ -281,7 +281,6 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
             inFrameMark: inFrame,
             outFrameMark: outFrame,
             initialLogLevel: defaults.logLevel,
-            initialLicenseKey: defaults.publicLicenseKey,
             initialStillImageFormat: defaults.stillImageFormat,
             initialScale: defaults.scale,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,

package/dist/components/RenderModal/WebRenderModal.js

@@ -32,7 +32,6 @@ const use_encodable_video_codecs_1 = require("./use-encodable-video-codecs");
 const WebRenderModalAdvanced_1 = require("./WebRenderModalAdvanced");
 const WebRenderModalAudio_1 = require("./WebRenderModalAudio");
 const WebRenderModalBasic_1 = require("./WebRenderModalBasic");
-const WebRenderModalLicense_1 = require("./WebRenderModalLicense");
 const WebRenderModalPicture_1 = require("./WebRenderModalPicture");
 const invalidCharacters = ['?', '*', '+', ':', '%'];
 const isValidStillExtension = (extension, stillImageFormat) => {
@@ -80,7 +79,7 @@ const validateOutnameForStill = ({ outName, stillImageFormat, }) => {
 // TODO: Shortcut: Shift + R
 // TODO: Apply defaultCodec
 // TODO: Apply defaultOutName
-const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialLicenseKey, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
+const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark, initialLogLevel, initialStillImageFormat, initialDefaultOutName, initialScale, initialDelayRenderTimeout, initialMediaCacheSizeInBytes, initialContainer, initialVideoCodec, initialAudioCodec, initialAudioBitrate, initialVideoBitrate, initialHardwareAcceleration, initialKeyframeIntervalInSeconds, initialTransparent, initialMuted, initialPageResponsiveness, }) => {
     var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -89,6 +88,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     if (!context) {
         throw new Error('Should not be able to render without resolving comp first');
     }
+    const renderDefaults = window.remotion_renderDefaults;
+    if (!renderDefaults) {
+        throw new Error('Render defaults are not available');
+    }
+    const { publicLicenseKey } = renderDefaults;
     const { resolved: { result: resolvedComposition }, unresolved: unresolvedComposition, } = context;
     const [isVideo] = (0, react_1.useState)(() => {
         return typeof resolvedComposition.durationInFrames === 'undefined'
@@ -123,7 +127,6 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
     const [transparent, setTransparent] = (0, react_1.useState)(initialTransparent !== null && initialTransparent !== void 0 ? initialTransparent : false);
     const [muted, setMuted] = (0, react_1.useState)(initialMuted !== null && initialMuted !== void 0 ? initialMuted : false);
     const [scale, setScale] = (0, react_1.useState)(initialScale !== null && initialScale !== void 0 ? initialScale : 1);
-    const [licenseKey, setLicenseKey] = (0, react_1.useState)(initialLicenseKey);
     const [pageResponsiveness, setPageResponsiveness] = (0, react_1.useState)(initialPageResponsiveness !== null && initialPageResponsiveness !== void 0 ? initialPageResponsiveness : 'medium');
     const encodableAudioCodecs = (0, use_encodable_audio_codecs_1.useEncodableAudioCodecs)(container);
     const encodableVideoCodecs = (0, use_encodable_video_codecs_1.useEncodableVideoCodecs)(container);
@@ -335,7 +338,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 delayRenderTimeout,
                 mediaCacheSizeInBytes,
                 logLevel,
-                licenseKey,
+                licenseKey: publicLicenseKey,
                 scale,
             }, compositionRef);
         }
@@ -361,7 +364,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                 delayRenderTimeout,
                 mediaCacheSizeInBytes,
                 logLevel,
-                licenseKey,
+                licenseKey: publicLicenseKey,
                 scale,
                 pageResponsiveness,
             }, compositionRef);
@@ -388,7 +391,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         delayRenderTimeout,
         mediaCacheSizeInBytes,
         logLevel,
-        licenseKey,
+        publicLicenseKey,
         container,
         effectiveVideoCodec,
         effectiveAudioCodec,
@@ -422,14 +425,17 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
                                     "Audio"] })) : null, jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
-                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [
+                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                                    type: 'configure-license',
+                                    initialPublicLicenseKey: publicLicenseKey,
+                                }), children: [
                                     jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }),
                                     "License"] })
                         ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,
-                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
+                            } })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { renderMode: renderMode, muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, pageResponsiveness: pageResponsiveness, setPageResponsiveness: setPageResponsiveness })) : null })
                 ] })
         ] }));
 };

package/dist/components/SelectedOutlineOverlay.js

@@ -398,7 +398,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!interactivity_enabled_1.studioInteractivityEnabled || !editorShowOutlines) {
+        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() || !editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);

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/MaxTimelineTracks.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-export declare const MAX_TIMELINE_TRACKS: number;
 export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 export declare const MaxTimelineTracksReached: React.FC;

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.MAX_TIMELINE_TRACKS = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
     height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
@@ -18,6 +17,7 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+    const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
+    return (jsx_runtime_1.jsxs("div", { style: container, children: ["Limited display to ", maxTimelineTracks, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

package/dist/components/Timeline/Timeline.js

@@ -43,6 +43,7 @@ const colors_1 = require("../../helpers/colors");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -51,7 +52,6 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
-const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const SequencePropsObserver_1 = require("./SequencePropsObserver");
 const should_show_track_in_timeline_1 = require("./should-show-track-in-timeline");
 const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequence-props");
@@ -92,7 +92,7 @@ const TimelineContextMenuArea = ({ children }) => {
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -219,7 +219,7 @@ const TimelineInner = () => {
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const videoConfigIsNull = videoConfig === null;
     const timeline = (0, react_1.useMemo)(() => {
         if (videoConfigIsNull) {
@@ -240,21 +240,22 @@ const TimelineInner = () => {
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
     }, [durationInFrames, timeline]);
+    const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return filtered.length > MaxTimelineTracks_1.MAX_TIMELINE_TRACKS
-            ? filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS)
+        return filtered.length > maxTimelineTracks
+            ? filtered.slice(0, maxTimelineTracks)
             : filtered;
-    }, [filtered]);
+    }, [filtered, maxTimelineTracks]);
     const hasBeenCut = filtered.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;
                 }
                 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));
-            }), interactivity_enabled_1.studioInteractivityEnabled ? 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: [interactivity_enabled_1.studioInteractivityEnabled ? (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: [
+            }), (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, 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, {}), interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                        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/TimelineDragHandler.js

@@ -89,7 +89,7 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && interactivity_enabled_1.studioInteractivityEnabled ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {