@remotion/cli 3.1.7 → 3.1.11

package/dist/bundle-on-cli.d.ts

@@ -0,0 +1,2 @@
+import { RenderStep } from './step';
+export declare const bundleOnCli: (fullPath: string, steps: RenderStep[]) => Promise<string>;

package/dist/bundle-on-cli.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundleOnCli = void 0;
+const bundler_1 = require("@remotion/bundler");
+const remotion_1 = require("remotion");
+const log_1 = require("./log");
+const parse_command_line_1 = require("./parse-command-line");
+const progress_bar_1 = require("./progress-bar");
+const bundleOnCli = async (fullPath, steps) => {
+    var _a;
+    const shouldCache = remotion_1.Internals.getWebpackCaching();
+    const cacheExistedBefore = bundler_1.BundlerInternals.cacheExists('production', null);
+    if (cacheExistedBefore && !shouldCache) {
+        log_1.Log.info('🧹 Cache disabled but found. Deleting... ');
+        await bundler_1.BundlerInternals.clearCache('production', null);
+    }
+    const bundleStartTime = Date.now();
+    const bundlingProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
+    const bundled = await (0, bundler_1.bundle)(fullPath, (progress) => {
+        bundlingProgress.update((0, progress_bar_1.makeBundlingProgress)({
+            progress: progress / 100,
+            steps,
+            doneIn: null,
+        }));
+    }, {
+        enableCaching: shouldCache,
+        webpackOverride: (_a = remotion_1.Internals.getWebpackOverrideFn()) !== null && _a !== void 0 ? _a : remotion_1.Internals.defaultOverrideFunction,
+    });
+    bundlingProgress.update((0, progress_bar_1.makeBundlingProgress)({
+        progress: 1,
+        steps,
+        doneIn: Date.now() - bundleStartTime,
+    }) + '\n');
+    log_1.Log.verbose('Bundled under', bundled);
+    const cacheExistedAfter = bundler_1.BundlerInternals.cacheExists('production', null);
+    if (cacheExistedAfter && !cacheExistedBefore) {
+        log_1.Log.info('⚡️ Cached bundle. Subsequent renders will be faster.');
+    }
+    return bundled;
+};
+exports.bundleOnCli = bundleOnCli;

package/dist/bundle.d.ts

@@ -0,0 +1 @@
+export declare const bundleCommand: () => Promise<void>;

package/dist/bundle.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundleCommand = void 0;
+const get_cli_options_1 = require("./get-cli-options");
+const initialize_render_cli_1 = require("./initialize-render-cli");
+const log_1 = require("./log");
+const parse_command_line_1 = require("./parse-command-line");
+const prepare_entry_point_1 = require("./prepare-entry-point");
+const bundleCommand = async () => {
+    const file = parse_command_line_1.parsedCli._[1];
+    if (!file) {
+        log_1.Log.error('No entry point specified. Pass more arguments:');
+        log_1.Log.error('   npx remotion bundle [entry-point]');
+        log_1.Log.error('Documentation: https://www.remotion.dev/docs/render');
+        process.exit(1);
+    }
+    await (0, initialize_render_cli_1.initializeRenderCli)('bundle');
+    const { publicPath, bundleOutDir } = await (0, get_cli_options_1.getCliOptions)({
+        isLambda: false,
+        type: 'get-compositions-or-bundle',
+    });
+    const { urlOrBundle } = await (0, prepare_entry_point_1.prepareEntryPoint)({
+        file,
+        otherSteps: [],
+        outDir: bundleOutDir,
+        publicPath,
+    });
+    log_1.Log.info();
+    log_1.Log.info(urlOrBundle);
+};
+exports.bundleCommand = bundleCommand;

package/dist/chalk/symbols.d.ts

@@ -0,0 +1,111 @@
+declare const isHyper: boolean;
+declare const isWindows: boolean;
+declare const isLinux: boolean;
+declare const common: {
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};
+declare const windows: {
+    check: string;
+    cross: string;
+    ellipsisLarge: string;
+    ellipsis: string;
+    info: string;
+    questionSmall: string;
+    pointer: string;
+    pointerSmall: string;
+    radioOff: string;
+    radioOn: string;
+    warning: string;
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};
+declare const other: {
+    ballotCross: string;
+    check: string;
+    cross: string;
+    ellipsisLarge: string;
+    ellipsis: string;
+    info: string;
+    questionFull: string;
+    questionSmall: string;
+    pointer: string;
+    pointerSmall: string;
+    radioOff: string;
+    radioOn: string;
+    warning: string;
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};

package/dist/chalk/symbols.js

@@ -0,0 +1,75 @@
+'use strict';
+const isHyper = typeof process !== 'undefined' && process.env.TERM_PROGRAM === 'Hyper';
+const isWindows = typeof process !== 'undefined' && process.platform === 'win32';
+const isLinux = typeof process !== 'undefined' && process.platform === 'linux';
+const common = {
+    ballotDisabled: '☒',
+    ballotOff: '☐',
+    ballotOn: '☑',
+    bullet: '•',
+    bulletWhite: '◦',
+    fullBlock: '█',
+    heart: '❤',
+    identicalTo: '≡',
+    line: '─',
+    mark: '※',
+    middot: '·',
+    minus: '－',
+    multiplication: '×',
+    obelus: '÷',
+    pencilDownRight: '✎',
+    pencilRight: '✏',
+    pencilUpRight: '✐',
+    percent: '%',
+    pilcrow2: '❡',
+    pilcrow: '¶',
+    plusMinus: '±',
+    question: '?',
+    section: '§',
+    starsOff: '☆',
+    starsOn: '★',
+    upDownArrow: '↕',
+};
+const windows = {
+    ...common,
+    check: '√',
+    cross: '×',
+    ellipsisLarge: '...',
+    ellipsis: '...',
+    info: 'i',
+    questionSmall: '?',
+    pointer: '>',
+    pointerSmall: '»',
+    radioOff: '( )',
+    radioOn: '(*)',
+    warning: '‼',
+};
+const other = {
+    ...common,
+    ballotCross: '✘',
+    check: '✔',
+    cross: '✖',
+    ellipsisLarge: '⋯',
+    ellipsis: '…',
+    info: 'ℹ',
+    questionFull: '？',
+    questionSmall: '﹖',
+    pointer: isLinux ? '▸' : '❯',
+    pointerSmall: isLinux ? '‣' : '›',
+    radioOff: '◯',
+    radioOn: '◉',
+    warning: '⚠',
+};
+module.exports = isWindows && !isHyper ? windows : other;
+Reflect.defineProperty(module.exports, 'common', {
+    enumerable: false,
+    value: common,
+});
+Reflect.defineProperty(module.exports, 'windows', {
+    enumerable: false,
+    value: windows,
+});
+Reflect.defineProperty(module.exports, 'other', {
+    enumerable: false,
+    value: other,
+});

package/dist/chalk/utilities.d.ts

@@ -0,0 +1,2 @@
+export declare function stringReplaceAll(string: string, substring: string, replacer: string): string;
+export declare function stringEncaseCRLFWithFirstIndex(string: string, prefix: string, postfix: string, index: number): string;

package/dist/chalk/utilities.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringEncaseCRLFWithFirstIndex = exports.stringReplaceAll = void 0;
+function stringReplaceAll(string, substring, replacer) {
+    let index = string.indexOf(substring);
+    if (index === -1) {
+        return string;
+    }
+    const substringLength = substring.length;
+    let endIndex = 0;
+    let returnValue = '';
+    do {
+        returnValue += string.slice(endIndex, index) + substring + replacer;
+        endIndex = index + substringLength;
+        index = string.indexOf(substring, endIndex);
+    } while (index !== -1);
+    returnValue += string.slice(endIndex);
+    return returnValue;
+}
+exports.stringReplaceAll = stringReplaceAll;
+function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
+    let endIndex = 0;
+    let returnValue = '';
+    do {
+        const gotCR = string[index - 1] === '\r';
+        returnValue +=
+            string.slice(endIndex, gotCR ? index - 1 : index) +
+                prefix +
+                (gotCR ? '\r\n' : '\n') +
+                postfix;
+        endIndex = index + 1;
+        index = string.indexOf('\n', endIndex);
+    } while (index !== -1);
+    returnValue += string.slice(endIndex);
+    return returnValue;
+}
+exports.stringEncaseCRLFWithFirstIndex = stringEncaseCRLFWithFirstIndex;

