@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha4

package/dist/editor/components/Timeline/timeline-scroll-logic.js

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

package/dist/editor/components/TimelineInOutToggle.js

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

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

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

package/dist/editor/components/TopPanel.js

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

@@ -1,3 +1,4 @@
 import type React from 'react';
+export declare const persistCurrentZoom: (zoom: number) => void;
 export declare const getZoomForComposition: (composition: string) => number;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

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

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

@@ -3,16 +3,14 @@ export declare const SPACING_UNIT = 8;
 export declare const Spacing: React.FC<{
     x?: number;
     y?: number;
-    block?: boolean;
 }>;
 export declare const Flex: React.FC<{
     children?: React.ReactNode;
 }>;
 export declare const Row: React.FC<{
-    justify?: 'center' | 'flex-start' | 'flex-end';
+    justify?: 'center';
     align?: 'center';
     style?: React.CSSProperties;
-    flex?: number;
     className?: string;
     children: React.ReactNode;
 }>;

package/dist/editor/components/layout.js

@@ -4,22 +4,21 @@ exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.SPACING_
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.SPACING_UNIT = 8;
-const Spacing = ({ x = 0, y = 0, block = false }) => {
+const Spacing = ({ x = 0, y = 0 }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
-            display: block ? 'block' : 'inline-block',
+            display: 'inline-block',
             width: x * exports.SPACING_UNIT,
             height: y * exports.SPACING_UNIT,
-            flexShrink: 0,
         };
-    }, [block, x, y]);
+    }, [x, y]);
     return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
-const flexCss = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
+const flex = { flex: 1 };
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
 exports.Flex = Flex;
