@remotion/studio 4.0.519 → 4.0.521

package/dist/components/SelectedOutlineElement.js

@@ -45,7 +45,6 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const modals_1 = require("../state/modals");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 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_types_1 = require("./selected-outline-types");
@@ -57,6 +56,7 @@ const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-conte
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
+const use_delete_timeline_items_1 = require("./Timeline/use-delete-timeline-items");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
 const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
@@ -68,6 +68,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -180,38 +181,16 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                     });
                 }
                 : null,
-            onDeleteSequenceFromSource: async () => {
+            onDeleteSequenceFromSource: () => {
                 if (sourceEditDisabled || previewServerState.type !== 'connected') {
                     return;
                 }
-                if (contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-                    const shouldDelete = await confirm({
-                        title: 'Delete sequence?',
-                        message: 'This sequence is programmatically duplicated ' +
-                            contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath +
-                            ' times in the code. Deleting removes all instances. Continue?',
-                        confirmLabel: 'Delete',
-                    });
-                    if (!shouldDelete) {
-                        return;
-                    }
-                }
-                try {
-                    const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                        nodes: [
-                            {
-                                fileName: nodePath.absolutePath,
-                                nodePath: nodePath.nodePath,
-                            },
-                        ],
-                    });
-                    if (!result.success) {
-                        (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-                    }
-                }
-                catch (err) {
-                    (0, NotificationCenter_1.showNotification)(err.message, 4000);
-                }
+                deleteTimelineItems([
+                    {
+                        type: 'sequence',
+                        nodePathInfo: contextMenuTarget.nodePathInfo,
+                    },
+                ]);
             },
             onDisableSequenceInteractivity: () => {
                 if (disableInteractivityDisabled ||
@@ -343,6 +322,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         canConfigureApps,
         codingAgentInfo,
         confirm,
+        deleteTimelineItems,
         editorInfo,
         getTarget,
         onSelect,

package/dist/components/SettingsModal.js

@@ -30,6 +30,7 @@ const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
 const UpdatesSettings_1 = require("./UpdatesSettings");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const hiddenPanel = {
     display: 'none',
 };
@@ -64,11 +65,13 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
-    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
-        connectionStatus: previewServerState.type,
-        isBrowserStudio,
-        readOnlyStudio: window.remotion_isReadOnlyStudio,
-    });
+    const { upgradeState } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const showUpdates = upgradeState !== 'idle' ||
+        (0, can_show_updates_1.canShowUpdates)({
+            connectionStatus: previewServerState.type,
+            isBrowserStudio,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
     const packageManager = window.remotion_packageManager === 'unknown'
         ? null
         : window.remotion_packageManager;

package/dist/components/TimeValue.js

@@ -6,11 +6,13 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_frame_1 = require("../state/render-frame");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
+const TimelineTickFormatProvider_1 = require("./Timeline/TimelineTickFormatProvider");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const text = {
     color: colors_1.WHITE,
@@ -22,7 +24,7 @@ const text = {
     width: '100%',
 };
 const currentTimeTypography = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     display: 'inline-block',
     fontSize: 14,
     fontVariantNumeric: 'tabular-nums',
@@ -32,14 +34,34 @@ const currentTimeTypography = {
 };
 const currentTimeInputStyle = {
     ...currentTimeTypography,
-    padding: '4px 6px 4px 0',
+    padding: 0,
 };
-const currentTimeButtonStyle = {
-    paddingLeft: 0,
+const currentTimeStack = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    lineHeight: 1,
+    padding: '5px 7px 5px 1px',
     transform: 'translateY(-1px)',
 };
+const currentTimeButtonStyle = {
+    display: 'block',
+    padding: 0,
+    border: 'none',
+    lineHeight: '21px',
+    '--remotion-cli-internals-blue-hovered': colors_1.WHITE,
+};
 const currentTimeSubtitle = {
-    color: colors_1.LIGHT_TEXT,
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    background: colors_1.TRANSPARENT,
+    border: 'none',
+    padding: 0,
+    cursor: 'default',
     display: 'block',
     fontFamily: 'monospace',
     fontSize: 10,
@@ -50,6 +72,10 @@ const currentTimeSubtitle = {
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
+    const { showFrames, setShowFrames } = (0, react_1.useContext)(TimelineTickFormatProvider_1.TimelineTickFormatContext);
+    const toggleTickFormat = (0, react_1.useCallback)(() => {
+        setShowFrames((previous) => !previous);
+    }, [setShowFrames]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayerMethods();
@@ -64,7 +90,6 @@ const TimeValue = () => {
     const formatter = (0, react_1.useCallback)((value) => {
         return config ? (0, render_frame_1.renderFrame)(Number(value), config.fps) : String(value);
     }, [config]);
-    const formatterSubtitle = (0, react_1.useCallback)((value) => String(value), []);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.timeValueRef, () => ({
         goToFrame: () => {
             var _a;
@@ -99,7 +124,11 @@ const TimeValue = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: text, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, formatterSubtitle: formatterSubtitle, formatterSubtitleStyle: currentTimeSubtitle, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+            jsx_runtime_1.jsxs("div", { style: currentTimeStack, children: [
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: currentTimeSubtitle, onClick: toggleTickFormat, "aria-label": "Show timeline ticks as frames", "aria-pressed": showFrames, title: showFrames
+                            ? 'Show timeline ticks as timecode'
+                            : 'Show timeline ticks as frames', children: frame })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
         ] }));
 };
 exports.TimeValue = TimeValue;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Timeline: React.NamedExoticComponent<{}>;
+export declare const Timeline: React.FC;

package/dist/components/Timeline/Timeline.js

@@ -48,6 +48,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_sync_external_store_1 = require("../../helpers/use-sync-external-store");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -68,6 +69,7 @@ const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
+const TimelineLayerChildren_1 = require("./TimelineLayerChildren");
 const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
@@ -75,6 +77,7 @@ const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineVirtualization_1 = require("./TimelineVirtualization");
@@ -296,7 +299,7 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
-    const pendingInsertedElementSelection = (0, react_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
+    const pendingInsertedElementSelection = (0, use_sync_external_store_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
     const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const pendingSelectionStart = (0, react_1.useRef)(null);
     const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
@@ -307,10 +310,11 @@ const TimelineInner = () => {
             return;
         }
         const matchesInsertedNodePath = (track) => track.nodePathInfo !== null &&
-            track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
-                pendingInsertedElementSelection.nodePath.absolutePath &&
-            JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
-                JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath);
+            (pendingInsertedElementSelection.nodePath === null ||
+                (track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
+                    pendingInsertedElementSelection.nodePath.absolutePath &&
+                    JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
+                        JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath)));
         if (((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.selection) !==
             pendingInsertedElementSelection) {
             pendingSelectionStart.current = {
@@ -341,6 +345,9 @@ const TimelineInner = () => {
         }
         selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
         (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
+        if (pendingInsertedElementSelection.notification !== null) {
+            (0, NotificationCenter_1.showNotification)(pendingInsertedElementSelection.notification, 3000);
+        }
     }, [
         canvasContent,
         fastRefreshes,
@@ -368,27 +375,33 @@ const TimelineInner = () => {
             return true;
         });
     }, [filtered]);
+    const { visibleTracks, value: layerChildrenValue } = (0, TimelineLayerChildren_1.useTimelineLayerChildren)(collapsed, sequences, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return maxTimelineTracks !== null && collapsed.length > maxTimelineTracks
-            ? collapsed.slice(0, maxTimelineTracks)
-            : collapsed;
-    }, [collapsed, maxTimelineTracks]);
-    const hasBeenCut = collapsed.length > shown.length;
+        return maxTimelineTracks !== null &&
+            visibleTracks.length > maxTimelineTracks
+            ? visibleTracks.slice(0, maxTimelineTracks)
+            : visibleTracks;
+    }, [visibleTracks, maxTimelineTracks]);
+    const hasBeenCut = visibleTracks.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     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.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] }) })
-                                            ] })
-                                    ] })) })
-                        ] }) }) })
+            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenProvider, { value: layerChildrenValue, children: 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);
+const MemoizedTimelineInner = react_1.default.memo(TimelineInner);
+const Timeline = () => {
+    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }));
+};
+exports.Timeline = Timeline;

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