package/dist/code-frame.js

@@ -41,7 +41,8 @@ const logLine = (frame) => {
 };
 const printCodeFrameAndStack = (err) => {
     var _a, _b, _c;
-    if (!err.symbolicatedStackFrames) {
+    if (!err.symbolicatedStackFrames ||
+        err.symbolicatedStackFrames.length === 0) {
         log_1.Log.error(err.stack);
         return;
     }

package/dist/compositions.js

@@ -39,7 +39,7 @@ const listCompositionsCommand = async (remotionRoot) => {
         isLambda: false,
         type: 'get-compositions',
     });
-    const bundled = await (0, setup_cache_1.bundleOnCli)({
+    const { urlOrBundle: bundled, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         remotionRoot,
         fullPath,
         steps: ['bundling'],
@@ -85,5 +85,8 @@ const listCompositionsCommand = async (remotionRoot) => {
         ].join('');
     })
         .join('\n'));
+    await renderer_1.RenderInternals.cleanDownloadMap(downloadMap);
+    await cleanupBundle();
+    log_1.Log.verbose('Cleaned up', downloadMap.assetDir);
 };
 exports.listCompositionsCommand = listCompositionsCommand;

package/dist/editor/components/Canvas.js

@@ -4,12 +4,14 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const Preview_1 = require("./Preview");
 const container = {
     flex: 1,
     display: 'flex',
     overflow: 'hidden',
     position: 'relative',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const Canvas = () => {
     const ref = (0, react_1.useRef)(null);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TComposition } from 'remotion';
+export declare const useSelectComposition: () => (c: TComposition) => void;
+export declare const InitialCompositionLoader: React.FC;

package/dist/editor/components/CompositionManager.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const folders_1 = require("../state/folders");
+const marks_1 = require("../state/marks");
+const CompositionSelector_1 = require("./CompositionSelector");
+const FramePersistor_1 = require("./FramePersistor");
+const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const useSelectComposition = () => {
+    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    return (c) => {
+        var _a;
+        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
+        window.history.pushState({}, 'Preview', `/${c.id}`);
+        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
+        setCurrentFrame(frameInBounds);
+        setCurrentComposition(c.id);
+        const { folderName, parentFolderName } = c;
+        if (folderName !== null) {
+            setFoldersExpanded((ex) => {
+                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const newState = {
+                    ...ex,
+                };
+                for (const key of keysToExpand) {
+                    newState[key] = true;
+                }
+                return newState;
+            });
+        }
+    };
+};
+exports.useSelectComposition = useSelectComposition;
+const InitialCompositionLoader = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, exports.useSelectComposition)();
+    (0, react_1.useEffect)(() => {
+        if (currentComposition) {
+            return;
+        }
+        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+        if (compositionFromUrl) {
+            const exists = compositions.find((c) => c.id === compositionFromUrl);
+            if (exists) {
+                selectComposition(exists);
+                return;
+            }
+        }
+        if (compositions.length > 0) {
+            selectComposition(compositions[0]);
+        }
+    }, [compositions, currentComposition, selectComposition]);
+    return null;
+};
+exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/CompositionSelector.js

