@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -18,7 +18,6 @@ const ZOOM_WHEEL_SENSITIVITY = 0.06;
 const TimelinePinchZoom = () => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom, setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const zoomRef = (0, react_1.useRef)(zoom);
@@ -51,9 +50,6 @@ const TimelinePinchZoom = () => {
         if (!videoConfig || videoConfig.durationInFrames < 2) {
             return;
         }
-        if (!canvasContent || canvasContent.type !== 'composition') {
-            return;
-        }
         const scrollEl = timeline_refs_1.scrollableRef.current;
         if (!scrollEl) {
             return;
@@ -70,14 +66,8 @@ const TimelinePinchZoom = () => {
         else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             scaledDeltaY *= scrollEl.clientHeight;
         }
-        setZoom(canvasContent.compositionId, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
-    }, [
-        editorZoomGestures,
-        isVideoComposition,
-        videoConfig,
-        canvasContent,
-        setZoom,
-    ]);
+        setZoom(videoConfig.id, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
+    }, [editorZoomGestures, isVideoComposition, videoConfig, setZoom]);
     const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
     (0, react_1.useEffect)(() => {
         const el = timeline_refs_1.timelineVerticalScroll.current;
@@ -106,16 +96,13 @@ const TimelinePinchZoom = () => {
             if (!videoConfig || videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            pinchBaseZoomRef.current = getCurrentTimelineZoom(canvasContent.compositionId);
+            pinchBaseZoomRef.current = getCurrentTimelineZoom(videoConfig.id);
         };
         const onGestureChange = (event) => {
             const e = event;
@@ -126,9 +113,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
@@ -138,7 +122,7 @@ const TimelinePinchZoom = () => {
                 clientX: e.clientX,
                 scrollEl,
             });
-            setZoom(canvasContent.compositionId, () => base * e.scale, {
+            setZoom(videoConfig.id, () => base * e.scale, {
                 anchorFrame: null,
                 anchorContentX,
             });
@@ -161,7 +145,6 @@ const TimelinePinchZoom = () => {
         supportsWebKitPinch,
         isVideoComposition,
         videoConfig,
-        canvasContent,
         getCurrentTimelineZoom,
         setZoom,
     ]);
@@ -180,9 +163,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const [t0, t1] = [event.touches[0], event.touches[1]];
             const initialDistance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
             if (initialDistance < 1e-6) {
@@ -190,7 +170,7 @@ const TimelinePinchZoom = () => {
             }
             touchPinchRef.current = {
                 initialDistance,
-                initialZoom: getCurrentTimelineZoom(canvasContent.compositionId),
+                initialZoom: getCurrentTimelineZoom(videoConfig.id),
             };
         };
         const onTouchMove = (event) => {
@@ -201,9 +181,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
@@ -217,7 +194,7 @@ const TimelinePinchZoom = () => {
                 clientX,
                 scrollEl,
             });
-            setZoom(canvasContent.compositionId, () => pinch.initialZoom * ratio, {
+            setZoom(videoConfig.id, () => pinch.initialZoom * ratio, {
                 anchorFrame: null,
                 anchorContentX,
             });
@@ -241,7 +218,6 @@ const TimelinePinchZoom = () => {
         editorZoomGestures,
         isVideoComposition,
         videoConfig,
-        canvasContent,
         getCurrentTimelineZoom,
         setZoom,
     ]);

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -16,17 +16,11 @@ const TimelinePlayCursorSyncer = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const playing = remotion_1.Internals.usePlaying();
     const { playbackRate } = remotion_1.Internals.usePlaybackRate();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    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 = (0, get_timeline_max_zoom_1.getTimelineZoom)({
         durationInFrames: (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1,
         timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
-        zoom: compositionId ? ((_d = zoomMap[compositionId]) !== null && _d !== void 0 ? _d : null) : null,
+        zoom: video ? ((_d = zoomMap[video.id]) !== null && _d !== void 0 ? _d : null) : null,
     });
     if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);

package/dist/components/Timeline/TimelineRowChrome.js

@@ -37,6 +37,7 @@ exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = exports.
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const drag_aware_double_click_1 = require("../../helpers/drag-aware-double-click");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
@@ -72,6 +73,7 @@ exports.TimelineRowKeyframeControlsColumn = TimelineRowKeyframeControlsColumn;
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
     const { basePadding, rowBorderRadius, rowHorizontalMargin } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const selectedBackground = (0, react_1.useContext)(exports.TimelineRowSelectedBackgroundContext);
+    const doubleClickTracker = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
@@ -95,7 +97,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             onSelect();
         }
     }, [onSelect, selected]);
-    const onDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
+    const performDoubleClickIfNotInteractive = (0, react_1.useCallback)((e) => {
         const { target } = e;
         if (target instanceof Element &&
             e.currentTarget.contains(target.closest('button, input, select, textarea, a, [contenteditable="true"]'))) {
@@ -104,6 +106,12 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         }
         onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
     }, [onDoubleClick]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        if (!doubleClickTracker.acceptClickAsDoubleClick(e)) {
+            return;
+        }
+        performDoubleClickIfNotInteractive(e);
+    }, [doubleClickTracker, performDoubleClickIfNotInteractive]);
     const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
         showSelectedBackground,
         selected,
@@ -139,8 +147,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) })), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDownCapture: doubleClickTracker.beginPointerGesture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick, onContextMenu: selectable ? onContextMenu : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDownCapture: doubleClickTracker.beginPointerGesture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick, onContextMenu: selectable ? onContextMenu : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -52,8 +52,10 @@ const unsupportedStatusWrapper = {
 };
 const unsupportedLabel = {
     color: colors_1.WHITE_ALPHA_40,
+    fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
+    lineHeight: '18px',
 };
 const computedValue = {
     color: colors_1.WHITE_ALPHA_40,
@@ -119,10 +121,12 @@ const TimelineNonEditableStatus = ({ propStatus, field, runtimeValue, validatedL
         });
     }, [field.key, remotionSkillsInfo, setSelectedModal, validatedLocation]);
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
-                fieldSchema: field.fieldSchema,
-                value: runtimeValue,
-            }), onFix: onFix, formattedValue: true }));
+        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: runtimeValue === undefined
+                ? 'computed'
+                : (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+                    fieldSchema: field.fieldSchema,
+                    value: runtimeValue,
+                }), onFix: onFix, formattedValue: runtimeValue !== undefined }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;

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

@@ -1,4 +1,5 @@
 import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
+import { type SequenceNodePathMutation } from '@remotion/studio-shared';
 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';
@@ -101,6 +102,7 @@ type TimelineSelectionContextValue = {
         readonly selectedItems: readonly TimelineSelection[];
     };
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
+    readonly remapSelectionNodePaths: (mutations: readonly SequenceNodePathMutation[]) => void;
     readonly clearSelection: () => void;
 };
 export declare const TimelineSelectionOrderProvider: React.FC<{

package/dist/components/Timeline/TimelineSelection.js

@@ -60,6 +60,7 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor =
     position: 'absolute',
     top: 0,
     width: timelineWidth,
+    minWidth: `calc(100% + ${timeline_layout_1.TIMELINE_PADDING * 2}px)`,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
 const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }) => {
@@ -219,6 +220,7 @@ const defaultTimelineSelectionContextValue = {
         selectedItems: [],
     }),
     containsSelection: () => false,
+    remapSelectionNodePaths: () => undefined,
     clearSelection: () => undefined,
 };
 const TimelineSelectionContext = (0, react_1.createContext)(defaultTimelineSelectionContextValue);
@@ -414,7 +416,7 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
         }
         const selectAll = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'a',
+            action: 'selectAllSequenceRows',
             callback: () => {
                 const latestSelectableSequenceSelections = selectableSequenceSelectionsRef.current;
                 if (latestSelectableSequenceSelections.length === 0) {
@@ -422,7 +424,6 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
                 }
                 currentSelection.current.selectItems(latestSelectableSequenceSelections);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -684,6 +685,56 @@ const TimelineSelectionProvider = ({ children }) => {
         return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
             nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
     }, [availableSelectedItems]);
+    const remapSelectionNodePaths = (0, react_1.useCallback)((mutations) => {
+        const remapItem = (item) => {
+            if (item === null || item.type === 'guide') {
+                return item;
+            }
+            const { sequenceSubscriptionKey } = item.nodePathInfo;
+            let { nodePath } = sequenceSubscriptionKey;
+            let wasRemapped = false;
+            for (const mutation of mutations) {
+                const file = mutation.files.find((candidate) => candidate.absolutePath === sequenceSubscriptionKey.absolutePath);
+                if (!file) {
+                    continue;
+                }
+                const nodePathString = JSON.stringify(nodePath);
+                const remapping = file.remappings.find((candidate) => candidate.oldNodePath !== null &&
+                    JSON.stringify(candidate.oldNodePath) === nodePathString);
+                if (!remapping) {
+                    continue;
+                }
+                wasRemapped = true;
+                if (remapping.newNodePath === null) {
+                    return null;
+                }
+                nodePath = remapping.newNodePath;
+            }
+            if (!wasRemapped) {
+                return item;
+            }
+            return {
+                ...item,
+                nodePathInfo: {
+                    ...item.nodePathInfo,
+                    sequenceSubscriptionKey: {
+                        ...sequenceSubscriptionKey,
+                        nodePath,
+                    },
+                },
+            };
+        };
+        const snapshot = selectionController.getSnapshot();
+        const selectedItems = snapshot.selectedItems
+            .map(remapItem)
+            .filter((item) => item !== null);
+        const anchor = remapItem(snapshot.anchor);
+        if (selectedItems.some((item, index) => item !== snapshot.selectedItems[index]) ||
+            selectedItems.length !== snapshot.selectedItems.length ||
+            anchor !== snapshot.anchor) {
+            selectionController.setSnapshot({ selectedItems, anchor });
+        }
+    }, [selectionController]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
         revealRequest,
@@ -694,6 +745,7 @@ const TimelineSelectionProvider = ({ children }) => {
         registerMarqueeSelectableItem,
         getMarqueeSelection: getMarqueeSelectionForRect,
         containsSelection,
+        remapSelectionNodePaths,
         clearSelection,
     }), [
         canSelect,
@@ -705,6 +757,7 @@ const TimelineSelectionProvider = ({ children }) => {
         registerMarqueeSelectableItem,
         getMarqueeSelectionForRect,
         containsSelection,
+        remapSelectionNodePaths,
         clearSelection,
     ]);
     const currentSelection = (0, react_1.useRef)(value);