@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

package/dist/editor/components/Timeline/TimelineListItem.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineListItem = exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const HOOK_WIDTH = 7;
@@ -16,6 +18,9 @@ const TIMELINE_COLLAPSER_MARGIN_RIGHT = 10;
 exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = TIMELINE_COLLAPSER_WIDTH + TIMELINE_COLLAPSER_MARGIN_RIGHT + timeline_layout_1.TIMELINE_PADDING;
 const textStyle = {
     fontSize: 13,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
 };
 const outer = {
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
@@ -43,14 +48,17 @@ const hook = {
 };
 const space = {
     width: SPACING,
+    flexShrink: 0,
 };
 const smallSpace = {
     width: SPACING * 0.5,
+    flexShrink: 0,
 };
 const collapser = {
     width: TIMELINE_COLLAPSER_WIDTH,
     userSelect: 'none',
     marginRight: TIMELINE_COLLAPSER_MARGIN_RIGHT,
+    flexShrink: 0,
 };
 const collapserButton = {
     ...collapser,
@@ -71,6 +79,7 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const padder = (0, react_1.useMemo)(() => {
         return {
             width: leftOffset * nestedDepth,
+            flexShrink: 0,
         };
     }, [leftOffset, nestedDepth]);
     const toggleCollapse = (0, react_1.useCallback)(() => {
@@ -90,6 +99,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_COLOR, collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { title: text || 'Untitled', style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/editor/components/Timeline/TimelinePlayCursorSyncer.js

@@ -12,8 +12,9 @@ const TimelinePlayCursorSyncer = () => {
     var _a, _b, _c;
     const video = remotion_1.Internals.useVideo();
     const timelineContext = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    (0, imperative_state_1.setCurrentFrame)(timelineContext.frame);
+    (0, imperative_state_1.setCurrentFrame)(timelinePosition);
     (0, imperative_state_1.setCurrentZoom)(zoom);
     (0, imperative_state_1.setCurrentDuration)((_a = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _a !== void 0 ? _a : 1);
     (0, imperative_state_1.setCurrentFps)((_b = video === null || video === void 0 ? void 0 : video.fps) !== null && _b !== void 0 ? _b : 1);
@@ -31,9 +32,9 @@ const TimelinePlayCursorSyncer = () => {
         (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
             direction: timelineContext.playbackRate > 0 ? 'page-right' : 'page-left',
             durationInFrames: video.durationInFrames,
-            frame: timelineContext.frame,
+            frame: timelinePosition,
         });
-    }, [playing, timelineContext, video]);
+    }, [playing, timelineContext, timelinePosition, video]);
     /**
      * Restore state if `enter` is being pressed
      */

package/dist/editor/components/Timeline/TimelineScrollable.js

@@ -4,6 +4,7 @@ exports.TimelineScrollable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const outer = {
     width: '100%',
@@ -20,6 +21,6 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
 };
 exports.TimelineScrollable = TimelineScrollable;

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

@@ -2,5 +2,4 @@ import React from 'react';
 import type { TSequence } from 'remotion';
 export declare const TimelineSequence: React.FC<{
     s: TSequence;
-    fps: number;
 }>;

package/dist/editor/components/Timeline/TimelineSequence.js

@@ -2,28 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const rich_timeline_1 = require("../../state/rich-timeline");
 const AudioWaveform_1 = require("../AudioWaveform");
-const Thumbnail_1 = require("../Thumbnail");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
-const timeline_refs_1 = require("./timeline-refs");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
-const SEQUENCE_GRADIENT = 'linear-gradient(to bottom, #3697e1, #348AC7 60%)';
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
-const TimelineSequence = ({ s, fps }) => {
-    var _a, _b;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const { richTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
-    const windowWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
+const TimelineSequence = ({ s }) => {
+    const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (windowWidth === null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Inner, { windowWidth: windowWidth, s: s });
+};
+exports.TimelineSequence = TimelineSequence;
+const Inner = ({ s, windowWidth }) => {
     // 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
@@ -32,21 +30,25 @@ const TimelineSequence = ({ s, fps }) => {
     if (!video) {
         throw new TypeError('Expected video config');
     }
-    const { marginLeft, width } = (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
-        durationInFrames: s.duration * ((_b = s.showLoopTimesInTimeline) !== null && _b !== void 0 ? _b : 1),
-        startFrom: s.from,
-        startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
-        maxMediaDuration,
-        video,
-        windowWidth,
-    });
+    const { marginLeft, width } = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
+            durationInFrames: s.loopDisplay
+                ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
+                : s.duration,
+            startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
+            startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
+            maxMediaDuration,
+            video,
+            windowWidth,
+        });
+    }, [maxMediaDuration, s, video, windowWidth]);
     const style = (0, react_1.useMemo)(() => {
         return {
             background: s.type === 'audio'
                 ? AUDIO_GRADIENT
                 : s.type === 'video'
                     ? VIDEO_GRADIENT
-                    : SEQUENCE_GRADIENT,
+                    : colors_1.BLUE,
             border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
             borderRadius: 4,
             position: 'absolute',
@@ -58,15 +60,5 @@ const TimelineSequence = ({ s, fps }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    const row = (0, react_1.useMemo)(() => {
-        return {
-            flexDirection: 'row',
-            display: 'flex',
-            borderRadius: 5,
-            overflow: 'hidden',
-        };
-    }, []);
-    const thumbnailWidth = timeline_layout_1.TIMELINE_LAYER_HEIGHT * (video.width / video.height);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) })) : null }), s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }, s.id));
 };
