@remotion/cli 4.0.0-lambda.1 → 4.0.0-newpathfunctions.13

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js

@@ -0,0 +1,269 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSwitcherContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const is_composition_still_1 = require("../../helpers/is-composition-still");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const use_menu_structure_1 = require("../../helpers/use-menu-structure");
+const modals_1 = require("../../state/modals");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
+const layout_1 = require("../layout");
+const algolia_search_1 = require("./algolia-search");
+const AlgoliaCredit_1 = require("./AlgoliaCredit");
+const fuzzy_search_1 = require("./fuzzy-search");
+const NoResults_1 = require("./NoResults");
+const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
+const input = {
+    padding: 4,
+    border: '2px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    width: '100%',
+};
+const modeSelector = {
+    paddingLeft: 16,
+    paddingRight: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingTop: 8,
+    paddingBottom: 5,
+};
+const modeItem = {
+    appearance: 'none',
+    border: 'none',
+    fontFamily: 'inherit',
+    padding: 0,
+    fontSize: 13,
+    cursor: 'pointer',
+};
+const modeInactive = {
+    ...modeItem,
+    color: colors_1.LIGHT_TEXT,
+};
+const modeActive = {
+    ...modeItem,
+    color: 'white',
+    fontWeight: 'bold',
+};
+const content = {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 4,
+    paddingBottom: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const loopIndex = (index, length) => {
+    if (index < 0) {
+        index += length;
+    }
+    return index % length;
+};
+const stripQuery = (query) => {
+    if (query.startsWith('>') || query.startsWith('?')) {
+        return query.substring(1).trim();
+    }
+    return query.trim();
+};
+const mapQueryToMode = (query) => {
+    return query.startsWith('>')
+        ? 'commands'
+        : query.startsWith('?')
+            ? 'docs'
+            : 'compositions';
+};
+const mapModeToQuery = (mode) => {
+    if (mode === 'commands') {
+        return '> ';
+    }
+    if (mode === 'compositions') {
+        return '';
+    }
+    if (mode === 'docs') {
+        return '? ';
+    }
+    throw new Error('no mode' + mode);
+};
+const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [state, setState] = (0, react_1.useState)(() => {
+        return {
+            query: mapModeToQuery(initialMode),
+            selectedIndex: 0,
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        setState({
+            query: mapModeToQuery(initialMode),
+            selectedIndex: 0,
+        });
+    }, [initialMode, invocationTimestamp]);
+    const inputRef = (0, react_1.useRef)(null);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const closeMenu = (0, react_1.useCallback)(() => undefined, []);
+    const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
+    const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const mode = mapQueryToMode(state.query);
+    const actualQuery = (0, react_1.useMemo)(() => {
+        return stripQuery(state.query);
+    }, [state.query]);
+    const menuActions = (0, react_1.useMemo)(() => {
+        if (mode !== 'commands') {
+            return [];
+        }
+        return (0, use_menu_structure_1.makeSearchResults)(actions, setSelectedModal);
+    }, [actions, mode, setSelectedModal]);
+    const resultsArray = (0, react_1.useMemo)(() => {
+        if (mode === 'commands') {
+            return (0, fuzzy_search_1.fuzzySearch)(actualQuery, menuActions);
+        }
+        if (mode === 'docs' && docResults.type === 'results') {
+            return docResults.results;
+        }
+        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
+            return {
+                id: 'composition-' + c.id,
+                title: c.id,
+                type: 'composition',
+                onSelected: () => {
+                    selectComposition(c, true);
+                    setSelectedModal(null);
+                },
+                compositionType: (0, is_composition_still_1.isCompositionStill)(c) ? 'still' : 'composition',
+            };
+        }));
+    }, [
+        mode,
+        actualQuery,
+        compositions,
+        menuActions,
+        docResults,
+        selectComposition,
+        setSelectedModal,
+    ]);
+    const onArrowDown = (0, react_1.useCallback)(() => {
+        setState((s) => {
+            return {
+                ...s,
+                selectedIndex: s.selectedIndex + 1,
+            };
+        });
+    }, []);
+    const onArrowUp = (0, react_1.useCallback)(() => {
+        setState((s) => {
+            return {
+                ...s,
+                selectedIndex: s.selectedIndex - 1,
+            };
+        });
+    }, []);
+    // Arrow up
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, onArrowDown, onArrowUp]);
+    (0, react_1.useEffect)(() => {
+        if (mode !== 'docs') {
+            return;
+        }
+        if (actualQuery.trim() === '') {
+            setDocResults({ type: 'initial' });
+            return;
+        }
+        let cancelled = false;
+        setDocResults({ type: 'loading' });
+        (0, algolia_search_1.algoliaSearch)(actualQuery)
+            .then((agoliaResults) => {
+            if (cancelled) {
+                return;
+            }
+            setDocResults({ type: 'results', results: agoliaResults });
+        })
+            .catch((err) => {
+            if (cancelled) {
+                return;
+            }
+            setDocResults({ type: 'error', error: err });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [actualQuery, mode]);
+    // Arrow down
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            key: 'ArrowDown',
+            callback: onArrowDown,
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, onArrowDown]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        setState({ query: e.target.value, selectedIndex: 0 });
+    }, []);
+    const selectedIndexRounded = loopIndex(state.selectedIndex, resultsArray.length);
+    const onActionsSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState((s) => ({
+            query: `> ${stripQuery(s.query)}`,
+            selectedIndex: 0,
+        }));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState((s) => ({
+            query: stripQuery(s.query),
+            selectedIndex: 0,
+        }));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const onDocSearchSelected = (0, react_1.useCallback)(() => {
+        var _a;
+        setState((s) => ({
+            query: `? ${stripQuery(s.query)}`,
+            selectedIndex: 0,
+        }));
+        setDocResults({ type: 'initial' });
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const showKeyboardShortcuts = mode === 'docs' && actualQuery.trim() === '';
+    const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
+    const container = (0, react_1.useMemo)(() => {
+        return {
+            width: showKeyboardShortcuts ? 800 : 500,
+        };
+    }, [showKeyboardShortcuts]);
+    const results = (0, react_1.useMemo)(() => {
+        if (showKeyboardShortcuts) {
+            return {
+                maxHeight: 600,
+            };
+        }
+        return {
+            overflowY: 'auto',
+            height: 300,
+        };
+    }, [showKeyboardShortcuts]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: modeSelector, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })] }), (0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", style: input, autoFocus: true, value: state.query, onChange: onTextChange, placeholder: "Search compositions..." }), showKeyboardShortcuts ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), " ", (0, jsx_runtime_1.jsx)(AlgoliaCredit_1.AlgoliaCredit, {})] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: results, children: showKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(KeyboardShortcutsExplainer_1.KeyboardShortcutsExplainer, {})) : showSearchLoadingState ? null : resultsArray.length === 0 ? ((0, jsx_runtime_1.jsx)(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
+                    return ((0, jsx_runtime_1.jsx)(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
+                })) })] }));
+};
+exports.QuickSwitcherContent = QuickSwitcherContent;

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type QuickSwitcherResultDetail = {
+    type: 'composition';
+    compositionType: 'composition' | 'still';
+} | {
+    type: 'menu-item';
+} | {
+    type: 'search-result';
+    titleLine: string;
+    subtitleLine: string;
+};
+export declare type TQuickSwitcherResult = {
+    title: string;
+    id: string;
+    onSelected: () => void;
+} & QuickSwitcherResultDetail;
+export declare const QuickSwitcherResult: React.FC<{
+    result: TQuickSwitcherResult;
+    selected: boolean;
+}>;
+export {};

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSwitcherResult = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const film_1 = require("../../icons/film");
+const still_1 = require("../../icons/still");
+const layout_1 = require("../layout");
+const container = {
+    paddingLeft: 16,
+    paddingRight: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    cursor: 'pointer',
+};
+const label = {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+};
+const searchLabel = {
+    ...label,
+    lineHeight: 1.25,
+};
+const iconStyle = {
+    width: 14,
+    height: 14,
+};
+const labelContainer = {
+    overflow: 'hidden',
+    flex: 1,
+    paddingTop: 5,
+    paddingBottom: 5,
+};
+const QuickSwitcherResult = ({ result, selected }) => {
+    const [hovered, setIsHovered] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!selected) {
+            return;
+        }
+        const binding = keybindings.registerKeybinding({
+            key: 'Enter',
+            callback: result.onSelected,
+            commandCtrlKey: false,
+            event: 'keydown',
+            preventDefault: true,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, result.onSelected, selected]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    }, [selected]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected,
+            }),
+        };
+    }, [hovered, selected]);
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...(result.type === 'search-result' ? searchLabel : label),
+            color: result.type === 'search-result'
+                ? colors_1.LIGHT_TEXT
+                : selected || hovered
+                    ? 'white'
+                    : colors_1.LIGHT_TEXT,
+            fontSize: 15,
+        };
+    }, [hovered, result.type, selected]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML: {
+                                __html: result.titleLine,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML: {
+                                __html: result.subtitleLine,
+                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
+};
+exports.QuickSwitcherResult = QuickSwitcherResult;

package/dist/editor/components/QuickSwitcher/algolia-search.d.ts

@@ -0,0 +1,29 @@
+import type { TQuickSwitcherResult } from './QuickSwitcherResult';
+declare type Levels = 'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4' | 'lvl5' | 'lvl6';
+export declare type Match = {
+    value: string;
+    matchLevel: 'none' | 'partial' | 'full';
+};
+declare type DynamicHit = {
+    type: 'content';
+    _highlightResult: {
+        content: Match;
+        hierarchy: Record<Levels, Match>;
+    };
+} | {
+    type: Levels;
+    _highlightResult: {
+        hierarchy: Record<Levels, Match>;
+    };
+};
+declare type Hit = {
+    url: string;
+    hierarchy: Record<Levels, string | null>;
+    objectID: string;
+} & DynamicHit;
+export declare const algoliaSearch: (query: string) => Promise<TQuickSwitcherResult[]>;
+export declare const splitMatchIntoTitleAndSubtitle: (match: Hit) => {
+    title: string;
+    subtitle: string;
+};
+export {};

package/dist/editor/components/QuickSwitcher/algolia-search.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitMatchIntoTitleAndSubtitle = exports.algoliaSearch = void 0;
+const truthy_1 = require("../../../truthy");
+const ALGOLIA_API_KEY = '3e42dbd4f895fe93ff5cf40d860c4a85';
+const ALGOLIA_APPLICATION_ID = 'PLSDUOL1CA';
+const AGOLIA_SEARCH_URL = 'https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries';
+const algoliaSearch = async (query) => {
+    const url = new URL(AGOLIA_SEARCH_URL);
+    url.searchParams.set('x-algolia-agen', encodeURIComponent('Remotion Preview DocSearch'));
+    url.searchParams.set('x-algolia-api-key', ALGOLIA_API_KEY);
+    url.searchParams.set('x-algolia-application-id', ALGOLIA_APPLICATION_ID);
+    const { results } = await fetch(url.toString(), {
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify({
+            requests: [
+                {
+                    query,
+                    indexName: 'remotion',
+                    params: 'attributesToRetrieve=["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"]&attributesToSnippet=["hierarchy.lvl1:10","hierarchy.lvl2:10","hierarchy.lvl3:10","hierarchy.lvl4:10","hierarchy.lvl5:10","hierarchy.lvl6:10","content:10"]&hitsPerPage=20',
+                },
+            ],
+        }),
+        method: 'POST',
+    }).then((res) => res.json());
+    const { hits } = results[0];
+    return hits
+        .map((hit) => {
+        var _a;
+        const entries = Object.values(hit._highlightResult.hierarchy);
+        const result = (_a = entries.find((value) => value.matchLevel === 'full')) !== null && _a !== void 0 ? _a : entries.find((value) => value.matchLevel === 'partial');
+        const { subtitle, title } = (0, exports.splitMatchIntoTitleAndSubtitle)(hit);
+        if (!result) {
+            return null;
+        }
+        return {
+            type: 'search-result',
+            id: hit.objectID,
+            title: 'Should not display',
+            titleLine: title,
+            subtitleLine: subtitle,
+            onSelected: () => {
+                window.open(hit.url);
+            },
+        };
+    })
+        .filter(truthy_1.truthy);
+};
+exports.algoliaSearch = algoliaSearch;
+const splitMatchIntoTitleAndSubtitle = (match) => {
+    const main = match.type === 'content'
+        ? match._highlightResult.content
+        : match._highlightResult.hierarchy[match.type];
+    const title = main.value;
+    const subtitle = Object.entries(match._highlightResult.hierarchy)
+        .filter(([level]) => level !== match.type)
+        .map((value) => value[1].value)
+        .join(' • ');
+    return { title, subtitle };
+};
+exports.splitMatchIntoTitleAndSubtitle = splitMatchIntoTitleAndSubtitle;

package/dist/editor/components/QuickSwitcher/fuzzy-search.d.ts

@@ -0,0 +1,2 @@
+import type { TQuickSwitcherResult } from './QuickSwitcherResult';
+export declare function fuzzySearch(query: string, dataset: TQuickSwitcherResult[]): TQuickSwitcherResult[];

package/dist/editor/components/QuickSwitcher/fuzzy-search.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fuzzySearch = void 0;
+function fuzzySearch(query, dataset) {
+    const q = query ? query.trim().toLowerCase() : '';
+    const matchingIndices = [];
+    if (q.length === 0) {
+        for (let i = 0; i < dataset.length; i++) {
+            matchingIndices.push(i);
+        }
+        return dataset.filter((_, i) => matchingIndices.includes(i));
+    }
+    dataset.forEach((d, index) => {
+        const s = d.title.trim().toLowerCase();
+        let i = 0;
+        let n = -1;
+        let l;
+        // eslint-disable-next-line no-bitwise
+        for (; (l = q[i++]);)
+            if (!~(n = s.indexOf(l, n + 1)))
+                return;
+        matchingIndices.push(index);
+    });
+    return dataset.filter((_, i) => matchingIndices.includes(i));
+}
+exports.fuzzySearch = fuzzySearch;

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

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

package/dist/editor/components/RenderButton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_default_out_name_1 = require("../../get-default-out-name");
+const render_1 = require("../icons/render");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
+const RenderButton = ({ composition, visible }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 12,
+            },
+        };
+    }, []);
+    const isVideo = composition.durationInFrames > 1;
+    const onClick = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        setSelectedModal({
+            type: 'render',
+            compositionId: composition.id,
+            initialFrame: 0,
+            initialImageFormat: isVideo ? 'jpeg' : 'png',
+            // TODO: Determine defaults from config file
+            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
+            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
+            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
+            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
+                compositionName: composition.id,
+                defaultExtension: isVideo ? 'mp4' : 'png',
+                type: 'asset',
+            }),
+            initialRenderType: isVideo ? 'video' : 'still',
+            initialCodec: 'h264',
+        });
+    }, [composition.id, isVideo, setSelectedModal]);
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+};
+exports.RenderButton = RenderButton;

