@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha4

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

@@ -4,8 +4,50 @@ exports.TimelineTimeIndicators = exports.TimelineTimePadding = exports.TimelineT
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const render_frame_1 = require("../../state/render-frame");
+const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
-exports.TIMELINE_TIME_INDICATOR_HEIGHT = 45;
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineListItem_1 = require("./TimelineListItem");
+exports.TIMELINE_TIME_INDICATOR_HEIGHT = 30;
+const container = {
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+    boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
+    position: 'absolute',
+    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+    top: 0,
+    left: 0,
+};
+const tick = {
+    width: 1,
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    height: 20,
+    position: 'absolute',
+};
+const secondTick = {
+    ...tick,
+    height: 15,
+};
+const tickLabel = {
+    fontSize: 12,
+    marginLeft: 8,
+    marginTop: 7,
+    color: colors_1.LIGHT_TEXT,
+};
+const timeValue = {
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    paddingLeft: TimelineListItem_1.TOTAL_TIMELINE_LAYER_LEFT_PADDING,
+    boxShadow: `0 0 20px ${colors_1.BACKGROUND}`,
+    display: 'flex',
+    alignItems: 'center',
+    background: colors_1.BACKGROUND,
+};
 const TimelineTimePlaceholders = () => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -25,13 +67,7 @@ const TimelineTimePlaceholders = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
-            height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
-            backgroundColor: 'green',
-            position: 'absolute',
-            top: 0,
-            width: '100%',
-        } }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: timeValue, children: (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}) }));
 };
 exports.TimelineTimePlaceholders = TimelineTimePlaceholders;
 const TimelineTimePadding = () => {
@@ -46,6 +82,7 @@ const TimelineTimeIndicators = () => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
+    const video = remotion_1.Internals.useVideo();
     const windowWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -65,15 +102,67 @@ const TimelineTimeIndicators = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, 
-        // TODO: Remove inline styles in this file
-        style: {
-            height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
-            backgroundColor: 'yellow',
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
             width: windowWidth,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-        } }));
+            overflow: 'hidden',
+        };
+    }, [windowWidth]);
+    const ticks = (0, react_1.useMemo)(() => {
+        if (!video) {
+            return [];
+        }
+        const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(video.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 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,
+                style: {
+                    ...secondTick,
+                    left: frameInterval * index * video.fps + timeline_layout_1.TIMELINE_PADDING,
+                },
+                showTime: index > 0,
+            };
+        })
+            .filter((_, idx) => idx % secondMarkerEveryNth === 0);
+        const frameTicks = new Array(video.durationInFrames)
+            .fill(true)
+            .map((_, index) => {
+            return {
+                frame: index,
+                style: {
+                    ...tick,
+                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
+                    height: index % video.fps === 0
+                        ? 10
+                        : (index / frameMarkerEveryNth) % 2 === 0
+                            ? 5
+                            : 2,
+                },
+                showTime: false,
+            };
+        })
+            .filter((_, idx) => idx % frameMarkerEveryNth === 0);
+        // Merge and deduplicate ticks
+        const hasTicks = [];
+        return [...secondTicks, ...frameTicks].filter((t) => {
+            const alreadyUsed = hasTicks.find((ht) => ht === t.frame) !== undefined;
+            hasTicks.push(t.frame);
+            return !alreadyUsed;
+        });
+    }, [video, windowWidth]);
+    if (!video) {
+        return null;
+    }
+    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));
+        }) }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;

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

