@remotion/studio 4.0.526 → 4.0.528

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -13,7 +13,6 @@ const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key")
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
-const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const normalize_font_weight_for_keyframe_1 = require("./normalize-font-weight-for-keyframe");
@@ -21,7 +20,6 @@ const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const NAV_BUTTON_SIZE = 14;
 const INSPECTOR_NAV_BUTTON_WIDTH = NAV_BUTTON_SIZE / 2;
 const INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP = 1;
@@ -52,6 +50,7 @@ const navButtonStyle = {
     outline: 'none',
     padding: 0,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     width: NAV_BUTTON_SIZE,
 };
 const inspectorNavButtonStyle = {
@@ -154,15 +153,22 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
             propStatus: sequenceSelectedPropStatus,
             nodePath,
             fileName: nodePath.absolutePath,
+            keyframePlaybackRate: track.keyframePlaybackRate,
             keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: sequenceSelectedPropStatus,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
+                keyframePlaybackRate: track.keyframePlaybackRate,
             }),
-            sourceFrame: timelinePosition -
-                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                displayFrame: timelinePosition,
+                propStatus: sequenceSelectedPropStatus,
+                keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                     propStatus: sequenceSelectedPropStatus,
                     keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    keyframePlaybackRate: track.keyframePlaybackRate,
                 }),
+                keyframePlaybackRate: track.keyframePlaybackRate,
+            }),
             defaultValue: fieldNode.field.fieldSchema.default,
             dragOverrideValue: ((_c = getDragOverrides(nodePath)) !== null && _c !== void 0 ? _c : {})[fieldNode.field.key],
             schema: track.sequence.controls.schema,
@@ -186,15 +192,22 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         propStatus: effectSelectedPropStatus,
         nodePath,
         fileName: nodePath.absolutePath,
+        keyframePlaybackRate: track.keyframePlaybackRate,
         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: effectSelectedPropStatus,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
         }),
-        sourceFrame: timelinePosition -
-            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            propStatus: effectSelectedPropStatus,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: effectSelectedPropStatus,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
+                keyframePlaybackRate: track.keyframePlaybackRate,
             }),
+            keyframePlaybackRate: track.keyframePlaybackRate,
+        }),
         defaultValue: fieldNode.field.fieldSchema.default,
         dragOverrideValue: getEffectDragOverrides(nodePath, fieldNode.field.effectIndex)[fieldNode.field.key],
         schema: fieldNode.field.effectSchema,
@@ -314,10 +327,10 @@ const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, keyframePlaybackRate, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -331,9 +344,15 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
-    const jsxFrame = timelinePosition - resolvedKeyframeDisplayOffset;
-    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
+    const jsxFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame: timelinePosition,
+        keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
+        keyframePlaybackRate,
+        propStatus,
+    });
+    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset, keyframePlaybackRate), [propStatus, keyframeDisplayOffset, keyframePlaybackRate]);
     const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
         if (!isKeyframedStatus(propStatus)) {
             return false;
@@ -373,6 +392,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         nodePath,
         fileName,
         keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
+        keyframePlaybackRate,
         sourceFrame: jsxFrame,
         defaultValue,
         dragOverrideValue,
@@ -386,6 +406,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         fileName,
         jsxFrame,
         resolvedKeyframeDisplayOffset,
+        keyframePlaybackRate,
         nodePath,
         nodePathInfo,
         propStatus,
@@ -452,19 +473,13 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 const change = getDeleteChange(target);
                 return change === null ? [] : [{ target, change }];
             });
