@remotion/studio 4.0.512 → 4.0.514

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;

package/dist/components/SettingsModalFooter.js

@@ -37,7 +37,7 @@ const SettingsModalFooter = () => {
             column: 1,
         };
     }, []);
-    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, noBorder: true, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
+    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
                     jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
                 ] }) }) }));
 };

package/dist/components/StudioSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const StudioSettings: React.FC;

package/dist/components/StudioSettings.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const Checkmark_1 = require("../icons/Checkmark");
+const undo_1 = require("../icons/undo");
+const Button_1 = require("./Button");
+const styles_1 = require("./InspectorPanel/styles");
+const layout_1 = require("./layout");
+const ComboBox_1 = require("./NewComposition/ComboBox");
+const InputDragger_1 = require("./NewComposition/InputDragger");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const layout_2 = require("./RenderModal/layout");
+const RenderModalHr_1 = require("./RenderModal/RenderModalHr");
+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 controlWidth = {
+    boxSizing: 'border-box',
+    width: 180,
+};
+const resetIcon = {
+    height: 12,
+    width: 12,
+};
+const DEFAULT_VALUE = 'studio-default';
+const initialSettings = {
+    askAIEnabled: null,
+    audioLatencyHint: null,
+    beepOnFinish: null,
+    enableCrossSiteIsolation: null,
+    interactivityEnabled: null,
+    keyboardShortcutsEnabled: null,
+    logLevel: null,
+    maxTimelineTracks: null,
+    numberOfSharedAudioTags: null,
+    rspack: null,
+};
+const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
+    const values = [
+        {
+            id: DEFAULT_VALUE,
+            keyHint: null,
+            label: `Default (${defaultLabel})`,
+            leftItem: value === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => onChange(null),
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: DEFAULT_VALUE,
+        },
+        { id: `${DEFAULT_VALUE}-divider`, type: 'divider' },
+        ...options.map((option) => {
+            const id = `${name}-${String(option.value)}`;
+            return {
+                id,
+                keyHint: null,
+                label: option.label,
+                leftItem: value === option.value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => onChange(option.value),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: id,
+            };
+        }),
+    ];
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+            jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
+        ] }));
+};
+const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd, value, }) => {
+    const resolvedDefaultLabel = defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : String(defaultValue);
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+            jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsxs("div", { style: { ...layout_2.rightRow, gap: 6 }, children: [
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${resolvedDefaultLabel})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${resolvedDefaultLabel})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, title: `Use default (${resolvedDefaultLabel})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
+                ] })
+        ] }));
+};
+const booleanOptions = [
+    { label: 'Enabled', value: true },
+    { label: 'Disabled', value: false },
+];
+const StudioSettings = () => {
+    var _a;
+    const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
+    const [settings, setSettings] = (0, react_1.useState)(initialSettings);
+    const [committedNumberSettings, setCommittedNumberSettings] = (0, react_1.useState)({ maxTimelineTracks: null, numberOfSharedAudioTags: null });
+    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;
+        var _c, _d, _e;
+        if (studioRuntimeConfig === null) {
+            return;
+        }
+        setSettings((_c = studioRuntimeConfig.configFileStudioSettings) !== null && _c !== void 0 ? _c : initialSettings);
+        setCommittedNumberSettings({
+            maxTimelineTracks: (_d = (_a = studioRuntimeConfig.configFileStudioSettings) === null || _a === void 0 ? void 0 : _a.maxTimelineTracks) !== null && _d !== void 0 ? _d : null,
+            numberOfSharedAudioTags: (_e = (_b = studioRuntimeConfig.configFileStudioSettings) === null || _b === void 0 ? void 0 : _b.numberOfSharedAudioTags) !== null && _e !== void 0 ? _e : null,
+        });
+        setEditedSetters(new Set());
+        setSyncedRevision(revision);
+        setError(null);
+    }, [revision, studioRuntimeConfig]);
+    const changeSetting = (0, react_1.useCallback)((key, setter, value) => {
+        setSettings((current) => ({ ...current, [key]: value }));
+        setEditedSetters((current) => new Set(current).add(setter));
+    }, []);
+    const previewNumberSetting = (0, react_1.useCallback)((key, value) => {
+        setSettings((current) => ({ ...current, [key]: value }));
+    }, []);
+    const commitNumberSetting = (0, react_1.useCallback)((key, setter, value) => {
+        setSettings((current) => ({ ...current, [key]: value }));
+        setCommittedNumberSettings((current) => ({ ...current, [key]: value }));
+        setEditedSetters((current) => new Set(current).add(setter));
+    }, []);
+    const updates = (0, react_1.useMemo)(() => {
+        const update = (setter, value) => value === null ? { setter, type: 'delete' } : { setter, type: 'set', value };
+        const updatesForEditedSetters = [
+            update('setAskAIEnabled', settings.askAIEnabled),
+            update('setEnableCrossSiteIsolation', settings.enableCrossSiteIsolation),
+            update('setBeepOnFinish', settings.beepOnFinish),
+            update('setMaxTimelineTracks', committedNumberSettings.maxTimelineTracks),
+            update('setAudioLatencyHint', settings.audioLatencyHint),
+            update('setNumberOfSharedAudioTags', committedNumberSettings.numberOfSharedAudioTags),
+            update('setRspack', settings.rspack),
+            update('setKeyboardShortcutsEnabled', settings.keyboardShortcutsEnabled),
+            update('setInteractivityEnabled', settings.interactivityEnabled),
+            update('setLogLevel', settings.logLevel),
+        ].filter((item) => editedSetters.has(item.setter));
+        if (editedSetters.has('setRspack')) {
+            updatesForEditedSetters.push({
+                setter: 'setExperimentalRspackEnabled',
+                type: 'delete',
+            });
+        }
+        if (editedSetters.has('setLogLevel')) {
+            updatesForEditedSetters.push({ setter: 'setLevel', type: 'delete' });
+        }
+        return updatesForEditedSetters;
+    }, [committedNumberSettings, editedSetters, settings]);
+    const ready = studioRuntimeConfig !== null && syncedRevision === revision;
+    (0, use_auto_save_config_1.useAutoSaveConfig)({
+        enabled: ready,
+        onError: setError,
+        ready,
+        syncRevision: syncedRevision,
+        updates,
+    });
+    if (studioRuntimeConfig === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Keyboard shortcuts enabled", onChange: (value) => changeSetting('keyboardShortcutsEnabled', 'setKeyboardShortcutsEnabled', value), options: booleanOptions, value: settings.keyboardShortcutsEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
+                    { label: 'Interactive', value: 'interactive' },
+                    { label: 'Balanced', value: 'balanced' },
+                    { label: 'Playback', value: 'playback' },
+                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
+                    { label: 'Rspack', value: true },
+                    { label: 'Webpack', value: false },
+                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
+                    label: value[0].toUpperCase() + value.slice(1),
+                    value,
+                })), value: settings.logLevel }), (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, { align: "flex-start", message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', type: "error" }) })
+                ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+        ] }));
+};
+exports.StudioSettings = StudioSettings;

package/dist/components/Timeline/LoopedIndicator.js

@@ -26,7 +26,7 @@ const centerContainer = {
 };
 const LoopedIndicator = () => {
     return (jsx_runtime_1.jsxs("div", { style: width, children: [
-            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx("div", { style: verticalLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx(Icon, {}) })
+            jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: centerContainer, children: jsx_runtime_1.jsx("div", { style: verticalLine }) }), jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: centerContainer, children: jsx_runtime_1.jsx(Icon, {}) })
         ] }));
 };
 exports.LoopedIndicator = LoopedIndicator;

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

@@ -1,4 +1,7 @@
 import React from 'react';
 export declare const LoopedTimelineIndicator: React.FC<{
     readonly loops: number;
+    readonly fullWidth: number;
+    readonly visibleOffset: number;
+    readonly visibleWidth: number;
 }>;

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -1,24 +1,32 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoopedTimelineIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const remotion_1 = require("remotion");
-const layout_1 = require("../layout");
 const LoopedIndicator_1 = require("./LoopedIndicator");
 const row = {
-    flexDirection: 'row',
+    overflow: 'hidden',
 };
-const LoopedTimelineIndicator = ({ loops }) => {
-    const leftOver = loops % 1;
-    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { style: row, children: [new Array(Math.floor(loops)).fill(true).map((_l, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment
-                // eslint-disable-next-line
-                , { children: [
-                        jsx_runtime_1.jsx(layout_1.Flex, {}), i === loops - 1 ? null : jsx_runtime_1.jsx(LoopedIndicator_1.LoopedIndicator, {})] }, i));
-            }), leftOver > 0 ? jsx_runtime_1.jsx("div", { style: { flex: leftOver } }) : null] }));
+const LoopedTimelineIndicator = ({ loops, fullWidth, visibleOffset, visibleWidth }) => {
+    if (loops <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
+        return null;
+    }
+    const loopWidth = fullWidth / loops;
+    const lastBoundaryIndex = Math.ceil(loops) - 1;
+    const firstVisibleBoundaryIndex = Math.max(1, Math.floor(visibleOffset / loopWidth));
+    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth) / loopWidth));
+    const visibleBoundaryCount = Math.max(0, lastVisibleBoundaryIndex - firstVisibleBoundaryIndex + 1);
+    const boundaries = new Array(visibleBoundaryCount)
+        .fill(true)
+        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth);
+    return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: row, children: boundaries.map((boundary) => {
+            return (jsx_runtime_1.jsx("div", { style: {
+                    position: 'absolute',
+                    display: 'flex',
+                    left: boundary - visibleOffset,
+                    top: 0,
+                    bottom: 0,
+                }, children: jsx_runtime_1.jsx(LoopedIndicator_1.LoopedIndicator, {}) }, boundary));
+        }) }));
 };
 exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

package/dist/components/Timeline/Timeline.js

@@ -75,6 +75,7 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
+const TimelineVirtualization_1 = require("./TimelineVirtualization");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_timeline_asset_drop_1 = require("./use-timeline-asset-drop");
@@ -329,7 +330,7 @@ const TimelineInner = () => {
     }, [filtered]);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return collapsed.length > maxTimelineTracks
+        return maxTimelineTracks !== null && collapsed.length > maxTimelineTracks
             ? collapsed.slice(0, maxTimelineTracks)
             : collapsed;
     }, [collapsed, maxTimelineTracks]);
@@ -339,14 +340,15 @@ const TimelineInner = () => {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, isStill: isStill, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown, showTimePadding: false })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-                                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown, showTimePadding: true }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                                    ] }) })
-                                        ] })
-                                ] })) })
-                    ] }) })
+            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: jsx_runtime_1.jsxs(TimelineVirtualization_1.TimelineVirtualizationProvider, { hasBeenCut: hasBeenCut, isStill: isStill, timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, {})) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                                        jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
+                                                jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                        ] }), children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null] }) })
+                                            ] })
+                                    ] })) })
+                        ] }) }) })
         ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/Timeline/TimelineArrayField.js

@@ -155,6 +155,7 @@ const ItemEditor = ({ field, arrayField, items, index, onSave, onDragValueChange
     }, [arrayField, fallback, field, index]);
     const propStatus = (0, react_1.useMemo)(() => ({
         status: 'static',
+        keyframeDisplayOffsetAdjustment: null,
         codeValue: value,
     }), [value]);
     const onSaveItem = (0, react_1.useCallback)((next) => onSave(replaceAtIndex(items, index, next)), [index, items, onSave]);

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
-import { type InspectorInlineActionProps } from '../InspectorPanel/common';
-export type InspectorSourceAction = Omit<InspectorInlineActionProps, 'variant'>;
+import { type InspectorQuickActionProps } from '../InspectorPanel/common';
+export type InspectorSourceAction = Omit<InspectorQuickActionProps, 'variant'>;
 type AssetSelectionContextValue = {
     readonly initialQuery: string;
     readonly getSourceAction: (src: string) => InspectorSourceAction | null;

package/dist/components/Timeline/TimelineAssetField.js

@@ -100,7 +100,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     if (inlineSourceAction === null) {
         return action;
     }
-    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { ...inlineSourceAction, size: "compact", variant: {
+    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", variant: {
             type: 'segmented',
             trailing: {
                 disabled: window.remotion_isReadOnlyStudio,