@@ -7,14 +7,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const TimelineSequence_1 = require("./TimelineSequence");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const content = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,
 };
 const timelineContent = {
-    flex: 1,
-    backgroundColor: '#111111',
-    width: '100%',
+    minHeight: '100%',
 };
 const TimelineTracks = ({ timeline, fps, viewState, hasBeenCut }) => {
     const inner = (0, react_1.useMemo)(() => {
@@ -22,11 +21,17 @@ const TimelineTracks = ({ timeline, fps, viewState, hasBeenCut }) => {
             height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: timelineContent, children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: timeline.map((track) => {
-                    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));
-                }) }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+    const timelineStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...timelineContent,
+            width: 100 + '%',
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                        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));
+                    }), (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/TimelineZoomControls.js

@@ -7,6 +7,7 @@ const is_current_selected_still_1 = require("../../helpers/is-current-selected-s
 const minus_1 = require("../../icons/minus");
 const plus_1 = require("../../icons/plus");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
+const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
 const container = {
@@ -27,6 +28,7 @@ const slider = {
 };
 const TimelineZoomControls = () => {
     const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
     const onMinusClicked = (0, react_1.useCallback)(() => {
         setZoom((z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2));
     }, [setZoom]);
@@ -40,6 +42,6 @@ const TimelineZoomControls = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, style: slider }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, style: slider, tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

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

@@ -1,9 +1,12 @@
 export declare let currentFrame: number;
 export declare let currentZoom: number;
 export declare let currentDuration: number;
+export declare let currentFps: number;
 export declare const getCurrentZoom: () => number;
 export declare const setCurrentZoom: (z: number) => void;
 export declare const getCurrentFrame: () => number;
 export declare const setCurrentFrame: (f: number) => void;
 export declare const getCurrentDuration: () => number;
 export declare const setCurrentDuration: (d: number) => void;
+export declare const getCurrentFps: () => number;
+export declare const setCurrentFps: (d: number) => void;

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

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

package/dist/editor/components/Timeline/timeline-refs.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
 export declare const sliderAreaRef: React.RefObject<HTMLDivElement>;
+export declare const scrollableRef: React.RefObject<HTMLDivElement>;
+export declare const timelineVerticalScroll: React.RefObject<HTMLDivElement>;

package/dist/editor/components/Timeline/timeline-refs.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sliderAreaRef = void 0;
+exports.timelineVerticalScroll = exports.scrollableRef = exports.sliderAreaRef = void 0;
 const react_1 = __importDefault(require("react"));
 exports.sliderAreaRef = react_1.default.createRef();
+exports.scrollableRef = react_1.default.createRef();
+exports.timelineVerticalScroll = react_1.default.createRef();

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

@@ -2,7 +2,6 @@ export declare const canScrollTimelineIntoDirection: () => {
     canScrollRight: boolean;
     canScrollLeft: boolean;
 };
-export declare const SCROLL_INCREMENT = 200;
 export declare const getFrameWhileScrollingLeft: ({ durationInFrames, width, }: {
     durationInFrames: number;
     width: number;
@@ -26,6 +25,7 @@ export declare const getScrollPositionForCursorOnRightEdge: ({ nextFrame, durati
     durationInFrames: number;
 }) => number;
 export declare const getFrameIncrement: (durationInFrames: number) => number;
+export declare const getFrameIncrementFromWidth: (durationInFrames: number, width: number) => number;
 export declare const getFrameWhileScrollingRight: ({ durationInFrames, width, }: {
     durationInFrames: number;
     width: number;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.SCROLL_INCREMENT = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -13,7 +13,7 @@ const canScrollTimelineIntoDirection = () => {
     return { canScrollRight, canScrollLeft };
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
-exports.SCROLL_INCREMENT = 200;
+const SCROLL_INCREMENT = 200;
 const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
     var _a;
     return ((0, exports.getFrameFromX)({
@@ -28,7 +28,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = (0, exports.getFrameFromX)({
-        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - exports.SCROLL_INCREMENT,
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
         durationInFrames,
         width,
         extrapolate: 'clamp',
@@ -95,7 +95,7 @@ const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
     if (direction === 'fit-right') {
         const currentFrameRight = calculateFrameWhileScrollingRight({
             durationInFrames,
-            scrollLeft: scrollLeft,
+            scrollLeft,
             width,
         });
         const scrollPos = (0, exports.getScrollPositionForCursorOnRightEdge)({
@@ -166,16 +166,19 @@ exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRigh
 const getFrameIncrement = (durationInFrames) => {
     var _a, _b;
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    return ((width - timeline_layout_1.TIMELINE_PADDING * 2) /
-        (durationInFrames - 1));
+    return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 exports.getFrameIncrement = getFrameIncrement;
+const getFrameIncrementFromWidth = (durationInFrames, width) => {
+    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
+};
+exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
 const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = calculateFrameWhileScrollingRight({
         durationInFrames,
         width,
-        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + exports.SCROLL_INCREMENT,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
     });
     const currentFrame = calculateFrameWhileScrollingRight({
         durationInFrames,

package/dist/editor/components/TimelineInOutToggle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const inOutHandles: React.RefObject<{
-    inMarkClick: () => void;
-    outMarkClick: () => void;
+    inMarkClick: (e: KeyboardEvent | null) => void;
+    outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
     setMarks: (marks: [number | null, number | null]) => void;
 }>;

package/dist/editor/components/TimelineInOutToggle.js

@@ -4,13 +4,20 @@ exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const truthy_1 = require("../../truthy");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
 const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
-const getTooltipText = (pointType) => `Mark ${pointType}`;
+const getTooltipText = (pointType, key) => [
+    `Mark ${pointType}`,
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
+    '- right click to clear',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const style = {
     width: 16,
     height: 16,
@@ -24,10 +31,27 @@ const TimelineInOutPointToggle = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInMark = (0, react_1.useCallback)(() => {
+    const onInOutClear = (0, react_1.useCallback)(() => {
+        setInAndOutFrames(() => {
+            return {
+                inFrame: null,
+                outFrame: null,
+            };
+        });
+    }, [setInAndOutFrames]);
+    const onInMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
         }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                return {
+                    ...f,
+                    inFrame: null,
+                };
+            });
+            return null;
+        }
         setInAndOutFrames((prev) => {
             const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
@@ -52,10 +76,43 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onOutMark = (0, react_1.useCallback)(() => {
+    const clearInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                inFrame: null,
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const clearOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                outFrame: null,
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const onOutMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
         }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                return {
+                    ...f,
+                    outFrame: null,
+                };
+            });
+            return;
+        }
         setInAndOutFrames((prev) => {
             const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
@@ -79,30 +136,24 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
-            return {
-                inFrame: null,
-                outFrame: null,
-            };
-        });
-    }, [setInAndOutFrames]);
     (0, react_1.useEffect)(() => {
         const iKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'i',
-            callback: () => {
-                onInMark();
+            callback: (e) => {
+                onInMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const oKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'o',
-            callback: () => {
-                onOutMark();
+            callback: (e) => {
+                onOutMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const xKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -111,6 +162,7 @@ const TimelineInOutPointToggle = () => {
                 onInOutClear();
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             oKey.unregister();
@@ -162,13 +214,13 @@ const TimelineInOutPointToggle = () => {
                 });
             },
         };
-    });
+    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
     if (!videoConfig) {
         return null;
     }
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In (I)'), "aria-label": getTooltipText('In (I)'), onClick: onInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out (O)'), "aria-label": getTooltipText('Out (O)'), onClick: onOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/ZoomPersistor.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
-export declare const persistCurrentZoom: (frame: number) => void;
+export declare const persistCurrentZoom: (zoom: number) => void;
 export declare const getZoomForComposition: (composition: string) => number;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -8,17 +8,17 @@ const FramePersistor_1 = require("./FramePersistor");
 const makeKey = (composition) => {
     return `remotion.zoom.${composition}`;
 };
-const persistCurrentZoom = (frame) => {
+const persistCurrentZoom = (zoom) => {
     const currentComposition = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
     if (!currentComposition) {
         return;
     }
-    localStorage.setItem(makeKey(currentComposition), String(frame));
+    localStorage.setItem(makeKey(currentComposition), String(zoom));
 };
 exports.persistCurrentZoom = persistCurrentZoom;
 const getZoomForComposition = (composition) => {
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame ? Number(frame) : 0;
+    const zoom = localStorage.getItem(makeKey(composition));
+    return zoom ? Number(zoom) : 0;
 };
 exports.getZoomForComposition = getZoomForComposition;
 const ZoomPersistor = () => {

package/dist/editor/helpers/colors.d.ts

@@ -8,7 +8,8 @@ export declare const SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
+export declare const TIMELINE_BACKGROUND = "#111";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/editor/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
@@ -11,6 +11,7 @@ exports.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
 exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+exports.TIMELINE_BACKGROUND = '#111';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {