@remotion/studio 4.0.516 → 4.0.518

package/dist/components/Timeline/Timeline.js

@@ -62,6 +62,7 @@ const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequ
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
@@ -72,6 +73,7 @@ const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
@@ -94,6 +96,7 @@ const TimelineContextMenuArea = ({ children }) => {
     const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -101,6 +104,44 @@ const TimelineContextMenuArea = ({ children }) => {
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const browserStudioCanInsertSolid = browserStudioOperations !== null;
+    (0, react_1.useEffect)(() => {
+        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
+        if (!verticalScroll) {
+            return;
+        }
+        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: false,
+            includeVertical: true,
+            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
+            onTick: (directions) => {
+                if (directions.y === null) {
+                    return;
+                }
+                verticalScroll.scrollTop +=
+                    directions.y === 'up'
+                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
+                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
+            },
+        });
+        const onDragOver = (event) => {
+            if (!event.dataTransfer ||
+                !Array.from(event.dataTransfer.types).includes(TimelineSequenceItem_1.SEQUENCE_REORDER_MIME_TYPE)) {
+                autoScroll.stop();
+                return;
+            }
+            autoScroll.update(event);
+        };
+        const stopAutoScroll = () => autoScroll.stop();
+        verticalScroll.addEventListener('dragover', onDragOver, true);
+        document.addEventListener('dragend', stopAutoScroll, true);
+        document.addEventListener('drop', stopAutoScroll, true);
+        return () => {
+            autoScroll.stop();
+            verticalScroll.removeEventListener('dragover', onDragOver, true);
+            document.removeEventListener('dragend', stopAutoScroll, true);
+            document.removeEventListener('drop', stopAutoScroll, true);
+        };
+    }, [isStill]);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;

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

@@ -3,7 +3,6 @@ import type React from 'react';
 import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type InteractivitySchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type EffectsClipboardEnvelope } from './effects-clipboard';
