@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

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

@@ -1,30 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const timeline_refs_1 = require("../components/Timeline/timeline-refs");
+exports.getXPositionOfItemInTimelineImperatively = void 0;
 const timeline_layout_1 = require("./timeline-layout");
-const useGetXPositionOfItemInTimeline = () => {
-    var _a;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
-    const get = (0, react_1.useCallback)((frame) => {
-        if (!videoConfig) {
-            return 0;
-        }
-        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;

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

@@ -13,8 +13,8 @@ const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDura
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    let 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) {

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

@@ -1,13 +1,13 @@
 import type { TSequence } from 'remotion';
-export 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;
@@ -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.js

@@ -5,12 +5,11 @@ 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 = () => {

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/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/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';
+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-compact-ui.js → use-breakpoint.js}

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCompactUI = void 0;
+exports.useBreakpoint = void 0;
 const react_1 = require("react");
-const breakpoint = 1200;
-function useCompactUI() {
+function useBreakpoint(breakpoint) {
     const [compactUI, setCompactUI] = (0, react_1.useState)(window.innerWidth < breakpoint);
     (0, react_1.useEffect)(() => {
         function handleResize() {
@@ -12,7 +11,7 @@ function useCompactUI() {
         window.addEventListener('resize', handleResize);
         handleResize();
         return () => window.removeEventListener('resize', handleResize);
-    }, []);
+    }, [breakpoint]);
     return compactUI;
 }
-exports.useCompactUI = useCompactUI;
+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.StudioServerConnectionCtx);
+    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

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

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
 if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
-    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
+    console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
 }
 const areKeyboardShortcutsDisabled = () => {
     return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
@@ -32,8 +32,19 @@ 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);
-                e.preventDefault();
+                if (options.preventDefault) {
+                    e.preventDefault();
+                }
             }
         };
         const toRegister = {

package/dist/editor/helpers/use-menu-structure.d.ts

@@ -0,0 +1,7 @@
+import type { Menu } from '../components/Menu/MenuItem';
+import type { TQuickSwitcherResult } from '../components/QuickSwitcher/QuickSwitcherResult';
+import type { ModalState } from '../state/modals';
+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 {};