@remotion/cli 3.2.27 → 3.2.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/benchmark.d.ts +1 -0
  2. package/dist/benchmark.js +180 -0
  3. package/dist/bundle.d.ts +1 -0
  4. package/dist/bundle.js +32 -0
  5. package/dist/compositions.js +1 -0
  6. package/dist/config/bundle-out-dir.d.ts +2 -0
  7. package/dist/config/bundle-out-dir.js +12 -0
  8. package/dist/config/get-public-path.d.ts +2 -0
  9. package/dist/config/get-public-path.js +12 -0
  10. package/dist/config/image-format.js +8 -1
  11. package/dist/config/log.d.ts +1 -1
  12. package/dist/determine-image-format.d.ts +11 -0
  13. package/dist/determine-image-format.js +48 -0
  14. package/dist/editor/components/Button.d.ts +4 -0
  15. package/dist/editor/components/Button.js +24 -0
  16. package/dist/editor/components/PlayPause.d.ts +0 -5
  17. package/dist/editor/components/PreviewZoomControls.d.ts +2 -0
  18. package/dist/editor/components/PreviewZoomControls.js +49 -0
  19. package/dist/editor/helpers/normalize-wheel.d.ts +5 -0
  20. package/dist/editor/helpers/normalize-wheel.js +20 -0
  21. package/dist/event-source-events.d.ts +3 -0
  22. package/dist/event-source.js +1 -1
  23. package/dist/get-cli-options.d.ts +11 -3
  24. package/dist/get-cli-options.js +22 -28
  25. package/dist/get-env.d.ts +1 -1
  26. package/dist/get-env.js +58 -6
  27. package/dist/get-final-output-codec.d.ts +9 -5
  28. package/dist/get-final-output-codec.js +56 -56
  29. package/dist/get-render-media-options.d.ts +7 -0
  30. package/dist/get-render-media-options.js +44 -0
  31. package/dist/index.d.ts +19 -2
  32. package/dist/index.js +10 -1
  33. package/dist/parse-command-line.js +0 -3
  34. package/dist/prepare-entry-point.d.ts +12 -0
  35. package/dist/prepare-entry-point.js +37 -0
  36. package/dist/preview-server/routes.d.ts +2 -1
  37. package/dist/preview-server/routes.js +4 -2
  38. package/dist/preview-server/start-server.d.ts +1 -1
  39. package/dist/preview-server/start-server.js +2 -1
  40. package/dist/preview.js +10 -2
  41. package/dist/print-help.js +6 -3
  42. package/dist/progress-bar.js +3 -1
  43. package/dist/render.js +18 -30
  44. package/dist/still.js +12 -24
  45. package/dist/validate-image-format.d.ts +2 -0
  46. package/dist/validate-image-format.js +15 -0
  47. package/dist/webpack-cache.d.ts +12 -0
  48. package/dist/webpack-cache.js +66 -0
  49. package/package.json +7 -7
