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

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/Splitter/SplitterContext.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export declare type SplitterDragState = false | {
+export type SplitterDragState = false | {
     x: number;
     y: number;
 };
-export declare type SplitterOrientation = 'horizontal' | 'vertical';
-export declare type TSplitterContext = {
+export type SplitterOrientation = 'horizontal' | 'vertical';
+export type TSplitterContext = {
     flexValue: number;
     setFlexValue: React.Dispatch<React.SetStateAction<number>>;
     domRect: DOMRect | DOMRectReadOnly | null;

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

@@ -14,6 +14,7 @@ const SplitterElement = ({ children, type }) => {
             display: 'flex',
             position: 'relative',
             overflow: 'hidden',
+            flexDirection: 'column',
         };
     }, [context.flexValue, type]);
     return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });

package/dist/editor/components/Splitter/SplitterHandle.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export declare const SPLITTER_HANDLE_SIZE = 3;
 export declare const SplitterHandle: React.FC<{
-    allowToCollapse: boolean;
+    allowToCollapse: 'right' | 'left' | 'none';
     onCollapse: () => void;
 }>;

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
+exports.SplitterHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const SplitterContext_1 = require("./SplitterContext");
-exports.SPLITTER_HANDLE_SIZE = 3;
+const SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
-    height: exports.SPLITTER_HANDLE_SIZE,
+    height: SPLITTER_HANDLE_SIZE,
     cursor: 'row-resize',
 };
 const containerColumn = {
-    width: exports.SPLITTER_HANDLE_SIZE,
+    width: SPLITTER_HANDLE_SIZE,
     cursor: 'col-resize',
 };
 const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
@@ -43,10 +43,10 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             const change = (() => {
                 if (context.orientation === 'vertical') {
                     return ((e.clientX - context.isDragging.current.x) /
-                        (width - exports.SPLITTER_HANDLE_SIZE));
+                        (width - SPLITTER_HANDLE_SIZE));
                 }
                 return ((e.clientY - context.isDragging.current.y) /
-                    (height - exports.SPLITTER_HANDLE_SIZE));
+                    (height - SPLITTER_HANDLE_SIZE));
             })();
             const newFlex = context.flexValue + change;
             if (clamp) {
@@ -75,7 +75,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             if (context.isDragging.current) {
                 const val = getNewValue(e, true);
                 context.setFlexValue(val);
-                if (allowToCollapse) {
+                if (allowToCollapse === 'left') {
                     const unclamped = getNewValue(e, false);
                     if (unclamped < context.minFlex / 2) {
                         cleanup();
@@ -83,6 +83,14 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                         setLastPointerUp(Date.now());
                     }
                 }
+                if (allowToCollapse === 'right') {
+                    const unclamped = 1 - getNewValue(e, false);
+                    if (unclamped < (1 - context.maxFlex) / 2) {
+                        cleanup();
+                        onCollapse();
+                        setLastPointerUp(Date.now());
+                    }
+                }
             }
         };
         const cleanup = () => {

package/dist/editor/components/Tabs/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Tabs: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export declare const Tab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

package/dist/editor/components/Tabs/index.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const tabsContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const Tabs = ({ children, style }) => {
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...tabsContainer,
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+};
+exports.Tabs = Tabs;
+const selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+};
+const Tab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => ({
+        ...selectorButton,
+        backgroundColor: selected
+            ? colors_1.BACKGROUND
+            : hovered
+                ? colors_1.CLEAR_HOVER
+                : colors_1.INPUT_BACKGROUND,
+        color: selected ? 'white' : colors_1.LIGHT_TEXT,
+        borderTop: selected ? '2px solid ' + colors_1.BLUE : '2px solid transparent',
+        boxShadow: selected ? 'none' : undefined,
+        ...style,
+    }), [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.Tab = Tab;

package/dist/editor/components/Tabs/vertical.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const VerticalTab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

package/dist/editor/components/Tabs/vertical.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+};
+const VerticalTab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            boxShadow: selected ? 'none' : undefined,
+            ...style,
+        };
+    }, [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.VerticalTab = VerticalTab;

package/dist/editor/components/TimeValue.js

@@ -18,14 +18,13 @@ const text = {
 const time = {
     display: 'inline-block',
     fontSize: 18,
+    lineHeight: 1,
 };
 const frameStyle = {
     color: '#ccc',
     fontSize: 10,
     fontWeight: 500,
-};
-const spacer = {
-    width: layout_1.SPACING_UNIT,
+    lineHeight: 1,
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -37,6 +36,6 @@ const TimeValue = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), ' ', (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

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

@@ -10,21 +10,21 @@ const width = {
     position: 'relative',
 };
 const icon = {
-    height: 12,
-    width: 12,
+    height: 14,
+    width: 14,
 };
 const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "repeat", className: "svg-inline--fa fa-repeat fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
 const topLine = {
     top: 0,
-    height: 10,
+    height: 5,
     width: 1,
-    background: 'linear-gradient(to top, transparent, rgba(255, 255, 255, 0.7))',
+    background: 'white',
 };
 const bottomLine = {
     top: 0,
-    height: 10,
+    height: 5,
     width: 1,
-    background: 'linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent)',
+    background: 'white',
 };
 const topContainer = {
     justifyContent: 'flex-start',

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'
-    ? 15
+    ? exports.DEFAULT_TIMELINE_TRACKS
     : Number(process.env.MAX_TIMELINE_TRACKS);
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
@@ -18,6 +19,6 @@ const container = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
 };
 const MaxTimelineTracksReached = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.Preview.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

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

@@ -5,8 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 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");
@@ -22,16 +24,19 @@ 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,
     display: 'flex',
     height: 0,
     overflowY: 'auto',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
 const Timeline = () => {
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    var _a;
+    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: {},
@@ -61,11 +66,16 @@ const Timeline = () => {
             },
         };
     }, [timeline]);
-    const withoutHidden = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t, timeline, state));
-    }, [state, timeline]);
-    const shown = withoutHidden.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
-    const hasBeenCut = withoutHidden.length > shown.length;
+    const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const filtered = (0, react_1.useMemo)(() => {
+        const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t, timeline, state));
+        const withoutAfter = withoutHidden.filter((t) => {
+            return t.sequence.from <= durationInFrames && t.sequence.duration > 0;
+        });
+        return withoutAfter;
+    }, [durationInFrames, state, timeline]);
+    const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
+    const hasBeenCut = filtered.length > shown.length;
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: shown.length * (timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2) +
@@ -77,9 +87,6 @@ const Timeline = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown.length]);
-    if (!videoConfig) {
-        return null;
-    }
-    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: false }), (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/TimelineCollapseToggle.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const TimelineCollapseToggle: React.FC<{
     collapsed: boolean;
+    color: string;
 }>;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineCollapseToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../../helpers/colors");
 const container = {
     height: 10,
     width: 10,
@@ -10,10 +9,10 @@ const container = {
     justifyContent: 'center',
     alignItems: 'center',
 };
-const Icon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: colors_1.LIGHT_COLOR }) }));
+const Icon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
 };
-const TimelineCollapseToggle = ({ collapsed }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
+const TimelineCollapseToggle = ({ collapsed, color }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, { color: color }) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

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;