@remotion/studio 4.0.513 → 4.0.515

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/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,

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -4,13 +4,14 @@ exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = export
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const clipboard_figma_1 = require("../../helpers/clipboard-figma");
 const clipboard_images_1 = require("../../helpers/clipboard-images");
 const clipboard_svg_1 = require("../../helpers/clipboard-svg");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
@@ -869,6 +870,9 @@ const TimelineClipboardKeybindings = () => {
                 if (result.status === 'invalid') {
                     return;
                 }
+                if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+                    return;
+                }
                 e.preventDefault();
                 if (result.status === 'unsupported-version') {
                     (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
@@ -892,7 +896,7 @@ const TimelineClipboardKeybindings = () => {
                 const insertAtIndices = (envelope === null || envelope === void 0 ? void 0 : envelope.sourceIdentity) === makeTargetKey(targetSequenceNodePath)
                     ? envelope.originalEffectIndices
                     : null;
-                return (0, call_api_1.callApi)('/api/paste-effects', {
+                return (0, effect_operations_api_1.pasteEffects)({
                     targetFileName: targetSequenceNodePath.absolutePath,
                     targetSequenceNodePath,
                     type: payload.type,

package/dist/components/Timeline/TimelineDragHandler.js

@@ -40,10 +40,10 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const pointer_session_1 = require("../../helpers/pointer-session");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -109,13 +109,7 @@ const TimelineDragHandlerInner = () => {
         dragging: false,
     });
     const { isPlaying, play, pause, seek } = player_1.PlayerInternals.usePlayerMethods();
-    const scroller = (0, react_1.useRef)(null);
-    const stopInterval = () => {
-        if (scroller.current) {
-            clearInterval(scroller.current);
-            scroller.current = null;
-        }
-    };
+    const autoScroller = (0, react_1.useRef)(null);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         var _a, _b;
         if (e.button !== 0) {
@@ -124,7 +118,6 @@ const TimelineDragHandlerInner = () => {
         if (!isHighestContext) {
             return;
         }
-        stopInterval();
         if (!videoConfig) {
             return;
         }
@@ -148,87 +141,66 @@ const TimelineDragHandlerInner = () => {
         (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         pause();
     }, [isHighestContext, videoConfig, left, width, seek, isPlaying, pause]);
+    const onEdgeScrollTick = (0, react_1.useCallback)((directions) => {
+        var _a;
+        if (!videoConfig || directions.x === null) {
+            return;
+        }
+        const nextFrame = directions.x === 'left'
+            ? (0, timeline_scroll_logic_1.getFrameWhileScrollingLeft)({
+                durationInFrames: videoConfig.durationInFrames,
+                width,
+            })
+            : (0, timeline_scroll_logic_1.getFrameWhileScrollingRight)({
+                durationInFrames: videoConfig.durationInFrames,
+                width,
+            });
+        const scrollPos = directions.x === 'left'
+            ? (0, timeline_scroll_logic_1.getScrollPositionForCursorOnLeftEdge)({
+                nextFrame,
+                durationInFrames: videoConfig.durationInFrames,
+            })
+            : (0, timeline_scroll_logic_1.getScrollPositionForCursorOnRightEdge)({
+                nextFrame,
+                durationInFrames: videoConfig.durationInFrames,
+            });
+        // Update the imperative frame and apply the scroll before drawing, so
+        // every redraw (including the scroll event listener in TimelineSlider)
+        // sees a consistent (frame, scrollLeft) pair. Otherwise the playhead
+        // flickers between stale combinations while React commits the seek.
+        (0, imperative_state_1.setCurrentFrame)(nextFrame);
+        (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
+        (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
+        seek(nextFrame);
+    }, [videoConfig, width, seek]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
         var _a;
+        var _b;
         if (!videoConfig) {
             return;
         }
         if (!dragging.dragging) {
             return;
         }
-        const isRightOfArea = e.clientX >=
-            ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) +
-                left -
-                timeline_layout_1.TIMELINE_PADDING;
-        const isLeftOfArea = e.clientX <= left;
+        const directions = (_b = (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.update(e)) !== null && _b !== void 0 ? _b : {
+            x: null,
+            y: null,
+        };
+        // While edge auto-scrolling is active, the tick owns seeking
+        if (directions.x !== null) {
+            return;
+        }
         const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
             clientX: getClientXWithScroll(e.clientX) - left,
             durationInFrames: videoConfig.durationInFrames,
             width,
             extrapolate: 'clamp',
         });
-        if (isLeftOfArea && (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
-            if (scroller.current) {
-                return;
-            }
-            const scrollEvery = () => {
-                var _a;
-                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollLeft) {
-                    stopInterval();
-                    return;
-                }
-                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingLeft)({
-                    durationInFrames: videoConfig.durationInFrames,
-                    width,
-                });
-                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnLeftEdge)({
-                    nextFrame,
-                    durationInFrames: videoConfig.durationInFrames,
-                });
-                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
-                seek(nextFrame);
-                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
-            };
-            scrollEvery();
-            scroller.current = setInterval(() => {
-                scrollEvery();
-            }, 100);
-        }
-        else if (isRightOfArea &&
-            (0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
-            if (scroller.current) {
-                return;
-            }
-            const scrollEvery = () => {
-                var _a;
-                if (!(0, timeline_scroll_logic_1.canScrollTimelineIntoDirection)().canScrollRight) {
-                    stopInterval();
-                    return;
-                }
-                const nextFrame = (0, timeline_scroll_logic_1.getFrameWhileScrollingRight)({
-                    durationInFrames: videoConfig.durationInFrames,
-                    width,
-                });
-                const scrollPos = (0, timeline_scroll_logic_1.getScrollPositionForCursorOnRightEdge)({
-                    nextFrame,
-                    durationInFrames: videoConfig.durationInFrames,
-                });
-                (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(nextFrame);
-                seek(nextFrame);
-                (0, timeline_scroll_logic_1.scrollToTimelineXOffset)(scrollPos);
-            };
-            scrollEvery();
-            scroller.current = setInterval(() => {
-                scrollEvery();
-            }, 100);
-        }
-        else {
-            stopInterval();
-            seek(frame);
-        }
+        seek(frame);
     }, [videoConfig, dragging.dragging, left, width, seek]);
     const onPointerUpScrubbing = (0, react_1.useCallback)((e) => {
-        stopInterval();
+        var _a;
+        (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.stop();
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         if (!videoConfig) {
@@ -259,7 +231,8 @@ const TimelineDragHandlerInner = () => {
         }
     }, [dragging, left, play, videoConfig, setFrame, width]);
     const onPointerCancelScrubbing = (0, react_1.useCallback)(() => {
-        stopInterval();
+        var _a;
+        (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.stop();
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         if (!dragging.dragging) {
@@ -274,7 +247,12 @@ const TimelineDragHandlerInner = () => {
         if (!dragging.dragging) {
             return;
         }
-        return (0, pointer_session_1.startCapturedPointerSession)({
+        const scroller = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeVertical: false,
+            onTick: onEdgeScrollTick,
+        });
+        autoScroller.current = scroller;
+        const endSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: dragging,
             captureTarget: dragging.target,
             onMove: onPointerMoveScrubbing,
@@ -288,8 +266,16 @@ const TimelineDragHandlerInner = () => {
                 }
             },
         });
+        return () => {
+            scroller.stop();
+            if (autoScroller.current === scroller) {
+                autoScroller.current = null;
+            }
+            endSession();
+        };
     }, [
         dragging,
+        onEdgeScrollTick,
         onPointerCancelScrubbing,
         onPointerMoveScrubbing,
         onPointerUpScrubbing,