@remotion/cli 3.3.35 → 3.3.36

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Checkbox: React.FC<{
+    checked: boolean;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+}>;

package/dist/editor/components/Checkbox.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const Checkmark_1 = require("../icons/Checkmark");
+const size = 20;
+const background = {
+    height: size,
+    width: size,
+    position: 'relative',
+};
+const input = {
+    appearance: 'none',
+    background: colors_1.INPUT_BACKGROUND,
+    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    height: size,
+    width: size,
+    top: 0,
+    left: 0,
+    position: 'absolute',
+    margin: 0,
+};
+const box = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    height: size,
+    width: size,
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+};
+const Checkbox = ({ checked, onChange }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
+};
+exports.Checkbox = Checkbox;

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

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const TitleUpdater: React.FC;
+export declare const CurrentCompositionKeybindings: React.FC;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const TitleUpdater = () => {
+    const video = remotion_1.Internals.useVideo();
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            document.title = 'Remotion Preview';
+            return;
+        }
+        document.title = `${video.id} / ${window.remotion_projectName} - Remotion Preview`;
+    }, [video]);
+    return null;
+};
+exports.TitleUpdater = TitleUpdater;
+const CurrentCompositionKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const video = remotion_1.Internals.useVideo();
+    const openRenderModal = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return null;
+        }
+        const renderButton = document.getElementById('render-modal-button');
+        renderButton.click();
+    }, [video]);
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'r',
+            commandCtrlKey: false,
+            callback: openRenderModal,
+            preventDefault: true,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, openRenderModal]);
+    return null;
+};
+exports.CurrentCompositionKeybindings = CurrentCompositionKeybindings;

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;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const FrameRangeSetting: React.FC<{
+    startFrame: number;
+    endFrame: number;
+    setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    durationInFrames: number;
+}>;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameRangeSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
+const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
+    const maxStartFrame = endFrame - 1;
+    const minStartFrame = 0;
+    const minEndFrame = startFrame + 1;
+    const maxEndFrame = durationInFrames - 1;
+    const onStartFrameChangedDirectly = (0, react_1.useCallback)((newStartFrame) => {
+        setStartFrame(newStartFrame);
+    }, [setStartFrame]);
+    const onEndFrameChangedDirectly = (0, react_1.useCallback)((newEndFrame) => {
+        setEndFrame(newEndFrame);
+    }, [setEndFrame]);
+    const onStartFrameChanged = (0, react_1.useCallback)((e) => {
+        setStartFrame((q) => {
+            const newStartFrame = parseInt(e, 10);
+            if (Number.isNaN(newStartFrame)) {
+                return q;
+            }
+            const newStartFrameClamped = Math.min(maxStartFrame, Math.max(newStartFrame, minStartFrame));
+            return newStartFrameClamped;
+        });
+    }, [maxStartFrame, setStartFrame]);
+    const onEndFrameChanged = (0, react_1.useCallback)((e) => {
+        setEndFrame((q) => {
+            const newEndFrame = parseInt(e, 10);
+            if (Number.isNaN(newEndFrame)) {
+                return q;
+            }
+            const newEndFrameClamped = Math.min(maxEndFrame, Math.max(newEndFrame, minEndFrame));
+            return newEndFrameClamped;
+        });
+    }, [maxEndFrame, minEndFrame, setEndFrame]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: startFrame, onTextChange: onStartFrameChanged, placeholder: `${minStartFrame}-${maxStartFrame}`, onValueChange: onStartFrameChangedDirectly, name: "startFrame", step: 1, min: minStartFrame, max: maxStartFrame }) }), (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: endFrame, onTextChange: onEndFrameChanged, placeholder: `${minEndFrame}-${maxEndFrame}`, onValueChange: onEndFrameChangedDirectly, name: "endFrame", step: 1, min: minEndFrame, max: maxEndFrame }) })] })] }));
+};
+exports.FrameRangeSetting = FrameRangeSetting;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MutedSetting = 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 MutedSetting = ({ muted, setMuted }) => {
+    const onMutedChanged = (0, react_1.useCallback)((e) => {
+        setMuted(e.target.checked);
+    }, [setMuted]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Muted" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, onChange: onMutedChanged }) })] }));
+};
+exports.MutedSetting = MutedSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const QualitySetting: React.FC<{
+    quality: number;
+    setQuality: React.Dispatch<React.SetStateAction<number>>;
+}>;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QualitySetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
+const MIN_QUALITY = 1;
+const MAX_QUALITY = 100;
+const QualitySetting = ({ quality, setQuality }) => {
+    const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
+        setQuality(newQuality);
+    }, [setQuality]);
+    const onQualityChanged = (0, react_1.useCallback)((e) => {
+        setQuality((q) => {
+            const newQuality = parseInt(e, 10);
+            if (Number.isNaN(newQuality)) {
+                return q;
+            }
+            const newQualityClamped = Math.min(MAX_QUALITY, Math.max(newQuality, MIN_QUALITY));
+            return newQualityClamped;
+        });
+    }, [setQuality]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "JPEG Quality" }), (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: quality, onTextChange: onQualityChanged, placeholder: `${MIN_QUALITY}-${MAX_QUALITY}`, onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) }) })] }));
+};
+exports.QualitySetting = QualitySetting;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ScaleSetting: React.FC<{
+    scale: number;
+    setScale: (value: React.SetStateAction<number>) => void;
+}>;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaleSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+const ScaleSetting = ({ scale, setScale }) => {
+    const onScaleSetDirectly = (0, react_1.useCallback)((newScale) => {
+        setScale(newScale);
+    }, [setScale]);
+    const onScaleChanged = (0, react_1.useCallback)((e) => {
+        setScale((q) => {
+            const newScale = parseFloat(e);
+            if (Number.isNaN(newScale)) {
+                return q;
+            }
+            const newScaleClamped = Math.min(MAX_SCALE, Math.max(newScale, MIN_SCALE));
+            return newScaleClamped;
+        });
+    }, [setScale]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Scale" }), (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: scale, onTextChange: onScaleChanged, placeholder: `${MIN_SCALE}-${MAX_SCALE}`, onValueChange: onScaleSetDirectly, name: "scale", step: 0.1, min: MIN_SCALE, max: MAX_SCALE }) }) })] }));
+};
+exports.ScaleSetting = ScaleSetting;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const optionRow: React.CSSProperties;
+export declare const label: React.CSSProperties;
+export declare const rightRow: React.CSSProperties;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rightRow = exports.label = exports.optionRow = void 0;
+const colors_1 = require("../../helpers/colors");
+exports.optionRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
+};
+exports.label = {
+    width: 150,
+    fontSize: 14,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+};
+exports.rightRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    flex: 1,
+};

