@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha10

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.studioServerConnectionRef = exports.StudioServerConnectionCtx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.StudioServerConnectionCtx = react_1.default.createContext({
+    type: 'init',
+});
+exports.studioServerConnectionRef = (0, react_1.createRef)();
+const PreviewServerConnection = ({ children }) => {
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useImperativeHandle)(exports.studioServerConnectionRef, () => {
+        return {
+            set: (newState) => {
+                setState(newState);
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: state, children: children }));
+};
+exports.PreviewServerConnection = PreviewServerConnection;

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

@@ -3,12 +3,17 @@ export declare const INPUT_BACKGROUND = "#2f363d";
 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 LIGHT_TEXT = "#A6A7A9";
+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 BLUE = "#0b84f3";
+export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/colors.js

@@ -1,20 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = 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.BLUE_DISABLED = exports.BLUE = 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.LIGHT_TEXT = '#A6A7A9';
+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';
+exports.BLUE = '#0b84f3';
+exports.BLUE_DISABLED = '#284f73';
 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-effective-translation.d.ts

@@ -0,0 +1,26 @@
+import type { Size, Translation } from '@remotion/player';
+export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
+    canvasSize: Size;
+    scale: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    translation: {
+        x: number;
+        y: number;
+    };
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};

package/dist/editor/helpers/get-effective-translation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.width / 2 +
+        (scale * compositionWidth) / 2 -
+        MUST_BE_INSIDE_CANVAS);
+    return Math.max(-maxTranslation, Math.min(translation.x, maxTranslation));
+};
+const MUST_BE_INSIDE_CANVAS = 50;
+const getEffectiveYTranslation = ({ canvasSize, scale, compositionHeight, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.height / 2 + (scale * compositionHeight) / 2) -
+        MUST_BE_INSIDE_CANVAS;
+    return Math.max(-maxTranslation, Math.min(translation.y, maxTranslation));
+};
+const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }) => {
+    return {
+        x: getEffectiveXTranslation({
+            canvasSize,
+            compositionWidth,
+            scale,
+            translation,
+        }),
+        y: getEffectiveYTranslation({
+            canvasSize,
+            compositionHeight,
+            scale,
+            translation,
+        }),
+    };
+};
+exports.getEffectiveTranslation = getEffectiveTranslation;
+const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+    const mouseLeft = clientX - size.left;
+    const mouseTop = clientY - size.top;
+    const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
+    const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
+    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
+    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
+    return {
+        centerX: offsetFromVideoLeft,
+        centerY: offsetFromVideoTop,
+    };
+};
+exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

package/dist/editor/helpers/get-left-of-timeline-slider.d.ts

@@ -2,3 +2,4 @@ export declare const useGetXPositionOfItemInTimeline: () => {
     get: (frame: number) => number;
     width: number;
 };
+export declare const getXPositionOfItemInTimelineImperatively: (frame: number, duration: number, width: number) => number;

package/dist/editor/helpers/get-left-of-timeline-slider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetXPositionOfItemInTimeline = void 0;
+exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -18,12 +18,15 @@ const useGetXPositionOfItemInTimeline = () => {
         if (!videoConfig) {
             return 0;
         }
-        return ((frame / (videoConfig.durationInFrames - 1)) *
-            (width - timeline_layout_1.TIMELINE_PADDING * 2) +
-            timeline_layout_1.TIMELINE_PADDING);
+        return (0, exports.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
     }, [videoConfig, width]);
     return (0, react_1.useMemo)(() => {
         return { get, width };
     }, [get, width]);
 };
 exports.useGetXPositionOfItemInTimeline = useGetXPositionOfItemInTimeline;
+const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
+    const proportion = frame / (duration - 1);
+    return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
+};
+exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

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

@@ -1,11 +1,11 @@
-import type { TComposition } from 'remotion';
+import type { VideoConfig } 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: VideoConfig;
     windowWidth: number;
 }) => {
     marginLeft: number;

package/dist/editor/helpers/get-timeline-sequence-layout.js

@@ -3,23 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
+const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    const base = durationInFrames === Infinity || lastFrame === 0
+        ? fullWidth
+        : (spatialDuration / lastFrame) * fullWidth;
+    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+};
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+    const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
+    const shouldAddHalfAFrameAtStart = startFrom > 0;
+    if (shouldAddHalfAFrameAtEnd) {
+        spatialDuration += 0.5;
+    }
+    if (shouldAddHalfAFrameAtStart) {
+        spatialDuration += 0.5;
+    }
+    const startFromWithOffset = shouldAddHalfAFrameAtStart
+        ? startFrom - 0.5
+        : startFrom;
     const marginLeft = lastFrame === 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
-    const negativeMarginLeft = Math.min(marginLeft, 0);
-    const width = (durationInFrames === Infinity || lastFrame === 0
-        ? windowWidth - timeline_layout_1.TIMELINE_PADDING * 2
-        : (spatialDuration / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2)) -
-        exports.SEQUENCE_BORDER_WIDTH +
-        negativeMarginLeft;
+        : (startFromWithOffset / lastFrame) *
+            (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     return {
         marginLeft: Math.round(Math.max(marginLeft, 0)),
-        width: Math.floor(width),
+        width: Math.floor(getWidthOfTrack({
+            durationInFrames,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration,
+            windowWidth,
+        })),
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

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,3 @@
-import type { TComposition } from 'remotion';
-export declare const isCompositionStill: (comp: TComposition) => boolean;
+export declare const isCompositionStill: (comp: {
+    durationInFrames: number;
+} | 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/is-current-selected-still.d.ts

@@ -1 +1,5 @@
 export declare const useIsStill: () => boolean;
+export declare const useDimensions: () => {
+    width: number;
+    height: number;
+} | null;

package/dist/editor/helpers/is-current-selected-still.js

@@ -1,15 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsStill = void 0;
+exports.useDimensions = exports.useIsStill = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
 const useIsStill = () => {
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
-    if (!selected) {
+    const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
+    if (!resolved || resolved.type !== 'success') {
         return false;
     }
-    return (0, is_composition_still_1.isCompositionStill)(selected);
+    return (0, is_composition_still_1.isCompositionStill)(resolved.result);
 };
 exports.useIsStill = useIsStill;
+const useDimensions = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    return (0, react_1.useMemo)(() => {
+        if (!selected) {
+            return null;
+        }
+        return {
+            width: selected.width,
+            height: selected.height,
+        };
+    }, [selected]);
+};
+exports.useDimensions = useDimensions;

package/dist/editor/helpers/open-in-editor.d.ts

@@ -0,0 +1,2 @@
+import type { SymbolicatedStackFrame } from '../../preview-server/error-overlay/react-overlay/utils/stack-frame';
+export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;

package/dist/editor/helpers/open-in-editor.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInEditor = void 0;
+const openInEditor = (stack) => {
+    const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
+    return fetch(`/api/open-in-editor`, {
+        method: 'post',
+        headers: {
+            'content-type': 'application/json',
+        },
+        body: JSON.stringify({
+            stack: {
+                originalFileName,
+                originalLineNumber,
+                originalColumnNumber,
+                originalFunctionName,
+                originalScriptCode,
+            },
+        }),
+    });
+};
+exports.openInEditor = openInEditor;

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;