@remotion/cli 4.0.0-fastlambda.8 → 4.0.0-lambda.3

package/dist/editor/components/Preview.js

@@ -8,7 +8,6 @@ const remotion_1 = require("remotion");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const checkerboard_1 = require("../state/checkerboard");
 const preview_size_1 = require("../state/preview-size");
-const LoadingIndicator_1 = require("./LoadingIndicator");
 const checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
@@ -26,9 +25,8 @@ const containerStyle = (options) => {
     };
 };
 const Inner = ({ canvasSize }) => {
-    var _a;
     const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const video = remotion_1.Internals.useVideo();
+    const portalContainer = (0, react_1.useRef)(null);
     const config = (0, remotion_1.useVideoConfig)();
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { centerX, centerY, yCorrection, xCorrection, scale } = player_1.PlayerInternals.calculateScale({
@@ -66,15 +64,20 @@ const Inner = ({ canvasSize }) => {
         xCorrection,
         yCorrection,
     ]);
-    const Component = video ? video.component : null;
-    const inputProps = (0, remotion_1.getInputProps)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.Loading, {}, void 0), children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: style, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...inputProps }, void 0)) : null }, void 0) }, void 0) }, void 0));
+    (0, react_1.useEffect)(() => {
+        const { current } = portalContainer;
+        current === null || current === void 0 ? void 0 : current.appendChild(remotion_1.Internals.portalNode());
+        return () => {
+            current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { ref: portalContainer, style: style }) }));
 };
 const VideoPreview = ({ canvasSize }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     if (!config) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Inner, { canvasSize: canvasSize }, void 0);
+    return (0, jsx_runtime_1.jsx)(Inner, { canvasSize: canvasSize });
 };
 exports.VideoPreview = VideoPreview;

package/dist/editor/components/PreviewToolbar.js

@@ -43,6 +43,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 }, void 0), (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}, void 0), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }, void 0), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }, void 0), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }, void 0), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}, void 0), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}, void 0), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }, void 0), (0, jsx_runtime_1.jsx)("div", { style: padding }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }, void 0), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {}, void 0)] }, void 0));
+    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, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/RichTimelineToggle.js

@@ -24,6 +24,6 @@ const RichTimelineToggle = () => {
                 width: 16,
                 height: 16,
                 color: richTimeline ? 'var(--blue)' : 'white',
-            } }, void 0) }, void 0));
+            } }) }));
 };
 exports.RichTimelineToggle = RichTimelineToggle;

package/dist/editor/components/SizeSelector.js

@@ -45,11 +45,11 @@ const SizeSelector = () => {
                 type: 'item',
                 value: newSize,
                 keyHint: null,
-                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: 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 }, void 0) }, void 0));
+    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 }) }));
 };
 exports.SizeSelector = SizeSelector;

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

@@ -62,6 +62,6 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         orientation,
         persistFlex,
     ]);
-    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? containerColumn : containerRow, children: children }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? containerColumn : containerRow, children: children }) }));
 };
 exports.SplitterContainer = SplitterContainer;

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

@@ -8,11 +8,13 @@ const SplitterElement = ({ children, type }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     const style = (0, react_1.useMemo)(() => {
         return {
-            flex: type === 'flexer' ? context.flexValue : 1 - context.flexValue,
+            flex: 
+            // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
+            (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
             display: 'flex',
             position: 'relative',
         };
     }, [context.flexValue, type]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style, children: children }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });
 };
 exports.SplitterElement = SplitterElement;

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

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

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

@@ -14,7 +14,7 @@ const containerColumn = {
     width: exports.SPLITTER_HANDLE_SIZE,
     cursor: 'col-resize',
 };
-const SplitterHandle = () => {
+const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     if (!context) {
         throw new Error('Cannot find splitter context');
@@ -32,7 +32,7 @@ const SplitterHandle = () => {
         if (!current) {
             return;
         }
-        const getNewValue = (e) => {
+        const getNewValue = (e, clamp) => {
             if (!context.isDragging.current) {
                 throw new Error('cannot get value if not dragging');
             }
@@ -49,7 +49,10 @@ const SplitterHandle = () => {
                     (height - exports.SPLITTER_HANDLE_SIZE));
             })();
             const newFlex = context.flexValue + change;
-            return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
+            if (clamp) {
+                return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
+            }
+            return newFlex;
         };
         const onPointerDown = (e) => {
             var _a;
@@ -59,7 +62,10 @@ const SplitterHandle = () => {
             };
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
             window.addEventListener('pointerup', (ev) => {
-                context.persistFlex(getNewValue(ev));
+                if (!context.isDragging.current) {
+                    return;
+                }
+                context.persistFlex(getNewValue(ev, true));
                 cleanup();
                 setLastPointerUp(Date.now());
             }, { once: true });
@@ -67,8 +73,16 @@ const SplitterHandle = () => {
         };
         const onPointerMove = (e) => {
             if (context.isDragging.current) {
-                const val = getNewValue(e);
+                const val = getNewValue(e, true);
                 context.setFlexValue(val);
+                if (allowToCollapse) {
+                    const unclamped = getNewValue(e, false);
+                    if (unclamped < context.minFlex / 2) {
+                        cleanup();
+                        onCollapse();
+                        setLastPointerUp(Date.now());
+                    }
+                }
             }
         };
         const cleanup = () => {
@@ -85,7 +99,14 @@ const SplitterHandle = () => {
                 cleanup();
             }
         };
-    }, [context, context.domRect, context.flexValue, lastPointerUp]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "remotion-splitter", style: context.orientation === 'horizontal' ? containerRow : containerColumn }, void 0));
+    }, [
+        allowToCollapse,
+        context,
+        context.domRect,
+        context.flexValue,
+        lastPointerUp,
+        onCollapse,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "remotion-splitter", style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
 };
 exports.SplitterHandle = SplitterHandle;