-const Row = ({ children, justify, className, align, flex, style = {} }) => {
+const Row = ({ children, justify, className, align, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -27,9 +26,8 @@ const Row = ({ children, justify, className, align, flex, style = {} }) => {
             flexDirection: 'row',
             justifyContent: justify !== null && justify !== void 0 ? justify : 'flex-start',
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
-            flex: flex !== null && flex !== void 0 ? flex : undefined,
         };
-    }, [align, flex, justify, style]);
+    }, [align, justify, style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Row = Row;

package/dist/editor/helpers/calculate-timeline.d.ts

@@ -1,5 +1,9 @@
 import type { TSequence } from 'remotion';
 import type { TrackWithHash } from './get-timeline-sequence-sort-key';
+export declare type SequenceWithOverlap = {
+    sequence: TSequence;
+    overlaps: TSequence[];
+};
 export declare const calculateTimeline: ({ sequences, sequenceDuration, }: {
     sequences: TSequence[];
     sequenceDuration: number;

package/dist/editor/helpers/colors.d.ts

@@ -4,13 +4,11 @@ export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
 export declare const LIGHT_TEXT = "rgba(255, 255, 255, 0.6)";
-export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
+export declare const SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_BACKGROUND = "#111";
-export declare const FAIL_COLOR = "#ff3232";
-export declare const WARNING_COLOR = "#f1c40f";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

package/dist/editor/helpers/colors.js

@@ -1,24 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
 exports.LIGHT_TEXT = 'rgba(255, 255, 255, 0.6)';
-exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
-const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
+exports.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
 exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
 exports.TIMELINE_BACKGROUND = '#111';
-exports.FAIL_COLOR = '#ff3232';
-exports.WARNING_COLOR = '#f1c40f';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {
-            return SELECTED_HOVER_BACKGROUND;
+            return exports.SELECTED_HOVER_BACKGROUND;
         }
         return exports.SELECTED_BACKGROUND;
     }

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -1,7 +1,8 @@
-import type { AnyComposition, TFolder } from 'remotion';
+import type { TComposition, TFolder } from 'remotion';
 import type { CompositionSelectorItemType } from '../components/CompositionSelectorItem';
 export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;
 };
-export declare const createFolderTree: (comps: AnyComposition[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];
+export declare const findItemListToPush: (items: CompositionSelectorItemType[], folderName: string | null, parentName: string | null) => CompositionSelectorItemType[];
+export declare const createFolderTree: (comps: TComposition<unknown>[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];

package/dist/editor/helpers/create-folder-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFolderTree = exports.splitParentIntoNameAndParent = void 0;
+exports.createFolderTree = exports.findItemListToPush = exports.splitParentIntoNameAndParent = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
 const splitParentIntoNameAndParent = (name) => {
     if (name === null) {
@@ -44,6 +44,7 @@ const findItemListToPush = (items, folderName, parentName) => {
     }
     return folder;
 };
+exports.findItemListToPush = findItemListToPush;
 const createFolderIfDoesNotExist = (items, availableFolders, folderItem, foldersExpanded) => {
     var _a;
     if (doesFolderExist(items, folderItem.name, folderItem.parent)) {
@@ -57,7 +58,7 @@ const createFolderIfDoesNotExist = (items, availableFolders, folderItem, folders
         }
         createFolderIfDoesNotExist(items, availableFolders, parent, foldersExpanded);
     }
-    const itemList = findItemListToPush(items, splitted.name, splitted.parent);
+    const itemList = (0, exports.findItemListToPush)(items, splitted.name, splitted.parent);
     if (!itemList) {
         throw new Error('why did folder not exist? ' + folderItem.name);
     }
@@ -92,7 +93,7 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
             composition: item,
             key: item.id,
         };
-        const list = findItemListToPush(items, item.folderName, item.parentFolderName);
+        const list = (0, exports.findItemListToPush)(items, item.folderName, item.parentFolderName);
         list.push(toPush);
     }
     return items;

package/dist/editor/helpers/get-timeline-sequence-layout.d.ts

@@ -1,11 +1,11 @@
-import type { AnyComposition } from 'remotion';
+import type { TComposition } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
 export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }: {
     durationInFrames: number;
     startFrom: number;
     startFromMedia: number;
     maxMediaDuration: number | null;
-    video: AnyComposition;
+    video: TComposition<unknown>;
     windowWidth: number;
 }) => {
     marginLeft: number;

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

@@ -1,5 +1,5 @@
 import type { TSequence } from 'remotion';
-declare type Track = {
+export declare type Track = {
     sequence: TSequence;
     depth: number;
 };
@@ -15,4 +15,3 @@ export declare type TrackWithHashAndOriginalTimings = TrackWithHash & {
 export declare const getTimelineSequenceSequenceSortKey: (track: TrackWithHash, tracks: TrackWithHash[], sameHashes?: {
     [hash: string]: string[];
 }) => string;
-export {};

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,2 +1,2 @@
-import type { AnyComposition } from 'remotion';
-export declare const isCompositionStill: (comp: AnyComposition | null) => boolean;
+import type { TComposition } from 'remotion';
+export declare const isCompositionStill: (comp: TComposition) => boolean;

package/dist/editor/helpers/is-composition-still.js

@@ -2,9 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isCompositionStill = void 0;
 const isCompositionStill = (comp) => {
-    if (!comp) {
-        return false;
-    }
     return comp.durationInFrames === 1;
 };
 exports.isCompositionStill = isCompositionStill;

package/dist/editor/helpers/use-keybinding.d.ts

@@ -7,7 +7,6 @@ export declare const useKeybinding: () => {
         commandCtrlKey: boolean;
         callback: (e: KeyboardEvent) => void;
         preventDefault: boolean;
-        triggerIfInputFieldFocused: boolean;
     }) => {
         unregister: () => void;
     };

package/dist/editor/helpers/use-keybinding.js

@@ -32,15 +32,6 @@ const useKeybinding = () => {
                 : e.ctrlKey;
             if (e.key.toLowerCase() === options.key.toLowerCase() &&
                 options.commandCtrlKey === commandKey) {
-                if (!options.triggerIfInputFieldFocused) {
-                    const { activeElement } = document;
-                    if (activeElement instanceof HTMLInputElement) {
-                        return;
-                    }
-                    if (activeElement instanceof HTMLTextAreaElement) {
-                        return;
-                    }
-                }
                 options.callback(e);
                 if (options.preventDefault) {
                     e.preventDefault();