@remotion/studio 4.0.512 → 4.0.514

package/dist/components/RenderingSettings.js

@@ -0,0 +1,355 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderingSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const presets_labels_1 = require("../helpers/presets-labels");
+const prores_labels_1 = require("../helpers/prores-labels");
+const Checkmark_1 = require("../icons/Checkmark");
+const styles_1 = require("./InspectorPanel/styles");
+const layout_1 = require("./layout");
+const ComboBox_1 = require("./NewComposition/ComboBox");
+const RemInput_1 = require("./NewComposition/RemInput");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const CrfSetting_1 = require("./RenderModal/CrfSetting");
+const human_readable_codec_1 = require("./RenderModal/human-readable-codec");
+const layout_2 = require("./RenderModal/layout");
+const NumberSetting_1 = require("./RenderModal/NumberSetting");
+const RenderModalHr_1 = require("./RenderModal/RenderModalHr");
+const SegmentedControl_1 = require("./SegmentedControl");
+const SettingsContext_1 = require("./SettingsContext");
+const use_auto_save_config_1 = require("./use-auto-save-config");
+const container = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};
+const dividerLabel = {
+    ...styles_1.sectionHeader,
+    margin: 0,
+    padding: '4px 16px',
+};
+const fullWidth = {
+    boxSizing: 'border-box',
+    width: 180,
+};
+const REMOTION_DEFAULT = 'remotion-default';
+const DEFAULT_CODEC = 'h264';
+const DEFAULT_STILL_IMAGE_FORMAT = 'png';
+const DEFAULT_VIDEO_IMAGE_FORMAT = 'jpeg';
+const DEFAULT_PRO_RES_PROFILE = 'hq';
+const DEFAULT_X264_PRESET = 'medium';
+const RenderingSettings = () => {
+    var _a;
+    const { error: settingsError, renderDefaults, revision } = (0, SettingsContext_1.useSettings)();
+    const [codec, setCodec] = (0, react_1.useState)(null);
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(null);
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(null);
+    const [proResProfile, setProResProfile] = (0, react_1.useState)(null);
+    const [x264Preset, setX264Preset] = (0, react_1.useState)(null);
+    const [qualityMode, setQualityMode] = (0, react_1.useState)('crf');
+    const [crf, setCrf] = (0, react_1.useState)(18);
+    const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('1M');
+    const [audioCodec, setAudioCodec] = (0, react_1.useState)(null);
+    const [concurrency, setConcurrency] = (0, react_1.useState)(1);
+    const [editedSetters, setEditedSetters] = (0, react_1.useState)(() => new Set());
+    const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(-1);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d, _e;
+        var _f, _g, _h, _j, _k, _l, _m, _o;
+        if (renderDefaults === null) {
+            return;
+        }
+        setCodec((_f = (_a = renderDefaults.configFileRenderDefaults) === null || _a === void 0 ? void 0 : _a.codec) !== null && _f !== void 0 ? _f : null);
+        setScale(renderDefaults.scale);
+        setStillImageFormat((_g = (_b = renderDefaults.configFileRenderDefaults) === null || _b === void 0 ? void 0 : _b.stillImageFormat) !== null && _g !== void 0 ? _g : null);
+        setVideoImageFormat((_h = (_c = renderDefaults.configFileRenderDefaults) === null || _c === void 0 ? void 0 : _c.videoImageFormat) !== null && _h !== void 0 ? _h : null);
+        setProResProfile((_j = (_d = renderDefaults.configFileRenderDefaults) === null || _d === void 0 ? void 0 : _d.proResProfile) !== null && _j !== void 0 ? _j : null);
+        setX264Preset((_k = (_e = renderDefaults.configFileRenderDefaults) === null || _e === void 0 ? void 0 : _e.x264Preset) !== null && _k !== void 0 ? _k : null);
+        setQualityMode(renderDefaults.videoBitrate === null ? 'crf' : 'bitrate');
+        setCrf((_m = (_l = renderDefaults.crf) !== null && _l !== void 0 ? _l : client_1.BrowserSafeApis.getDefaultCrfForCodec(renderDefaults.codec)) !== null && _m !== void 0 ? _m : 18);
+        setVideoBitrate((_o = renderDefaults.videoBitrate) !== null && _o !== void 0 ? _o : '1M');
+        setAudioCodec(renderDefaults.audioCodec);
+        setConcurrency(renderDefaults.concurrency);
+        setEditedSetters(new Set());
+        setSyncedRevision(revision);
+        setError(null);
+    }, [renderDefaults, revision]);
+    const markEdited = (0, react_1.useCallback)((setter) => {
+        setEditedSetters((current) => new Set(current).add(setter));
+    }, []);
+    const selectCodec = (0, react_1.useCallback)((value) => {
+        setCodec(value);
+        markEdited('setCodec');
+    }, [markEdited]);
+    const selectStillImageFormat = (0, react_1.useCallback)((value) => {
+        setStillImageFormat(value);
+        markEdited('setStillImageFormat');
+    }, [markEdited]);
+    const selectVideoImageFormat = (0, react_1.useCallback)((value) => {
+        setVideoImageFormat(value);
+        markEdited('setVideoImageFormat');
+    }, [markEdited]);
+    const selectProResProfile = (0, react_1.useCallback)((value) => {
+        setProResProfile(value);
+        markEdited('setProResProfile');
+    }, [markEdited]);
+    const selectX264Preset = (0, react_1.useCallback)((value) => {
+        setX264Preset(value);
+        markEdited('setX264Preset');
+    }, [markEdited]);
+    const selectQualityMode = (0, react_1.useCallback)((value) => {
+        setQualityMode(value);
+        markEdited('setCrf');
+        markEdited('setVideoBitrate');
+    }, [markEdited]);
+    const changeCrf = (0, react_1.useCallback)((value) => {
+        setCrf(value);
+        markEdited('setCrf');
+        markEdited('setVideoBitrate');
+    }, [markEdited]);
+    const selectAudioCodec = (0, react_1.useCallback)((value) => {
+        setAudioCodec(value);
+        markEdited('setAudioCodec');
+    }, [markEdited]);
+    const changeScale = (0, react_1.useCallback)((value) => {
+        setScale(value);
+        markEdited('setScale');
+    }, [markEdited]);
+    const changeConcurrency = (0, react_1.useCallback)((value) => {
+        setConcurrency(value);
+        markEdited('setConcurrency');
+    }, [markEdited]);
+    const makeValues = ({ options, selected, setSelected, labelValue = (value) => value, }) => options.map((value) => ({
+        id: value,
+        key: value,
+        keyHint: null,
+        label: labelValue(value),
+        leftItem: selected === value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+        onClick: () => setSelected(value),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        type: 'item',
+        value,
+    }));
+    const makeRemotionDefaultValue = ({ labelValue, onClick, selected, }) => [
+        {
+            id: REMOTION_DEFAULT,
+            keyHint: null,
+            label: `Default (${labelValue})`,
+            leftItem: selected ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: REMOTION_DEFAULT,
+        },
+        { id: `${REMOTION_DEFAULT}-divider`, type: 'divider' },
+    ];
+    const codecValues = (0, react_1.useMemo)(() => [
+        ...makeRemotionDefaultValue({
+            labelValue: (0, human_readable_codec_1.humanReadableCodec)(DEFAULT_CODEC),
+            onClick: () => selectCodec(null),
+            selected: codec === null,
+        }),
+        ...makeValues({
+            options: client_1.BrowserSafeApis.validCodecs.filter((value) => value !== 'mp3' && value !== 'wav' && value !== 'aac'),
+            selected: codec,
+            setSelected: selectCodec,
+            labelValue: human_readable_codec_1.humanReadableCodec,
+        }),
+    ], [codec, selectCodec]);
+    const stillFormatValues = (0, react_1.useMemo)(() => [
+        ...makeRemotionDefaultValue({
+            labelValue: DEFAULT_STILL_IMAGE_FORMAT.toUpperCase(),
+            onClick: () => selectStillImageFormat(null),
+            selected: stillImageFormat === null,
+        }),
+        ...makeValues({
+            options: client_1.BrowserSafeApis.validStillImageFormats,
+            selected: stillImageFormat,
+            setSelected: selectStillImageFormat,
+            labelValue: (value) => value.toUpperCase(),
+        }),
+    ], [selectStillImageFormat, stillImageFormat]);
+    const videoFormatValues = (0, react_1.useMemo)(() => [
+        ...makeRemotionDefaultValue({
+            labelValue: DEFAULT_VIDEO_IMAGE_FORMAT.toUpperCase(),
+            onClick: () => selectVideoImageFormat(null),
+            selected: videoImageFormat === null,
+        }),
+        ...makeValues({
+            options: client_1.BrowserSafeApis.validVideoImageFormats,
+            selected: videoImageFormat,
+            setSelected: selectVideoImageFormat,
+            labelValue: (value) => value.toUpperCase(),
+        }),
+    ], [selectVideoImageFormat, videoImageFormat]);
+    const profileValues = (0, react_1.useMemo)(() => [
+        ...makeRemotionDefaultValue({
+            labelValue: (0, prores_labels_1.labelProResProfile)(DEFAULT_PRO_RES_PROFILE),
+            onClick: () => selectProResProfile(null),
+            selected: proResProfile === null,
+        }),
+        ...makeValues({
+            options: client_1.BrowserSafeApis.proResProfileOptions,
+            selected: proResProfile,
+            setSelected: selectProResProfile,
+            labelValue: prores_labels_1.labelProResProfile,
+        }),
+    ], [proResProfile, selectProResProfile]);
+    const presetValues = (0, react_1.useMemo)(() => [
+        ...makeRemotionDefaultValue({
+            labelValue: (0, presets_labels_1.labelx264Preset)(DEFAULT_X264_PRESET),
+            onClick: () => selectX264Preset(null),
+            selected: x264Preset === null,
+        }),
+        ...makeValues({
+            options: client_1.BrowserSafeApis.x264PresetOptions,
+            selected: x264Preset,
+            setSelected: selectX264Preset,
+            labelValue: presets_labels_1.labelx264Preset,
+        }),
+    ], [selectX264Preset, x264Preset]);
+    const audioCodecValues = (0, react_1.useMemo)(() => {
+        return [
+            ...makeRemotionDefaultValue({
+                labelValue: 'Automatic',
+                onClick: () => selectAudioCodec(null),
+                selected: audioCodec === null,
+            }),
+            ...makeValues({
+                options: client_1.BrowserSafeApis.validAudioCodecs,
+                selected: audioCodec,
+                setSelected: selectAudioCodec,
+                labelValue: (value) => value.toUpperCase(),
+            }),
+        ];
+    }, [audioCodec, selectAudioCodec]);
+    const qualityModeValues = (0, react_1.useMemo)(() => {
+        return ['crf', 'bitrate'].map((value) => ({
+            key: value,
+            label: value === 'crf' ? 'CRF' : 'Bitrate',
+            onClick: () => selectQualityMode(value),
+            selected: qualityMode === value,
+        }));
+    }, [qualityMode, selectQualityMode]);
+    const resolvedCodec = codec !== null && codec !== void 0 ? codec : DEFAULT_CODEC;
+    const updates = (0, react_1.useMemo)(() => {
+        const allUpdates = [
+            codec === null
+                ? { setter: 'setCodec', type: 'delete' }
+                : { setter: 'setCodec', type: 'set', value: codec },
+            { setter: 'setScale', type: 'set', value: scale },
+            stillImageFormat === null
+                ? { setter: 'setStillImageFormat', type: 'delete' }
+                : {
+                    setter: 'setStillImageFormat',
+                    type: 'set',
+                    value: stillImageFormat,
+                },
+            videoImageFormat === null
+                ? { setter: 'setVideoImageFormat', type: 'delete' }
+                : {
+                    setter: 'setVideoImageFormat',
+                    type: 'set',
+                    value: videoImageFormat,
+                },
+            qualityMode === 'crf'
+                ? { setter: 'setCrf', type: 'set', value: crf }
+                : { setter: 'setCrf', type: 'delete' },
+            qualityMode === 'bitrate'
+                ? { setter: 'setVideoBitrate', type: 'set', value: videoBitrate.trim() }
+                : { setter: 'setVideoBitrate', type: 'delete' },
+            ...(resolvedCodec === 'prores'
+                ? [
+                    proResProfile === null
+                        ? { setter: 'setProResProfile', type: 'delete' }
+                        : {
+                            setter: 'setProResProfile',
+                            type: 'set',
+                            value: proResProfile,
+                        },
+                ]
+                : []),
+            ...(resolvedCodec === 'h264'
+                ? [
+                    x264Preset === null
+                        ? { setter: 'setX264Preset', type: 'delete' }
+                        : {
+                            setter: 'setX264Preset',
+                            type: 'set',
+                            value: x264Preset,
+                        },
+                ]
+                : []),
+            audioCodec === null
+                ? { setter: 'setAudioCodec', type: 'delete' }
+                : { setter: 'setAudioCodec', type: 'set', value: audioCodec },
+            { setter: 'setConcurrency', type: 'set', value: concurrency },
+        ];
+        return allUpdates.filter((update) => editedSetters.has(update.setter));
+    }, [
+        audioCodec,
+        codec,
+        concurrency,
+        crf,
+        editedSetters,
+        proResProfile,
+        qualityMode,
+        resolvedCodec,
+        scale,
+        stillImageFormat,
+        videoImageFormat,
+        videoBitrate,
+        x264Preset,
+    ]);
+    const ready = renderDefaults !== null && syncedRevision === revision;
+    (0, use_auto_save_config_1.useAutoSaveConfig)({
+        enabled: ready,
+        onError: setError,
+        ready,
+        syncRevision: syncedRevision,
+        updates,
+    });
+    const onVideoBitrateChange = (event) => {
+        setVideoBitrate(event.target.value);
+    };
+    const onVideoBitrateBlur = () => {
+        markEdited('setCrf');
+        markEdited('setVideoBitrate');
+    };
+    if (renderDefaults === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Output" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecValues, selectedId: codec !== null && codec !== void 0 ? codec : REMOTION_DEFAULT, title: "Codec" }) })
+                ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Scale", value: scale, onValueChanged: changeScale, min: 0.1, step: 0.1 }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Still image format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: stillFormatValues, selectedId: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : REMOTION_DEFAULT, title: "Still image format" }) })
+                ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video frame format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoFormatValues, selectedId: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : REMOTION_DEFAULT, title: "Video frame format" }) })
+                ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Encoding" }), client_1.BrowserSafeApis.codecSupportsCrf(resolvedCodec) &&
+                client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityModeValues, needsWrapping: true }) })
+                ] })) : null, qualityMode === 'crf' &&
+                client_1.BrowserSafeApis.codecSupportsCrf(resolvedCodec) &&
+                client_1.BrowserSafeApis.getValidCrfRanges(resolvedCodec) ? (jsx_runtime_1.jsx(CrfSetting_1.CrfSetting, { crf: crf, setCrf: changeCrf, min: client_1.BrowserSafeApis.getValidCrfRanges(resolvedCodec)[0], max: client_1.BrowserSafeApis.getValidCrfRanges(resolvedCodec)[1], option: "crfOption" })) : null, qualityMode === 'bitrate' &&
+                client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video bitrate" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: { ...layout_2.input, ...fullWidth }, value: videoBitrate, onChange: onVideoBitrateChange, onBlur: onVideoBitrateBlur, status: "ok", rightAlign: true }) })
+                ] })) : null, resolvedCodec === 'prores' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: profileValues, selectedId: proResProfile !== null && proResProfile !== void 0 ? proResProfile : REMOTION_DEFAULT, title: "ProRes profile" }) })
+                ] })) : null, resolvedCodec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "x264 preset" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: presetValues, selectedId: x264Preset !== null && x264Preset !== void 0 ? x264Preset : REMOTION_DEFAULT, title: "x264 preset" }) })
+                ] })) : null, jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Audio" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Audio codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecValues, selectedId: audioCodec !== null && audioCodec !== void 0 ? audioCodec : REMOTION_DEFAULT, title: "Audio codec" }) })
+                ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Performance" }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Concurrency", value: concurrency, onValueChanged: changeConcurrency, min: renderDefaults.minConcurrency, max: renderDefaults.maxConcurrency, step: 1 }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', align: "flex-start", type: "error" }) })
+                ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+        ] }));
+};
+exports.RenderingSettings = RenderingSettings;

