@remotion/cli 4.0.0-alpha10 → 4.0.0-alpha12

package/dist/editor/components/Splitter/SplitterContainer.js

@@ -15,6 +15,7 @@ const containerColumn = {
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
+    height: '100%',
 };
 const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const DEFAULT_TIMELINE_TRACKS = 90;
 export declare const MAX_TIMELINE_TRACKS: number;
 export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 export declare const MaxTimelineTracksReached: React.FC;

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = exports.DEFAULT_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+exports.DEFAULT_TIMELINE_TRACKS = 90;
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
-    ? 90
+    ? exports.DEFAULT_TIMELINE_TRACKS
     : Number(process.env.MAX_TIMELINE_TRACKS);
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {

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

@@ -8,6 +8,7 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_ref_1 = require("../../state/timeline-ref");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
@@ -23,6 +24,7 @@ const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -34,7 +36,7 @@ const container = {
 const noop = () => undefined;
 const Timeline = () => {
     var _a;
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [state, dispatch] = (0, react_1.useReducer)(timeline_state_reducer_1.timelineStateReducer, {
         collapsed: {},
@@ -85,9 +87,6 @@ const Timeline = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown.length]);
-    if (!videoConfig) {
-        return (0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset" });
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(TimelineWidthProvider_1.TimelineWidthProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }) }));
 };
 exports.Timeline = Timeline;

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

@@ -10,11 +10,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const FramePersistor_1 = require("../FramePersistor");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',
@@ -30,7 +32,20 @@ const getClientXWithScroll = (x) => {
     return x + ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft);
 };
 const TimelineDragHandler = () => {
+    const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            width: 100 * zoom + '%',
+        };
+    }, [zoom]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? (0, jsx_runtime_1.jsx)(Inner, {}) : null }));
+};
+exports.TimelineDragHandler = TimelineDragHandler;
+const Inner = () => {
     var _a, _b, _c;
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -38,16 +53,21 @@ const TimelineDragHandler = () => {
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
     });
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const get = (0, react_1.useCallback)((frame) => {
+        if (timelineWidth === null) {
+            throw new Error('timeline width is not yet determined');
+        }
+        return (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth);
+    }, [timelineWidth, videoConfig.durationInFrames]);
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });
     const { playing, play, pause, seek } = player_1.PlayerInternals.usePlayer();
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const scroller = (0, react_1.useRef)(null);
     const stopInterval = () => {
         if (scroller.current) {
@@ -312,13 +332,8 @@ const TimelineDragHandler = () => {
             window.removeEventListener('pointerup', onPointerUpInOut);
         };
     }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const containerStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            width: 100 * zoom + '%',
-        };
-    }, [zoom]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            width: '100%',
+            height: '100%',
+        }, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
 };
-exports.TimelineDragHandler = TimelineDragHandler;

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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const in_out_1 = require("../../state/in-out");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const areaHighlight = {
     position: 'absolute',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -18,18 +19,19 @@ exports.outMarkerAreaRef = (0, react_1.createRef)();
 const TimelineInOutPointer = () => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { get, width } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
-    if (!videoConfig) {
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (!videoConfig || timelineWidth === null) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.inMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: 0,
-                    width: get(inFrame !== null && inFrame !== void 0 ? inFrame : 0),
+                    width: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(inFrame, videoConfig.durationInFrames, timelineWidth),
                 } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
-                    left: get(outFrame),
-                    width: width - get(outFrame),
+                    left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
+                    width: timelineWidth -
+                        (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
                 } }))] }));
 };
 exports.TimelineInOutPointer = TimelineInOutPointer;

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

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineInOutPointerHandle = exports.outPointerHandle = exports.inPointerHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const line = {
     height: '100%',
     width: 1,
@@ -16,16 +18,20 @@ const line = {
 exports.inPointerHandle = (0, react_1.createRef)();
 exports.outPointerHandle = (0, react_1.createRef)();
 const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
-    const { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    if (timelineWidth === null) {
+        throw new Error('Timeline width is null');
+    }
     const style = (0, react_1.useMemo)(() => {
         return {
             ...line,
             backgroundColor: dragging
                 ? 'rgba(255, 255, 255, 0.7)'
                 : 'rgba(255, 255, 255, 0.1)',
-            transform: `translateX(${get(atFrame)}px)`,
+            transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
         };
-    }, [atFrame, dragging, get]);
+    }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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,7 +2,6 @@
 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");
@@ -10,17 +9,19 @@ const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-seque
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
-const timeline_refs_1 = require("./timeline-refs");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
+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;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    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
@@ -29,16 +30,18 @@ const TimelineSequence = ({ s, fps }) => {
     if (!video) {
         throw new TypeError('Expected video config');
     }
-    const { marginLeft, width } = (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,
-    });
+    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'
@@ -57,6 +60,5 @@ const TimelineSequence = ({ s, fps }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    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, fps: fps, 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));
+    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/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" />
+declare 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/helpers/get-left-of-timeline-slider.d.ts

@@ -1,5 +1 @@
-export declare const useGetXPositionOfItemInTimeline: () => {
-    get: (frame: number) => number;
-    width: number;
-};
 export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;

package/dist/editor/helpers/get-left-of-timeline-slider.js

@@ -1,30 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const timeline_refs_1 = require("../components/Timeline/timeline-refs");
+exports.getXPositionOfItemInTimelineImperatively = void 0;
 const timeline_layout_1 = require("./timeline-layout");
-const useGetXPositionOfItemInTimeline = () => {
-    var _a;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
-    const get = (0, react_1.useCallback)((frame) => {
-        if (!videoConfig) {
-            return 0;
-        }
-        return (0, exports.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
-    }, [videoConfig, width]);
-    return (0, react_1.useMemo)(() => {
-        return { get, width };
-    }, [get, width]);
-};
-exports.useGetXPositionOfItemInTimeline = useGetXPositionOfItemInTimeline;
 const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
     const proportion = frame / (duration - 1);
     return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;

package/dist/editor/helpers/use-keybinding.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
 if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
-    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
+    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
 }
 const areKeyboardShortcutsDisabled = () => {
     return !process.env.KEYBOARD_SHORTCUTS_ENABLED;

package/dist/editor/helpers/use-menu-structure.js

@@ -138,7 +138,7 @@ const useMenuStructure = (closeMenu) => {
                         onClick: () => {
                             closeMenu();
                             if (type !== 'connected') {
-                                (0, NotificationCenter_1.sendErrorNotification)('Preview server is offline');
+                                (0, NotificationCenter_1.sendErrorNotification)('Restart the studio to render');
                                 return;
                             }
                             const renderButton = document.getElementById('render-modal-button');

package/dist/event-source.js

@@ -47,7 +47,7 @@ const openEventSource = () => {
         source.addEventListener('error', () => {
             var _a;
             (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
-            // Display an error message that the preview server has disconnected.
+            // Display an error message that the studio server has disconnected.
             source === null || source === void 0 ? void 0 : source.close();
             // Retry later
             setTimeout(() => {

package/dist/get-cli-options.d.ts

@@ -20,7 +20,7 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -62,19 +62,19 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
     };
@@ -98,7 +98,7 @@ export declare const CliInternals: {
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -172,7 +172,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    handleCommonError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
+    handleCommonError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -214,7 +214,7 @@ export declare const CliInternals: {
     };
     listOfRemotionPackages: string[];
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }) => boolean;
     getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, downloadMap, serveUrlOrWebpackUrl, indent, inputProps, verbose, }: {
         height: number | null;