@remotion/studio 4.0.503 → 4.0.505

package/dist/components/Tabs/vertical.js

@@ -12,13 +12,14 @@ const selectorButton = {
     paddingLeft: 16,
     display: 'flex',
     flexDirection: 'row',
+    fontFamily: 'sans-serif',
     fontSize: 14,
     color: 'inherit',
     alignItems: 'center',
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const VerticalTab = ({ children, onClick, style, selected }) => {
+const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -27,19 +28,16 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const color = selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
             ...selectorButton,
-            backgroundColor: selected
-                ? colors_1.SELECTED_BACKGROUND
-                : hovered
-                    ? colors_1.WHITE_ALPHA_06
-                    : colors_1.TRANSPARENT,
-            color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            boxShadow: selected ? 'none' : undefined,
+            backgroundColor: selected || hovered ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+            color,
+            boxShadow: 'none',
             ...style,
         };
-    }, [hovered, selected, style]);
-    return (jsx_runtime_1.jsx("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    }, [color, hovered, selected, style]);
+    return (jsx_runtime_1.jsxs("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TimeValue.js

@@ -11,6 +11,7 @@ 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 TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const text = {
     color: colors_1.WHITE,
     display: 'flex',
@@ -20,19 +21,32 @@ const text = {
     lineHeight: 1,
     width: '100%',
 };
-const time = {
+const currentTimeTypography = {
+    color: colors_1.WHITE,
     display: 'inline-block',
-    fontSize: 16,
+    fontSize: 14,
+    fontVariantNumeric: 'tabular-nums',
+    fontWeight: 400,
     lineHeight: 1,
     fontFamily: 'monospace',
 };
-const frameStyle = {
+const currentTimeInputStyle = {
+    ...currentTimeTypography,
+    padding: '4px 6px 4px 0',
+};
+const currentTimeButtonStyle = {
+    paddingLeft: 0,
+    transform: 'translateY(-1px)',
+};
+const currentTimeSubtitle = {
     color: colors_1.LIGHT_TEXT,
-    fontWeight: 500,
-    lineHeight: 1,
-    fontSize: 16,
+    display: 'block',
     fontFamily: 'monospace',
-    paddingRight: 10,
+    fontSize: 10,
+    fontWeight: 400,
+    lineHeight: 1,
+    marginTop: -2,
+    textAlign: 'left',
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -47,6 +61,10 @@ const TimeValue = () => {
     const onValueChange = (0, react_1.useCallback)((val) => {
         seek(val);
     }, [seek]);
+    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;
@@ -81,7 +99,7 @@ const TimeValue = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: text, children: [
-            jsx_runtime_1.jsx("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })
+            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 })
         ] }));
 };
 exports.TimeValue = TimeValue;

package/dist/components/Timeline/Timeline.js

@@ -195,7 +195,7 @@ const TimelineContextMenuArea = ({ children }) => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
-    const contextMenuItems = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 type: 'item',
@@ -223,7 +223,7 @@ const TimelineContextMenuArea = ({ children }) => {
             },
         ];
     }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, getItems: getContextMenuItems, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(timeline_asset_drop_context_1.TimelineAssetDropFrameContext.Provider, { value: assetDropFrame, children: children }) }));
 };
 const TimelineInner = () => {
     var _a;
@@ -267,9 +267,9 @@ 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, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (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, 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 }) }), 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: [
+            }), (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, {})
                                                     ] }) })
                                         ] })

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -18,6 +18,7 @@ const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const effects_clipboard_1 = require("./effects-clipboard");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const imperative_state_1 = require("./imperative-state");
 const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -379,9 +380,6 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
 const TimelineClipboardKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -556,7 +554,7 @@ const TimelineClipboardKeybindings = () => {
                         clientId,
                         confirm,
                         propStatuses,
-                        timelinePosition: timelinePositionRef.current,
+                        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
                     });
                     return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
                         if (!deleted) {
@@ -612,7 +610,7 @@ const TimelineClipboardKeybindings = () => {
                     const keyframeTarget = (0, keyframe_clipboard_1.getPasteKeyframeTarget)({
                         selectedItems,
                         payload: keyframeResult.data,
-                        timelinePosition: timelinePositionRef.current,
+                        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
                         sequences,
                         overrideIdsToNodePaths: overrideIdToNodePathMappings,
                         propStatuses,
@@ -870,7 +868,6 @@ const TimelineClipboardKeybindings = () => {
         previewServerState,
         sequencesRef,
         setPropStatuses,
-        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -10,6 +10,7 @@ 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");
@@ -25,15 +26,13 @@ const TimelineDeleteKeybindings = () => {
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     (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;
@@ -58,7 +57,7 @@ const TimelineDeleteKeybindings = () => {
                 clientId,
                 confirm,
                 propStatuses,
-                timelinePosition: timelinePositionRef.current,
+                timelinePosition,
             });
             if (deletePromise !== null) {
                 deletePromise
@@ -69,7 +68,7 @@ const TimelineDeleteKeybindings = () => {
                             sequences,
                             overrideIdsToNodePaths: overrideIdToNodePathMappings,
                             propStatuses,
-                            timelinePosition: timelinePositionRef.current,
+                            timelinePosition,
                         });
                         if (nextSelection.length === 0) {
                             clearSelection();
@@ -169,7 +168,7 @@ const TimelineDeleteKeybindings = () => {
                     sequences: sequencesRef.current,
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
                     propStatuses: propStatusesRef.current,
-                    splitFrame: timelinePositionRef.current,
+                    splitFrame: (0, imperative_state_1.getCurrentFrame)(),
                 });
                 if (splitPromise === null) {
                     return;
@@ -198,7 +197,6 @@ const TimelineDeleteKeybindings = () => {
         sequencesRef,
         setGuidesList,
         setPropStatuses,
-        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDragHandler.js

@@ -247,6 +247,9 @@ const TimelineDragHandlerInner = () => {
             extrapolate: 'clamp',
         });
         setFrame((c) => {
+            if (c[videoConfig.id] === frame) {
+                return c;
+            }
             const newObj = { ...c, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(newObj);
             return newObj;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -120,10 +120,13 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
     }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (!previewConnected) {
             return [];
         }
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         const items = [];
         if (documentationLink) {
             items.push({
@@ -168,6 +171,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         documentationLink,
         onDeleteEffectFromSource,
         previewConnected,
+        selection,
     ]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
@@ -322,6 +326,6 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     }, [dropIndicator]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };
 exports.TimelineEffectItem = TimelineEffectItem;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -294,7 +294,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (selection.selectable) {
+            selection.onSelect({ shiftKey: false, toggleKey: false });
+        }
         return [
             {
                 type: 'item',
@@ -309,7 +312,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-    }, [canShowReset, onReset]);
+    }, [canShowReset, onReset, selection]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         if (!window.remotion_editorName ||
             previewServerState.type !== 'connected') {
@@ -322,6 +325,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         }).catch(() => undefined);
     }, [field.key, previewServerState.type, validatedLocation]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) }) }));
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<{
+import type { getTimelineKeyframes } from './get-timeline-keyframes';
+type TimelineExpandedKeyframeRowProps = {
     readonly height: number;
-    readonly keyframes: {
-        frame: number;
-        value: unknown;
-    }[];
+    readonly keyframes: ReturnType<typeof getTimelineKeyframes>;
     readonly canEditEasing: boolean;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly showSeparator: boolean;
-}>;
+};
+export declare const TimelineExpandedKeyframeRow: React.NamedExoticComponent<TimelineExpandedKeyframeRowProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
@@ -43,6 +44,7 @@ const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const rowClipper = {
+    boxSizing: 'border-box',
     marginLeft: -timeline_layout_1.TIMELINE_PADDING,
     marginRight: -timeline_layout_1.TIMELINE_PADDING,
     overflow: 'hidden',
@@ -61,7 +63,37 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height, width: timelineWidth !== null && timelineWidth !== void 0 ? timelineWidth : undefined }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
         ] }));
 };
-exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);
+const areTimelineExpandedKeyframeRowPropsEqual = (prevProps, nextProps) => {
+    if (prevProps.height !== nextProps.height ||
+        prevProps.canEditEasing !== nextProps.canEditEasing ||
+        prevProps.showSeparator !== nextProps.showSeparator ||
+        prevProps.keyframes.length !== nextProps.keyframes.length ||
+        prevProps.nodePathInfo.index !== nextProps.nodePathInfo.index ||
+        prevProps.nodePathInfo.numberOfSequencesWithThisNodePath !==
+            nextProps.nodePathInfo.numberOfSequencesWithThisNodePath ||
+        prevProps.nodePathInfo.supportsEffects !==
+            nextProps.nodePathInfo.supportsEffects ||
+        (0, studio_shared_1.stringifySequenceSubscriptionKey)(prevProps.nodePathInfo.sequenceSubscriptionKey) !==
+            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nextProps.nodePathInfo.sequenceSubscriptionKey) ||
+        prevProps.nodePathInfo.auxiliaryKeys.length !==
+            nextProps.nodePathInfo.auxiliaryKeys.length) {
+        return false;
+    }
+    const prevVideoConfig = prevProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
+    const nextVideoConfig = nextProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
+    if (prevVideoConfig !== nextVideoConfig &&
+        (prevVideoConfig === null ||
+            nextVideoConfig === null ||
+            prevVideoConfig.durationInFrames !== nextVideoConfig.durationInFrames ||
+            prevVideoConfig.fps !== nextVideoConfig.fps ||
+            prevVideoConfig.height !== nextVideoConfig.height ||
+            prevVideoConfig.width !== nextVideoConfig.width)) {
+        return false;
+    }
+    return (prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame) &&
+        prevProps.nodePathInfo.auxiliaryKeys.every((key, index) => key === nextProps.nodePathInfo.auxiliaryKeys[index]));
+};
+exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized, areTimelineExpandedKeyframeRowPropsEqual);

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