package/dist/editor/components/Thumbnail.js

@@ -71,6 +71,6 @@ const Thumbnail = ({ composition, targetHeight, targetWidth, frameToDisplay }) =
         return (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
     }, [composition.defaultProps]);
     const ThumbnailComponent = composition.component;
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }) }) }) }) }) }));
 };
 exports.Thumbnail = Thumbnail;

package/dist/editor/components/TimeValue.js

@@ -33,6 +33,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) }, void 0), ' ', (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] }, void 0)] }, void 0)] }, void 0));
+    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)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

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

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

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

@@ -13,10 +13,10 @@ const row = {
     flexDirection: 'row',
 };
 const LoopedTimelineIndicator = ({ loops }) => {
-    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: row, children: new Array(loops).fill(true).map((l, i) => {
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: row, children: new Array(loops).fill(true).map((_l, i) => {
             return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
             // eslint-disable-next-line
-            , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {}, void 0)] }, i));
-        }) }, void 0));
+            , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
+        }) }));
 };
 exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

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

@@ -16,6 +16,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."] }, void 0));
+    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."] }));
 };
 exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

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

@@ -25,6 +25,7 @@ const container = {
     height: 0,
     overflow: 'auto',
 };
+const noop = () => undefined;
 const Timeline = () => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -72,6 +73,6 @@ const Timeline = () => {
     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 }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (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 }, void 0), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}, void 0)] }, void 0)] }, void 0) }, void 0) }, void 0));
+    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, {})] })] }) }) }));
 };
 exports.Timeline = Timeline;

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

@@ -11,9 +11,9 @@ const container = {
     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 }, void 0) }, void 0));
+    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 TimelineCollapseToggle = ({ collapsed }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

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

@@ -221,6 +221,6 @@ const TimelineDragHandler = () => {
             window.removeEventListener('pointerup', onPointerUpInOut);
         };
     }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: container, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }, void 0), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }, void 0)), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: container, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;

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

@@ -25,10 +25,10 @@ const TimelineInOutPointer = () => {
                     ...areaHighlight,
                     left: 0,
                     width: get(inFrame !== null && inFrame !== void 0 ? inFrame : 0),
-                } }, void 0)), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
+                } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: get(outFrame),
                     width: width - get(outFrame),
-                } }, void 0))] }, void 0));
+                } }))] }));
 };
 exports.TimelineInOutPointer = TimelineInOutPointer;

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

@@ -26,6 +26,6 @@ const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
             transform: `translateX(${get(atFrame)}px)`,
         };
     }, [atFrame, dragging, get]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

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

@@ -13,6 +13,6 @@ const TimelineList = ({ timeline, viewState, dispatchStateChange }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: container, children: timeline.map((track, i) => {
             const beforeDepth = i === 0 ? 0 : timeline[i - 1].depth;
             return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { hash: track.hash, dispatchStateChange: dispatchStateChange, collapsed: (0, is_collapsed_1.isTrackCollapsed)(track.hash, viewState), nestedDepth: track.depth, sequence: track.sequence, beforeDepth: beforeDepth, canCollapse: track.canCollapse }, track.sequence.id) }, track.sequence.id));
-        }) }, void 0));
+        }) }));
 };
 exports.TimelineList = TimelineList;

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

@@ -85,6 +85,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 }, void 0), 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 }, void 0) }, void 0)) : ((0, jsx_runtime_1.jsx)("div", { style: collapser }, void 0)), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }, void 0), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: space }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from }, void 0)] }, void 0)] }, void 0));
+    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", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -67,6 +67,6 @@ const TimelineSequence = ({ s, fps }) => {
         };
     }, []);
     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) }, void 0)) : null }, void 0), 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 }, void 0)) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }, void 0) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }, void 0))] }, s.id));
+    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 })) : 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