@@ -4,6 +4,7 @@ exports.CompositionSelector = exports.getKeysToExpand = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const z_index_1 = require("../state/z-index");
@@ -16,6 +17,7 @@ const container = {
     height: '100%',
     width: '100%',
     flex: 1,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const list = {
     padding: 5,

package/dist/editor/components/CompositionSelectorItem.js

@@ -23,6 +23,7 @@ const itemStyle = {
     border: 'none',
     width: '100%',
     textAlign: 'left',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const iconStyle = {
     width: 18,

package/dist/editor/components/CurrentComposition.js

@@ -4,6 +4,7 @@ exports.CurrentComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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");
 const rich_timeline_1 = require("../state/rich-timeline");
@@ -15,23 +16,27 @@ const container = {
     borderBottom: '1px solid black',
     padding: 16,
     color: 'white',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const title = {
     fontWeight: 'bold',
     fontSize: 12,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const subtitle = {
     fontSize: 12,
     opacity: 0.8,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const row = {
     display: 'flex',
     flexDirection: 'row',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const targetHeight = 60;
 const targetWidth = (targetHeight * 16) / 9;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Loading: React.FC;

package/dist/editor/components/LoadingIndicator.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const ICON_SIZE = 40;
+const label = {
+    color: '#555',
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+};
+const container = {
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const Loading = () => {
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			` }), (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), (0, jsx_runtime_1.jsx)("p", { style: label, children: "Loading..." })] }));
+};
+exports.Loading = Loading;

package/dist/editor/components/Menu/MenuItem.js

@@ -46,7 +46,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return null;
         }
         return {
-            ...styles_1.menuContainer,
+            ...styles_1.menuContainerTowardsBottom,
             left: size.left,
             top: size.top + size.height,
         };

package/dist/editor/components/Menu/MenuSubItem.js

@@ -70,7 +70,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             return null;
         }
         return {
-            ...styles_1.menuContainer,
+            ...styles_1.menuContainerTowardsBottom,
             left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
             top: size.top - styles_1.MENU_VERTICAL_PADDING,
         };

package/dist/editor/components/Menu/styles.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import type React from 'react';
 export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
-export declare const menuContainer: React.CSSProperties;
+export declare const menuContainerTowardsBottom: React.CSSProperties;
+export declare const menuContainerTowardsTop: React.CSSProperties;
 export declare const outerPortal: React.CSSProperties;

package/dist/editor/components/Menu/styles.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outerPortal = exports.menuContainer = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
+exports.outerPortal = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.MENU_VERTICAL_PADDING = 4;
 exports.SUBMENU_LEFT_INSET = -8;
-exports.menuContainer = {
+const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
     color: 'white',
     userSelect: 'none',
     minWidth: 200,
 };
+exports.menuContainerTowardsBottom = {
+    ...menuContainer,
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+};
+exports.menuContainerTowardsTop = {
+    ...menuContainer,
+    boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.5)',
+};
 exports.outerPortal = {
     position: 'fixed',
     height: '100%',

package/dist/editor/components/MenuToolbar.js

@@ -4,6 +4,7 @@ exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const pick_color_1 = require("../helpers/pick-color");
 const Checkmark_1 = require("../icons/Checkmark");
 const checkerboard_1 = require("../state/checkerboard");
@@ -27,6 +28,7 @@ const row = {
     fontSize: 13,
     paddingLeft: 6,
     paddingRight: 10,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const flex = {
     flex: 1,

package/dist/editor/components/NewComposition/ComboBox.js

@@ -60,10 +60,20 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         if (!opened || !size) {
             return null;
         }
+        const spaceToBottom = size.windowSize.height - (size.top + size.height);
+        const spaceToTop = size.top;
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
         return {
-            ...styles_1.menuContainer,
+            ...(layout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
             left: size.left,
-            top: size.top + size.height,
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);

package/dist/editor/components/Notifications/Notification.js

@@ -26,6 +26,6 @@ const Notification = ({ children, id, duration, created, onRemove }) => {
             clearTimeout(timeout);
         };
     }, [created, duration, id, onRemove]);
-    return (0, jsx_runtime_1.jsx)("div", { style: notification, children: children });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
 };
 exports.Notification = Notification;

package/dist/editor/components/Notifications/NotificationCenter.js

@@ -13,6 +13,7 @@ const container = {
     flexDirection: 'column',
     paddingTop: 20,
     pointerEvents: 'none',
+    backgroundColor: 'transparent',
 };
 exports.notificationCenter = (0, react_1.createRef)();
 const NotificationCenter = () => {

package/dist/editor/components/PreviewToolbar.js

@@ -4,6 +4,7 @@ exports.PreviewToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
@@ -27,6 +28,7 @@ const container = {
     paddingBottom: 2,
     alignItems: 'center',
     flexDirection: 'row',
+    background: colors_1.BACKGROUND,
 };
 const sideContainer = {
     width: 300,