@@ -4,7 +4,6 @@ import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSa
 import { type InspectorQuickActionProps } from '../InspectorPanel/common';
 export type InspectorSourceAction = InspectorQuickActionProps;
 type AssetSelectionContextValue = {
-    readonly initialQuery: string;
     readonly getSourceAction: (src: string) => InspectorSourceAction | null;
     readonly sourceAction: InspectorSourceAction | null;
 };

package/dist/components/Timeline/TimelineAssetField.js

@@ -23,6 +23,7 @@ const sourceActions = {
     display: 'flex',
     flex: 1,
     gap: 4,
+    margin: '0 4px',
     minWidth: 0,
 };
 const standaloneSourceActionStyle = {
@@ -31,9 +32,13 @@ const standaloneSourceActionStyle = {
     minWidth: 0,
     width: 'auto',
 };
+const assetTypeToAccept = {
+    audio: 'audio/*',
+    video: 'video/*',
+    image: 'image/*',
+};
 exports.AssetSelectionContext = (0, react_1.createContext)({
     getSourceAction: () => null,
-    initialQuery: '',
     sourceAction: null,
 });
 const toFileToken = (name) => {
@@ -49,14 +54,14 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     }
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const { getSourceAction, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const { assetType } = field.fieldSchema;
+    const initialQuery = assetType ? `type:${assetType} ` : '';
     const inlineSourceAction = (0, react_1.useMemo)(() => {
-        if (field.key !== 'src') {
-            return null;
+        if (typeof effectiveValue === 'string') {
+            return getSourceAction(effectiveValue);
         }
-        return typeof effectiveValue === 'string'
-            ? getSourceAction(effectiveValue)
-            : sourceAction;
+        return field.key === 'src' ? sourceAction : null;
     }, [effectiveValue, field.key, getSourceAction, sourceAction]);
     const onSelect = (0, react_1.useCallback)((assetName, previewValue) => {
         const sourceValue = (0, exports.toFileToken)(assetName);
@@ -69,7 +74,10 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
     const selectFile = (0, react_1.useCallback)(async () => {
-        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
+        const [file] = await (0, import_assets_1.pickFilesToImport)({
+            multiple: false,
+            accept: assetType ? assetTypeToAccept[assetType] : null,
+        });
         if (!file) {
             return;
         }
@@ -93,7 +101,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
         }
-    }, [onSelect, staticFiles]);
+    }, [assetType, onSelect, staticFiles]);
     const openAssetSelection = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'quick-switcher',

package/dist/components/Timeline/TimelineCollapseToggle.js

@@ -10,7 +10,7 @@ const container = {
     alignItems: 'center',
 };
 const Icon = ({ color, ...props }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: jsx_runtime_1.jsx("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 10", ...props, style: { height: 8, width: 6.4 }, children: jsx_runtime_1.jsx("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
 };
 const TimelineCollapseToggle = ({ collapsed, color }) => {
     return (jsx_runtime_1.jsx("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: jsx_runtime_1.jsx(Icon, { color: color }) }));

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -1,118 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineDeleteKeybindings = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const editor_guides_1 = require("../../state/editor-guides");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
-const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const imperative_state_1 = require("./imperative-state");
-const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
+const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
-        const { clientId } = previewServerState;
-        const handleDelete = () => {
-            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
-            const { selectedItems, clearSelection, selectItems } = currentSelection.current;
-            const sequences = sequencesRef.current;
-            const propStatuses = propStatusesRef.current;
-            if (selectedItems.length === 0) {
-                return;
-            }
-            const selectedGuide = selectedItems.find((item) => item.type === 'guide');
-            if (selectedGuide) {
-                setGuidesList((prevGuides) => {
-                    const newGuides = prevGuides.filter((guide) => guide.id !== selectedGuide.guideId);
-                    (0, editor_guides_1.persistGuidesList)(newGuides);
-                    return newGuides;
-                });
-                clearSelection();
-                return;
-            }
-            const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
-                selections: selectedItems,
-                sequences,
-                overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                setPropStatuses,
-                clientId,
-                confirm,
-                propStatuses,
-                timelinePosition,
-            });
-            if (deletePromise !== null) {
-                deletePromise
-                    .then((deleted) => {
-                    if (deleted) {
-                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
-                            selections: selectedItems,
-                            sequences,
-                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                            propStatuses,
-                            timelinePosition,
-                        });
-                        if (nextSelection.length === 0) {
-                            clearSelection();
-                        }
-                        else {
-                            selectItems(nextSelection);
-                        }
-                    }
-                })
-                    .catch(() => undefined);
-                return;
-            }
-            const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);
-            if (easingSelections.length === selectedItems.length) {
-                const resetEasingPromise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
-                    selections: easingSelections,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    propStatuses,
-                    setPropStatuses,
-                    clientId,
-                    easing: studio_shared_1.LINEAR_KEYFRAME_EASING,
-                });
-                if (resetEasingPromise !== null) {
-                    resetEasingPromise.catch(() => undefined);
-                    return;
-                }
-            }
-            const resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
-                selections: selectedItems,
-                sequences,
-                overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                propStatuses,
-                setPropStatuses,
-                clientId,
-            });
-            if (resetPromise !== null) {
-                resetPromise.catch(() => undefined);
-            }
-        };
         const backspace = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Backspace',