-            const singleDeleteTarget = deleteTargets[0];
-            const easingSelection = deleteTargets.length === 1 &&
-                singleDeleteTarget &&
-                isKeyframedStatus(singleDeleteTarget.target.propStatus) &&
-                (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(singleDeleteTarget.target.propStatus.interpolationFunction)
-                ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-                    deletedSourceFrames: [singleDeleteTarget.target.sourceFrame],
-                    keyframeDisplayOffset: singleDeleteTarget.target.keyframeDisplayOffset,
-                    nodePathInfo: singleDeleteTarget.target.nodePathInfo,
-                    propStatus: singleDeleteTarget.target.propStatus,
-                    timelinePosition,
-                })
-                : null;
+            if (deleteTargets.length === 0) {
+                return;
+            }
+            selectItems(deleteTargets.flatMap(({ target }) => {
+                const propertySelection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(target.nodePathInfo);
+                return propertySelection === null ? [] : [propertySelection];
+            }), { reveal: true });
             const deleteChanges = deleteTargets.map(({ change }) => change);
             await (0, call_delete_keyframe_1.callDeleteKeyframes)({
                 sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
@@ -472,9 +487,6 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 setPropStatuses,
                 clientId,
             });
-            if (mode === 'timeline' && easingSelection !== null) {
-                selectItems([easingSelection], { reveal: true });
-            }
             return;
         }
         const addChanges = keyframeToggleTargets.flatMap((target) => {
@@ -498,7 +510,8 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             selectItems(addChanges.map(({ target }) => ({
                 type: 'keyframe',
                 nodePathInfo: target.nodePathInfo,
-                frame: target.sourceFrame + target.keyframeDisplayOffset,
+                frame: target.sourceFrame / target.keyframePlaybackRate +
+                    target.keyframeDisplayOffset,
             })), { reveal: true });
         }
     }, [
@@ -510,7 +523,6 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         mode,
         selectItems,
         setPropStatuses,
-        timelinePosition,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -129,6 +129,6 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
             border: 'none',
             padding: 0,
             cursor: 'default',
-        }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
+        }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: colors_1.CURRENT_COLOR }) }));
 };
 exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineList.js

@@ -19,7 +19,7 @@ const TimelineListTrack = react_1.default.memo(({ row }) => {
     var _a;
     var _b, _c;
     const { afterDropLineOffset, siblingIndex, track } = row;
-    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, keyframePlaybackRate: track.keyframePlaybackRate, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
 });
 const TimelineList = () => {
     const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();

package/dist/components/Timeline/TimelineNumberField.js

@@ -39,9 +39,7 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
     const step = field.fieldSchema.type === 'font-weight' && currentValue % 100 === 0
         ? 100
         : (configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1);
-    const allowStepMismatch = field.fieldSchema.type === 'font-weight' ||
-        field.group === 'crop' ||
-        ('kind' in field && field.kind === 'effect-field');
+    const integerOnly = field.fieldSchema.type === 'number' && field.fieldSchema.integer === true;
     const formatter = (0, react_1.useCallback)((v) => {
         return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
             fieldSchema: field.fieldSchema,
@@ -56,6 +54,6 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
             : field.fieldSchema.type === 'font-weight'
                 ? 1000
-                : Infinity, step: step, dragSensitivity: field.fieldSchema.type === 'font-weight' && step === 100 ? 0.1 : 1, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
+                : Infinity, step: step, dragSensitivity: field.fieldSchema.type === 'font-weight' && step === 100 ? 0.1 : 1, formatter: formatter, rightAlign: false, allowStepMismatch: true, integerOnly: integerOnly }));
 };
 exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -62,7 +62,7 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'enum') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