@@ -0,0 +1 @@
1
+ export declare const benchmarkCommand: (remotionRoot: string, args: string[]) => Promise<void>;
@@ -0,0 +1,180 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.benchmarkCommand = void 0;
7
+ const renderer_1 = require("@remotion/renderer");
8
+ const path_1 = __importDefault(require("path"));
9
+ const chalk_1 = require("./chalk");
10
+ const config_1 = require("./config");
11
+ const get_cli_options_1 = require("./get-cli-options");
12
+ const get_render_media_options_1 = require("./get-render-media-options");
13
+ const log_1 = require("./log");
14
+ const make_progress_bar_1 = require("./make-progress-bar");
15
+ const parse_command_line_1 = require("./parse-command-line");
16
+ const progress_bar_1 = require("./progress-bar");
17
+ const setup_cache_1 = require("./setup-cache");
18
+ const truthy_1 = require("./truthy");
19
+ const DEFAULT_RUNS = 3;
20
+ const getValidConcurrency = (renderMediaOptions) => {
21
+ var _a;
22
+ const concurrency = 'concurrency' in renderMediaOptions
23
+ ? (_a = renderMediaOptions.concurrency) !== null && _a !== void 0 ? _a : null
24
+ : null;
25
+ const { concurrencies } = parse_command_line_1.parsedCli;
26
+ if (!concurrencies) {
27
+ return [renderer_1.RenderInternals.getActualConcurrency(concurrency)];
28
+ }
29
+ return concurrencies
30
+ .split(',')
31
+ .map((c) => parseInt(c.trim(), 10));
32
+ };
33
+ const runBenchmark = async (runs, options, onProgress) => {
34
+ const timeTaken = [];
35
+ for (let run = 0; run < runs; ++run) {
36
+ const startTime = performance.now();
37
+ await (0, renderer_1.renderMedia)({
38
+ ...options,
39
+ onProgress: ({ progress }) => onProgress === null || onProgress === void 0 ? void 0 : onProgress(run, progress),
40
+ });
41
+ const endTime = performance.now();
42
+ timeTaken.push(endTime - startTime);
43
+ }
44
+ return timeTaken;
45
+ };
46
+ const formatTime = (time) => {
47
+ let ret = '';
48
+ const hours = Math.floor(time / (60 * 60 * 1000));
49
+ if (hours) {
50
+ ret = `${hours}h`;
51
+ }
52
+ time %= 60 * 60 * 1000;
53
+ const minutes = Math.floor(time / (60 * 1000));
54
+ if (minutes) {
55
+ ret = `${ret}${minutes}m`;
56
+ }
57
+ time %= 60 * 1000;
58
+ const seconds = (time / 1000).toFixed(5);
59
+ if (seconds) {
60
+ ret = `${ret}${seconds}s`;
61
+ }
62
+ return ret;
63
+ };
64
+ const avg = (time) => time.reduce((prev, curr) => prev + curr) / time.length;
65
+ const stdDev = (time) => {
66
+ const mean = avg(time);
67
+ return Math.sqrt(time.map((x) => (x - mean) ** 2).reduce((a, b) => a + b) / time.length);
68
+ };
69
+ const getResults = (results, runs) => {
70
+ const mean = avg(results);
71
+ const dev = stdDev(results);
72
+ const max = Math.max(...results);
73
+ const min = Math.min(...results);
74
+ return ` Time (${chalk_1.chalk.green('mean')} ± ${chalk_1.chalk.green('σ')}): ${chalk_1.chalk.green(formatTime(mean))} ± ${chalk_1.chalk.green(formatTime(dev))}\n Range (${chalk_1.chalk.blue('min')} ... ${chalk_1.chalk.red('max')}): ${chalk_1.chalk.blue(formatTime(min))} ... ${chalk_1.chalk.red(formatTime(max))} \t ${chalk_1.chalk.gray(`${runs} runs`)}
75
+ `;
76
+ };
77
+ const makeBenchmarkProgressBar = ({ totalRuns, run, progress, doneIn, }) => {
78
+ const totalProgress = (run + progress) / totalRuns;
79
+ return [
80
+ `Rendering (${run + 1} out of ${totalRuns} runs)`,
81
+ (0, make_progress_bar_1.makeProgressBar)(totalProgress),
82
+ doneIn === null
83
+ ? `${(totalProgress * 100).toFixed(2)}% `
84
+ : chalk_1.chalk.gray(doneIn),
85
+ ].join(' ');
86
+ };
87
+ const benchmarkCommand = async (remotionRoot, args) => {
88
+ var _a, _b;
89
+ const runs = (_a = parse_command_line_1.parsedCli.runs) !== null && _a !== void 0 ? _a : DEFAULT_RUNS;
90
+ const filePath = args[0];
91
+ if (!filePath) {
92
+ log_1.Log.error('No entry file passed.');
93
+ log_1.Log.info('Pass an additional argument specifying the entry file');
94
+ log_1.Log.info();
95
+ log_1.Log.info(`$ remotion benchmark <entry file>`);
96
+ process.exit(1);
97
+ }
98
+ const fullPath = path_1.default.join(process.cwd(), filePath);
99
+ const { inputProps, envVariables, browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, port, puppeteerTimeout, browser, scale, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
100
+ isLambda: false,
101
+ type: 'series',
102
+ codec: 'h264',
103
+ });
104
+ const browserInstance = (0, renderer_1.openBrowser)(browser, {
105
+ browserExecutable,
106
+ shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
107
+ chromiumOptions,
108
+ forceDeviceScaleFactor: scale,
109
+ });
110
+ const { urlOrBundle: bundleLocation, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
111
+ fullPath,
112
+ publicDir,
113
+ remotionRoot,
114
+ steps: ['bundling'],
115
+ });
116
+ const puppeteerInstance = await browserInstance;
117
+ const comps = await (0, renderer_1.getCompositions)(bundleLocation, {
118
+ inputProps,
119
+ envVariables,
120
+ chromiumOptions,
121
+ timeoutInMilliseconds: puppeteerTimeout,
122
+ ffmpegExecutable,
123
+ ffprobeExecutable,
124
+ port,
125
+ puppeteerInstance,
126
+ });
127
+ const ids = ((_b = args[1]) !== null && _b !== void 0 ? _b : '')
128
+ .split(',')
129
+ .map((c) => c.trim())
130
+ .filter(truthy_1.truthy);
131
+ const compositions = ids.map((compId) => {
132
+ const composition = comps.find((c) => c.id === compId);
133
+ if (!composition) {
134
+ throw new Error(`No composition with the ID "${compId}" found.`);
135
+ }
136
+ return composition;
137
+ });
138
+ if (compositions.length === 0) {
139
+ log_1.Log.error('No composition IDs passed. Add another argument to the command specifying at least 1 composition ID.');
140
+ }
141
+ const benchmark = {};
142
+ let count = 1;
143
+ const { codec, reason: codecReason } = (0, get_cli_options_1.getFinalCodec)({
144
+ downloadName: null,
145
+ outName: null,
146
+ });
147
+ for (const composition of compositions) {
148
+ const renderMediaOptions = await (0, get_render_media_options_1.getRenderMediaOptions)({
149
+ config: composition,
150
+ outputLocation: undefined,
151
+ serveUrl: bundleLocation,
152
+ codec,
153
+ });
154
+ const concurrency = getValidConcurrency(renderMediaOptions);
155
+ benchmark[composition.id] = {};
156
+ for (const con of concurrency) {
157
+ const benchmarkProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
158
+ log_1.Log.info();
159
+ log_1.Log.info(`${chalk_1.chalk.bold(`Benchmark #${count++}:`)} ${chalk_1.chalk.gray(`composition=${composition.id} concurrency=${con} codec=${codec} (${codecReason})`)}`);
160
+ const timeTaken = await runBenchmark(runs, {
161
+ ...renderMediaOptions,
162
+ puppeteerInstance,
163
+ concurrency: con,
164
+ }, (run, progress) => {
165
+ benchmarkProgress.update(makeBenchmarkProgressBar({
166
+ totalRuns: runs,
167
+ run,
168
+ doneIn: null,
169
+ progress,
170
+ }));
171
+ });
172
+ benchmarkProgress.update('');
173
+ benchmarkProgress.update(getResults(timeTaken, runs));
174
+ benchmark[composition.id][`${con}`] = timeTaken;
175
+ }
176
+ }
177
+ log_1.Log.info();
178
+ await cleanupBundle();
179
+ };
180
+ exports.benchmarkCommand = benchmarkCommand;
@@ -0,0 +1 @@
1
+ export declare const bundleCommand: (remotionRoot: string) => Promise<void>;
package/dist/bundle.js ADDED
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.bundleCommand = void 0;
4
+ const get_cli_options_1 = require("./get-cli-options");
5
+ const initialize_render_cli_1 = require("./initialize-render-cli");
6
+ const log_1 = require("./log");
7
+ const parse_command_line_1 = require("./parse-command-line");
8
+ const prepare_entry_point_1 = require("./prepare-entry-point");
9
+ const bundleCommand = async (remotionRoot) => {
10
+ const file = parse_command_line_1.parsedCli._[1];
11
+ if (!file) {
12
+ log_1.Log.error('No entry point specified. Pass more arguments:');
13
+ log_1.Log.error(' npx remotion bundle [entry-point]');
14
+ log_1.Log.error('Documentation: https://www.remotion.dev/docs/cli/bundle');
15
+ process.exit(1);
16
+ }
17
+ await (0, initialize_render_cli_1.initializeRenderCli)(remotionRoot, 'bundle');
18
+ const { publicPath, bundleOutDir } = await (0, get_cli_options_1.getCliOptions)({
19
+ isLambda: false,
20
+ type: 'get-compositions-or-bundle',
21
+ });
22
+ const { urlOrBundle } = await (0, prepare_entry_point_1.prepareEntryPoint)({
23
+ file,
24
+ otherSteps: [],
25
+ outDir: bundleOutDir,
26
+ publicPath,
27
+ remotionRoot,
28
+ });
29
+ log_1.Log.info();
30
+ log_1.Log.info(urlOrBundle);
31
+ };
32
+ exports.bundleCommand = bundleCommand;
@@ -38,6 +38,7 @@ const listCompositionsCommand = async (remotionRoot) => {
38
38
  const { browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
39
39
  isLambda: false,
40
40
  type: 'get-compositions',
41
+ codec: 'h264',
41
42
  });