package/dist/components/SelectedOutlineElement.js

@@ -46,8 +46,8 @@ const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const modals_1 = require("../state/modals");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
-const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const delete_jsx_node_api_1 = require("./delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
@@ -68,8 +68,7 @@ const use_select_asset_1 = require("./use-select-asset");
 const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onContextMenuOpenChange, onSnapPointsChange, onSelect, scale, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const canConfigureApps = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(canConfigureApps);
+    const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
@@ -138,8 +137,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         });
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button,
-            canOpenInEditor: previewServerState.type === 'connected' &&
-                Boolean(window.remotion_editorName),
+            canOpenInEditor: editorAvailable,
             numberOfConnectedCompositions: connectedCompositions.length,
         });
         if (action === null) {
@@ -151,10 +149,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         }
         const openTargetInEditor = async () => {
             const originalLocation = await resolveOriginalLocation(doubleClickTarget);
-            if (originalLocation === null) {
+            if (originalLocation === null || defaultEditorId === null) {
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, defaultEditorId);
         };
         openTargetInEditor().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -162,7 +160,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         return true;
     }, [
         compositions,
-        previewServerState.type,
+        defaultEditorId,
+        editorAvailable,
         resolveOriginalLocation,
         selectComposition,
     ]);
@@ -185,7 +184,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             ? contextMenuTarget.sequence.src
             : null;
         const assetLinkInfo = mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null;