package/dist/editor/components/RenderModal/CrfSetting.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Codec } from '@remotion/renderer';
+export declare const useCrfState: (codec: Codec) => {
+    crf: number;
+    setCrf: (updater: (prev: number) => number) => void;
+    minCrf: number;
+    maxCrf: number;
+    shouldDisplayOption: boolean;
+};
+export declare const CrfSetting: React.FC<{
+    crf: number;
+    setCrf: (value: (prevVal: number) => number) => void;
+    min: number;
+    max: number;
+}>;

package/dist/editor/components/RenderModal/CrfSetting.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CrfSetting = exports.useCrfState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
+const getDefaultCrfState = () => {
+    return client_1.BrowserSafeApis.validCodecs
+        .map((c) => {
+        return [c, client_1.BrowserSafeApis.getDefaultCrfForCodec(c)];
+    })
+        .reduce((acc, [codec, crf]) => {
+        return {
+            ...acc,
+            [codec]: crf,
+        };
+    }, {});
+};
+const useCrfState = (codec) => {
+    const [state, setState] = (0, react_1.useState)(() => getDefaultCrfState());
+    const range = client_1.BrowserSafeApis.getValidCrfRanges(codec);
+    return {
+        crf: state[codec],
+        setCrf: (updater) => {
+            setState((q) => {
+                return {
+                    ...q,
+                    [codec]: updater(q[codec]),
+                };
+            });
+        },
+        minCrf: range[0],
+        maxCrf: range[1],
+        shouldDisplayOption: range[0] !== range[1],
+    };
+};
+exports.useCrfState = useCrfState;
+const CrfSetting = ({ crf, setCrf, min, max }) => {
+    const onCrfSetDirectly = (0, react_1.useCallback)((newCrf) => {
+        setCrf(() => newCrf);
+    }, [setCrf]);
+    const onCrfChanged = (0, react_1.useCallback)((e) => {
+        setCrf((q) => {
+            const newCrf = parseFloat(e);
+            if (Number.isNaN(newCrf)) {
+                return q;
+            }
+            return Math.min(max, Math.max(newCrf, min));
+        });
+    }, [max, min, setCrf]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "CRF" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: crf, onTextChange: onCrfChanged, placeholder: `${min}-${max}`, onValueChange: onCrfSetDirectly, name: "crf", step: 1, min: min, max: max }) }) })] }));
+};
+exports.CrfSetting = CrfSetting;

package/dist/editor/components/RenderModal/EnforceAudioTrackSetting.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const EnforceAudioTrackSetting: React.FC<{
+    enforceAudioTrack: boolean;
+    setEnforceAudioTrack: React.Dispatch<React.SetStateAction<boolean>>;
+}>;

package/dist/editor/components/RenderModal/EnforceAudioTrackSetting.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnforceAudioTrackSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("./layout");
+const EnforceAudioTrackSetting = ({ enforceAudioTrack, setEnforceAudioTrack }) => {
+    const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
+        setEnforceAudioTrack(e.target.checked);
+    }, [setEnforceAudioTrack]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Enforce Audio Track" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
+};
+exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;