@remotion/studio 4.0.506 → 4.0.508

package/dist/components/SelectedOutlineTransformOriginHandle.js

@@ -0,0 +1,312 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineTransformOriginHandle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
+const editor_snapping_1 = require("../state/editor-snapping");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const selected_outline_uv_1 = require("./selected-outline-uv");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
+const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
+const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
+const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarget, outline, onDraggingChange }) => {
+    var _a, _b, _c;
+    const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const target = (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForTransformOrigin) ||
+        (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation)
+        ? getLatestTargetByKey(layoutTarget.key)
+        : undefined;
+    const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
+    const transformOriginValue = (_b = transformOriginDrag === null || transformOriginDrag === void 0 ? void 0 : transformOriginDrag.originValue) !== null && _b !== void 0 ? _b : ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation)
+        ? layoutTarget.transformOriginValue
+        : null);
+    const crop = target === null || target === void 0 ? void 0 : target.crop;
+    const transformOriginPoints = (_c = outline.uncroppedPoints) !== null && _c !== void 0 ? _c : outline.points;
+    const parsed = (0, react_1.useMemo)(() => transformOriginValue === null
+        ? null
+        : (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginValue), [transformOriginValue]);
+    const uv = (0, react_1.useMemo)(() => {
+        if (parsed === null || outline.dimensions === null) {
+            return null;
+        }
+        return (0, transform_origin_utils_1.parsedTransformOriginToUv)({
+            parsed,
+            width: outline.dimensions.width,
+            height: outline.dimensions.height,
+        });
+    }, [outline.dimensions, parsed]);
+    const position = (0, react_1.useMemo)(() => {
+        if (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) {
+            return (0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
+                dimensions: outline.dimensions,
+                points: transformOriginPoints,
+                transformOriginValue: layoutTarget.transformOriginValue,
+            });
+        }
+        return uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, uv);
+    }, [
+        layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation,
+        layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.transformOriginValue,
+        outline.dimensions,
+        transformOriginPoints,
+        uv,
+    ]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (event.button !== 0 ||
+            transformOriginDrag === null ||
+            parsed === null ||
+            uv === null ||
+            outline.dimensions === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const rotation = (0, timeline_rotation_utils_1.parseCssRotation)(transformOriginDrag.rotateValue);
+        if (rotation === null) {
+            return;
+        }
+        const { dimensions } = outline;
+        if (dimensions === null) {
+            return;
+        }
+        const scale = no_react_1.NoReactInternals.parseScaleValue(transformOriginDrag.scaleValue);
+        const startTranslate = (0, timeline_translate_utils_1.parseTranslate)(transformOriginDrag.translateValue);
+        const svgRect = svg.getBoundingClientRect();
+        let last = null;
+        let currentPointerX = event.clientX;
+        let currentPointerY = event.clientY;
+        let axisLocked = event.shiftKey;
+        onDraggingChange(true);
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('crosshair');
+        const updateFromPointerPosition = () => {
+            const point = {
+                x: currentPointerX - svgRect.left,
+                y: currentPointerY - svgRect.top,
+            };
+            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(transformOriginPoints, point);
+            const lockedAxis = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginLockedAxis)({
+                axisLocked,
+                dimensions,
+                startUv: uv,
+                uv: rawUv,
+            });
+            const axisLockedUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
+                lockedAxis,
+                startUv: uv,
+                uv: rawUv,
+            });
+            const snapPoint = lockedAxis === null
+                ? point
+                : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, axisLockedUv);
+            const snappedUv = editorSnapping
+                ? (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                    crop: crop !== null && crop !== void 0 ? crop : null,
+                    point: snapPoint,
+                    points: transformOriginPoints,
+                    thresholdPx: null,
+                    uv: axisLockedUv,
+                })
+                : axisLockedUv;
+            const nextUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
+                lockedAxis,
+                startUv: uv,
+                uv: snappedUv,
+            });
+            const deltaOrigin = [
+                (nextUv[0] - uv[0]) * dimensions.width,
+                (nextUv[1] - uv[1]) * dimensions.height,
+            ];
+            const [nextTranslateX, nextTranslateY] = (0, selected_outline_drag_1.compensateTranslateForTransformOrigin)({
+                startTranslate: [startTranslate[0], startTranslate[1]],
+                deltaOrigin,
+                rotation,
+                scale,
+            });
+            const origin = (0, transform_origin_utils_1.serializeTransformOrigin)({
+                uv: nextUv,
+                z: parsed.z,
+            });
+            const translate = (0, timeline_translate_utils_1.serializeTranslate)([
+                nextTranslateX,
+                nextTranslateY,
+                startTranslate[2],
+            ]);
+            last = { uv: nextUv, origin, translate };
+            setDragOverrides(transformOriginDrag.nodePath, selected_outline_types_1.transformOriginFieldKey, transformOriginDrag.originPropStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: transformOriginDrag.originPropStatus,
+                    frame: transformOriginDrag.sourceFrame,
+                    value: origin,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(origin));
+            setDragOverrides(transformOriginDrag.nodePath, selected_outline_types_1.translateFieldKey, transformOriginDrag.translatePropStatus.status === 'keyframed'
+                ? transformOriginDrag.originPropStatus.status === 'keyframed'
+                    ? remotion_1.Internals.makeKeyframedDragOverride({
+                        status: transformOriginDrag.translatePropStatus,
+                        frame: transformOriginDrag.sourceFrame,
+                        value: translate,
+                    })
+                    : {
+                        type: 'keyframed',
+                        status: {
+                            ...transformOriginDrag.translatePropStatus,
+                            keyframes: transformOriginDrag.translatePropStatus.keyframes.map((keyframe) => {
+                                const keyframeTranslate = (0, timeline_translate_utils_1.parseTranslate)(String(keyframe.value));
+                                return {
+                                    ...keyframe,
+                                    value: (0, timeline_translate_utils_1.serializeTranslate)([
+                                        keyframeTranslate[0] +
+                                            nextTranslateX -
+                                            startTranslate[0],
+                                        keyframeTranslate[1] +
+                                            nextTranslateY -
+                                            startTranslate[1],
+                                        keyframeTranslate[2],
+                                    ]),
+                                };
+                            }),
+                        },
+                    }
+                : remotion_1.Internals.makeStaticDragOverride(translate));
+        };
+        updateFromPointerPosition();
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            currentPointerX = moveEvent.clientX;
+            currentPointerY = moveEvent.clientY;
+            axisLocked = moveEvent.shiftKey;
+            updateFromPointerPosition();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextAxisLocked = keyEvent.type === 'keydown';
+            if (nextAxisLocked === axisLocked) {
+                return;
+            }
+            axisLocked = nextAxisLocked;
+            updateFromPointerPosition();
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+            onDraggingChange(false);
+            if (last === null || (0, selected_outline_drag_1.uvsEqual)(last.uv, uv)) {
+                clearDragOverrides(transformOriginDrag.nodePath);
+                return;
+            }
+            const { staticChanges, keyframedChanges } = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginDragChanges)({
+                target: transformOriginDrag,
+                startTranslate,
+                origin: last.origin,
+                translate: last.translate,
+            });
+            if (staticChanges.length === 0 && keyframedChanges.length === 0) {
+                clearDragOverrides(transformOriginDrag.nodePath);
+                return;
+            }
+            const promise = staticChanges.length === 0
+                ? (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: transformOriginDrag.clientId,
+                })
+                : (0, save_sequence_prop_1.saveSequenceProps)({
+                    changes: staticChanges,
+                    addedKeyframes: keyframedChanges,
+                    movedKeyframes: null,
+                    setPropStatuses,
+                    clientId: transformOriginDrag.clientId,
+                    undoLabel: 'Move transform origin',
+                    redoLabel: 'Move transform origin back',
+                });
+            promise
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save transform origin: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                clearDragOverrides(transformOriginDrag.nodePath);
+            });
+        };
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
+    }, [
+        clearDragOverrides,
+        crop,
+        editorSnapping,
+        onDraggingChange,
+        outline,
+        parsed,
+        setDragOverrides,
+        setPropStatuses,
+        transformOriginDrag,
+        transformOriginPoints,
+        uv,
+    ]);
+    if (position === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("g", { "data-remotion-studio-transform-origin-handle": true, pointerEvents: transformOriginDrag === null ? 'none' : 'all', cursor: transformOriginDrag === null ? undefined : 'crosshair', onPointerDown: onPointerDown, "aria-hidden": "true", style: {
+            filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW,
+        }, children: [
+            jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
+        ] }));
+};
+exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;