@@ -3,5 +3,6 @@ import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
     readonly shown: TimelineTrackData[];
     readonly hasBeenCut: boolean;
+    readonly isStill: boolean;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -45,8 +45,8 @@ const baseStyle = {
     overflowX: 'hidden',
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
-const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
-    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });
+const TimelineHeightContainerInner = ({ shown, hasBeenCut, isStill, children }) => {
+    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut, isStill });
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -302,7 +302,7 @@ const TimelineInOutDragHandlerInner = () => {
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         };
     }, []);
-    const inContextMenu = (0, react_1.useMemo)(() => {
+    const getInContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: 'hide-in',
@@ -330,7 +330,7 @@ const TimelineInOutDragHandlerInner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    const outContextMenu = (0, react_1.useMemo)(() => {
+    const getOutContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: 'hide-out',
@@ -358,6 +358,6 @@ const TimelineInOutDragHandlerInner = () => {
             },
         ];
     }, [setInAndOutFrames, videoConfig.id]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, onOpen: null, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getInContextMenuItems, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in', onPointerDown: onInPointerDown }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getOutContextMenuItems, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame, onPointerDown: onOutPointerDown }) }))] }));
 };
 const TimelineInOutDragHandlerInnerMemo = react_1.default.memo(TimelineInOutDragHandlerInner);

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) => React.CSSProperties;
-export declare const TimelineKeyframeEasingLineVisual: React.FC<{
+export declare const TimelineKeyframeEasingLineVisual: React.NamedExoticComponent<{
     readonly selected: boolean;
 }>;
-export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
+type TimelineKeyframeEasingLineProps = {
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly rowHeight: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly segmentIndex: number;
-}>;
+};
+export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<TimelineKeyframeEasingLineProps>;
+export {};

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -72,15 +72,13 @@ const getTimelineKeyframeEasingLineStyle = (selected) => ({
     outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
 });
 exports.getTimelineKeyframeEasingLineStyle = getTimelineKeyframeEasingLineStyle;
