@remotion/cli 4.0.0-2x.1 → 4.0.0-alpha.111

package/dist/editor/components/SizeSelector.js

@@ -1,30 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
+exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-exports.commonPreviewSizes = ['auto', 0.25, 0.5, 1];
+exports.commonPreviewSizes = [
+    {
+        size: 'auto',
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 0.25,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 0.5,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 1,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+];
 const getPreviewSizeLabel = (previewSize) => {
-    if (previewSize === 1) {
-        return '100%';
-    }
-    if (previewSize === 0.5) {
-        return '50%';
-    }
-    if (previewSize === 0.25) {
-        return '25%';
-    }
-    if (previewSize === 'auto') {
+    if (previewSize.size === 'auto') {
         return 'Fit';
     }
+    return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
 const comboStyle = { width: 80 };
+const getUniqueSizes = (size) => {
+    const customPreviewSizes = [size, ...exports.commonPreviewSizes];
+    const uniqueSizes = [];
+    customPreviewSizes.forEach((p) => {
+        if (!uniqueSizes.find((s) => s.size === p.size)) {
+            uniqueSizes.push(p);
+        }
+    });
+    return uniqueSizes.sort((a, b) => {
+        if (a.size === 'auto') {
+            return -1;
+        }
+        if (b.size === 'auto') {
+            return 1;
+        }
+        return a.size - b.size;
+    });
+};
+exports.getUniqueSizes = getUniqueSizes;
 const SizeSelector = () => {
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const style = (0, react_1.useMemo)(() => {
@@ -33,9 +73,9 @@ const SizeSelector = () => {
         };
     }, []);
     const items = (0, react_1.useMemo)(() => {
-        return exports.commonPreviewSizes.map((newSize) => {
+        return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
-                id: String(newSize),
+                id: String(newSize.size),
                 label: (0, exports.getPreviewSizeLabel)(newSize),
                 onClick: () => {
                     return setSize(() => {
@@ -43,13 +83,14 @@ const SizeSelector = () => {
                     });
                 },
                 type: 'item',
-                value: newSize,
-                keyHint: null,
-                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                value: newSize.size,
+                keyHint: newSize.size === 1 ? '0' : null,
+                leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [setSize, size]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size), values: items }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

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

@@ -1,6 +1,6 @@
 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

@@ -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,51 @@
+"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,
+    fontSize: 14,
+};
+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)(() => {
+        return {
+            ...selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            ...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/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
+    ? 90
     : 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,
@@ -16,6 +18,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

@@ -12,21 +12,26 @@ 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 = () => {
+    var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [state, dispatch] = (0, react_1.useReducer)(timeline_state_reducer_1.timelineStateReducer, {
@@ -56,23 +61,31 @@ const 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);
+    }, [timeline]);
+    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),
+            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: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
 };
 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;