@remotion/cli 3.1.8 → 3.2.0

package/dist/code-frame.js

@@ -41,7 +41,8 @@ const logLine = (frame) => {
 };
 const printCodeFrameAndStack = (err) => {
     var _a, _b, _c;
-    if (!err.symbolicatedStackFrames) {
+    if (!err.symbolicatedStackFrames ||
+        err.symbolicatedStackFrames.length === 0) {
         log_1.Log.error(err.stack);
         return;
     }

package/dist/editor/components/Canvas.js

@@ -4,12 +4,14 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const Preview_1 = require("./Preview");
 const container = {
     flex: 1,
     display: 'flex',
     overflow: 'hidden',
     position: 'relative',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const Canvas = () => {
     const ref = (0, react_1.useRef)(null);

package/dist/editor/components/CompositionSelector.js

@@ -4,6 +4,7 @@ exports.CompositionSelector = exports.getKeysToExpand = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const z_index_1 = require("../state/z-index");
@@ -16,6 +17,7 @@ const container = {
     height: '100%',
     width: '100%',
     flex: 1,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const list = {
     padding: 5,

package/dist/editor/components/CompositionSelectorItem.js

@@ -23,6 +23,7 @@ const itemStyle = {
     border: 'none',
     width: '100%',
     textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const iconStyle = {
     width: 18,

package/dist/editor/components/CurrentComposition.js

@@ -4,6 +4,7 @@ exports.CurrentComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const render_frame_1 = require("../state/render-frame");
 const rich_timeline_1 = require("../state/rich-timeline");
@@ -15,23 +16,27 @@ const container = {
     borderBottom: '1px solid black',
     padding: 16,
     color: 'white',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const title = {
     fontWeight: 'bold',
     fontSize: 12,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const subtitle = {
     fontSize: 12,
     opacity: 0.8,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const row = {
     display: 'flex',
     flexDirection: 'row',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const targetHeight = 60;
 const targetWidth = (targetHeight * 16) / 9;

package/dist/editor/components/Editor.js

@@ -20,6 +20,7 @@ const mute_1 = require("../state/mute");
 const preview_size_1 = require("../state/preview-size");
 const rich_timeline_1 = require("../state/rich-timeline");
 const sidebar_1 = require("../state/sidebar");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
@@ -29,6 +30,7 @@ const NewComposition_1 = __importDefault(require("./NewComposition/NewCompositio
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -131,7 +133,7 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
                                                                     modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType &&
                                                                     modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType &&
                                                                     modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }) }) }) }) }) }) }) }) }) }) }) }) }) }));

package/dist/editor/components/InitialCompositionLoader.js

@@ -5,13 +5,17 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const folders_1 = require("../state/folders");
 const marks_1 = require("../state/marks");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const CompositionSelector_1 = require("./CompositionSelector");
 const FramePersistor_1 = require("./FramePersistor");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const useSelectComposition = () => {
     const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     return (c, push) => {
         var _a;
         (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
@@ -19,9 +23,18 @@ const useSelectComposition = () => {
             window.history.pushState({}, 'Preview', `/${c.id}`);
         }
         const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const zoom = (0, ZoomPersistor_1.getZoomForComposition)(c.id);
         const frameInBounds = Math.min(c.durationInFrames - 1, frame);
         setCurrentFrame(frameInBounds);
         setCurrentComposition(c.id);
+        setZoom(() => zoom);
+        setTimeout(() => {
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'center',
+                frame,
+                durationInFrames: c.durationInFrames,
+            });
+        });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
             setFoldersExpanded((ex) => {

package/dist/editor/components/MenuToolbar.js

@@ -4,6 +4,7 @@ exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const pick_color_1 = require("../helpers/pick-color");
 const Checkmark_1 = require("../icons/Checkmark");
 const checkerboard_1 = require("../state/checkerboard");
@@ -27,6 +28,7 @@ const row = {
     fontSize: 13,
     paddingLeft: 6,
     paddingRight: 10,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const flex = {
     flex: 1,

package/dist/editor/components/Notifications/Notification.js

@@ -26,6 +26,6 @@ const Notification = ({ children, id, duration, created, onRemove }) => {
             clearTimeout(timeout);
         };
     }, [created, duration, id, onRemove]);
-    return (0, jsx_runtime_1.jsx)("div", { style: notification, children: children });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
 };
 exports.Notification = Notification;

package/dist/editor/components/Notifications/NotificationCenter.js

@@ -13,6 +13,7 @@ const container = {
     flexDirection: 'column',
     paddingTop: 20,
     pointerEvents: 'none',
+    backgroundColor: 'transparent',
 };
 exports.notificationCenter = (0, react_1.createRef)();
 const NotificationCenter = () => {

package/dist/editor/components/PlayPause.js

@@ -4,7 +4,6 @@ exports.PlayPause = 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 is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -14,15 +13,14 @@ const step_back_1 = require("../icons/step-back");
 const step_forward_1 = require("../icons/step-forward");
 const in_out_1 = require("../state/in-out");
 const ControlButton_1 = require("./ControlButton");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const forwardBackStyle = {
     height: 16,
     color: 'white',
 };
 const PlayPause = ({ playbackRate, loop }) => {
-    var _a;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const video = remotion_1.Internals.useVideo();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -30,7 +28,7 @@ const PlayPause = ({ playbackRate, loop }) => {
         inFrame,
         outFrame,
     });
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, } = player_1.PlayerInternals.usePlayer();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -52,37 +50,60 @@ const PlayPause = ({ playbackRate, loop }) => {
         }
         e.preventDefault();
     }, [pauseAndReturnToPlayStart, playing]);
-    const videoFps = (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : null;
     const onArrowLeft = (0, react_1.useCallback)((e) => {
-        if (!videoFps) {
-            return null;
-        }
         e.preventDefault();
         if (e.altKey) {
             seek(0);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: 0,
+            });
         }
         else if (e.shiftKey) {
-            frameBack(videoFps);
+            frameBack((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - (0, imperative_state_1.getCurrentFps)()),
+            });
         }
         else {
             frameBack(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - 1),
+            });
         }
-    }, [frameBack, seek, videoFps]);
+    }, [frameBack, seek]);
     const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (!video) {
-            return null;
-        }
         if (e.altKey) {
-            seek(video.durationInFrames - 1);
+            seek((0, imperative_state_1.getCurrentDuration)() - 1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
+                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
+            });
         }
         else if (e.shiftKey) {
-            frameForward(video.fps);
+            frameForward((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + (0, imperative_state_1.getCurrentFps)()),
+            });
         }
         else {
             frameForward(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: (0, imperative_state_1.getCurrentFrame)() + 1,
+            });
         }
         e.preventDefault();
-    }, [frameForward, seek, video]);
+    }, [frameForward, seek]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
     }, [frameBack]);
@@ -93,11 +114,8 @@ const PlayPause = ({ playbackRate, loop }) => {
         seek(0);
     }, [seek]);
     const jumpToEnd = (0, react_1.useCallback)(() => {
-        if (!video) {
-            return;
-        }
-        seek(video.durationInFrames - 1);
-    }, [seek, video]);
+        seek((0, imperative_state_1.getCurrentDuration)() - 1);
+    }, [seek]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
         const arrowLeft = keybindings.registerKeybinding({
@@ -156,7 +174,7 @@ const PlayPause = ({ playbackRate, loop }) => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: frame === 0, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: frame === 0, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', disabled: !video, onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',

package/dist/editor/components/PreviewToolbar.js

@@ -4,6 +4,7 @@ exports.PreviewToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
@@ -17,8 +18,8 @@ const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RichTimelineToggle_1 = require("./RichTimelineToggle");
 const SizeSelector_1 = require("./SizeSelector");
+const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TimeValue_1 = require("./TimeValue");
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -27,6 +28,7 @@ const container = {
     paddingBottom: 2,
     alignItems: 'center',
     flexDirection: 'row',
+    background: colors_1.BACKGROUND,
 };
 const sideContainer = {
     width: 300,
@@ -43,6 +45,6 @@ const PreviewToolbar = () => {
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)("div", { style: padding })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)("div", { style: padding })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

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

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

package/dist/editor/components/TimeValue.js

@@ -5,24 +5,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const render_frame_1 = require("../state/render-frame");
+const layout_1 = require("./layout");
 const text = {
     color: 'white',
-    fontSize: 16,
+    fontSize: 18,
     display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
     fontVariantNumeric: 'tabular-nums',
     lineHeight: 1,
 };
 const time = {
     display: 'inline-block',
-    fontSize: 16,
+    fontSize: 18,
 };
 const frameStyle = {
     color: '#ccc',
     fontSize: 10,
     fontWeight: 500,
 };
+const spacer = {
+    width: layout_1.SPACING_UNIT,
+};
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -33,6 +37,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.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)("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)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

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

@@ -1,3 +1,4 @@
 import React from 'react';
 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,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
     ? 15
     : Number(process.env.MAX_TIMELINE_TRACKS);
+exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
-    paddingTop: 6,
-    paddingBottom: 6,
+    height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
     color: 'rgba(255, 255, 255, 0.6)',
     fontFamily: 'sans-serif',
     fontSize: 12,

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

@@ -12,18 +12,22 @@ const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_refs_1 = require("./timeline-refs");
 const timeline_state_reducer_1 = require("./timeline-state-reducer");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
+const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
+const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const container = {
     minHeight: '100%',
     flex: 1,
     display: 'flex',
     height: 0,
-    overflow: 'auto',
+    overflowY: 'auto',
 };
 const noop = () => undefined;
 const Timeline = () => {
@@ -61,18 +65,21 @@ const Timeline = () => {
         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 inner = (0, react_1.useMemo)(() => {
         return {
-            height: shown.length * (timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2),
+            height: shown.length * (timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2) +
+                (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
+                TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
             display: 'flex',
             flex: 1,
             minHeight: '100%',
             overflowX: 'hidden',
         };
-    }, [shown.length]);
+    }, [hasBeenCut, shown.length]);
     if (!videoConfig) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { 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.jsxs)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: withoutHidden.length > shown.length }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {})] })] }) }) }));
+    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, {})] }) })] }) }) }));
 };
 exports.Timeline = Timeline;