@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/SidebarCollapserControls.js

@@ -1,138 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarCollapserControls = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const sidebar_1 = require("../state/sidebar");
-const InlineAction_1 = require("./InlineAction");
-const TopPanel_1 = require("./TopPanel");
-const style = {
-    width: 16,
-    height: 16,
-    minWidth: 16,
-    border: '1px solid currentColor',
-    borderRadius: 3,
-    color: 'currentColor',
-    position: 'relative',
-};
-const SidebarCollapserControls = () => {
-    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
-    const leftIcon = (0, react_1.useCallback)((color) => {
-        return {
-            width: '35%',
-            height: '100%',
-            borderRight: '1px solid ' + color,
-            background: leftSidebarStatus === 'expanded' ? color : 'transparent',
-        };
-    }, [leftSidebarStatus]);
-    const rightIcon = (0, react_1.useCallback)((color) => {
-        return {
-            width: '35%',
-            height: '100%',
-            right: 0,
-            position: 'absolute',
-            borderLeft: '1px solid ' + color,
-            background: sidebarCollapsedStateRight === 'expanded' ? color : 'transparent',
-        };
-    }, [sidebarCollapsedStateRight]);
-    const toggleLeft = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState({
-            left: (s) => {
-                if (s === 'responsive') {
-                    return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
-                }
-                return s === 'collapsed' ? 'expanded' : 'collapsed';
-            },
-            right: null,
-        });
-    }, [leftSidebarStatus, setSidebarCollapsedState]);
-    const toggleRight = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState({
-            right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
-            left: null,
-        });
-    }, [setSidebarCollapsedState]);
-    const toggleBoth = (0, react_1.useCallback)(() => {
-        if (sidebarCollapsedStateRight === leftSidebarStatus) {
-            setSidebarCollapsedState({
-                left: (s) => {
-                    if (s === 'responsive') {
-                        return leftSidebarStatus === 'collapsed' ? 'expanded' : 'collapsed';
-                    }
-                    return s === 'collapsed' ? 'expanded' : 'collapsed';
-                },
-                right: (s) => (s === 'collapsed' ? 'expanded' : 'collapsed'),
-            });
-        }
-        else if (sidebarCollapsedStateRight === 'expanded') {
-            toggleRight();
-        }
-        else if (leftSidebarStatus === 'expanded') {
-            toggleLeft();
-        }
-    }, [
-        leftSidebarStatus,
-        setSidebarCollapsedState,
-        sidebarCollapsedStateRight,
-        toggleLeft,
-        toggleRight,
-    ]);
-    (0, react_1.useEffect)(() => {
-        const left = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'b',
-            commandCtrlKey: true,
-            callback: toggleLeft,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const right = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'j',
-            commandCtrlKey: true,
-            callback: toggleRight,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zen = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'g',
-            commandCtrlKey: true,
-            callback: toggleBoth,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            left.unregister();
-            right.unregister();
-            zen.unregister();
-        };
-    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
-        ? 'Toggle Left Sidebar'
-        : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
-        ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
-    const colorStyle = (0, react_1.useCallback)((color) => {
-        return {
-            ...style,
-            color,
-        };
-    }, []);
-    const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
-    }, [colorStyle, leftIcon, toggleLeftTooltip]);
-    const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
-    }, [colorStyle, rightIcon, toggleRightTooltip]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
-};
-exports.SidebarCollapserControls = SidebarCollapserControls;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { AnyCompMetadata } from 'remotion';
-export declare const SidebarRenderButton: React.FC<{
-    composition: AnyCompMetadata;
-    visible: boolean;
-}>;