package/dist/preview-server/render-queue/get-default-video-contexts.d.ts

@@ -0,0 +1,10 @@
+import type { Codec } from '@remotion/renderer';
+import type { RenderType } from '../../editor/components/RenderModal/RenderModal';
+export declare const getDefaultCodecs: ({ defaultCodec, isStill, }: {
+    defaultCodec: Codec;
+    isStill: boolean;
+}) => {
+    initialAudioCodec: Codec;
+    initialVideoCodec: Codec;
+    initialRenderType: RenderType;
+};

package/dist/preview-server/render-queue/get-default-video-contexts.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultCodecs = void 0;
+const client_1 = require("@remotion/renderer/client");
+const getDefaultCodecs = ({ defaultCodec, isStill, }) => {
+    const isAudioCodec = client_1.BrowserSafeApis.isAudioCodec(defaultCodec);
+    return {
+        initialAudioCodec: isAudioCodec ? defaultCodec : 'mp3',
+        initialVideoCodec: isAudioCodec ? 'h264' : defaultCodec,
+        initialRenderType: isStill ? 'still' : isAudioCodec ? 'audio' : 'video',
+    };
+};
+exports.getDefaultCodecs = getDefaultCodecs;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.35",
+	"version": "3.3.36",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.35",
-		"@remotion/media-utils": "3.3.35",
-		"@remotion/player": "3.3.35",
-		"@remotion/renderer": "3.3.35",
+		"@remotion/bundler": "3.3.36",
+		"@remotion/media-utils": "3.3.36",
+		"@remotion/player": "3.3.36",
+		"@remotion/renderer": "3.3.36",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.35",
+		"remotion": "3.3.36",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "92344ca937e4c51b8484f79528e3c38d598f7053"
+	"gitHead": "623bf1e883e7b26b9d02458037c930ccbe8857e4"
 }