-import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
     readonly type: 'valid';
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -28,9 +27,9 @@ export type PasteEffectPropTarget = {
 } | {
     readonly type: 'none' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
-export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
+export declare const getPasteEffectsTarget: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
 export type EffectClipboardDataFromSelections = {
@@ -44,15 +43,15 @@ export type EffectClipboardDataFromSelections = {
     readonly type: 'uncopyable';
 };
 export declare const getEffectClipboardDataFromSelections: ({ selectedItems, propStatuses, }: {
-    selectedItems: readonly TimelineSelection[];
+    selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     propStatuses: PropStatuses;
 }) => EffectClipboardDataFromSelections;
 export declare const getEffectsClipboardEnvelopeFromSelections: ({ selectedItems, payload, }: {
-    selectedItems: readonly TimelineSelection[];
+    selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     payload: EffectClipboardData;
 }) => EffectsClipboardEnvelope;
 export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
 export declare const getEasingClipboardDataFromSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
@@ -68,7 +67,7 @@ export declare const getEasingClipboardDataFromSelection: ({ selection, sequence
     propStatuses: PropStatuses;
 }) => EasingClipboardData | null;
 export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly payload: EffectPropClipboardData;
     readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];

package/dist/components/Timeline/TimelineDragHandler.js

@@ -74,20 +74,25 @@ const getClientXWithScroll = (x) => {
 const TimelineDragHandler = () => {
     const video = remotion_1.Internals.useUnsafeVideoConfig();
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
-        if (!canvasContent || canvasContent.type !== 'composition') {
+        if (!canvasContent) {
             return {};
         }
-        const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        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;
         return {
             ...container,
             width: 100 * zoom + '%',
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
     }, [canvasContent, zoomMap]);
-    if (!canvasContent || canvasContent.type !== 'composition') {
+    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);
+    if (!hasPlayableContent) {
         return null;
     }
     return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioSelectionEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
@@ -248,7 +253,9 @@ const TimelineDragHandlerInner = () => {
             return;
         }
         const scroller = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: true,
             includeVertical: false,
+            verticalTopOffset: 0,
             onTick: onEdgeScrollTick,
         });
         autoScroller.current = scroller;

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {
     readonly clickedNodePathInfo: SequenceNodePathInfo;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => readonly SequenceNodePathInfo[];
 export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, keyframable, }: {
     propStatus: CanUpdateSequencePropStatus | null;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -19,10 +19,12 @@ const TimelinePlayCursorSyncer = () => {
     const compositionId = canvasContent && canvasContent.type === 'composition'
         ? canvasContent.compositionId
         : null;
+    // Asset previews have a synthetic video config, but no composition ID
+    // with which to look up a persisted timeline zoom.
     const zoom = compositionId
         ? ((_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
-        : null;
-    if (zoom && video) {
+        : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);
         (0, imperative_state_1.setCurrentZoom)(zoom);
         (0, imperative_state_1.setCurrentDuration)(video.durationInFrames);

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

@@ -1,3 +1,4 @@
+import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
@@ -20,46 +21,11 @@ export declare const getTimelineRowHighlightBackground: ({ showSelectedBackgroun
 }) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#15181B";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
-export type TimelineSelection = {
-    readonly type: 'guide';
-    readonly guideId: string;
-} | {
-    readonly type: 'sequence';
-    readonly nodePathInfo: SequenceNodePathInfo;
-} | {
-    readonly type: 'sequence-prop';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly key: string;
-} | {
-    readonly type: 'sequence-all-effects';
-    readonly nodePathInfo: SequenceNodePathInfo;
-} | {
-    readonly type: 'sequence-effect';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly i: number;
-} | {
-    readonly type: 'sequence-effect-prop';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly i: number;
-    readonly key: string;
-} | {
-    readonly type: 'keyframe';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly frame: number;
-} | {
-    readonly type: 'easing';
-    readonly nodePathInfo: SequenceNodePathInfo;
-    readonly fromFrame: number;
-    readonly toFrame: number;
-    readonly segmentIndex: number;
-};
+export type TimelineSelection = CanvasSelectionItem;
 export type TimelineEasingSelection = Extract<TimelineSelection, {
     type: 'easing';
 }>;
-export type TimelineSelectionInteraction = {
-    readonly shiftKey: boolean;
-    readonly toggleKey: boolean;
-};
+export type TimelineSelectionInteraction = CanvasSelectionInteraction;
 export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
     readonly metaKey: boolean;
@@ -71,10 +37,7 @@ export declare const shouldSelectTimelineRowOnPointerDown: ({ selected, shiftKey
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => boolean;
-export type TimelineSelectionState = {
-    readonly selectedItems: readonly TimelineSelection[];
-    readonly anchor: TimelineSelection | null;
-};
+export type TimelineSelectionState = CanvasSelectionSnapshot;
 export declare const EMPTY_TIMELINE_SELECTION_STATE: TimelineSelectionState;
 export type TimelineMarqueeRect = {
     readonly left: number;
@@ -88,16 +51,16 @@ export type TimelineMarqueeSelectionCandidate = {
     readonly rect: TimelineMarqueeRect;
 };
 export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
-    readonly currentState: TimelineSelectionState;
-    readonly clickedItem: TimelineSelection;
-    readonly interaction: TimelineSelectionInteraction;
-    readonly allSelectableItems: readonly TimelineSelection[];
-}) => TimelineSelectionState;
+    readonly currentState: CanvasSelectionSnapshot;
+    readonly clickedItem: CanvasSelectionItem;
+    readonly interaction: CanvasSelectionInteraction;
+    readonly allSelectableItems: readonly CanvasSelectionItem[];
+}) => CanvasSelectionSnapshot;
 export declare const getAvailableTimelineSelectionState: ({ availableKeys, availableItemsByKey, state, }: {
     readonly availableKeys: ReadonlySet<string>;
-    readonly availableItemsByKey?: ReadonlyMap<string, TimelineSelection> | undefined;
-    readonly state: TimelineSelectionState;
-}) => TimelineSelectionState;
+    readonly availableItemsByKey?: ReadonlyMap<string, CanvasSelectionItem> | undefined;
+    readonly state: CanvasSelectionSnapshot;
+}) => CanvasSelectionSnapshot;
 export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
     readonly startX: number;
     readonly startY: number;
@@ -119,12 +82,12 @@ export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelection
     readonly marqueeRect: TimelineMarqueeRect;
 }) => {
     readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly CanvasSelectionItem[];
 };
 export declare const extendTimelineMarqueeSelection: ({ currentSelection, marqueeSelection, }: {
-    readonly currentSelection: readonly TimelineSelection[];
-    readonly marqueeSelection: readonly TimelineSelection[];
-}) => readonly TimelineSelection[];
+    readonly currentSelection: readonly CanvasSelectionItem[];
+    readonly marqueeSelection: readonly CanvasSelectionItem[];
+}) => readonly CanvasSelectionItem[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
     readonly revealRequest: TimelineSelectionRevealRequest | null;
@@ -151,23 +114,23 @@ type TimelineSelectionRevealRequest = {
     readonly item: TimelineSelection;
     readonly token: number;
 };
-export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
-export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
-export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => CanvasSelectionItem | null;
+export declare const getTimelineSelectionKey: (item: CanvasSelectionItem) => string;
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => CanvasSelectionItem[];
 export declare const getSelectableTimelineItems: ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }: {
     readonly getDragOverrides: GetDragOverrides;
     readonly getEffectDragOverrides: GetEffectDragOverrides;
     readonly getIsExpanded: GetIsExpanded;
     readonly propStatuses: PropStatuses;
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly CanvasSelectionItem[];
     readonly timeline: readonly TimelineTrackData[];
     readonly timelinePosition: number;
-}) => TimelineSelection[];
+}) => CanvasSelectionItem[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TimelineTrackData[];
 }>;
-export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly TimelineSelection[]) => {
+export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly CanvasSelectionItem[]) => {
     readonly type: "sequence";
     readonly nodePathInfo: SequenceNodePathInfo;
 } | null;
@@ -186,17 +149,17 @@ export declare const useTimelineMarqueeSelection: () => {
     marqueeRect: TimelineMarqueeRect | null;
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
-export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
+export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selectionItem: TimelineSelection | null;
+    selectionItem: CanvasSelectionItem | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
-    selectionItem: TimelineSelection;
+    selectionItem: CanvasSelectionItem;
     selected: boolean;
 };
 export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
@@ -205,7 +168,7 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     readonly toFrame: number;
     readonly segmentIndex: number;
 }) => {
-    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
     selectionItem: {
@@ -221,7 +184,7 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     onSelect: () => void;
     selectable: boolean;
     selected: boolean;
-    selectionItem: TimelineSelection;
+    selectionItem: CanvasSelectionItem;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {