@remotion/cli 4.0.52 → 4.0.54

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;

package/dist/editor/components/CompositionSelector.js

@@ -18,10 +18,6 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
-const list = {
-    height: 'calc(100% - 80px)',
-    overflowY: 'auto',
-};
 const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
     initial.push((0, persist_open_folders_1.openFolderKey)(initialFolderName, parentFolderName));
     const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
@@ -90,10 +86,17 @@ const CompositionSelector = () => {
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [canvasContent && canvasContent.type === 'composition' ? ((0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {})) : null, (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
-                    return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
-                            ? canvasContent.compositionId
-                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
+    const showCurrentComposition = canvasContent && canvasContent.type === 'composition';
+    const list = (0, react_1.useMemo)(() => {
+        return {
+            height: showCurrentComposition
+                ? `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`
+                : '100%',
+            overflowY: 'auto',
+        };
+    }, [showCurrentComposition]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [showCurrentComposition ? (0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}) : null, (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+                    return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: showCurrentComposition ? canvasContent.compositionId : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })] }));
 };
 exports.CompositionSelector = CompositionSelector;

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

@@ -1 +1,2 @@
+export declare const CURRENT_COMPOSITION_HEIGHT = 80;
 export declare const CurrentComposition: () => JSX.Element;

package/dist/editor/components/CurrentComposition.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentComposition = void 0;
+exports.CurrentComposition = exports.CURRENT_COMPOSITION_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const render_frame_1 = require("../state/render-frame");
+exports.CURRENT_COMPOSITION_HEIGHT = 80;
 const container = {
-    height: 80,
+    height: exports.CURRENT_COMPOSITION_HEIGHT,
     display: 'block',
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
     padding: 12,

package/dist/editor/components/MenuBuildIndicator.js

@@ -40,6 +40,6 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/editor/components/MenuToolbar.js

@@ -22,13 +22,13 @@ const row = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const fixedWidthRight = {
-    minWidth: '350px',
+    width: '330px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
 };
 const fixedWidthLeft = {
-    minWidth: '350px',
+    minWidth: '330px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -75,7 +75,7 @@ const MenuToolbar = () => {
     const onItemQuit = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, [setSelected]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { justify: "center", align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
                         return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
                     }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "#f1c40f" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/OpenEditorButton.js

@@ -7,12 +7,11 @@ const colors_1 = require("../helpers/colors");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const svgStyle = {
-    width: '11px',
-    height: '11px',
+    width: 11,
+    height: 11,
 };
 const buttonStyle = {
     border: 'none',
-    width: '20px',
     height: '20px',
     display: 'flex',
     justifyContent: 'center',

package/dist/editor/components/PlayPause.js

@@ -16,6 +16,10 @@ const in_out_1 = require("../state/in-out");
 const ControlButton_1 = require("./ControlButton");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
+const backStyle = {
+    height: 18,
+    color: 'white',
+};
 const forwardBackStyle = {
     height: 16,
     color: 'white',
@@ -186,7 +190,7 @@ const PlayPause = ({ playbackRate, loop }) => {
         onEnter,
         onSpace,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: backStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',

package/dist/editor/components/PreviewToolbar.js

@@ -50,6 +50,6 @@ const PreviewToolbar = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (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)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (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)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

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

@@ -115,6 +115,11 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         lastPointerUp,
         onCollapse,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "remotion-splitter", style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+            'remotion-splitter',
+            context.orientation === 'horizontal'
+                ? 'remotion-splitter-horizontal'
+                : 'remotion-splitter-vertical',
+        ].join(' '), style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
 };
 exports.SplitterHandle = SplitterHandle;

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

@@ -13,6 +13,11 @@ const isTrackHidden = (track, allTracks, viewState) => {
         return false;
     }
     const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
+    // Due to effects and conditional `showInTimeline`, a parent
+    // may not exist in the `allTracks` array.
+    if (!parent) {
+        return true;
+    }
     if ((0, exports.isTrackCollapsed)(parent.hash, viewState)) {
         return true;
     }

package/dist/editor/components/UpdateCheck.js

@@ -16,6 +16,8 @@ const buttonStyle = {
     backgroundColor: 'transparent',
     cursor: 'pointer',
     fontSize: 14,
+    display: 'inline-flex',
+    justifyContent: 'center',
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
@@ -74,7 +76,7 @@ const UpdateCheck = () => {
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,
-            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.BLUE,
+            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.LIGHT_TEXT,
         };
     }, [hasKnownBugs]);
     if (!info) {
@@ -83,6 +85,9 @@ const UpdateCheck = () => {
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", children: hasKnownBugs ? 'Bugfixes available' : 'Update available' }));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                height: 16,
+                width: 16,
+            }, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
 };
 exports.UpdateCheck = UpdateCheck;

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

@@ -58,6 +58,6 @@ const UpdateModal = ({ info, knownBugs }) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
         });
     }, [command]);
-    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: [hasKnownBugs ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), (0, jsx_runtime_1.jsx)(KnownBugs_1.KnownBugs, { bugs: knownBugs }), (0, jsx_runtime_1.jsx)("div", { style: { height: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: text, children: "To upgrade, run the following command:" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: text, 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: onClick, 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", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("div", { style: text, 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."] })] })] }));
+    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: [hasKnownBugs ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), (0, jsx_runtime_1.jsx)(KnownBugs_1.KnownBugs, { bugs: knownBugs }), (0, jsx_runtime_1.jsx)("div", { style: { height: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: text, children: "To upgrade, run the following command:" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: title, 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: onClick, 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", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("div", { style: text, 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/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.25)" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/editor/helpers/get-timeline-sequence-sort-key.js

@@ -9,7 +9,9 @@ const getTimelineSequenceSequenceSortKey = (track, tracks, sameHashes = {}) => {
     }
     const parent = tracks.find((t) => t.sequence.id === track.sequence.parent);
     if (!parent) {
-        throw new Error('Cannot find parent');
+        // Due to effects and conditional `showInTimeline`, a parent
+        // may not exist in the `allTracks` array.
+        return id;
     }
     const firstParentWithSameHash = tracks.find((a) => {
         return sameHashes[parent.hash].includes(a.sequence.id);

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/editor/icons/media-volume.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const size = 25;
+const size = 22;
 const VolumeOffIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: colors_1.BLUE }) }));
 };

package/dist/get-cli-options.d.ts

@@ -21,7 +21,7 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -63,24 +63,24 @@ export declare const CliInternals: {
         verbose: (message?: any, ...optionalParams: any[]) => void;
         verboseAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         warn: (message?: any, ...optionalParams: any[]) => void;
         warnAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         }, message?: any, ...optionalParams: any[]) => void;
         error: (message?: any, ...optionalParams: any[]) => void;
         errorAdvanced: (options: {
             indent: boolean;
-            logLevel: "error" | "verbose" | "info" | "warn";
+            logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
@@ -106,7 +106,7 @@ export declare const CliInternals: {
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -190,7 +190,7 @@ export declare const CliInternals: {
     } & {
         _: string[];
     };
-    printError: (err: Error, logLevel: "error" | "verbose" | "info" | "warn") => Promise<void>;
+    printError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
         locale: string;
         bits?: boolean | undefined;
@@ -233,7 +233,7 @@ export declare const CliInternals: {
     };
     listOfRemotionPackages: string[];
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }) => boolean;
     getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, offthreadVideoCacheSizeInBytes, }: {
         height: number | null;
@@ -248,7 +248,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         serveUrlOrWebpackUrl: string;
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         serializedInputPropsWithCustomSchema: string;
         server: import("@remotion/renderer").RemotionServer;
         offthreadVideoCacheSizeInBytes: number | null;

package/dist/list-of-remotion-packages.js

@@ -27,5 +27,6 @@ exports.listOfRemotionPackages = [
     '@remotion/shapes',
     '@remotion/zod-types',
     '@remotion/tailwind',
+    '@remotion/transitions',
     'remotion',
 ];

package/dist/log.d.ts

@@ -2,24 +2,24 @@ export declare const Log: {
     verbose: (message?: any, ...optionalParams: any[]) => void;
     verboseAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }, message?: any, ...optionalParams: any[]) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     warnAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     }, message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
     errorAdvanced: (options: {
         indent: boolean;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;

package/dist/preview-server/routes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
 export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.52",
+  "version": "4.0.54",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.52",
-    "@remotion/renderer": "4.0.52",
-    "@remotion/media-utils": "4.0.52",
-    "@remotion/player": "4.0.52",
-    "remotion": "4.0.52"
+    "@remotion/bundler": "4.0.54",
+    "@remotion/media-utils": "4.0.54",
+    "remotion": "4.0.54",
+    "@remotion/renderer": "4.0.54",
+    "@remotion/player": "4.0.54"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -53,7 +53,7 @@
     "@types/prompts": "^2.4.1",
     "@types/react": "18.0.26",
     "@types/prettier": "^2.7.2",
-    "@types/react-dom": "18.0.10",
+    "@types/react-dom": "18.0.11",
     "@types/semver": "^7.3.4",
     "eslint": "8.42.0",
     "eslint-plugin-10x": "1.5.2",
@@ -65,8 +65,8 @@
     "react-dom": "^18.0.0",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.52",
-    "@remotion/tailwind": "4.0.52"
+    "@remotion/zod-types": "4.0.54",
+    "@remotion/tailwind": "4.0.54"
   },
   "keywords": [
     "remotion",

package/styles/styles.css

@@ -10,14 +10,47 @@ body {
 }
 
 .remotion-splitter {
-	background-color: black;
-	transition: background-color 0.2s ease;
 	user-select: none;
 }
 
-.remotion-splitter:hover,
-.remotion-splitter-active {
-	background-color: var(--remotion-cli-internals-blue);
+.remotion-splitter-horizontal {
+	transform: scaleY(2);
+	background: linear-gradient(
+		to bottom,
+		transparent 25%,
+		black 25%,
+		black 75%,
+		transparent
+	);
+}
+
+.remotion-splitter-horizontal:hover,
+.remotion-splitter-horizontal.remotion-splitter-active {
+	background: linear-gradient(
+		to bottom,
+		var(--remotion-cli-internals-blue),
+		var(--remotion-cli-internals-blue)
+	);
+}
+
+.remotion-splitter-vertical {
+	transform: scaleX(2);
+	background: linear-gradient(
+		to right,
+		transparent 25%,
+		black 25%,
+		black 75%,
+		transparent
+	);
+}
+
+.remotion-splitter-vertical:hover,
+.remotion-splitter-vertical.remotion-splitter-active {
+	background: linear-gradient(
+		to right,
+		var(--remotion-cli-internals-blue),
+		var(--remotion-cli-internals-blue)
+	);
 }
 
 input::-webkit-outer-spin-button,
@@ -31,7 +64,10 @@ textarea:focus,
 button:focus,
 a:focus {
 	outline: none;
-	box-shadow: inset 1px 1px #555, inset -1px -1px #555, inset 1px -1px #555,
+	box-shadow:
+		inset 1px 1px #555,
+		inset -1px -1px #555,
+		inset 1px -1px #555,
 		inset -1px 1px #555;
 	border-radius: 0 !important;
 }