@remotion/studio 4.0.513 → 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");
@@ -234,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,
@@ -393,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/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[];

package/dist/components/SelectedOutlinePolygon.js

@@ -56,7 +56,7 @@ const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
-const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -85,6 +85,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         };
     }, [getLayoutTarget, previewServerState]);
     const onPointerDown = react_1.default.useCallback((event) => {
+        var _a;
         const target = getTarget();
         if (event.button !== 0 || target === undefined) {
             return;
@@ -94,23 +95,63 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         event.stopPropagation();
         const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
         const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
-        if (shouldUpdateSelection) {
+        const ownerSvg = (_a = polygonRef.current) === null || _a === void 0 ? void 0 : _a.ownerSVGElement;
+        let pointerInsideSelectedOutline = false;
+        if (ownerSvg) {
+            const screenPoint = ownerSvg.createSVGPoint();
+            screenPoint.x = event.clientX;
+            screenPoint.y = event.clientY;
+            pointerInsideSelectedOutline = Array.from(ownerSvg.querySelectorAll('polygon[data-remotion-directly-selected-outline="true"]')).some((selectedPolygon) => {
+                const screenTransform = selectedPolygon.getScreenCTM();
+                if (screenTransform === null) {
+                    return false;
+                }
+                const polygonPoint = screenPoint.matrixTransform(screenTransform.inverse());
+                return (selectedPolygon.isPointInFill(polygonPoint) ||
+                    selectedPolygon.isPointInStroke(polygonPoint));
+            });
+        }
+        const deferSelection = !selected &&
+            !interaction.shiftKey &&
+            !interaction.toggleKey &&
+            pointerInsideSelectedOutline;
+        if (!deferSelection && shouldUpdateSelection) {
             onSelect(target.selection, interaction);
         }
-        if (drag === null || interaction.shiftKey || interaction.toggleKey) {
+        if (interaction.shiftKey ||
+            interaction.toggleKey ||
+            (drag === null && !deferSelection)) {
             return;
         }
         if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            if (deferSelection) {
+                onSelect(target.selection, interaction);
+            }
             return;
         }
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
+        const dragExistingSelection = selected || deferSelection;
+        const dragTargets = dragExistingSelection
+            ? getAllDragTargets()
+            : drag === null
+                ? []
+                : [drag];
+        if (dragTargets.length === 0) {
+            if (deferSelection) {
+                onSelect(target.selection, interaction);
+            }
+            return;
+        }
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
-            dragTargets: selected ? getAllDragTargets() : [drag],
+            dragTargets,
             getDragOverrides,
             timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
-        const dragOutlines = selected ? getAllDragOutlines() : [outline];
+        const dragOutlines = dragExistingSelection
+            ? getAllDragOutlines()
+            : [outline];
+        const [{ clientId }] = dragTargets;
         let lastValues = new Map();
         let currentPointerX = startPointerX;
         let currentPointerY = startPointerY;
@@ -212,7 +253,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             axisLocked = nextAxisLocked;
             updateDragOverrides();
         };
-        const onPointerUp = () => {
+        const onPointerUp = (reason) => {
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -226,6 +267,9 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             });
             if (changes.length === 0) {
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
+                if (deferSelection && !dragStarted && reason === 'pointerup') {
+                    onSelect(target.selection, interaction);
+                }
                 return;
             }
             const staticChanges = changes.filter((change) => change.type === 'static');
@@ -237,7 +281,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
                         addedKeyframes: null,
                         movedKeyframes: null,
                         setPropStatuses,
-                        clientId: drag.clientId,
+                        clientId,
                         undoLabel: changes.length > 1
                             ? 'Move selected sequences'
                             : 'Move sequence',
@@ -250,7 +294,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
                     sequenceKeyframes: keyframedChanges,
                     effectKeyframes: [],
                     setPropStatuses,
-                    clientId: drag.clientId,
+                    clientId,
                 }),
             ])
                 .catch((err) => {
@@ -347,7 +391,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         });
     }, [getEffectDropTarget]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', "data-remotion-directly-selected-outline": directlySelected ? 'true' : undefined, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }

package/dist/components/SettingsContext.d.ts

@@ -1,10 +1,13 @@
-import type { GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse, GetRemotionSkillsInfoResponse, RenderDefaults, StudioRuntimeConfig } 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 remotionSkillsInfo: GetRemotionSkillsInfoResponse | null;
+    readonly renderDefaults: RenderDefaults | null;
+    readonly studioRuntimeConfig: StudioRuntimeConfig | null;
     readonly revision: number;
     readonly setPublicLicenseKey: (publicLicenseKey: string | null) => void;
 };

package/dist/components/SettingsContext.js

@@ -9,13 +9,16 @@ const call_api_1 = require("./call-api");
 const SettingsContext = (0, react_1.createContext)(null);
 const SettingsProvider = ({ children }) => {
     var _a;
-    var _b;
+    var _b, _c, _d;
     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,
+        remotionSkillsInfo: null,
+        renderDefaults: (_c = window.remotion_renderDefaults) !== null && _c !== void 0 ? _c : null,
+        studioRuntimeConfig: (_d = window.remotion_studioConfig) !== null && _d !== void 0 ? _d : null,
         revision: 0,
     });
     (0, react_1.useEffect)(() => {
@@ -31,8 +34,9 @@ const SettingsProvider = ({ children }) => {
         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),
+            (0, call_api_1.callApi)('/api/remotion-skills-info', {}, controller.signal),
         ])
-            .then(([editorInfo, codingAgentInfo]) => {
+            .then(([editorInfo, codingAgentInfo, remotionSkillsInfo]) => {
             const runtimeConfig = window.remotion_studioConfig;
             setSettings((currentSettings) => ({
                 ...currentSettings,
@@ -48,6 +52,7 @@ const SettingsProvider = ({ children }) => {
                         ? runtimeConfig.defaultEditor
                         : editorInfo.defaultEditor,
                 },
+                remotionSkillsInfo,
                 error: null,
                 revision: currentSettings.revision + 1,
             }));
@@ -84,6 +89,8 @@ const SettingsProvider = ({ children }) => {
                     : null,
                 error: null,
                 publicLicenseKey: event.studioRuntimeConfig.publicLicenseKey,
+                renderDefaults: event.renderDefaults,
+                studioRuntimeConfig: event.studioRuntimeConfig,
                 revision: currentSettings.revision + 1,
             }));
         });

package/dist/components/SettingsModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'license';
+type SettingsTab = 'apps' | 'rendering' | 'studio' | 'license';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;

package/dist/components/SettingsModal.js

@@ -5,19 +5,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const apps_1 = require("../icons/apps");
 const certificate_1 = require("../icons/certificate");
+const remotion_triangle_1 = require("../icons/remotion-triangle");
+const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
 const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const RenderingSettings_1 = require("./RenderingSettings");
 const render_modals_1 = require("./RenderModal/render-modals");
 const SettingsContext_1 = require("./SettingsContext");
 const SettingsModalFooter_1 = require("./SettingsModalFooter");
+const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
 const hiddenPanel = {
     display: 'none',
 };
+const settingsOptionsPanel = {
+    ...render_modals_1.optionsPanel,
+    boxSizing: 'border-box',
+    paddingBottom: 16,
+};
 const appsIcon = {
     ...render_modals_1.icon,
     height: 20,
@@ -50,7 +59,7 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [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, {})
+                        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 === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" }), 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' ? settingsOptionsPanel : 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' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, {})
             ] }) }));
 };
 exports.SettingsModal = SettingsModal;