@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

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/Timeline/MaxTimelineTracks.js

@@ -4,7 +4,7 @@ exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = e
 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 = {

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

@@ -86,6 +86,6 @@ const Timeline = () => {
     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", 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;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineListItem = exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const z_index_1 = require("../../state/z-index");
 const layout_1 = require("../layout");
@@ -98,6 +99,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { title: text || 'Untitled', style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_COLOR, collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { title: text || 'Untitled', style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -4,6 +4,7 @@ exports.TimelineScrollable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const outer = {
     width: '100%',
@@ -20,6 +21,6 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
 };
 exports.TimelineScrollable = TimelineScrollable;

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

@@ -7,13 +7,11 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const rich_timeline_1 = require("../../state/rich-timeline");
 const AudioWaveform_1 = require("../AudioWaveform");
-const Thumbnail_1 = require("../Thumbnail");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
-const SEQUENCE_GRADIENT = 'linear-gradient(to bottom, #3697e1, #348AC7 60%)';
+const SEQUENCE_GRADIENT = 'var(--blue)';
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const TimelineSequence = ({ s, fps }) => {
@@ -22,7 +20,6 @@ const TimelineSequence = ({ s, fps }) => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    const { richTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const windowWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
@@ -58,15 +55,6 @@ const TimelineSequence = ({ s, fps }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    const row = (0, react_1.useMemo)(() => {
-        return {
-            flexDirection: 'row',
-            display: 'flex',
-            borderRadius: 5,
-            overflow: 'hidden',
-        };
-    }, []);
-    const thumbnailWidth = timeline_layout_1.TIMELINE_LAYER_HEIGHT * (video.width / video.height);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) })) : null }), s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
 };
 exports.TimelineSequence = TimelineSequence;

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

@@ -16,6 +16,7 @@ const TimelineSequenceFrame = ({ from, duration }) => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const { fps } = (0, remotion_1.useVideoConfig)();
     const relativeFrame = frame - from;