42
43
  const { urlOrBundle: bundled, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
43
44
  remotionRoot,
@@ -0,0 +1,2 @@
1
+ export declare const getBundleOutDir: () => string | null;
2
+ export declare const setBundleDir: (path: string) => void;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.setBundleDir = exports.getBundleOutDir = void 0;
4
+ let bundleOutDir = null;
5
+ const getBundleOutDir = () => {
6
+ return bundleOutDir;
7
+ };
8
+ exports.getBundleOutDir = getBundleOutDir;
9
+ const setBundleDir = (path) => {
10
+ bundleOutDir = path;
11
+ };
12
+ exports.setBundleDir = setBundleDir;
@@ -0,0 +1,2 @@
1
+ export declare const getPublicPath: () => string | null;
2
+ export declare const setPublicPath: (path: string) => void;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.setPublicPath = exports.getPublicPath = void 0;
4
+ let publicPath = null;
5
+ const getPublicPath = () => {
6
+ return publicPath;
7
+ };
8
+ exports.getPublicPath = getPublicPath;
9
+ const setPublicPath = (path) => {
10
+ publicPath = path;
11
+ };
12
+ exports.setPublicPath = setPublicPath;
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getUserPreferredImageFormat = exports.setImageFormat = void 0;
4
4
  const renderer_1 = require("@remotion/renderer");
5
+ const truthy_1 = require("../truthy");
5
6
  let currentImageFormat;
6
7
  const setImageFormat = (format) => {
7
8
  if (typeof format === 'undefined') {
@@ -9,7 +10,13 @@ const setImageFormat = (format) => {
9
10
  return;
10
11
  }
11
12
  if (!renderer_1.RenderInternals.validImageFormats.includes(format)) {
12
- throw new TypeError(`Value ${format} is not valid as an image format.`);
13
+ throw new TypeError([
14
+ `Value ${format} is not valid as an image format.`,
15
+ // @ts-expect-error
16
+ format === 'jpg' ? 'Did you mean "jpeg"?' : null,
17
+ ]
18
+ .filter(truthy_1.truthy)
19
+ .join(' '));
13
20
  }
14
21
  currentImageFormat = format;
15
22
  };
@@ -1,3 +1,3 @@
1
1
  import type { LogLevel } from '@remotion/renderer';
2
- export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
2
+ export declare const getLogLevel: () => "verbose" | "error" | "info" | "warn";
3
3
  export declare const setLogLevel: (newLogLevel: LogLevel) => void;
@@ -0,0 +1,11 @@
1
+ import type { ImageFormat, StillImageFormat } from '@remotion/renderer';
2
+ export declare const determineFinalImageFormat: ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }: {
3
+ downloadName: string | null;
4
+ outName: string | null;
5
+ configImageFormat: ImageFormat | null;
6
+ cliFlag: ImageFormat | null;
7
+ isLambda: boolean;
8
+ }) => {
9
+ format: StillImageFormat;
10
+ source: string;
11
+ };
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.determineFinalImageFormat = void 0;
4
+ const deriveExtensionFromFilename = (filename) => {
5
+ if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.png')) {
6
+ return 'png';
7
+ }
8
+ if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpg')) {
9
+ return 'jpeg';
10
+ }
11
+ if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.jpeg')) {
12
+ return 'jpeg';
13
+ }
14
+ return null;
15
+ };
16
+ const determineFinalImageFormat = ({ downloadName, outName, configImageFormat, cliFlag, isLambda, }) => {
17
+ const outNameExtension = deriveExtensionFromFilename(outName);
18
+ const downloadNameExtension = deriveExtensionFromFilename(downloadName);
19
+ const outNameDescription = isLambda ? 'S3 output key' : 'out name';
20
+ if (outNameExtension &&
21
+ downloadNameExtension &&
22
+ outNameExtension !== downloadNameExtension) {
23
+ throw new TypeError(`Image format mismatch: ${outName} was given as the ${outNameDescription} and ${downloadName} was given as the download name, but the extensions don't match.`);
24
+ }
25
+ if (downloadNameExtension) {
26
+ if (cliFlag && downloadNameExtension !== cliFlag) {
27
+ throw new TypeError(`Image format mismatch: ${downloadName} was given as the download name, but --image-format=${cliFlag} was passed. The image formats must match.`);
28
+ }
29
+ return { format: downloadNameExtension, source: 'Download name extension' };
30
+ }
31
+ if (outNameExtension) {
32
+ if (cliFlag && outNameExtension !== cliFlag) {
33
+ throw new TypeError(`Image format mismatch: ${outName} was given as the ${outNameDescription}, but --image-format=${cliFlag} was passed. The image formats must match.`);
34
+ }
35
+ return { format: outNameExtension, source: 'Out name extension' };
36
+ }
37
+ if (cliFlag === 'none') {
38
+ throw new TypeError('The --image-format flag must not be "none" for stills.');
39
+ }
40
+ if (cliFlag !== null) {
41
+ return { format: cliFlag, source: '--image-format flag' };
42
+ }
43
+ if (configImageFormat !== null && configImageFormat !== 'none') {
44
+ return { format: configImageFormat, source: 'Config file' };
45
+ }
46
+ return { format: 'png', source: 'Default' };
47
+ };
48
+ exports.determineFinalImageFormat = determineFinalImageFormat;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export declare const Button: React.FC<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
3
+ children: React.ReactNode;
4
+ }>;
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Button = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const colors_1 = require("../helpers/colors");
6
+ const layout_1 = require("./layout");
7
+ const container = {
8
+ padding: 10,
9
+ cursor: 'pointer',
10
+ fontSize: 14,
11
+ };
12
+ const button = {
13
+ border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
14
+ borderRadius: 4,
15
+ backgroundColor: colors_1.INPUT_BACKGROUND,
16
+ appearance: 'none',
17
+ fontFamily: 'inherit',
18
+ fontSize: 14,
19
+ color: 'white',
20
+ };
21
+ const Button = ({ children, ...props }) => {
22
+ return ((0, jsx_runtime_1.jsx)("button", { ...props, style: button, type: "button", children: (0, jsx_runtime_1.jsx)(layout_1.Row, { style: container, children: children }) }));
23
+ };
24
+ exports.Button = Button;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export declare const PlayPause: React.FC<{
3
- playbackRate: number;
4
- loop: boolean;
5
- }>;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const PreviewZoomControls: React.FC;
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.PreviewZoomControls = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ const minus_1 = require("../icons/minus");
7
+ const plus_1 = require("../icons/plus");
8
+ const preview_size_1 = require("../state/preview-size");
9
+ const ControlButton_1 = require("./ControlButton");
10
+ const layout_1 = require("./layout");
11
+ const container = {
12
+ color: 'black',
13
+ flexDirection: 'row',
14
+ display: 'flex',
15
+ };
16
+ const buttonStyle = {
17
+ fontSize: 24,
18
+ };
19
+ const iconStyle = {
20
+ color: 'white',
21
+ width: 14,
22
+ };
23
+ const PreviewZoomControls = () => {
24
+ const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
25
+ const onZoomOutClicked = (0, react_1.useCallback)(() => {
26
+ setSize((z) => {
27
+ // TODO: Don't assume 1
28
+ const newSize = Number((z.size === 'auto' ? 1 : z.size - preview_size_1.ZOOM_BUTTON_STEP).toFixed(2));
29
+ return { ...z, size: Math.max(preview_size_1.PREVIEW_MIN_ZOOM, newSize) };
30
+ });
31
+ }, [setSize]);
32
+ const onZoomInClicked = (0, react_1.useCallback)(() => {
33
+ setSize((z) => {
34
+ // TODO: Don't assume 1
35
+ if (z.size === 'auto')
36
+ return {
37
+ size: 1 + preview_size_1.ZOOM_BUTTON_STEP,
38
+ translation: {
39
+ x: 0,
40
+ y: 0,
41
+ },
42
+ };
43
+ const newSize = Number((Number(z) + preview_size_1.ZOOM_BUTTON_STEP).toFixed(2));
44
+ return { ...z, size: Math.min(preview_size_1.PREVIEW_MAX_ZOOM, newSize) };
45
+ });
46
+ }, [setSize]);
47
+ return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onZoomOutClicked, style: buttonStyle, title: "Zoom out preview", role: 'ControlButton', type: "button", disabled: size.size !== 'auto' && preview_size_1.PREVIEW_MIN_ZOOM === size.size, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onZoomInClicked, style: buttonStyle, title: "Zoom in preview", role: 'button', type: "button", disabled: size.size !== 'auto' && preview_size_1.PREVIEW_MAX_ZOOM === size.size, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
48
+ };
49
+ exports.PreviewZoomControls = PreviewZoomControls;
@@ -0,0 +1,5 @@
1
+ export declare function normalizeWheel(event: WheelEvent): {
2
+ deltaX: number;
3
+ deltaY: number;
4
+ deltaZ: number;
5
+ };
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.normalizeWheel = void 0;
4
+ // Taken from https://github.com/tldraw/tldraw/blob/254dfdfd77c4abde53240f7d8ca3558e08688493/packages/core/src/hooks/useZoomEvents.ts which is adapted from https://stackoverflow.com/a/13650579
5
+ const MAX_ZOOM_STEP = 10;
6
+ function normalizeWheel(event) {
7
+ const { deltaY, deltaX } = event;
8
+ let deltaZ = 0;
9
+ if (event.ctrlKey || event.metaKey) {
10
+ const signY = Math.sign(event.deltaY);
11
+ const absDeltaY = Math.abs(event.deltaY);
12
+ let dy = deltaY;
13
+ if (absDeltaY > MAX_ZOOM_STEP) {
14
+ dy = MAX_ZOOM_STEP * signY;
15
+ }
16
+ deltaZ = dy;
17
+ }
18
+ return { deltaX, deltaY, deltaZ };
19
+ }
20
+ exports.normalizeWheel = normalizeWheel;
@@ -3,4 +3,7 @@ export declare type EventSourceEvent = {
3
3
  newProps: object;
4
4
  } | {
5
5
  type: 'init';
6
+ } | {
7
+ type: 'new-env-variables';
8
+ newEnvVariables: Record<string, string>;
6
9
  };