package/dist/components/SelectedOutlineUvControls.d.ts

@@ -1,26 +1,20 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { SelectedOutline } from './selected-outline-geometry';
-import { type SelectedOutlineUvHandle } from './selected-outline-uv';
+import type { SelectedOutlineLayoutTarget } from './selected-outline-types';
 import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 export declare const getSelectedOutlineUvHandleTimelineSelection: ({ effectIndex, fieldKey, nodePathInfo, }: {
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly nodePathInfo: SequenceNodePathInfo;
 }) => TimelineSelection;
-type UvTarget = {
-    readonly containsSelection: boolean;
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly uvHandles: readonly SelectedOutlineUvHandle[];
-};
 export declare const SelectedOutlineUvHandleConnectionLayer: React.FC<{
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;
-    readonly target: UvTarget | undefined;
 }>;
 export declare const SelectedOutlineUvHandleCircleLayer: React.FC<{
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onSelect: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
     readonly outline: SelectedOutline;
-    readonly target: UvTarget | undefined;
 }>;
-export {};

package/dist/components/SelectedOutlineUvControls.js

@@ -37,6 +37,7 @@ exports.SelectedOutlineUvHandleCircleLayer = exports.SelectedOutlineUvHandleConn
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
@@ -47,6 +48,7 @@ const selected_outline_measurement_2 = require("./selected-outline-measurement")
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const save_effect_prop_1 = require("./Timeline/save-effect-prop");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const getSvgPointFromPointerEvent = ({ event, rect, }) => {
     return {
         x: event.clientX - rect.left,
@@ -662,27 +664,70 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
     ]);
     return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: handle.isSelected ? selectedUvHandleRadius : uvHandleRadius, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
 };