-    if (field.typeName === 'text-content') {
+    if (field.typeName === 'text-content' || field.typeName === 'svg-path') {
         return (jsx_runtime_1.jsx(TimelineTextContentField_1.TimelineTextContentField, { effectiveValue: effectiveValue, field: field, nodePath: scaleLockNodePath, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
     }
     if (field.typeName === 'font-family') {

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

@@ -1,17 +1,17 @@
-import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
+import type { CanvasSelectionInteraction, CanvasSelectionItem, 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';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
-export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
-export declare const TIMELINE_EXPANDED_SELECTED_BACKGROUND = "rgb(31,36,40)";
-export declare const TIMELINE_HOVER_BACKGROUND = "rgba(255, 255, 255, 0.05)";
-export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
-export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
+export declare const TIMELINE_SELECTED_BACKGROUND = "var(--remotion-studio-timeline-selected-background-color)";
+export declare const TIMELINE_EXPANDED_SELECTED_BACKGROUND = "var(--remotion-studio-background)";
+export declare const TIMELINE_HOVER_BACKGROUND = "var(--remotion-studio-white-alpha-05)";
+export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "var(--remotion-studio-timeline-selected-label-background-color)";
+export declare const TIMELINE_SELECTED_LABEL_TEXT = "var(--remotion-studio-black)";
 export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
-export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
+export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "var(--remotion-studio-black)" | "var(--remotion-studio-white-alpha-80)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
 export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }: {
     readonly showSelectedBackground: boolean;
@@ -20,8 +20,8 @@ export declare const getTimelineRowHighlightBackground: ({ showSelectedBackgroun
     readonly hovered: boolean;
     readonly selectedBackground: string;
 }) => string | undefined;
-export declare const TIMELINE_BACKGROUND = "#15181B";
-export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
+export declare const TIMELINE_BACKGROUND = "var(--remotion-studio-timeline-background-color)";
+export declare const TIMELINE_TICKS_BACKGROUND = "var(--remotion-studio-background)";
 export type TimelineSelection = CanvasSelectionItem;
 export type TimelineEasingSelection = Extract<TimelineSelection, {
     type: 'easing';

package/dist/components/Timeline/TimelineSelection.js

@@ -27,6 +27,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
+const { EMPTY_CANVAS_SELECTION, getCanvasSelectionAfterInteraction, getCanvasSequenceSelectionKey, useCanvasSelectionController, } = canvas_1.CanvasInternals;
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
 exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = colors_1.BACKGROUND;
 exports.TIMELINE_HOVER_BACKGROUND = colors_1.WHITE_ALPHA_05;
@@ -81,8 +82,8 @@ const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctr
     return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
 };
 exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
-exports.EMPTY_TIMELINE_SELECTION_STATE = canvas_1.EMPTY_CANVAS_SELECTION;
-exports.getTimelineSelectionAfterInteraction = canvas_1.getCanvasSelectionAfterInteraction;
+exports.EMPTY_TIMELINE_SELECTION_STATE = EMPTY_CANVAS_SELECTION;
+exports.getTimelineSelectionAfterInteraction = getCanvasSelectionAfterInteraction;
 const getAvailableTimelineSelectionState = ({ availableKeys, availableItemsByKey, state, }) => {
     if (state.selectedItems.length === 0 && state.anchor === null) {
         return state;
@@ -292,6 +293,11 @@ const nodePathDescendsFrom = (descendant, ancestor) => {
     }
     return ancestor.auxiliaryKeys.every((key, i) => descendant.auxiliaryKeys[i] === key);
 };
+const timelineRowContainsSelection = (nodePathInfo, selection) => selection.type !== 'guide' &&
+    (nodePathDescendsFrom(selection.nodePathInfo, nodePathInfo) ||
+        ((selection.type === 'keyframe' || selection.type === 'easing') &&
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(selection.nodePathInfo) ===
+                (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)));
 const getSelectableTimelineSequenceSelections = (tracks) => {
     return tracks.flatMap((track) => {
         if (track.nodePathInfo === null ||
@@ -377,6 +383,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
                     nodePath: nodePathInfo.sequenceSubscriptionKey,
                     propStatuses,
                     keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    keyframePlaybackRate: track.keyframePlaybackRate,
                     getDragOverrides,
                     getEffectDragOverrides,
                     timelinePosition,
@@ -405,7 +412,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
     });
 };
 exports.getSelectableTimelineItems = getSelectableTimelineItems;
-exports.getTimelineSequenceSelectionKey = canvas_1.getCanvasSequenceSelectionKey;
+exports.getTimelineSequenceSelectionKey = getCanvasSequenceSelectionKey;
 const TimelineSelectAllKeybindings = ({ timeline }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { canSelect } = (0, exports.useTimelineSelection)();
@@ -539,7 +546,8 @@ const TimelineSelectionProvider = ({ children }) => {
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
     const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
-    const selectionController = (0, canvas_1.useCanvasSelectionController)();
+    const effectOperationsAvailable = (0, browser_studio_operations_1.canUseEffectOperations)();
+    const selectionController = useCanvasSelectionController();
     const selectionState = (0, canvas_1.useCanvasSelection)(selectionController);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
@@ -558,7 +566,8 @@ const TimelineSelectionProvider = ({ children }) => {
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
         (!window.remotion_isReadOnlyStudio ||
             keyframeOperationsAvailable ||
-            item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
+            (effectOperationsAvailable && item.type === 'sequence-effect') ||
+            item.type === 'sequence'), [canSelect, effectOperationsAvailable, keyframeOperationsAvailable]);
     const availableSelectionState = selectionScope.current === timelineSelectionScope
         ? selectionState
         : exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -713,8 +722,7 @@ const TimelineSelectionProvider = ({ children }) => {
         selectionController.clear();
     }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
-        return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
-            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+        return availableSelectedItems.some((selected) => timelineRowContainsSelection(nodePathInfo, selected));
     }, [availableSelectedItems]);
     const remapSelectionNodePaths = (0, react_1.useCallback)((mutations) => {
         const remapItem = (item) => {
@@ -1111,8 +1119,7 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
         }
         return selectionContext
             .getSnapshot()
-            .selectedItems.some((selected) => selected.type !== 'guide' &&
-            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+            .selectedItems.some((selected) => timelineRowContainsSelection(nodePathInfo, selected));
     }, [nodePathInfo, selectionContext]);
     return (0, use_sync_external_store_1.useSyncExternalStore)(selectionContext.subscribe, getContainsSelection, getContainsSelection);
 };

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

@@ -2,7 +2,9 @@ import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequence: React.NamedExoticComponent<{
-    readonly s: TSequence;
+    readonly s: TSequence & {
+        loopDisplay: import("@remotion/canvas").TimelineLoopDisplay | undefined;
+    };
     readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;

package/dist/components/Timeline/TimelineSequence.js

@@ -52,6 +52,7 @@ const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const SequencePropsSubscriptionProvider_1 = require("../SequencePropsSubscriptionProvider");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -61,6 +62,7 @@ const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-fra
 const get_timeline_sequence_visible_layout_1 = require("./get-timeline-sequence-visible-layout");
 const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -73,6 +75,7 @@ const use_asset_timeline_context_menu_1 = require("./use-asset-timeline-context-
 const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
+const { getTimelineVisibleDuration, getTimelineVisibleStart } = canvas_1.CanvasInternals;
 const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
@@ -125,6 +128,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     const isAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
@@ -147,7 +151,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     }, [fromCanUpdate, onMoveDragPointerDown, onSelect, selected]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
-    const sequenceFrame = relativeFrame + sequenceFrameOffset;
+    const sequenceFrame = relativeFrame * s.sequencePlaybackRate + sequenceFrameOffset;
     const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
     const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
     const roundedFrame = Math.round(sequenceFrame * 100) / 100;
@@ -166,9 +170,9 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
             ...style,
             background: negativeStart ? colors_1.TRANSPARENT : style.background,
             border: negativeStart ? 'none' : style.border,
-            opacity: selected || isAsset ? 1 : 0.75,
+            opacity: selected || containsSelection || isAsset ? 1 : 0.75,
         };
-    }, [isAsset, negativeStart, selected, style]);
+    }, [containsSelection, isAsset, negativeStart, selected, style]);
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [premount ? (jsx_runtime_1.jsx("div", { style: {
                     left: premount.left,
                     width: premount.width,
@@ -238,26 +242,40 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b, _c, _d, _e;
-    var _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const video = remotion_1.Internals.useVideo();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useContext)(SequencePropsSubscriptionProvider_1.OverrideIdToNodePathMappingsRefContext);
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
     const mediaDurationDragLimitsRegistry = (0, react_1.useContext)(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsContext);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(s.type === 'audio' || s.type === 'video' ? s.src : null);
     const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
+    const mediaStartFrame = s.type === 'audio' || s.type === 'video'
+        ? (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+            startMediaFrom: s.startMediaFrom,
+            mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+            sequenceFrameOffset,
+            playbackRate: s.playbackRate,
+        })
+        : 0;
+    const mediaLoopStartFrame = mediaStartFrame -
+        ((_j = (_a = s.loopDisplay) === null || _a === void 0 ? void 0 : _a.mediaOffsetInFrames) !== null && _j !== void 0 ? _j : 0) *
+            (s.type === 'audio' || s.type === 'video'
+                ? s.playbackRate * s.sequencePlaybackRate
+                : 0);
     const naturalMediaDuration = (s.type === 'audio' || s.type === 'video') &&
         mediaMetadata !== null &&
         s.playbackRate > 0
-        ? Math.max(0, (mediaMetadata.duration * ((_f = video === null || video === void 0 ? void 0 : video.fps) !== null && _f !== void 0 ? _f : 30) -
+        ? Math.max(0, (mediaMetadata.duration * ((_k = video === null || video === void 0 ? void 0 : video.fps) !== null && _k !== void 0 ? _k : 30) -
             (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
                 startMediaFrom: s.startMediaFrom,
                 mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
                 sequenceFrameOffset,
                 playbackRate: s.playbackRate,
             })) /
-            s.playbackRate)
+            (s.playbackRate * s.sequencePlaybackRate))
         : null;
     const maxMediaDuration = s.type === 'sequence' || s.type === 'image' || extendVideoLastFrame
         ? Infinity
@@ -278,22 +296,22 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_g = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _g !== void 0 ? _g : null;
+    const nodePath = (_l = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _l !== void 0 ? _l : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+        ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const durationCanResize = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         (0, TimelineSequenceRightEdgeDragHandle_1.canResizeTimelineSequenceDuration)({
             status: propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
         }));
     const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        ((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+        ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const trimBeforeCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        ((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
+        ((_d = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _d === void 0 ? void 0 : _d.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
@@ -356,7 +374,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenSource;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
-    const isProgrammaticallyDuplicated = ((_h = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _h !== void 0 ? _h : 1) > 1;
+    const isProgrammaticallyDuplicated = ((_m = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _m !== void 0 ? _m : 1) > 1;
     const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !s.showInTimeline ||
@@ -377,6 +395,26 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)(selectedSequenceNodePathInfos, confirm).catch(() => undefined);
     }, [confirm, previewInteractive, selectedSequenceNodePathInfos]);
+    const onSplitSelectedSequences = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!previewInteractive || selectedSequenceNodePathInfos === null) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections: selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+            propStatuses,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        overrideIdToNodePathMappingsRef,
+        previewInteractive,
+        propStatuses,
+        selectedItems,
+        selectedSequenceNodePathInfos,
+        sequences,
+    ]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) ||
             !nodePath ||
@@ -433,8 +471,10 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             return (0, get_sequence_context_menu_items_1.getMultiSequenceContextMenuItems)({
                 deleteDisabled: !previewInteractive,
                 duplicateDisabled: !previewInteractive,
+                splitDisabled: !previewInteractive,
                 onDeleteSelectedSequences,
                 onDuplicateSelectedSequences,
+                onSplitSelectedSequences,
             });
         }
         const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
@@ -513,6 +553,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onDuplicateSelectedSequences,
+        onSplitSelectedSequences,
         openInCodingAgent,
         openInEditor,
         originalLocation,
@@ -534,7 +575,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_j = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _j !== void 0 ? _j : 1,
+        timelineDurationInFrames: (_o = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _o !== void 0 ? _o : 1,
         onDragEnd: dragAwareDoubleClick.endPointerGesture,
     });
     if (!video) {
@@ -596,7 +637,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [visibleLayout]);
     const showLeftBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) === true &&
         localStart >= 0 &&
-        ((_k = s.trimBefore) !== null && _k !== void 0 ? _k : 0) === 0 &&
+        ((_p = s.trimBefore) !== null && _p !== void 0 ? _p : 0) === 0 &&
         (s.type === 'sequence' ||
             s.type === 'image' ||
             (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
@@ -616,15 +657,15 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         Math.ceil(Math.min(s.duration, video.durationInFrames - s.from, maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity)) === Math.ceil(naturalMediaDuration);
     const parentSequence = sequences.find((candidate) => candidate.id === s.parent);
     const parentEnd = parentSequence
-        ? (0, canvas_1.getTimelineVisibleStart)(parentSequence, sequences) +
-            (0, canvas_1.getTimelineVisibleDuration)(parentSequence, sequences)
+        ? getTimelineVisibleStart(parentSequence, sequences) +
+            getTimelineVisibleDuration(parentSequence, sequences)
         : video.durationInFrames;
     const endsAtContainerBoundary = Math.ceil(s.from + displayDurationInFrames) >=
         Math.ceil(Math.min(parentEnd, video.durationInFrames));
     const hasImplicitMediaDuration = (s.type === 'audio' || s.type === 'video') &&
-        ((_d = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _d === void 0 ? void 0 : _d.status) === 'static' &&
+        ((_e = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _e === void 0 ? void 0 : _e.status) === 'static' &&
         propStatusesForOverride.durationInFrames.codeValue === undefined;
-    const durationInFramesCodeValue = ((_e = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _e === void 0 ? void 0 : _e.status) === 'static'
+    const durationInFramesCodeValue = ((_f = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _f === void 0 ? void 0 : _f.status) === 'static'
         ? propStatusesForOverride.durationInFrames.codeValue
         : null;
     const explicitDurationInFrames = typeof durationInFramesCodeValue === 'number' &&
@@ -638,7 +679,9 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             displayDurationInFrames: s.duration,
             displayStart: s.from,
             effectiveMaxMediaDuration,
-            explicitDurationInFrames,
+            explicitDurationInFrames: explicitDurationInFrames === null
+                ? null
+                : explicitDurationInFrames / s.sequencePlaybackRate,
             hasImplicitDuration: hasImplicitMediaDuration,
             naturalMediaDuration,
             timelineDurationInFrames: video.durationInFrames,
@@ -725,10 +768,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                     visibleLayout.leftEdgeVisible &&
                     negativeStartWidth === 0 &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_l = video.durationInFrames) !== null && _l !== void 0 ? _l : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { cursor: (0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) ? 'ew-resize' : 'e-resize', nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_q = video.durationInFrames) !== null && _q !== void 0 ? _q : 1, initialEdgeFrame: s.from, fps: video.fps, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
                     visibleLayout.rightEdgeVisible &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, mediaDurationDragLimits: mediaDurationDragLimits, windowWidth: windowWidth, timelineDurationInFrames: (_m = video.durationInFrames) !== null && _m !== void 0 ? _m : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { cursor: (0, TimelineSequenceRightEdgeDragHandle_1.isCascadingSequence)(s) ? 'ew-resize' : 'w-resize', nodePathInfo: nodePathInfo, mediaDurationDragLimits: mediaDurationDragLimits, windowWidth: windowWidth, timelineDurationInFrames: (_r = video.durationInFrames) !== null && _r !== void 0 ? _r : 1, initialEdgeFrame: s.from +
+                        Math.max(0, Math.min(displayDurationInFrames, effectiveMaxMediaDuration !== null && effectiveMaxMediaDuration !== void 0 ? effectiveMaxMediaDuration : Infinity, video.durationInFrames - s.from)), fps: video.fps, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: mediaLoopStartFrame, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate * s.sequencePlaybackRate, loopDisplay: s.loopDisplay, loopDisplayOffsetInFrames: (_s = (_g = s.loopDisplay) === null || _g === void 0 ? void 0 : _g.phaseOffsetInFrames) !== null && _s !== void 0 ? _s : 0 }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: mediaLoopStartFrame, sequenceFrameOffset: 0, playbackRate: s.playbackRate * s.sequencePlaybackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, loopDisplayOffsetInFrames: (_t = (_h = s.loopDisplay) === null || _h === void 0 ? void 0 : _h.phaseOffsetInFrames) !== null && _t !== void 0 ? _t : 0, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, phase: s.loopDisplay.phaseOffsetInFrames / s.loopDisplay.durationInFrames, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -15,6 +15,7 @@ const relativeFrameStyle = {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const snowflakeStyle = {
     flexShrink: 0,