-        const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
+        const canOpenInEditor = Boolean(originalLocation && editorAvailable);
         const sourceEditingEnabled = (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
         const disableInteractivityDisabled = !sourceEditingEnabled || !contextMenuTarget.sequence.showInTimeline;
         const sourceEditDisabled = !sourceEditingEnabled ||
@@ -235,7 +234,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                     }
                 }
                 try {
-                    const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
+                    const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
                         nodes: [
                             {
                                 fileName: nodePath.absolutePath,
@@ -281,10 +280,11 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                 });
             },
             openInEditor: (editorId) => {
-                if (!originalLocation) {
+                const resolvedEditorId = editorId !== null && editorId !== void 0 ? editorId : defaultEditorId;
+                if (!originalLocation || !resolvedEditorId || !editorAvailable) {
                     return;
                 }
-                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId).catch((err) => {
+                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, resolvedEditorId).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(err.message, 2000);
                 });
             },
@@ -383,6 +383,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         editorInfo,
         getTarget,
         onSelect,
+        defaultEditorId,
+        editorAvailable,
         previewServerState,
         resolveOriginalLocation,
         setManuallyEnabled,
@@ -391,7 +393,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         setPropStatuses,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
                 ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
                         ? controlLayout.scaleHitWidth.horizontal

package/dist/components/SelectedOutlineOverlay.js