-const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
-    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
+const useSelectedOutlineUvTarget = (layoutTarget) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const selectedEffectsBySequenceKey = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedEffectFieldsBySequenceKey)(selectedItems), [selectedItems]);
+    return (0, react_1.useMemo)(() => {
+        return {
+            containsSelection: layoutTarget.containsSelection,
+            nodePathInfo: layoutTarget.nodePathInfo,
+            uvHandles: (0, selected_outline_uv_1.getSelectedUvHandles)({
+                propStatuses,
+                clientId: previewServerState.type === 'connected'
+                    ? previewServerState.clientId
+                    : null,
+                getEffectDragOverrides,
+                nodePath: layoutTarget.nodePathInfo.sequenceSubscriptionKey,
+                selectedEffects: selectedEffectsBySequenceKey.get(layoutTarget.key),
+                sequence: layoutTarget.sequence,
+                sourceFrame: timelinePosition - layoutTarget.keyframeDisplayOffset,
+            }),
+        };
+    }, [
+        getEffectDragOverrides,
+        layoutTarget,
+        previewServerState,
+        propStatuses,
+        selectedEffectsBySequenceKey,
+        timelinePosition,
+    ]);
+};
+const SelectedOutlineUvHandleConnectionLayerActive = ({ layoutTarget, outline }) => {
+    const target = useSelectedOutlineUvTarget(layoutTarget);
+    if (!target.containsSelection || target.uvHandles.length === 0) {
         return null;
     }
     return (jsx_runtime_1.jsx(SelectedUvHandleConnectionLines, { handles: target.uvHandles, outline: outline }));
 };
+const SelectedOutlineUvHandleConnectionLayer = ({ layoutTarget, outline }) => {
+    if ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForUvHandles) !== true) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(SelectedOutlineUvHandleConnectionLayerActive, { layoutTarget: layoutTarget, outline: outline }));
+};
 exports.SelectedOutlineUvHandleConnectionLayer = SelectedOutlineUvHandleConnectionLayer;