@@ -26,6 +26,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, ")"] }, void 0));
+`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

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

@@ -28,6 +28,6 @@ const TimelineSlider = () => {
             transform: `translateX(${left}px)`,
         };
     }, [timelinePosition, get]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: line, children: (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {}, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: line, children: (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {}) }) }));
 };
 exports.TimelineSlider = TimelineSlider;

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

@@ -11,6 +11,6 @@ const style = {
     marginLeft: -8,
 };
 const TimelineSliderHandle = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("svg", { width: 17, viewBox: "0 0 159 212", version: "1.1", style: style, children: (0, jsx_runtime_1.jsx)("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("svg", { width: 17, viewBox: "0 0 159 212", version: "1.1", style: style, children: (0, jsx_runtime_1.jsx)("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
 };
 exports.TimelineSliderHandle = TimelineSliderHandle;

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

@@ -26,7 +26,7 @@ const TimelineTracks = ({ timeline, fps, viewState, hasBeenCut }) => {
                     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 }, void 0) }, track.sequence.id));
-                }) }, void 0), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}, void 0) : null] }, void 0));
+                    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] }));
 };
 exports.TimelineTracks = TimelineTracks;

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

@@ -45,6 +45,6 @@ const TimelineVideoInfo = ({ src }) => {
     if (!videoMetadata) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("svg", { style: svgStyle, role: "img", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { style: pathStyle, fill: "currentColor", d: "M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)("svg", { style: svgStyle, role: "img", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { style: pathStyle, fill: "currentColor", d: "M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z" }) }) }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/editor/components/TimelineInOutToggle.js

@@ -153,6 +153,6 @@ const TimelineInOutPointToggle = () => {
     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 }, void 0) }, void 0), (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 }, void 0) }, void 0)] }, void 0));
+    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 }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/TopPanel.js

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = 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 sidebar_1 = require("../state/sidebar");
 const Canvas_1 = require("./Canvas");
+const CollapsedCompositionSelector_1 = require("./CollapsedCompositionSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const PreviewToolbar_1 = require("./PreviewToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -11,6 +16,7 @@ const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const container = {
     height: '100%',
+    width: '100%',
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
@@ -29,6 +35,23 @@ const leftContainer = {
     display: 'flex',
 };
 const TopPanel = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}, void 0), (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: [(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, {}, void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (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, {}, void 0) }, void 0) }, void 0)] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}, void 0)] }, void 0));
+    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') {
+            return 'collapsed';
+        }
+        if (sidebarCollapsedState === 'expanded') {
+            return 'expanded';
+        }
+        return compactUi ? 'collapsed' : 'expanded';
+    }, [compactUi, sidebarCollapsedState]);
+    const onCollapse = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState('collapsed');
+    }, [setSidebarCollapsedState]);
+    const onExpand = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState('expanded');
+    }, [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, {})] }));
 };
 exports.TopPanel = TopPanel;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PackageManager } from '@remotion/bundler';
+import { PackageManager } from '../../preview-server/get-package-manager';
 export declare type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;

package/dist/editor/components/UpdateCheck.js

@@ -53,6 +53,6 @@ const UpdateCheck = () => {
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: buttonStyle, onClick: openModal, type: "button", children: "Update available!" }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -38,6 +38,6 @@ const UpdateModal = ({ info }) => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }, void 0), ' ', "to know what", "'s", " new in Remotion."] }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyCmd)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/components/layout.js

@@ -12,11 +12,11 @@ const Spacing = ({ x = 0, y = 0 }) => {
             height: y * exports.SPACING_UNIT,
         };
     }, [x, y]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
 const flex = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children }, void 0);
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
 exports.Flex = Flex;
 const Row = ({ children, justify, className, align, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
@@ -28,7 +28,7 @@ const Row = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Row = Row;
 const Column = ({ children, justify, className, align, style = {} }) => {
@@ -41,6 +41,6 @@ const Column = ({ children, justify, className, align, style = {} }) => {
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
         };
     }, [align, justify, style]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Column = Column;

package/dist/editor/helpers/use-compact-ui.d.ts

@@ -0,0 +1 @@
+export declare function useCompactUI(): boolean;

package/dist/editor/helpers/use-compact-ui.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCompactUI = void 0;
+const react_1 = require("react");
+const breakpoint = 1200;
+function useCompactUI() {
+    const [compactUI, setCompactUI] = (0, react_1.useState)(window.innerWidth < breakpoint);
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            setCompactUI(window.innerWidth < breakpoint);
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return compactUI;
+}
+exports.useCompactUI = useCompactUI;

package/dist/editor/icons/Checkmark.js

@@ -6,5 +6,5 @@ const style = {
     width: 14,
     height: 14,
 };
-const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "check", className: "svg-inline--fa fa-check fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: style, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }, void 0) }, void 0));
+const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "check", className: "svg-inline--fa fa-check fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: style, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;

package/dist/editor/icons/caret.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const Caret: () => JSX.Element;
+export declare const CaretRight: () => JSX.Element;
 export declare const CaretDown: () => JSX.Element;