@@ -55,6 +55,7 @@ Object.defineProperty(exports, "orderOutlinesForRendering", { enumerable: true,
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
 const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
 const selected_outline_drag_2 = require("./selected-outline-drag");
@@ -181,7 +182,12 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         }
         const { controls } = sequence;
         const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
-        const sourceFrame = targetTimelinePosition - keyframeDisplayOffset;
+        const firstKeyframedStatus = Object.values(nodePropStatuses !== null && nodePropStatuses !== void 0 ? nodePropStatuses : {}).find((status) => status.status === 'keyframed');
+        const nodeKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: firstKeyframedStatus,
+            keyframeDisplayOffset,
+        });
+        const sourceFrame = targetTimelinePosition - nodeKeyframeDisplayOffset;
         const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
         const runtimeValues = controls
             ? ((_b = runtimeValuesByStore.get(controls.runtimeValues)) !== null && _b !== void 0 ? _b : controls.runtimeValues.getSnapshot())
@@ -257,7 +263,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             key,
             containsSelection,
             crop,
-            keyframeDisplayOffset,
+            keyframeDisplayOffset: nodeKeyframeDisplayOffset,
             nodePathInfo,
             ref: sequence.refForOutline,
             selected,
@@ -316,7 +322,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
             (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
             ? sourceFrame
-            : selectedTransformOriginInfo.displayFrame - keyframeDisplayOffset;
+            : selectedTransformOriginInfo.displayFrame -
+                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: transformOriginPropStatus,
+                    keyframeDisplayOffset,
+                });
         const canTransformOriginStatus = (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
             ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed' &&
                 transformOriginPropStatus.interpolationFunction === 'interpolate');