-const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, onSelect, outline, target }) => {
-    const ellipseControls = (0, react_1.useMemo)(() => {
-        var _a;
-        return (0, selected_outline_uv_1.getUvEllipseInteractiveControls)({
-            handles: (_a = target === null || target === void 0 ? void 0 : target.uvHandles) !== null && _a !== void 0 ? _a : [],
-            dimensions: outline.dimensions,
-            points: outline.points,
-        });
-    }, [outline.dimensions, outline.points, target === null || target === void 0 ? void 0 : target.uvHandles]);
-    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
+const SelectedOutlineUvHandleCircleLayerActive = ({ layoutTarget, onDraggingChange, onSelect, outline }) => {
+    const target = useSelectedOutlineUvTarget(layoutTarget);
+    const ellipseControls = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.getUvEllipseInteractiveControls)({
+        handles: target.uvHandles,
+        dimensions: outline.dimensions,
+        points: outline.points,
+    }), [outline.dimensions, outline.points, target.uvHandles]);
+    if (!target.containsSelection || target.uvHandles.length === 0) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [ellipseControls.map((control) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(SelectedUvEllipseStartHandle, { control: control, onDraggingChange: onDraggingChange, outline: outline }), jsx_runtime_1.jsx(SelectedUvEllipseResizeHandle, { axis: "width", control: control, onDraggingChange: onDraggingChange, outline: outline }), jsx_runtime_1.jsx(SelectedUvEllipseResizeHandle, { axis: "height", control: control, onDraggingChange: onDraggingChange, outline: outline }), jsx_runtime_1.jsx(SelectedUvEllipseRotationHandle, { control: control, onDraggingChange: onDraggingChange })
                 ] }, `${control.handle.effectIndex}-${control.handle.fieldKey}-ellipse-controls`))), target.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, nodePathInfo: target.nodePathInfo, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))] }));
 };
