@remotion/cli 4.0.0-alpha12 → 4.0.0-alpha14

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

@@ -10,21 +10,21 @@ const width = {
     position: 'relative',
 };
 const icon = {
-    height: 12,
-    width: 12,
+    height: 14,
+    width: 14,
 };
 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,
+    height: 5,
     width: 1,
-    background: 'linear-gradient(to top, transparent, rgba(255, 255, 255, 0.7))',
+    background: 'white',
 };
 const bottomLine = {
     top: 0,
-    height: 10,
+    height: 5,
     width: 1,
-    background: 'linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent)',
+    background: 'white',
 };
 const topContainer = {
     justifyContent: 'flex-start',

package/dist/editor/components/Timeline/TimelineWidthProvider.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type TimelineWidthContextType = number | null;
+type TimelineWidthContextType = number | null;
 export declare const TimelineWidthContext: import("react").Context<TimelineWidthContextType>;
 export declare const TimelineWidthProvider: React.FC<{
     children: React.ReactNode;

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

@@ -39,6 +39,6 @@ const TimelineZoomControls = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

package/dist/editor/components/Timeline/timeline-state-reducer.d.ts

@@ -1,9 +1,9 @@
-export declare type TimelineViewState = {
+export type TimelineViewState = {
     collapsed: {
         [key: string]: boolean;
     };
 };
-export declare type TimelineActionState = {
+export type TimelineActionState = {
     type: 'collapse';
     hash: string;
 } | {

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

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

package/dist/editor/components/UpdateCheck.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
     color: colors_1.BLUE,
@@ -21,10 +22,7 @@ const UpdateCheck = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
-        fetch('/api/update', {
-            signal: controller.signal,
-        })
-            .then((res) => res.json())
+        (0, actions_1.updateAvailable)(controller.signal)
             .then((d) => {
             setInfo(d);
         })

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

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare type ZodType = Awaited<typeof import('zod')>['z'];
-export declare type ZodTypesType = Awaited<typeof import('@remotion/zod-types')>;
+export type ZodType = Awaited<typeof import('zod')>['z'];
+export type ZodTypesType = Awaited<typeof import('@remotion/zod-types')>;
 export declare const getZodIfPossible: () => Promise<ZodType | null>;
 export declare const getZTypesIfPossible: () => Promise<ZodTypesType | null>;
 export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;

package/dist/editor/helpers/client-id.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type PreviewServerState = {
+type PreviewServerState = {
     type: 'init';
 } | {
     type: 'connected';

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.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "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.d.ts

@@ -1,13 +1,13 @@
 import type { TSequence } from 'remotion';
-declare type Track = {
+type Track = {
     sequence: TSequence;
     depth: number;
 };
-export declare type TrackWithHash = Track & {
+export type TrackWithHash = Track & {
     hash: string;
     canCollapse: boolean;
 };
-export declare type TrackWithHashAndOriginalTimings = TrackWithHash & {
+export type TrackWithHashAndOriginalTimings = TrackWithHash & {
     hash: string;
     cascadedStart: number;
     cascadedDuration: number;

package/dist/editor/helpers/persist-open-folders.d.ts

@@ -1,4 +1,4 @@
 export declare const openFolderKey: (folderName: string, parentName: string | null) => string;
-export declare type ExpandedFoldersState = Record<string, boolean>;
+export type ExpandedFoldersState = Record<string, boolean>;
 export declare const persistExpandedFolders: (state: ExpandedFoldersState) => void;
 export declare const loadExpandedFolders: () => ExpandedFoldersState;

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-declare type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';
+type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';
 export declare const useRenderModalSections: (renderMode: RenderType, codec: Codec) => {
     tab: Section;
     setTab: import("react").Dispatch<import("react").SetStateAction<Section>>;

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/helpers/use-menu-structure.d.ts

@@ -1,7 +1,7 @@
 import type { Menu } from '../components/Menu/MenuItem';
 import type { TQuickSwitcherResult } from '../components/QuickSwitcher/QuickSwitcherResult';
 import type { ModalState } from '../state/modals';
-declare type Structure = Menu[];
+type Structure = Menu[];
 export declare const useMenuStructure: (closeMenu: () => void) => Structure;
 export declare const makeSearchResults: (actions: Structure, setSelectedModal: (value: React.SetStateAction<ModalState | null>) => void) => TQuickSwitcherResult[];
 export {};

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

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/film.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilmIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FilmIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M488 64h-8v20c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V64H96v20c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12V64h-8C10.7 64 0 74.7 0 88v336c0 13.3 10.7 24 24 24h8v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h320v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h8c13.3 0 24-10.7 24-24V88c0-13.3-10.7-24-24-24zM96 372c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm280 208c0 6.6-5.4 12-12 12H148c-6.6 0-12-5.4-12-12V124c0-6.6 5.4-12 12-12h216c6.6 0 12 5.4 12 12v264zm104-16c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40z" }) }));
+};
+exports.FilmIcon = FilmIcon;

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

@@ -1,3 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
-export declare const Plus: React.FC<SVGProps<SVGSVGElement>>;
+export declare const Plus: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/plus.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Plus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Plus = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" }) }));
+const Plus = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" }) }));
 };
 exports.Plus = Plus;

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

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const TimelineIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/timeline.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineIcon = (props) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }) }));
+};
+exports.TimelineIcon = TimelineIcon;

package/dist/editor/state/checkerboard.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type State = {
+type State = {
     checkerboard: boolean;
     setCheckerboard: (cb: (prevState: boolean) => boolean) => void;
 };

package/dist/editor/state/editor-zoom-gestures.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type State = {
+type State = {
     editorZoomGestures: boolean;
     setEditorZoomGestures: (cb: (prevState: boolean) => boolean) => void;
 };

package/dist/editor/state/folders.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
-declare type TFolderContext = {
+type TFolderContext = {
     foldersExpanded: ExpandedFoldersState;
     setFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
 };

package/dist/editor/state/highest-z-index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type HighestZIndexContainer = {
+type HighestZIndexContainer = {
     highestIndex: number;
     registerZIndex: (index: number) => void;
     unregisterZIndex: (index: number) => void;

package/dist/editor/state/in-out.d.ts

@@ -1,9 +1,9 @@
 import type React from 'react';
-export declare type TimelineInOutContextValue = {
+export type TimelineInOutContextValue = {
     inFrame: number | null;
     outFrame: number | null;
 };
-export declare type SetTimelineInOutContextValue = {
+export type SetTimelineInOutContextValue = {
     setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
 };
 export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;

package/dist/editor/state/keybindings.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-export declare type KeyEventType = 'keydown' | 'keyup' | 'keypress';
-declare type KeyListenerCallback = (e: KeyboardEvent) => void;
-export declare type RegisteredKeybinding = {
+export type KeyEventType = 'keydown' | 'keyup' | 'keypress';
+type KeyListenerCallback = (e: KeyboardEvent) => void;
+export type RegisteredKeybinding = {
     registeredFromPane: string;
     id: string;
     key: string;
     event: KeyEventType;
     callback: KeyListenerCallback;
 };
-export declare type KeybindingContextType = {
+export type KeybindingContextType = {
     registerKeybinding: (binding: RegisteredKeybinding) => void;
     unregisterKeybinding: (binding: RegisteredKeybinding) => void;
     unregisterPane: (paneId: string) => void;

package/dist/editor/state/modals.d.ts

@@ -3,8 +3,8 @@ import type React from 'react';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 import type { UpdateInfo } from '../components/UpdateCheck';
-export declare type CompType = 'composition' | 'still';
-export declare type RenderModalState = {
+export type CompType = 'composition' | 'still';
+export type RenderModalState = {
     type: 'render';
     compositionId: string;
     initialFrame: number;
@@ -39,7 +39,7 @@ export declare type RenderModalState = {
     inFrameMark: number | null;
     outFrameMark: number | null;
 };
-export declare type ModalState = {
+export type ModalState = {
     type: 'new-comp';
     compType: CompType;
 } | RenderModalState | {
@@ -53,7 +53,7 @@ export declare type ModalState = {
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
 };
-export declare type ModalContextType = {
+export type ModalContextType = {
     selectedModal: ModalState | null;
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };

package/dist/editor/state/preview-size.d.ts

@@ -1,6 +1,6 @@
 import type { PreviewSize } from '@remotion/player';
 import React from 'react';
-declare type PreviewSizeCtx = {
+type PreviewSizeCtx = {
     size: PreviewSize;
     setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
 };

package/dist/editor/state/rich-timeline.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type State = {
+    richTimeline: boolean;
+    setRichTimeline: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistRichTimelineOption: (option: boolean) => void;
+export declare const loadRichTimelineOption: () => boolean;
+export declare const RichTimelineContext: import("react").Context<State>;
+export {};

package/dist/editor/state/rich-timeline.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTimelineContext = exports.loadRichTimelineOption = exports.persistRichTimelineOption = void 0;
+const react_1 = require("react");
+const persistRichTimelineOption = (option) => {
+    localStorage.setItem('richTimeline', String(option));
+};
+exports.persistRichTimelineOption = persistRichTimelineOption;
+const loadRichTimelineOption = () => {
+    const item = localStorage.getItem('richTimeline');
+    return item === 'true';
+};
+exports.loadRichTimelineOption = loadRichTimelineOption;
+exports.RichTimelineContext = (0, react_1.createContext)({
+    richTimeline: (0, exports.loadRichTimelineOption)(),
+    setRichTimeline: () => undefined,
+});

package/dist/editor/state/sidebar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-export declare type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
-declare type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
-declare type Context = {
+export type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
+type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
+type Context = {
     sidebarCollapsedStateLeft: SidebarCollapsedState;
     setSidebarCollapsedState: (options: {
         left: null | React.SetStateAction<SidebarCollapsedState>;

package/dist/editor/state/timeline-ref.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type TimelineRef = {
+type TimelineRef = {
     collapseAll: () => void;
     expandAll: () => void;
 };

package/dist/event-source-events.d.ts

@@ -1,6 +1,6 @@
 import type { StaticFile } from 'remotion';
 import type { RenderJob } from './preview-server/render-queue/job';
-export declare type EventSourceEvent = {
+export type EventSourceEvent = {
     type: 'new-input-props';
     newProps: object;
 } | {

package/dist/file-watcher.d.ts

@@ -1,4 +1,4 @@
-declare type FileChangeType = 'created' | 'deleted' | 'changed';
+type FileChangeType = 'created' | 'deleted' | 'changed';
 export declare const installFileWatcher: ({ file, onChange, }: {
     file: string;
     onChange: (type: FileChangeType) => void;

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

@@ -11,7 +11,7 @@ export declare const getCliOptions: (options: {
     shouldOutputImageSequence: boolean;
     inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
-    jpegQuality: number | undefined;
+    jpegQuality: number;
     browser: import("@remotion/renderer").Browser;
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";

package/dist/get-composition-id.d.ts

@@ -1,20 +1,19 @@
-import type { BrowserExecutable, BrowserLog, ChromiumOptions, DownloadMap, HeadlessBrowser } from '@remotion/renderer';
+import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, RemotionServer } from '@remotion/renderer';
 import type { AnyCompMetadata } from 'remotion';
-export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, downloadMap, serveUrlOrWebpackUrl, verbose, onBrowserLog, indent, }: {
+export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, verbose, indent, server, }: {
     args: string[];
     compositionIdFromUi: string | null;
-    inputProps?: Record<string, unknown> | null | undefined;
-    puppeteerInstance?: HeadlessBrowser | undefined;
-    envVariables?: Record<string, string> | undefined;
-    timeoutInMilliseconds?: number | undefined;
-    chromiumOptions?: ChromiumOptions | undefined;
-    port?: number | null | undefined;
-    browserExecutable?: BrowserExecutable | undefined;
-    downloadMap?: DownloadMap | undefined;
+    inputProps: Record<string, unknown>;
+    puppeteerInstance: HeadlessBrowser | undefined;
+    envVariables: Record<string, string>;
+    timeoutInMilliseconds: number;
+    chromiumOptions: ChromiumOptions;
+    port: number | null;
+    browserExecutable: BrowserExecutable;
     serveUrlOrWebpackUrl: string;
     verbose: boolean;
-    onBrowserLog?: ((log: BrowserLog) => void) | undefined;
     indent: boolean;
+    server: RemotionServer;
 }) => Promise<{
     compositionId: string;
     reason: string;

package/dist/get-composition-id.js

@@ -15,13 +15,13 @@ const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
     const [compName, ...remainingArgs] = cliArgs;
     return { compName, remainingArgs, reason: 'Passed as argument' };
 };
-const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, downloadMap, serveUrlOrWebpackUrl, verbose, onBrowserLog, indent, }) => {
+const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, verbose, indent, server, }) => {
     const { compName, remainingArgs, reason: compReason, } = getCompName({
         cliArgs: args,
         compositionIdFromUi,
     });
     if (compName) {
-        const config = await (0, renderer_1.selectComposition)({
+        const config = await renderer_1.RenderInternals.internalSelectComposition({
             id: compName,
             inputProps,
             puppeteerInstance,
@@ -30,9 +30,11 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             serveUrl: serveUrlOrWebpackUrl,
             browserExecutable,
             chromiumOptions,
-            onBrowserLog,
             port,
             verbose,
+            server,
+            indent,
+            onBrowserLog: null,
         });
         if (!config) {
             throw new Error(`Cannot find composition with ID "${compName}"`);
@@ -45,7 +47,7 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
         };
     }
     if (!process.env.CI) {
-        const comps = await (0, renderer_1.getCompositions)(serveUrlOrWebpackUrl, {
+        const comps = await renderer_1.RenderInternals.internalGetCompositions({
             inputProps,
             puppeteerInstance,
             envVariables,
@@ -53,10 +55,11 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             chromiumOptions,
             port,
             browserExecutable,
-            downloadMap,
-            onBrowserLog,
             verbose,
             indent,
+            server,
+            serveUrlOrWebpackUrl,
+            onBrowserLog: null,
         });
         const { compositionId, reason } = await (0, show_compositions_picker_1.showSingleCompositionsPicker)(comps);
         if (compositionId && typeof compositionId === 'string') {

package/dist/get-composition-with-dimension-override.d.ts

@@ -1,6 +1,6 @@
-import type { BrowserExecutable, ChromiumOptions, DownloadMap, HeadlessBrowser } from '@remotion/renderer';
+import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, RemotionServer } from '@remotion/renderer';
 import type { AnyCompMetadata } from 'remotion';
-export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, downloadMap, serveUrlOrWebpackUrl, indent, inputProps, verbose, }: {
+export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }: {
     height: number | null;
     width: number | null;
     args: string[];
@@ -11,11 +11,11 @@ export declare const getCompositionWithDimensionOverride: ({ height, width, args
     chromiumOptions: ChromiumOptions;
     port: number | null;
     browserExecutable: BrowserExecutable | null;
-    downloadMap: DownloadMap | undefined;
     serveUrlOrWebpackUrl: string;
     indent: boolean;
     verbose: boolean;
-    inputProps: Record<string, unknown> | null;
+    inputProps: Record<string, unknown>;
+    server: RemotionServer;
 }) => Promise<{
     compositionId: string;
     reason: string;

package/dist/get-composition-with-dimension-override.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionWithDimensionOverride = void 0;
 const get_composition_id_1 = require("./get-composition-id");
-const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, downloadMap, serveUrlOrWebpackUrl, indent, inputProps, verbose, }) => {
+const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }) => {
     const returnValue = await (0, get_composition_id_1.getCompositionId)({
         args,
         compositionIdFromUi,
@@ -11,12 +11,12 @@ const getCompositionWithDimensionOverride = async ({ height, width, args, compos
         verbose,
         browserExecutable,
         chromiumOptions,
-        downloadMap,
         envVariables,
         inputProps,
         port,
         puppeteerInstance,
         timeoutInMilliseconds,
+        server,
     });
     return {
         ...returnValue,

package/dist/get-render-media-options.d.ts

@@ -0,0 +1,8 @@
+import type { Codec, RenderMediaOptions } from '@remotion/renderer';
+export declare const getRenderMediaOptions: ({ outputLocation, config, serveUrl, codec, remotionRoot, }: {
+    outputLocation: RenderMediaOptions['outputLocation'];
+    config: RenderMediaOptions['composition'];
+    serveUrl: string;
+    codec: Codec;
+    remotionRoot: string;
+}) => Promise<RenderMediaOptions>;

package/dist/get-render-media-options.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRenderMediaOptions = void 0;
+const renderer_1 = require("@remotion/renderer");
+const config_1 = require("./config");
+const get_audio_codec_1 = require("./get-audio-codec");
+const get_cli_options_1 = require("./get-cli-options");
+const image_formats_1 = require("./image-formats");
+const getRenderMediaOptions = async ({ outputLocation, config, serveUrl, codec, remotionRoot, }) => {
+    const { proResProfile, concurrency, frameRange, overwrite, inputProps, envVariables, quality, crf, pixelFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, } = await (0, get_cli_options_1.getCliOptions)({
+        isLambda: false,
+        type: 'series',
+        remotionRoot,
+    });
+    const imageFormat = (0, image_formats_1.getImageFormat)(codec);
+    const audioCodec = (0, get_audio_codec_1.getResolvedAudioCodec)();
+    return {
+        outputLocation,
+        composition: {
+            ...config,
+            width: width !== null && width !== void 0 ? width : config.width,
+            height: height !== null && height !== void 0 ? height : config.height,
+        },
+        crf,
+        envVariables,
+        ffmpegExecutable,
+        ffprobeExecutable,
+        frameRange,
+        imageFormat,
+        inputProps,
+        overwrite,
+        pixelFormat,
+        proResProfile,
+        quality,
+        dumpBrowserLogs: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
+        chromiumOptions,
+        timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
+        scale,
+        port,
+        numberOfGifLoops,
+        everyNthFrame,
+        verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
+        muted,
+        enforceAudioTrack,
+        browserExecutable,
+        ffmpegOverride,
+        concurrency,
+        serveUrl,
+        codec,
+        audioBitrate,
+        videoBitrate,
+        audioCodec,
+    };
+};
+exports.getRenderMediaOptions = getRenderMediaOptions;