package/dist/editor/components/SidebarRenderButton.js

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarRenderButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
-const render_1 = require("../icons/render");
-const modals_1 = require("../state/modals");
-const InlineAction_1 = require("./InlineAction");
-const SidebarRenderButton = ({ composition, visible }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const iconStyle = (0, react_1.useMemo)(() => {
-        return {
-            style: {
-                height: 12,
-            },
-        };
-    }, []);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
-    const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const onClick = (0, react_1.useCallback)((e) => {
-        var _a;
-        const defaults = window.remotion_renderDefaults;
-        if (!defaults) {
-            throw new Error('expected defaults');
-        }
-        e.stopPropagation();
-        setSelectedModal({
-            type: 'render',
-            compositionId: composition.id,
-            initialFrame: 0,
-            initialVideoImageFormat: defaults.videoImageFormat,
-            initialStillImageFormat: defaults.stillImageFormat,
-            initialJpegQuality: defaults.jpegQuality,
-            initialScale: defaults.scale,
-            initialLogLevel: defaults.logLevel,
-            initialConcurrency: defaults.concurrency,
-            maxConcurrency: defaults.maxConcurrency,
-            minConcurrency: defaults.minConcurrency,
-            initialMuted: defaults.muted,
-            initialEnforceAudioTrack: defaults.enforceAudioTrack,
-            initialProResProfile: defaults.proResProfile,
-            initialx264Preset: defaults.x264Preset,
-            initialPixelFormat: defaults.pixelFormat,
-            initialAudioBitrate: defaults.audioBitrate,
-            initialVideoBitrate: defaults.videoBitrate,
-            initialEveryNthFrame: defaults.everyNthFrame,
-            initialNumberOfGifLoops: defaults.numberOfGifLoops,
-            initialDelayRenderTimeout: defaults.delayRenderTimeout,
-            defaultConfigurationAudioCodec: defaults.audioCodec,
-            initialEnvVariables: window.process.env,
-            initialDisableWebSecurity: defaults.disableWebSecurity,
-            initialOpenGlRenderer: defaults.openGlRenderer,
-            initialHeadless: defaults.headless,
-            initialOffthreadVideoCacheSizeInBytes: defaults.offthreadVideoCacheSizeInBytes,
-            initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
-            defaultProps: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
-            inFrameMark: null,
-            outFrameMark: null,
-            initialColorSpace: defaults.colorSpace,
-            initialMultiProcessOnLinux: defaults.multiProcessOnLinux,
-            defaultConfigurationVideoCodec: defaults.codec,
-        });
-    }, [composition.defaultProps, composition.id, props, setSelectedModal]);
-    const renderAction = (0, react_1.useCallback)((color) => {
-        return (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });
-    }, [iconStyle]);
-    if (!visible || connectionStatus !== 'connected') {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
-};
-exports.SidebarRenderButton = SidebarRenderButton;

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

@@ -1,5 +0,0 @@
-import type { PreviewSize } from '@remotion/player';
-import React from 'react';
-export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
-export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
-export declare const SizeSelector: React.FC;

package/dist/editor/components/SizeSelector.js

@@ -1,120 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const Checkmark_1 = require("../icons/Checkmark");
-const preview_size_1 = require("../state/preview-size");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
-const Preview_1 = require("./Preview");
-const commonPreviewSizes = [
-    {
-        size: 'auto',
-        translation: {
-            x: 0,
-            y: 0,
-        },
-    },
-    {
-        size: 0.25,
-        translation: {
-            x: 0,
-            y: 0,
-        },
-    },
-    {
-        size: 0.5,
-        translation: {
-            x: 0,
-            y: 0,
-        },
-    },
-    {
-        size: 1,
-        translation: {
-            x: 0,
-            y: 0,
-        },
-    },
-];
-const getPreviewSizeLabel = (previewSize) => {
-    if (previewSize.size === 'auto') {
-        return 'Fit';
-    }
-    return `${(previewSize.size * 100).toFixed(0)}%`;
-};
-exports.getPreviewSizeLabel = getPreviewSizeLabel;
-const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 80 };
-const getUniqueSizes = (size) => {
-    const customPreviewSizes = [size, ...commonPreviewSizes];
-    const uniqueSizes = [];
-    customPreviewSizes.forEach((p) => {
-        if (!uniqueSizes.find((s) => s.size === p.size)) {
-            uniqueSizes.push(p);
-        }
-    });
-    return uniqueSizes.sort((a, b) => {
-        if (a.size === 'auto') {
-            return -1;
-        }
-        if (b.size === 'auto') {
-            return 1;
-        }
-        return a.size - b.size;
-    });
-};
-exports.getUniqueSizes = getUniqueSizes;
-const zoomableFileTypes = ['video', 'image'];
-const SizeSelector = () => {
-    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
-        };
-    }, []);
-    const zoomable = (0, react_1.useMemo)(() => {
-        if (!canvasContent) {
-            return null;
-        }
-        if (canvasContent.type === 'composition') {
-            return true;
-        }
-        if (canvasContent.type === 'asset' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
-            return true;
-        }
-        if (canvasContent.type === 'output' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.path))) {
-            return true;
-        }
-        return false;
-    }, [canvasContent]);
-    const items = (0, react_1.useMemo)(() => {
-        return (0, exports.getUniqueSizes)(size).map((newSize) => {
-            return {
-                id: String(newSize.size),
-                label: (0, exports.getPreviewSizeLabel)(newSize),
-                onClick: () => {
-                    return setSize(() => {
-                        return newSize;
-                    });
-                },
-                type: 'item',
-                value: newSize.size,
-                keyHint: newSize.size === 'auto' ? '0' : null,
-                leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            };
-        });
-    }, [setSize, size]);
-    if (!zoomable) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
-};
-exports.SizeSelector = SizeSelector;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const Spinner: React.FC<{
-    size: number;
-    duration: number;
-}>;

