@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

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

@@ -3,14 +3,16 @@ 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';
+    justify?: 'center' | 'flex-start' | 'flex-end';
     align?: 'center';
     style?: React.CSSProperties;
+    flex?: number;
     className?: string;
     children: React.ReactNode;
 }>;

package/dist/editor/components/layout.js

@@ -4,21 +4,22 @@ 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 }) => {
+const Spacing = ({ x = 0, y = 0, block = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
-            display: 'inline-block',
+            display: block ? 'block' : 'inline-block',
             width: x * exports.SPACING_UNIT,
             height: y * exports.SPACING_UNIT,
+            flexShrink: 0,
         };
-    }, [x, y]);
+    }, [block, x, y]);
     return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
-const flex = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
+const flexCss = { flex: 1 };
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
 exports.Flex = Flex;
-const Row = ({ children, justify, className, align, style = {} }) => {
+const Row = ({ children, justify, className, align, flex, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -26,8 +27,9 @@ const Row = ({ children, justify, className, align, 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, justify, style]);
+    }, [align, flex, 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,9 +1,5 @@
 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/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const PreviewServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const previewServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/helpers/client-id.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewServerConnection = exports.previewServerConnectionRef = exports.PreviewServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.PreviewServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.previewServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.previewServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

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

@@ -4,11 +4,13 @@ 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 SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
+export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 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,21 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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.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.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
+exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
+const 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 exports.SELECTED_HOVER_BACKGROUND;
+            return SELECTED_HOVER_BACKGROUND;
         }
         return exports.SELECTED_BACKGROUND;
     }

package/dist/editor/helpers/convert-env-variables.d.ts

@@ -0,0 +1,2 @@
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
+export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;

package/dist/editor/helpers/convert-env-variables.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.envVariablesArrayToObject = exports.envVariablesObjectToArray = void 0;
+const envVariablesObjectToArray = (envVariables) => {
+    return Object.entries(envVariables).map(([key, one]) => [
+        key.trim().toUpperCase(),
+        one.trim(),
+    ]);
+};
+exports.envVariablesObjectToArray = envVariablesObjectToArray;
+const envVariablesArrayToObject = (envVariables) => {
+    return envVariables
+        .map(([key, val]) => [key.trim(), val.trim()])
+        .filter(([key, val]) => key && val)
+        .reduce((acc, [key, value]) => {
+        acc[key.toUpperCase()] = value;
+        return acc;
+    }, {});
+};
+exports.envVariablesArrayToObject = envVariablesArrayToObject;

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

@@ -1,8 +1,7 @@
-import type { TComposition, TFolder } from 'remotion';
+import type { AnyComposition, 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 findItemListToPush: (items: CompositionSelectorItemType[], folderName: string | null, parentName: string | null) => CompositionSelectorItemType[];
-export declare const createFolderTree: (comps: TComposition<unknown>[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];
+export declare const createFolderTree: (comps: AnyComposition[], 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.findItemListToPush = exports.splitParentIntoNameAndParent = void 0;
+exports.createFolderTree = exports.splitParentIntoNameAndParent = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
 const splitParentIntoNameAndParent = (name) => {
     if (name === null) {
@@ -44,7 +44,6 @@ 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)) {
@@ -58,7 +57,7 @@ const createFolderIfDoesNotExist = (items, availableFolders, folderItem, folders
         }
         createFolderIfDoesNotExist(items, availableFolders, parent, foldersExpanded);
     }
-    const itemList = (0, exports.findItemListToPush)(items, splitted.name, splitted.parent);
+    const itemList = findItemListToPush(items, splitted.name, splitted.parent);
     if (!itemList) {
         throw new Error('why did folder not exist? ' + folderItem.name);
     }
@@ -93,7 +92,7 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
             composition: item,
             key: item.id,
         };
-        const list = (0, exports.findItemListToPush)(items, item.folderName, item.parentFolderName);
+        const list = 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 { TComposition } from 'remotion';
+import type { AnyComposition } 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: TComposition<unknown>;
+    video: AnyComposition;
     windowWidth: number;
 }) => {
     marginLeft: number;

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

@@ -1,5 +1,5 @@
 import type { TSequence } from 'remotion';
-export declare type Track = {
+declare type Track = {
     sequence: TSequence;
     depth: number;
 };
@@ -15,3 +15,4 @@ 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 { TComposition } from 'remotion';
-export declare const isCompositionStill: (comp: TComposition) => boolean;
+import type { AnyComposition } from 'remotion';
+export declare const isCompositionStill: (comp: AnyComposition | null) => boolean;

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

@@ -2,6 +2,9 @@
 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/prores-labels.d.ts

@@ -0,0 +1,2 @@
+import type { ProResProfile } from '@remotion/renderer';
+export declare const labelProResProfile: (profile: ProResProfile) => "4444" | "4444 XQ (Best)" | "HQ" | "Proxy (Worst)" | "Light" | "Standard";

package/dist/editor/helpers/prores-labels.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.labelProResProfile = void 0;
+const labelProResProfile = (profile) => {
+    if (profile === '4444') {
+        return '4444';
+    }
+    if (profile === '4444-xq') {
+        return '4444 XQ (Best)';
+    }
+    if (profile === 'hq') {
+        return 'HQ';
+    }
+    if (profile === 'proxy') {
+        return 'Proxy (Worst)';
+    }
+    if (profile === 'light') {
+        return 'Light';
+    }
+    if (profile === 'standard') {
+        return 'Standard';
+    }
+    throw new TypeError(`Unknown ProRes profile: ${profile}`);
+};
+exports.labelProResProfile = labelProResProfile;

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

@@ -0,0 +1,10 @@
+/// <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';
+export declare const useRenderModalSections: (renderMode: RenderType, codec: Codec) => {
+    tab: Section;
+    setTab: import("react").Dispatch<import("react").SetStateAction<Section>>;
+    shownTabs: Section[];
+};
+export {};

package/dist/editor/helpers/render-modal-sections.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderModalSections = void 0;
+const react_1 = require("react");
+const useRenderModalSections = (renderMode, codec) => {
+    const [selectedTab, setTab] = (0, react_1.useState)('general');
+    const shownTabs = (0, react_1.useMemo)(() => {
+        if (renderMode === 'audio') {
+            return ['general', 'data', 'audio', 'advanced'];
+        }
+        if (renderMode === 'still') {
+            return ['general', 'data', 'picture', 'advanced'];
+        }
+        if (renderMode === 'video') {
+            if (codec === 'gif') {
+                return ['general', 'data', 'picture', 'gif', 'advanced'];
+            }
+            return ['general', 'data', 'picture', 'audio', 'advanced'];
+        }
+        throw new TypeError('Unknown render mode');
+    }, [codec, renderMode]);
+    const tab = (0, react_1.useMemo)(() => {
+        if (!shownTabs.includes(selectedTab)) {
+            return shownTabs[0];
+        }
+        return selectedTab;
+    }, [selectedTab, shownTabs]);
+    return (0, react_1.useMemo)(() => {
+        return { tab, setTab, shownTabs };
+    }, [tab, shownTabs]);
+};
+exports.useRenderModalSections = useRenderModalSections;

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

@@ -0,0 +1 @@
+export declare function useBreakpoint(breakpoint: number): boolean;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+const react_1 = require("react");
+function useBreakpoint(breakpoint) {
+    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);
+    }, [breakpoint]);
+    return compactUI;
+}
+exports.useBreakpoint = useBreakpoint;