+const SelectedOutlineUvHandleCircleLayer = ({ layoutTarget, onDraggingChange, onSelect, outline }) => {
+    if ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForUvHandles) !== true) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(SelectedOutlineUvHandleCircleLayerActive, { layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }));
+};
 exports.SelectedOutlineUvHandleCircleLayer = SelectedOutlineUvHandleCircleLayer;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -35,6 +35,14 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
     const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
         setOverrideIdToNodePathMap((prev) => {
             const existing = prev[overrideId];
+            if (state === null) {
+                if (!existing) {
+                    return prev;
+                }
+                const next = { ...prev };
+                delete next[overrideId];
+                return next;
+            }
             if (existing && existing === state) {
                 return prev;
             }

package/dist/components/SettingsContext.d.ts

@@ -0,0 +1,15 @@
+import type { GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import React from 'react';
+type SettingsContextValue = {
+    readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
+    readonly error: string | null;
+    readonly publicLicenseKey: string | null;
+    readonly revision: number;
+    readonly setPublicLicenseKey: (publicLicenseKey: string | null) => void;
+};
+export declare const SettingsProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useSettings: () => SettingsContextValue;
+export {};

package/dist/components/SettingsContext.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSettings = exports.SettingsProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
+const call_api_1 = require("./call-api");
+const SettingsContext = (0, react_1.createContext)(null);
+const SettingsProvider = ({ children }) => {
+    var _a;
+    var _b;
+    const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [settings, setSettings] = (0, react_1.useState)({
+        codingAgentInfo: null,
+        editorInfo: null,
+        error: null,
+        publicLicenseKey: (_b = (_a = window.remotion_studioConfig) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+        revision: 0,
+    });
+    (0, react_1.useEffect)(() => {
+        if (previewServerState.type !== 'connected' ||
+            (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+            return;
+        }
+        const controller = new AbortController();
+        setSettings((currentSettings) => ({
+            ...currentSettings,
+            error: null,
+        }));
+        Promise.all([
+            (0, call_api_1.callApi)('/api/default-editor-info', {}, controller.signal),
+            (0, call_api_1.callApi)('/api/default-coding-agent-info', {}, controller.signal),
+        ])
+            .then(([editorInfo, codingAgentInfo]) => {
+            const runtimeConfig = window.remotion_studioConfig;
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                codingAgentInfo: {
+                    ...codingAgentInfo,
+                    defaultCodingAgent: runtimeConfig
+                        ? runtimeConfig.defaultCodingAgent
+                        : codingAgentInfo.defaultCodingAgent,
+                },
+                editorInfo: {
+                    ...editorInfo,
+                    defaultEditor: runtimeConfig
+                        ? runtimeConfig.defaultEditor
+                        : editorInfo.defaultEditor,
+                },
+                error: null,
+                revision: currentSettings.revision + 1,
+            }));
+        })
+            .catch((err) => {
+            if (controller.signal.aborted) {
+                return;
+            }
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                error: err.message,
+            }));
+        });
+        return () => controller.abort();
+    }, [previewServerState.type]);
+    (0, react_1.useEffect)(() => {
+        return subscribeToEvent('config-file-changed', (event) => {
+            if (event.type !== 'config-file-changed') {
+                return;
+            }
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                codingAgentInfo: currentSettings.codingAgentInfo
+                    ? {
+                        ...currentSettings.codingAgentInfo,
+                        defaultCodingAgent: event.studioRuntimeConfig.defaultCodingAgent,
+                    }
+                    : null,
+                editorInfo: currentSettings.editorInfo
+                    ? {
+                        ...currentSettings.editorInfo,
+                        defaultEditor: event.studioRuntimeConfig.defaultEditor,
+                    }
+                    : null,
+                error: null,
+                publicLicenseKey: event.studioRuntimeConfig.publicLicenseKey,
+                revision: currentSettings.revision + 1,
+            }));
+        });
+    }, [subscribeToEvent]);
+    const setPublicLicenseKey = (0, react_1.useCallback)((publicLicenseKey) => {
+        setSettings((currentSettings) => {
+            if (currentSettings.publicLicenseKey === publicLicenseKey) {
+                return currentSettings;
+            }
+            return {
+                ...currentSettings,
+                publicLicenseKey,
+                revision: currentSettings.revision + 1,
+            };
+        });
+    }, []);
+    const value = (0, react_1.useMemo)(() => {
+        return { ...settings, setPublicLicenseKey };
+    }, [setPublicLicenseKey, settings]);
+    return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: children }));
+};
+exports.SettingsProvider = SettingsProvider;
+const useSettings = () => {
+    const context = (0, react_1.useContext)(SettingsContext);
+    if (context === null) {
+        throw new Error('useSettings must be used inside SettingsProvider');
+    }
+    return context;
+};
+exports.useSettings = useSettings;

package/dist/components/SettingsModal.js

@@ -12,6 +12,8 @@ const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const render_modals_1 = require("./RenderModal/render-modals");
+const SettingsContext_1 = require("./SettingsContext");
+const SettingsModalFooter_1 = require("./SettingsModalFooter");
 const vertical_1 = require("./Tabs/vertical");
 const hiddenPanel = {
     display: 'none',
@@ -28,6 +30,7 @@ const appsIconContainer = {
 };
 const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
     const [tab, setTab] = (0, react_1.useState)(initialTab);
     const [openedTabs, setOpenedTabs] = (0, react_1.useState)([initialTab]);
     const dismiss = (0, react_1.useCallback)(() => {
@@ -42,9 +45,12 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
             return [...currentOpenedTabs, newTab];
         });
     }, []);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: appsIconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? render_modals_1.optionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, { onSaved: dismiss }) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? render_modals_1.optionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, { initialPublicLicenseKey: initialPublicLicenseKey, onSaved: dismiss }) })) : null] })
-        ] }));
+    (0, react_1.useEffect)(() => {
+        setPublicLicenseKey(initialPublicLicenseKey);
+    }, [initialPublicLicenseKey, setPublicLicenseKey]);
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: appsIconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? render_modals_1.optionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? render_modals_1.optionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, {})
+            ] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export declare const SettingsModalFooter: React.FC<{
-    readonly children: React.ReactNode;
-}>;
+export declare const SettingsModalFooter: React.FC;