@@ -7,7 +7,7 @@ const openEventSource = () => {
7
7
  source = new EventSource('/events');
8
8
  source.addEventListener('message', (event) => {
9
9
  const newEvent = JSON.parse(event.data);
10
- if (newEvent.type === 'new-input-props') {
10
+ if (newEvent.type === 'new-input-props' || newEvent.type === 'new-env-variables') {
11
11
  window.location.reload();
12
12
  }
13
13
  });
@@ -1,14 +1,22 @@
1
- import type { BrowserExecutable, ChromiumOptions, FrameRange } from '@remotion/renderer';
1
+ import type { BrowserExecutable, ChromiumOptions, Codec, FrameRange } from '@remotion/renderer';
2
+ export declare const validateFfmpegCanUseCodec: (codec: Codec) => Promise<void>;
3
+ export declare const getFinalCodec: (options: {
4
+ downloadName: string | null;
5
+ outName: string | null;
6
+ }) => {
7
+ codec: Codec;
8
+ reason: string;
9
+ };
2
10
  export declare const getAndValidateAbsoluteOutputFile: (relativeOutputLocation: string, overwrite: boolean) => string;
3
11
  export declare const getCliOptions: (options: {
4
12
  isLambda: boolean;
5
13
  type: 'still' | 'series' | 'get-compositions';
14
+ codec: Codec;
6
15
  }) => Promise<{
7
16
  puppeteerTimeout: number;
8
17
  concurrency: number | null;
9
18
  frameRange: FrameRange | null;
10
19
  shouldOutputImageSequence: boolean;
11
- codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
12
20
  inputProps: object;
13
21
  envVariables: Record<string, string>;
14
22
  quality: number | undefined;
@@ -23,7 +31,7 @@ export declare const getCliOptions: (options: {
23
31
  browserExecutable: BrowserExecutable;
24
32
  ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
25
33
  ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
26
- logLevel: "verbose" | "info" | "warn" | "error";
34
+ logLevel: "verbose" | "error" | "info" | "warn";
27
35
  scale: number;
28
36
  chromiumOptions: ChromiumOptions;
29
37
  overwrite: boolean;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.getCliOptions = exports.getAndValidateAbsoluteOutputFile = void 0;
6
+ exports.getCliOptions = exports.getAndValidateAbsoluteOutputFile = exports.getFinalCodec = exports.validateFfmpegCanUseCodec = void 0;
7
7
  const renderer_1 = require("@remotion/renderer");
8
8
  const fs_1 = __importDefault(require("fs"));
9
9
  const path_1 = __importDefault(require("path"));
@@ -13,7 +13,7 @@ const get_final_output_codec_1 = require("./get-final-output-codec");
13
13
  const get_input_props_1 = require("./get-input-props");
14
14
  const image_formats_1 = require("./image-formats");
15
15
  const log_1 = require("./log");
16
- const user_passed_output_location_1 = require("./user-passed-output-location");
16
+ const parse_command_line_1 = require("./parse-command-line");
17
17
  const getAndValidateFrameRange = () => {
18
18
  const frameRange = config_1.ConfigInternals.getRange();
19
19
  if (typeof frameRange === 'number') {
@@ -23,20 +23,11 @@ const getAndValidateFrameRange = () => {
23
23
  }
24
24
  return frameRange;
25
25
  };
26
- const getFinalCodec = async (options) => {
27
- const userCodec = config_1.ConfigInternals.getOutputCodecOrUndefined();
28
- const codec = (0, get_final_output_codec_1.getFinalOutputCodec)({
29
- codec: userCodec,
30
- fileExtension: options.isLambda
31
- ? null
32
- : renderer_1.RenderInternals.getExtensionOfFilename((0, user_passed_output_location_1.getUserPassedOutputLocation)()),
33
- emitWarning: true,
34
- });
26
+ const validateFfmpegCanUseCodec = async (codec) => {
35
27
  const ffmpegExecutable = config_1.ConfigInternals.getCustomFfmpegExecutable();
36
28
  if (codec === 'vp8' &&
37
29
  !(await renderer_1.RenderInternals.ffmpegHasFeature({
38
30
  feature: 'enable-libvpx',
39
- isLambda: options.isLambda,
40
31
  ffmpegExecutable,
41
32
  }))) {
42
33
  log_1.Log.error("The Vp8 codec has been selected, but your FFMPEG binary wasn't compiled with the --enable-lipvpx flag.");
@@ -45,7 +36,6 @@ const getFinalCodec = async (options) => {
45
36
  if (codec === 'h265' &&
46
37
  !(await renderer_1.RenderInternals.ffmpegHasFeature({
47
38
  feature: 'enable-gpl',
48
- isLambda: options.isLambda,
49
39
  ffmpegExecutable,
50
40
  }))) {
51
41
  log_1.Log.error("The H265 codec has been selected, but your FFMPEG binary wasn't compiled with the --enable-gpl flag.");
@@ -54,14 +44,24 @@ const getFinalCodec = async (options) => {
54
44
  if (codec === 'h265' &&
55
45
  !(await renderer_1.RenderInternals.ffmpegHasFeature({
56
46
  feature: 'enable-libx265',
57
- isLambda: options.isLambda,
58
47
  ffmpegExecutable,
59
48
  }))) {
60
49
  log_1.Log.error("The H265 codec has been selected, but your FFMPEG binary wasn't compiled with the --enable-libx265 flag.");
61
50
  log_1.Log.error('This does not work, please recompile your FFMPEG binary with --enable-gpl --enable-libx265 or choose a different codec.');
62
51
  }
63
- return codec;
64
52
  };
53
+ exports.validateFfmpegCanUseCodec = validateFfmpegCanUseCodec;
54
+ const getFinalCodec = (options) => {
55
+ var _a;
56
+ const { codec, reason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
57
+ cliFlag: parse_command_line_1.parsedCli.codec,
58
+ configFile: (_a = config_1.ConfigInternals.getOutputCodecOrUndefined()) !== null && _a !== void 0 ? _a : null,
59
+ downloadName: options.downloadName,
60
+ outName: options.outName,
61
+ });
62
+ return { codec, reason };
63
+ };
64
+ exports.getFinalCodec = getFinalCodec;
65
65
  const getBrowser = () => { var _a; return (_a = config_1.ConfigInternals.getBrowser()) !== null && _a !== void 0 ? _a : renderer_1.RenderInternals.DEFAULT_BROWSER; };
66
66
  const getAndValidateAbsoluteOutputFile = (relativeOutputLocation, overwrite) => {
67
67
  const absoluteOutputFile = path_1.default.resolve(process.cwd(), relativeOutputLocation);
@@ -119,11 +119,6 @@ const getAndValidateBrowser = async (browserExecutable) => {
119
119
  const getCliOptions = async (options) => {
120
120
  var _a;
121
121
  const frameRange = getAndValidateFrameRange();
122
- const codec = options.type === 'get-compositions'
123
- ? 'h264'
124
- : await getFinalCodec({
125
- isLambda: options.isLambda,
126
- });
127
122
  const shouldOutputImageSequence = options.type === 'still'
128
123
  ? true
129
124
  : await getAndValidateShouldOutputImageSequence({
@@ -133,14 +128,14 @@ const getCliOptions = async (options) => {
133
128
  const overwrite = config_1.ConfigInternals.getShouldOverwrite({
134
129
  defaultValue: !options.isLambda,
135
130
  });
136
- const crf = getAndValidateCrf(shouldOutputImageSequence, codec);
137
- const pixelFormat = getAndValidatePixelFormat(codec);
131
+ const crf = getAndValidateCrf(shouldOutputImageSequence, options.codec);
132
+ const pixelFormat = getAndValidatePixelFormat(options.codec);
138
133
  const imageFormat = getAndValidateImageFormat({
139
134
  shouldOutputImageSequence,
140
- codec,
135
+ codec: options.codec,
141
136
  pixelFormat,
142
137
  });
143
- const proResProfile = getAndValidateProResProfile(codec);
138
+ const proResProfile = getAndValidateProResProfile(options.codec);
144
139
  const browserExecutable = config_1.ConfigInternals.getBrowserExecutable();
145
140
  const ffmpegExecutable = config_1.ConfigInternals.getCustomFfmpegExecutable();
146
141
  const ffprobeExecutable = config_1.ConfigInternals.getCustomFfprobeExecutable();
@@ -152,8 +147,8 @@ const getCliOptions = async (options) => {
152
147
  headless: config_1.ConfigInternals.getChromiumHeadlessMode(),
153
148
  gl: (_a = config_1.ConfigInternals.getChromiumOpenGlRenderer()) !== null && _a !== void 0 ? _a : renderer_1.RenderInternals.DEFAULT_OPENGL_RENDERER,
154
149
  };
155
- const everyNthFrame = config_1.ConfigInternals.getAndValidateEveryNthFrame(codec);
156
- const numberOfGifLoops = config_1.ConfigInternals.getAndValidateNumberOfGifLoops(codec);
150
+ const everyNthFrame = config_1.ConfigInternals.getAndValidateEveryNthFrame(options.codec);
151
+ const numberOfGifLoops = config_1.ConfigInternals.getAndValidateNumberOfGifLoops(options.codec);
157
152
  const concurrency = config_1.ConfigInternals.getConcurrency();
158
153
  renderer_1.RenderInternals.validateConcurrency(concurrency, 'concurrency');
159
154
  return {
@@ -161,9 +156,8 @@ const getCliOptions = async (options) => {
161
156
  concurrency,
162
157
  frameRange,
163
158
  shouldOutputImageSequence,
164
- codec,
165
159
  inputProps: (0, get_input_props_1.getInputProps)(() => undefined),
166
- envVariables: await (0, get_env_1.getEnvironmentVariables)(),
160
+ envVariables: await (0, get_env_1.getEnvironmentVariables)(() => undefined),
167
161
  quality: config_1.ConfigInternals.getQuality(),
168
162
  browser: await getAndValidateBrowser(browserExecutable),
169
163
  crf,
package/dist/get-env.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const getEnvironmentVariables: () => Promise<Record<string, string>>;
1
+ export declare const getEnvironmentVariables: (onUpdate: (newProps: Record<string, string>) => void) => Promise<Record<string, string>>;