@@ -333,7 +343,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         const cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
             (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
             ? sourceFrame
-            : selectedCropInfo.displayFrame - keyframeDisplayOffset;
+            : selectedCropInfo.displayFrame - nodeKeyframeDisplayOffset;
         const canCropDrag = previewInteractive &&
             selectedForCrop &&
             controls !== null &&
@@ -364,7 +374,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         propStatus,
                         clientId: connectedClientId,
                         fieldDefault: fieldSchema.default,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus,
+                            keyframeDisplayOffset,
+                        }),
                         nodePath,
                         schema: controls.schema,
                     }
@@ -375,7 +388,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         clientId: connectedClientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus: scalePropStatus,
+                            keyframeDisplayOffset,
+                        }),
                         linked: getScaleLockState({
                             nodePath,
                             fieldKey: selected_outline_types_1.scaleFieldKey,
@@ -401,7 +417,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         clientId: connectedClientId,
                         fieldDefault: rotationFieldSchema.default,
                         fieldSchema: rotationFieldSchema,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus: rotationPropStatus,
+                            keyframeDisplayOffset,
+                        }),
                         nodePath,
                         schema: controls.schema,
                         transform3DMode,
@@ -411,7 +430,10 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                 transformOriginDrag: canTransformOriginDrag
                     ? {
                         clientId: connectedClientId,
-                        keyframeDisplayOffset,
+                        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                            propStatus: transformOriginPropStatus,
+                            keyframeDisplayOffset,
+                        }),
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
                         originPropStatus: transformOriginPropStatus,

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -6,6 +6,7 @@ import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline
 export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;
+    readonly directlySelected: boolean;
     readonly dragging: boolean;
     readonly getAllDragOutlines: () => readonly SelectedOutline[];
     readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];