+    const roundedFrame = Math.round(relativeFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < duration;
     if (!isInRange) {
         return null;
@@ -26,6 +27,6 @@ The current time within the sequence.
 Call \`useCurrentFrame()\` within the sequence to get the time programmatically.
 
 Call \`const {durationInFrames} = useVideoConfig()\` to get the duration of the sequence.
-`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }));
+`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", roundedFrame, ")"] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

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

@@ -14,6 +14,7 @@ const container = {
     color: 'black',
     flexDirection: 'row',
     display: 'flex',
+    alignItems: 'center',
 };
 const buttonStyle = {
     fontSize: 24,
@@ -22,10 +23,6 @@ const iconStyle = {
     color: 'white',
     width: 14,
 };
-const slider = {
-    width: 60,
-    accentColor: 'var(--blue)',
-};
 const TimelineZoomControls = () => {
     const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
@@ -42,6 +39,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", 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 }) })] }));
+    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, className: "__remotion-timeline-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,7 +1,3 @@
-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;

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

@@ -1,39 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.setCurrentFps = exports.getCurrentFps = exports.setCurrentDuration = exports.getCurrentDuration = exports.setCurrentFrame = exports.getCurrentFrame = exports.setCurrentZoom = exports.getCurrentZoom = void 0;
+let currentFrame = 0;
+let currentZoom = 1;
+let currentDuration = 1;
+let currentFps = 1;
 const getCurrentZoom = () => {
-    return exports.currentZoom;
+    return currentZoom;
 };
 exports.getCurrentZoom = getCurrentZoom;
 const setCurrentZoom = (z) => {
-    exports.currentZoom = z;
+    currentZoom = z;
 };
 exports.setCurrentZoom = setCurrentZoom;
 const getCurrentFrame = () => {
-    return exports.currentFrame;
+    return currentFrame;
 };
 exports.getCurrentFrame = getCurrentFrame;
 const setCurrentFrame = (f) => {
-    exports.currentFrame = f;
+    currentFrame = f;
 };
 exports.setCurrentFrame = setCurrentFrame;
 const getCurrentDuration = () => {
-    return exports.currentDuration;
+    return currentDuration;
 };
 exports.getCurrentDuration = getCurrentDuration;
 const setCurrentDuration = (d) => {
-    exports.currentDuration = d;
+    currentDuration = d;
 };
 exports.setCurrentDuration = setCurrentDuration;
 const getCurrentFps = () => {
-    return exports.currentFps;
+    return currentFps;
 };
 exports.getCurrentFps = getCurrentFps;
 const setCurrentFps = (d) => {
-    exports.currentFps = d;
+    currentFps = d;
 };
 exports.setCurrentFps = setCurrentFps;

package/dist/editor/components/Timeline/is-collapsed.js

@@ -9,11 +9,10 @@ const isTrackHidden = (track, allTracks, viewState) => {
     if (!track.sequence.parent) {
         return false;
     }
-    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
-    if (!parent) {
-        // TODO: Tighten up, when toggling rich timeline this case can happen right now
+    if (!track.canCollapse) {
         return false;
     }
+    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
     if ((0, exports.isTrackCollapsed)(parent.hash, viewState)) {
         return true;
     }

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

@@ -24,7 +24,6 @@ export declare const getScrollPositionForCursorOnRightEdge: ({ nextFrame, durati
     nextFrame: number;
     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;

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.getFrameIncrementFromWidth = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = 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");
@@ -23,7 +23,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
         extrapolate: 'clamp',
     }) +
         Math.ceil((((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - timeline_layout_1.TIMELINE_PADDING) /
-            (0, exports.getFrameIncrement)(durationInFrames)));
+            getFrameIncrement(durationInFrames)));
 };
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
@@ -145,14 +145,14 @@ const scrollToTimelineXOffset = (scrollPos) => {
 };
 exports.scrollToTimelineXOffset = scrollToTimelineXOffset;
 const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, }) => {
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const scrollPos = frameIncrement * nextFrame;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
     var _a, _b;
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
     const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
@@ -168,7 +168,6 @@ const getFrameIncrement = (durationInFrames) => {
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
-exports.getFrameIncrement = getFrameIncrement;
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
     return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
 };
@@ -209,7 +208,7 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
     if (!current) {
         return;
     }
-    const frameIncrement = (0, exports.getFrameIncrement)(currentDurationInFrames);
+    const frameIncrement = getFrameIncrement(currentDurationInFrames);
     const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;

package/dist/editor/components/TimelineInOutToggle.js

@@ -145,6 +145,7 @@ const TimelineInOutPointToggle = () => {
             },
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const oKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -154,6 +155,7 @@ const TimelineInOutPointToggle = () => {
             },
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const xKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -163,6 +165,7 @@ const TimelineInOutPointToggle = () => {
             },
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             oKey.unregister();

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

@@ -1,2 +1,3 @@
 import React from 'react';
+export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
 export declare const TopPanel: React.FC;

package/dist/editor/components/TopPanel.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopPanel = void 0;
+exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_compact_ui_1 = require("../helpers/use-compact-ui");
+const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const sidebar_1 = require("../state/sidebar");
 const Canvas_1 = require("./Canvas");
-const CollapsedCompositionSelector_1 = require("./CollapsedCompositionSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const PreviewToolbar_1 = require("./PreviewToolbar");
+const RightPanel_1 = require("./RightPanel");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
@@ -33,25 +34,38 @@ const canvasContainer = {
 const leftContainer = {
     flex: 1,
     display: 'flex',
+    maxWidth: '100%',
 };
-const TopPanel = () => {
-    const compactUi = (0, use_compact_ui_1.useCompactUI)();
-    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const actualState = (0, react_1.useMemo)(() => {
-        if (sidebarCollapsedState === 'collapsed') {
+const useResponsiveSidebarStatus = () => {
+    const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
+    const actualStateLeft = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateLeft === 'collapsed') {
             return 'collapsed';
         }
-        if (sidebarCollapsedState === 'expanded') {
+        if (sidebarCollapsedStateLeft === 'expanded') {
             return 'expanded';
         }
-        return compactUi ? 'collapsed' : 'expanded';
-    }, [compactUi, sidebarCollapsedState]);
-    const onCollapse = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState('collapsed');
+        return responsiveLeftStatus;
+    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    return actualStateLeft;
+};
+exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
+const TopPanel = () => {
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
+    const actualStateRight = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateRight === 'collapsed') {
+            return 'collapsed';
+        }
+        return 'expanded';
+    }, [sidebarCollapsedStateRight]);
+    const onCollapseLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: 'collapsed', right: null });
     }, [setSidebarCollapsedState]);
-    const onExpand = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState('expanded');
+    const onCollapseRight = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [actualState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedCompositionSelector_1.CollapsedCompositionSelector, { onExpand: onExpand })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: true, onCollapse: onCollapse })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ZoomGesturesProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ZoomGesturesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomGesturesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const ZoomGesturesProvider = ({ children }) => {
+    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
+    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
+        setEditorZoomGesturesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorZoomGestures,
+            setEditorZoomGestures,
+        };
+    }, [editorZoomGestures, setEditorZoomGestures]);
+    return ((0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
+};
+exports.ZoomGesturesProvider = ZoomGesturesProvider;

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

@@ -1,4 +1,3 @@
 import type React from 'react';
-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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.getZoomForComposition = exports.persistCurrentZoom = void 0;
+exports.ZoomPersistor = exports.getZoomForComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
@@ -15,7 +15,6 @@ const persistCurrentZoom = (zoom) => {
     }
     localStorage.setItem(makeKey(currentComposition), String(zoom));
 };
-exports.persistCurrentZoom = persistCurrentZoom;
 const getZoomForComposition = (composition) => {
     const zoom = localStorage.getItem(makeKey(composition));
     return zoom ? Number(zoom) : 0;
@@ -30,7 +29,7 @@ const ZoomPersistor = () => {
         if (!isActive) {
             return;
         }
-        (0, exports.persistCurrentZoom)(zoom);
+        persistCurrentZoom(zoom);
     }, [zoom, isActive, playing]);
     return null;
 };

package/dist/editor/components/get-zod-if-possible.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type ZodType = Awaited<typeof import('zod')>['z'];
+export declare type ZodTypesType = Awaited<typeof import('@remotion/zod-types')>;
+export declare const getZodIfPossible: () => Promise<ZodType | null>;
+export declare const getZTypesIfPossible: () => Promise<ZodTypesType | null>;
+export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
+export declare const useZodTypesIfPossible: () => typeof import("@remotion/zod-types") | null;
+export declare const ZodProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/get-zod-if-possible.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodProvider = exports.useZodTypesIfPossible = exports.useZodIfPossible = exports.getZTypesIfPossible = exports.getZodIfPossible = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getZodIfPossible = async () => {
+    try {
+        const { z } = await Promise.resolve().then(() => __importStar(require('zod')));
+        return z;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZodIfPossible = getZodIfPossible;
+const getZTypesIfPossible = async () => {
+    try {
+        const mod = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
+        return mod;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZTypesIfPossible = getZTypesIfPossible;
+const useZodIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zod) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodIfPossible = useZodIfPossible;
+const useZodTypesIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zodTypes) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodTypesIfPossible = useZodTypesIfPossible;
+const ZodContext = (0, react_1.createContext)(null);
+const ZodProvider = ({ children }) => {
+    const [zod, setZod] = (0, react_1.useState)(null);
+    const [zodTypes, setZodTypes] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZodIfPossible)().then((z) => setZod(z));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZTypesIfPossible)().then((z) => setZodTypes(z));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            zod,
+            zodTypes,
+        };
+    }, [zod, zodTypes]);
+    return ((0, jsx_runtime_1.jsx)(ZodContext.Provider, { value: contextValue, children: children }));
+};
+exports.ZodProvider = ZodProvider;