-const TimelineKeyframeEasingLineVisual = ({ selected }) => {
+const TimelineKeyframeEasingLineVisualUnmemoized = ({ selected }) => {
     const lineStyle = (0, react_1.useMemo)(() => (0, exports.getTimelineKeyframeEasingLineStyle)(selected), [selected]);
     return jsx_runtime_1.jsx("div", { style: lineStyle });
 };
-exports.TimelineKeyframeEasingLineVisual = TimelineKeyframeEasingLineVisual;
-const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+exports.TimelineKeyframeEasingLineVisual = react_1.default.memo(TimelineKeyframeEasingLineVisualUnmemoized);
+const TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInfo, segmentIndex, style }) => {
     const buttonRef = (0, react_1.useRef)(null);
-    const videoConfig = (0, remotion_1.useVideoConfig)();
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected, onSelect, selectable, selectionItem } = (0, TimelineSelection_1.useTimelineEasingSelection)({
         nodePathInfo,
         fromFrame,
@@ -88,6 +86,10 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         segmentIndex,
     });
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, buttonRef);
+    const interactiveStyle = (0, react_1.useMemo)(() => ({
+        ...style,
+        pointerEvents: selectable ? 'auto' : 'none',
+    }), [selectable, style]);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
@@ -120,7 +122,16 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         sequencesRef,
         setPropStatuses,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)((event) => {
+        if (!selectable) {
+            return false;
+        }
+        if (!selected) {
+            onSelect({
+                shiftKey: event.shiftKey,
+                toggleKey: event.metaKey || event.ctrlKey,
+            });
+        }
         return [
             {
                 type: 'item',
@@ -147,19 +158,20 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
                 value: preset.id,
             })),
         ];
-    }, [previewServerState.type, updateEasing]);
-    const onOpenContextMenu = (0, react_1.useCallback)((event) => {
-        if (!selectable) {
-            return false;
-        }
-        if (!selected) {
-            onSelect({
-                shiftKey: event.shiftKey,
-                toggleKey: event.metaKey || event.ctrlKey,
-            });
-        }
-        return contextMenuValues;
-    }, [contextMenuValues, onSelect, selectable, selected]);
+    }, [onSelect, previewServerState.type, selectable, selected, updateEasing]);
+    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
+        onSelect,
+        selectable,
+        selected,
+        selectionItem,
+    });
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: interactiveStyle, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, getItems: getContextMenuItems })
+        ] }));
+};
+const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const style = (0, react_1.useMemo)(() => {
         if (timelineWidth === null) {
             return null;
@@ -174,29 +186,19 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         return {
             ...easingLineButton,
             left,
-            pointerEvents: selectable ? 'auto' : 'none',
             top: rowHeight / 2,
             width,
         };
     }, [
         fromFrame,
         rowHeight,
-        selectable,
         timelineWidth,
         toFrame,
         videoConfig.durationInFrames,
     ]);
-    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
-        onSelect,
-        selectable,
-        selected,
-        selectionItem,
-    });
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
-        ] }));
+    return (jsx_runtime_1.jsx(TimelineKeyframeEasingLineInteraction, { fromFrame: fromFrame, toFrame: toFrame, rowHeight: rowHeight, nodePathInfo: nodePathInfo, segmentIndex: segmentIndex, style: style }));
 };
 exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

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

@@ -2,4 +2,5 @@ import React from 'react';
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineList: React.FC<{
     readonly timeline: TimelineTrackData[];
+    readonly showTimePadding: boolean;
 }>;

package/dist/components/Timeline/TimelineList.js

@@ -16,9 +16,8 @@ const TimelineListTrack = ({ nestedTrack }) => {
     const { track, children, siblingIndex } = nestedTrack;
     return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, children: children.map((child) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: child }, child.track.sequence.id))) }) }));
 };
-const TimelineList = ({ timeline }) => {
+const TimelineList = ({ timeline, showTimePadding }) => {
     const nestedTimeline = (0, react_1.useMemo)(() => (0, nest_timeline_tracks_1.nestTimelineTracks)(timeline), [timeline]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [showTimePadding ? jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}) : null, nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineScaleField.js

@@ -308,7 +308,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;