-            callback: handleDelete,
+            callback: () => deleteTimelineItems(null),
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -121,7 +37,7 @@ const TimelineDeleteKeybindings = () => {
         const deleteKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Delete',
-            callback: handleDelete,
+            callback: () => deleteTimelineItems(null),
             commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
@@ -190,13 +106,12 @@ const TimelineDeleteKeybindings = () => {
         canSelect,
         confirm,
         currentSelection,
+        deleteTimelineItems,
         keybindings,
         overrideIdToNodePathMappings,
         propStatusesRef,
         previewServerState,
         sequencesRef,
-        setGuidesList,
-        setPropStatuses,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDragHandler.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
@@ -73,22 +74,32 @@ const getClientXWithScroll = (x) => {
 };
 const TimelineDragHandler = () => {
     const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelineSize = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
+        var _b, _c, _d, _e;
         if (!canvasContent) {
             return {};
         }
-        const zoom = canvasContent.type === 'composition'
-            ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const durationInFrames = (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1;
+        const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+            durationInFrames,
+            timelineViewportWidth: (_d = (_c = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _d !== void 0 ? _d : 0,
+            zoom: canvasContent.type === 'composition'
+                ? ((_e = zoomMap[canvasContent.compositionId]) !== null && _e !== void 0 ? _e : null)
+                : null,
+        });
         return {
             ...container,
-            width: 100 * zoom + '%',
+            width: (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom }),
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
-    }, [canvasContent, zoomMap]);
+    }, [canvasContent, timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width, video === null || video === void 0 ? void 0 : video.durationInFrames, zoomMap]);
     const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
         ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
             (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);
@@ -100,7 +111,6 @@ const TimelineDragHandler = () => {
 exports.TimelineDragHandler = TimelineDragHandler;
 const TimelineDragHandlerInner = () => {
     var _a;
-    var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
@@ -108,8 +118,8 @@ const TimelineDragHandlerInner = () => {
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
+    const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
+    const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineFontWeightField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;