package/dist/editor/components/Spinner.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const viewBox = 100;
-const lines = 6;
-const className = '__remotion_spinner_line';
-const remotionSpinnerAnimation = '__remotion_spinner_animation';
-// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
-const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-const Spinner = ({ size, duration }) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            width: size,
-            height: size,
-        };
-    }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
-				@keyframes ${remotionSpinnerAnimation} {
-          0% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0.15;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
-        }        
-			` }), (0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
-                    return ((0, jsx_runtime_1.jsx)("path", { className: className, style: {
-                            rotate: `${(index * Math.PI * 2) / lines}rad`,
-                            transformOrigin: 'center center',
-                            animationDelay: `${index * (duration / lines) - duration}s`,
-                        }, d: translated, fill: colors_1.LIGHT_TEXT }, index));
-                }) })] }));
-};
-exports.Spinner = Spinner;

package/dist/editor/components/Splitter/SplitterContainer.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { SplitterOrientation } from './SplitterContext';
-export declare const SplitterContainer: React.FC<{
-    orientation: SplitterOrientation;
-    maxFlex: number;
-    minFlex: number;
-    id: string;
-    defaultFlex: number;
-    children: React.ReactNode;
-}>;

package/dist/editor/components/Splitter/SplitterContainer.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const timeline_1 = require("../../state/timeline");
-const SplitterContext_1 = require("./SplitterContext");
-const containerRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 1,
-    height: '100%',
-};
-const containerColumn = {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    height: '100%',
-};
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
-    const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
-    const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
-    const [domRect, setDomRect] = (0, react_1.useState)(null);
-    const ref = (0, react_1.useRef)(null);
-    const isDragging = (0, react_1.useRef)(false);
-    const [resizeObserver] = (0, react_1.useState)(() => {
-        return new ResizeObserver((entries) => {
-            setDomRect(entries[0].contentRect);
-        });
-    });
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        resizeObserver.observe(current);
-        return () => resizeObserver.unobserve(current);
-    }, [resizeObserver]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        setDomRect((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null);
-    }, []);
-    const value = (0, react_1.useMemo)(() => {
-        return {
-            flexValue,
-            domRect,
-            setFlexValue,
-            isDragging,
-            orientation,
-            id,
-            maxFlex,
-            minFlex,
-            defaultFlex,
-            persistFlex,
-        };
-    }, [
-        defaultFlex,
-        domRect,
-        flexValue,
-        id,
-        maxFlex,
-        minFlex,
-        orientation,
-        persistFlex,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? containerColumn : containerRow, children: children }) }));
-};
-exports.SplitterContainer = SplitterContainer;

package/dist/editor/components/Splitter/SplitterContext.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-export type SplitterDragState = false | {
-    x: number;
-    y: number;
-};
-export type SplitterOrientation = 'horizontal' | 'vertical';
-export type TSplitterContext = {
-    flexValue: number;
-    setFlexValue: React.Dispatch<React.SetStateAction<number>>;
-    domRect: DOMRect | DOMRectReadOnly | null;
-    orientation: SplitterOrientation;
-    maxFlex: number;
-    minFlex: number;
-    defaultFlex: number;
-    id: string;
-    persistFlex: (value: number) => void;
-    isDragging: React.MutableRefObject<false | {
-        x: number;
-        y: number;
-    }>;
-};
-export declare const SplitterContext: React.Context<TSplitterContext>;

package/dist/editor/components/Splitter/SplitterContext.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterContext = void 0;
-const react_1 = __importDefault(require("react"));
-exports.SplitterContext = react_1.default.createContext({
-    flexValue: 1,
-    domRect: null,
-    setFlexValue: () => undefined,
-    isDragging: { current: false },
-    orientation: 'horizontal',
-    maxFlex: 1,
-    minFlex: 1,
-    defaultFlex: 1,
-    id: '--',
-    persistFlex: () => undefined,
-});

package/dist/editor/components/Splitter/SplitterElement.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const SplitterElement: React.FC<{
-    type: 'flexer' | 'anti-flexer';
-    children: React.ReactNode;
-}>;

package/dist/editor/components/Splitter/SplitterElement.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterElement = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const SplitterContext_1 = require("./SplitterContext");
-const SplitterElement = ({ children, type }) => {
-    const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            flex: 
-            // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
-            (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
-            display: 'flex',
-            position: 'relative',
-            overflow: 'hidden',
-            flexDirection: 'column',
-        };
-    }, [context.flexValue, type]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });
-};
-exports.SplitterElement = SplitterElement;

package/dist/editor/components/Splitter/SplitterHandle.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const SplitterHandle: React.FC<{
-    allowToCollapse: 'right' | 'left' | 'none';
-    onCollapse: () => void;
-}>;