-exports.TimelineSequence = TimelineSequence;

package/dist/editor/components/Timeline/TimelineSequenceFrame.js

@@ -16,6 +16,7 @@ const TimelineSequenceFrame = ({ from, duration }) => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const { fps } = (0, remotion_1.useVideoConfig)();
     const relativeFrame = frame - from;
+    const roundedFrame = Math.round(relativeFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < duration;
     if (!isInRange) {
         return null;
@@ -26,6 +27,6 @@ The current time within the sequence.
 Call \`useCurrentFrame()\` within the sequence to get the time programmatically.
 
 Call \`const {durationInFrames} = useVideoConfig()\` to get the duration of the sequence.
-`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }));
+`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", roundedFrame, ")"] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

package/dist/editor/components/Timeline/TimelineSlider.js

@@ -8,6 +8,7 @@ const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timelin
 const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const container = {
     position: 'absolute',
     bottom: 0,
@@ -22,16 +23,29 @@ const line = {
 };
 exports.redrawTimelineSliderFast = (0, react_1.createRef)();
 const TimelineSlider = () => {
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (videoConfig === null || timelineWidth === null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Inner, {});
+};
+exports.TimelineSlider = TimelineSlider;
+const Inner = () => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     const ref = (0, react_1.useRef)(null);
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (timelineWidth === null) {
+        throw new Error('Unexpectedly did not have timeline width');
+    }
     const style = (0, react_1.useMemo)(() => {
-        const left = get(timelinePosition);
+        const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, timelineWidth);
         return {
             ...container,
             transform: `translateX(${left}px)`,
         };
-    }, [timelinePosition, get]);
+    }, [timelinePosition, videoConfig.durationInFrames, timelineWidth]);
     (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
         return {
             draw: (frame, width) => {
@@ -63,4 +77,3 @@ const TimelineSlider = () => {
     }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)("div", { style: line }), (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {})] }));
 };
-exports.TimelineSlider = TimelineSlider;

package/dist/editor/components/Timeline/TimelineTimeIndicators.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTimeIndicators = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
@@ -12,6 +11,7 @@ const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 30;
 const container = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
@@ -77,13 +77,18 @@ const TimelineTimePadding = () => {
 };
 exports.TimelineTimePadding = TimelineTimePadding;
 const TimelineTimeIndicators = () => {
-    var _a;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
+    const sliderTrack = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const video = remotion_1.Internals.useVideo();
-    const windowWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
+    if (sliderTrack === null) {
+        return null;
+    }
+    if (video === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+};
+exports.TimelineTimeIndicators = TimelineTimeIndicators;
+const Inner = ({ windowWidth, durationInFrames, fps }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const currentRef = ref.current;
@@ -110,29 +115,26 @@ const TimelineTimeIndicators = () => {
         };
     }, [windowWidth]);
     const ticks = (0, react_1.useMemo)(() => {
-        if (!video) {
-            return [];
-        }
-        const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(video.durationInFrames, windowWidth);
+        const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
         const MIN_SPACING_BETWEEN_TICKS_PX = 5;
-        const seconds = Math.floor(video.durationInFrames / video.fps);
-        const secondMarkerEveryNth = Math.ceil((MIN_SPACING_BETWEEN_TICKS_PX * video.fps) / (frameInterval * video.fps));
+        const seconds = Math.floor(durationInFrames / fps);
+        const secondMarkerEveryNth = Math.ceil((MIN_SPACING_BETWEEN_TICKS_PX * fps) / (frameInterval * fps));
         const frameMarkerEveryNth = Math.ceil(MIN_SPACING_BETWEEN_TICKS_PX / frameInterval);
         // Big ticks showing for every second
         const secondTicks = new Array(seconds)
             .fill(true)
             .map((_, index) => {
             return {
-                frame: index * video.fps,
+                frame: index * fps,
                 style: {
                     ...secondTick,
-                    left: frameInterval * index * video.fps + timeline_layout_1.TIMELINE_PADDING,
+                    left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
                 },
                 showTime: index > 0,
             };
         })
             .filter((_, idx) => idx % secondMarkerEveryNth === 0);
-        const frameTicks = new Array(video.durationInFrames)
+        const frameTicks = new Array(durationInFrames)
             .fill(true)
             .map((_, index) => {
             return {
@@ -140,7 +142,7 @@ const TimelineTimeIndicators = () => {
                 style: {
                     ...tick,
                     left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
-                    height: index % video.fps === 0
+                    height: index % fps === 0
                         ? 10
                         : (index / frameMarkerEveryNth) % 2 === 0
                             ? 5
@@ -157,12 +159,8 @@ const TimelineTimeIndicators = () => {
             hasTicks.push(t.frame);
             return !alreadyUsed;
         });
-    }, [video, windowWidth]);
-    if (!video) {
-        return null;
-    }
+    }, [durationInFrames, fps, windowWidth]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, children: ticks.map((t) => {
-            return ((0, jsx_runtime_1.jsx)("div", { style: t.style, children: t.showTime ? ((0, jsx_runtime_1.jsx)("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, video.fps) })) : null }, t.frame));
+            return ((0, jsx_runtime_1.jsx)("div", { style: t.style, children: t.showTime ? ((0, jsx_runtime_1.jsx)("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
         }) }));
 };
-exports.TimelineTimeIndicators = TimelineTimeIndicators;

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

@@ -3,7 +3,6 @@ import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key
 import type { TimelineViewState } from './timeline-state-reducer';
 export declare const TimelineTracks: React.FC<{
     timeline: TrackWithHash[];
-    fps: number;
     viewState: TimelineViewState;
     hasBeenCut: boolean;
 }>;

package/dist/editor/components/Timeline/TimelineTracks.js

@@ -15,7 +15,7 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const TimelineTracks = ({ timeline, fps, viewState, hasBeenCut }) => {
+const TimelineTracks = ({ timeline, viewState, hasBeenCut }) => {
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
@@ -31,7 +31,7 @@ const TimelineTracks = ({ timeline, fps, viewState, hasBeenCut }) => {
                         if ((0, is_collapsed_1.isTrackHidden)(track, timeline, viewState)) {
                             return null;
                         }
-                        return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { fps: fps, s: track.sequence }) }, track.sequence.id));
+                        return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
                     }), (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimeIndicators, {})] }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type TimelineWidthContextType = number | null;
+export declare const TimelineWidthContext: import("react").Context<TimelineWidthContextType>;
+export declare const TimelineWidthProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/components/Timeline/TimelineWidthProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineWidthProvider = exports.TimelineWidthContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const timeline_refs_1 = require("./timeline-refs");
+exports.TimelineWidthContext = (0, react_1.createContext)(null);
+const TimelineWidthProvider = ({ children }) => {
+    var _a;
+    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: true,
+    });
+    return ((0, jsx_runtime_1.jsx)(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+};
+exports.TimelineWidthProvider = TimelineWidthProvider;

package/dist/editor/components/Timeline/TimelineZoomControls.js

@@ -7,12 +7,14 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const minus_1 = require("../../icons/minus");
 const plus_1 = require("../../icons/plus");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
+const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
 const container = {
     color: 'black',
     flexDirection: 'row',
     display: 'flex',
+    alignItems: 'center',
 };
 const buttonStyle = {
     fontSize: 24,
@@ -21,12 +23,9 @@ const iconStyle = {
     color: 'white',
     width: 14,
 };
-const slider = {
-    width: 60,
-    accentColor: 'var(--blue)',
-};
 const TimelineZoomControls = () => {
     const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
     const onMinusClicked = (0, react_1.useCallback)(() => {
         setZoom((z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
     }, [setZoom]);
@@ -40,6 +39,6 @@ const TimelineZoomControls = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, style: slider }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

package/dist/editor/components/Timeline/imperative-state.d.ts

@@ -1,7 +1,3 @@
-export declare let currentFrame: number;
-export declare let currentZoom: number;
-export declare let currentDuration: number;
-export declare let currentFps: number;
 export declare const getCurrentZoom: () => number;
 export declare const setCurrentZoom: (z: number) => void;
 export declare const getCurrentFrame: () => number;

package/dist/editor/components/Timeline/imperative-state.js

@@ -1,39 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setCurrentFps = exports.getCurrentFps = exports.setCurrentDuration = exports.getCurrentDuration = exports.setCurrentFrame = exports.getCurrentFrame = exports.setCurrentZoom = exports.getCurrentZoom = exports.currentFps = exports.currentDuration = exports.currentZoom = exports.currentFrame = void 0;
-exports.currentFrame = 0;
-exports.currentZoom = 1;
-exports.currentDuration = 1;
-exports.currentFps = 1;
+exports.setCurrentFps = exports.getCurrentFps = exports.setCurrentDuration = exports.getCurrentDuration = exports.setCurrentFrame = exports.getCurrentFrame = exports.setCurrentZoom = exports.getCurrentZoom = void 0;
+let currentFrame = 0;
+let currentZoom = 1;
+let currentDuration = 1;
+let currentFps = 1;
 const getCurrentZoom = () => {
-    return exports.currentZoom;
+    return currentZoom;
 };
 exports.getCurrentZoom = getCurrentZoom;
 const setCurrentZoom = (z) => {
-    exports.currentZoom = z;
+    currentZoom = z;
 };
 exports.setCurrentZoom = setCurrentZoom;
 const getCurrentFrame = () => {
-    return exports.currentFrame;
+    return currentFrame;
 };
 exports.getCurrentFrame = getCurrentFrame;
 const setCurrentFrame = (f) => {
-    exports.currentFrame = f;
+    currentFrame = f;
 };
 exports.setCurrentFrame = setCurrentFrame;
 const getCurrentDuration = () => {
-    return exports.currentDuration;
+    return currentDuration;
 };
 exports.getCurrentDuration = getCurrentDuration;
 const setCurrentDuration = (d) => {
-    exports.currentDuration = d;
+    currentDuration = d;
 };
 exports.setCurrentDuration = setCurrentDuration;
 const getCurrentFps = () => {
-    return exports.currentFps;
+    return currentFps;
 };
 exports.getCurrentFps = getCurrentFps;
 const setCurrentFps = (d) => {
-    exports.currentFps = d;
+    currentFps = d;
 };
 exports.setCurrentFps = setCurrentFps;

package/dist/editor/components/Timeline/is-collapsed.js

@@ -9,11 +9,10 @@ const isTrackHidden = (track, allTracks, viewState) => {
     if (!track.sequence.parent) {
         return false;
     }
-    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
-    if (!parent) {
-        // TODO: Tighten up, when toggling rich timeline this case can happen right now
+    if (!track.canCollapse) {
         return false;
     }
+    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
     if ((0, exports.isTrackCollapsed)(parent.hash, viewState)) {
         return true;
     }

package/dist/editor/components/Timeline/timeline-scroll-logic.d.ts

@@ -24,7 +24,6 @@ export declare const getScrollPositionForCursorOnRightEdge: ({ nextFrame, durati
     nextFrame: number;
     durationInFrames: number;
 }) => number;
-export declare const getFrameIncrement: (durationInFrames: number) => number;
 export declare const getFrameIncrementFromWidth: (durationInFrames: number, width: number) => number;
 export declare const getFrameWhileScrollingRight: ({ durationInFrames, width, }: {
     durationInFrames: number;

package/dist/editor/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -23,7 +23,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
         extrapolate: 'clamp',
     }) +
         Math.ceil((((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - timeline_layout_1.TIMELINE_PADDING) /
-            (0, exports.getFrameIncrement)(durationInFrames)));
+            getFrameIncrement(durationInFrames)));
 };
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
@@ -145,14 +145,14 @@ const scrollToTimelineXOffset = (scrollPos) => {
 };
 exports.scrollToTimelineXOffset = scrollToTimelineXOffset;
 const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, }) => {
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const scrollPos = frameIncrement * nextFrame;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
     var _a, _b;
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
     const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
@@ -168,7 +168,6 @@ const getFrameIncrement = (durationInFrames) => {
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
-exports.getFrameIncrement = getFrameIncrement;
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
     return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
 };
@@ -209,7 +208,7 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
     if (!current) {
         return;
     }
-    const frameIncrement = (0, exports.getFrameIncrement)(currentDurationInFrames);
+    const frameIncrement = getFrameIncrement(currentDurationInFrames);
     const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;