package/dist/editor/helpers/use-file-existence.d.ts

@@ -0,0 +1 @@
+export declare const useFileExistence: (outName: string) => boolean;

package/dist/editor/helpers/use-file-existence.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileExistence = void 0;
+const react_1 = require("react");
+const event_source_1 = require("../../event-source");
+const actions_1 = require("../components/RenderQueue/actions");
+const client_id_1 = require("./client-id");
+const useFileExistence = (outName) => {
+    const [exists, setExists] = (0, react_1.useState)(false);
+    const state = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const clientId = state.type === 'connected' ? state.clientId : undefined;
+    const currentOutName = (0, react_1.useRef)('');
+    currentOutName.current = outName;
+    (0, react_1.useEffect)(() => {
+        if (!clientId) {
+            return;
+        }
+        (0, actions_1.subscribeToFileExistenceWatcher)({
+            file: outName,
+            clientId,
+        }).then((_exists) => {
+            if (currentOutName.current === outName) {
+                setExists(_exists);
+            }
+        });
+        return () => {
+            (0, actions_1.unsubscribeFromFileExistenceWatcher)({ file: outName, clientId });
+        };
+    }, [clientId, outName]);
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => {
+            if (event.type !== 'watched-file-deleted') {
+                return;
+            }
+            if (event.file !== currentOutName.current) {
+                return;
+            }
+            if (currentOutName.current === outName) {
+                setExists(false);
+            }
+        };
+        const unsub = (0, event_source_1.subscribeToEvent)('watched-file-deleted', listener);
+        return () => {
+            unsub();
+        };
+    }, [outName]);
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => {
+            if (event.type !== 'watched-file-undeleted') {
+                return;
+            }
+            if (event.file !== outName) {
+                return;
+            }
+            if (currentOutName.current === outName) {
+                setExists(true);
+            }
+        };
+        const unsub = (0, event_source_1.subscribeToEvent)('watched-file-undeleted', listener);
+        return () => {
+            unsub();
+        };
+    }, [outName]);
+    return exists;
+};
+exports.useFileExistence = useFileExistence;

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

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

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

@@ -32,6 +32,15 @@ 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();