@remotion/cli 4.0.0-alpha10 → 4.0.0-alpha12

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 (89) hide show
  1. package/dist/config/index.d.ts +3 -3
  2. package/dist/config/log.d.ts +1 -1
  3. package/dist/config/max-timeline-tracks.js +6 -5
  4. package/dist/config/preview-server.js +2 -2
  5. package/dist/editor/components/AudioWaveform.d.ts +0 -1
  6. package/dist/editor/components/AudioWaveform.js +11 -6
  7. package/dist/editor/components/CurrentCompositionSideEffects.js +1 -1
  8. package/dist/editor/components/KeyboardShortcutsExplainer.js +1 -1
  9. package/dist/editor/components/Menu/is-menu-item.d.ts +2 -2
  10. package/dist/editor/components/Menu/is-menu-item.js +2 -2
  11. package/dist/editor/components/NewComposition/RemInput.d.ts +2 -2
  12. package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts +1 -1
  13. package/dist/editor/components/NewComposition/ValidationMessage.d.ts +2 -0
  14. package/dist/editor/components/NewComposition/ValidationMessage.js +3 -2
  15. package/dist/editor/components/Notifications/ServerDisconnected.js +1 -1
  16. package/dist/editor/components/RenderButton.js +1 -1
  17. package/dist/editor/components/RenderModal/DataEditor.js +1 -1
  18. package/dist/editor/components/RenderModal/RenderModalData.d.ts +2 -3
  19. package/dist/editor/components/RenderModal/RenderModalData.js +34 -23
  20. package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.js +1 -1
  21. package/dist/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.js +2 -2
  22. package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.d.ts +1 -0
  23. package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.js +31 -6
  24. package/dist/editor/components/RenderQueue/index.js +1 -1
  25. package/dist/editor/components/Splitter/SplitterContainer.js +1 -0
  26. package/dist/editor/components/Timeline/MaxTimelineTracks.d.ts +1 -0
  27. package/dist/editor/components/Timeline/MaxTimelineTracks.js +3 -2
  28. package/dist/editor/components/Timeline/Timeline.js +4 -5
  29. package/dist/editor/components/Timeline/TimelineDragHandler.js +26 -11
  30. package/dist/editor/components/Timeline/TimelineInOutPointer.js +7 -5
  31. package/dist/editor/components/Timeline/TimelineInOutPointerHandle.js +9 -3
  32. package/dist/editor/components/Timeline/TimelineSequence.d.ts +0 -1
  33. package/dist/editor/components/Timeline/TimelineSequence.js +23 -21
  34. package/dist/editor/components/Timeline/TimelineSlider.js +17 -4
  35. package/dist/editor/components/Timeline/TimelineTimeIndicators.js +21 -23
  36. package/dist/editor/components/Timeline/TimelineTracks.d.ts +0 -1
  37. package/dist/editor/components/Timeline/TimelineTracks.js +2 -2
  38. package/dist/editor/components/Timeline/TimelineWidthProvider.d.ts +7 -0
  39. package/dist/editor/components/Timeline/TimelineWidthProvider.js +17 -0
  40. package/dist/editor/helpers/get-left-of-timeline-slider.d.ts +0 -4
  41. package/dist/editor/helpers/get-left-of-timeline-slider.js +1 -24
  42. package/dist/editor/helpers/use-keybinding.js +1 -1
  43. package/dist/editor/helpers/use-menu-structure.js +1 -1
  44. package/dist/event-source.js +1 -1
  45. package/dist/get-cli-options.d.ts +1 -1
  46. package/dist/index.d.ts +6 -6
  47. package/dist/log.d.ts +3 -3
  48. package/dist/preview-server/live-events.js +5 -0
  49. package/dist/preview-server/render-queue/process-still.js +1 -1
  50. package/dist/preview-server/render-queue/process-video.js +1 -1
  51. package/dist/preview-server/start-server.js +4 -4
  52. package/dist/preview.js +0 -2
  53. package/dist/print-help.js +1 -1
  54. package/dist/server-ready-comment.d.ts +2 -0
  55. package/dist/server-ready-comment.js +13 -0
  56. package/dist/studio.js +4 -2
  57. package/package.json +8 -8
  58. package/dist/ansi/ansi-regex.d.ts +0 -2
  59. package/dist/ansi/ansi-regex.js +0 -18
  60. package/dist/config/ffmpeg-executable.d.ts +0 -5
  61. package/dist/config/ffmpeg-executable.js +0 -21
  62. package/dist/config/quality.d.ts +0 -2
  63. package/dist/config/quality.js +0 -17
  64. package/dist/editor/components/ClipboardIcon.d.ts +0 -2
  65. package/dist/editor/components/ClipboardIcon.js +0 -12
  66. package/dist/editor/components/CollapsedCompositionSelector.d.ts +0 -4
  67. package/dist/editor/components/CollapsedCompositionSelector.js +0 -39
  68. package/dist/editor/components/RichTimelineToggle.d.ts +0 -2
  69. package/dist/editor/components/RichTimelineToggle.js +0 -29
  70. package/dist/editor/components/Thumbnail.d.ts +0 -8
  71. package/dist/editor/components/Thumbnail.js +0 -76
  72. package/dist/editor/helpers/use-compact-ui.d.ts +0 -1
  73. package/dist/editor/helpers/use-compact-ui.js +0 -18
  74. package/dist/editor/icons/film.d.ts +0 -3
  75. package/dist/editor/icons/film.js +0 -8
  76. package/dist/editor/icons/timeline.d.ts +0 -3
  77. package/dist/editor/icons/timeline.js +0 -9
  78. package/dist/editor/state/rich-timeline.d.ts +0 -9
  79. package/dist/editor/state/rich-timeline.js +0 -17
  80. package/dist/get-render-media-options.d.ts +0 -8
  81. package/dist/get-render-media-options.js +0 -55
  82. package/dist/install.d.ts +0 -2
  83. package/dist/install.js +0 -36
  84. package/dist/is-javascript.d.ts +0 -2
  85. package/dist/is-javascript.js +0 -9
  86. package/dist/preview-server/dev-middleware/is-color-supported.d.ts +0 -1
  87. package/dist/preview-server/dev-middleware/is-color-supported.js +0 -37
  88. package/dist/preview-server/hot-middleware/strip-ansi.d.ts +0 -1
  89. package/dist/preview-server/hot-middleware/strip-ansi.js +0 -21
package/dist/log.d.ts CHANGED
@@ -2,19 +2,19 @@ export declare const Log: {
2
2
  verbose: (message?: any, ...optionalParams: any[]) => void;
3
3
  verboseAdvanced: (options: {
4
4
  indent: boolean;
5
- logLevel: "error" | "verbose" | "info" | "warn";
5
+ logLevel: "verbose" | "info" | "warn" | "error";
6
6
  } & {
7
7
  tag?: string | undefined;
8
8
  }, message?: any, ...optionalParams: any[]) => void;
9
9
  info: (message?: any, ...optionalParams: any[]) => void;
10
10
  infoAdvanced: (options: {
11
11
  indent: boolean;
12
- logLevel: "error" | "verbose" | "info" | "warn";
12
+ logLevel: "verbose" | "info" | "warn" | "error";
13
13
  }, message?: any, ...optionalParams: any[]) => void;
14
14
  warn: (message?: any, ...optionalParams: any[]) => void;
15
15
  warnAdvanced: (options: {
16
16
  indent: boolean;
17
- logLevel: "error" | "verbose" | "info" | "warn";
17
+ logLevel: "verbose" | "info" | "warn" | "error";
18
18
  }, message?: any, ...optionalParams: any[]) => void;
19
19
  error: (message?: any, ...optionalParams: any[]) => void;
20
20
  };
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
4
+ const server_ready_comment_1 = require("../server-ready-comment");
4
5
  const file_existence_watchers_1 = require("./file-existence-watchers");
5
6
  const serializeMessage = (message) => {
6
7
  return `data: ${JSON.stringify(message)}\n\n`;
@@ -28,6 +29,10 @@ const makeLiveEventsRouter = () => {
28
29
  request.on('close', () => {
29
30
  (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
30
31
  clients = clients.filter((client) => client.id !== clientId);
32
+ // If all clients disconnected, print a comment so user can easily restart it.
33
+ if (clients.length === 0) {
34
+ (0, server_ready_comment_1.printServerReadyComment)();
35
+ }
31
36
  });
32
37
  };
33
38
  const sendEventToClient = (event) => {
@@ -20,7 +20,7 @@ const processStill = async ({ job, remotionRoot, entryPoint, onProgress, addClea
20
20
  browser,
21
21
  browserExecutable,
22
22
  chromiumOptions: job.chromiumOptions,
23
- entryPointReason: 'same as preview',
23
+ entryPointReason: 'same as Studio',
24
24
  envVariables: job.envVariables,
25
25
  height: null,
26
26
  fullEntryPoint,
@@ -20,7 +20,7 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addC
20
20
  browser,
21
21
  browserExecutable,
22
22
  chromiumOptions: job.chromiumOptions,
23
- entryPointReason: 'same as preview',
23
+ entryPointReason: 'same as Studio',
24
24
  envVariables: job.envVariables,
25
25
  height: null,
26
26
  fullEntryPoint,
@@ -8,21 +8,21 @@ const bundler_1 = require("@remotion/bundler");
8
8
  const renderer_1 = require("@remotion/renderer");
9
9
  const node_http_1 = __importDefault(require("node:http"));
10
10
  const config_1 = require("../config");
11
+ const MaxTimelineTracks_1 = require("../editor/components/Timeline/MaxTimelineTracks");
11
12
  const log_1 = require("../log");
12
13
  const dev_middleware_1 = require("./dev-middleware");
13
14
  const hot_middleware_1 = require("./hot-middleware");
14
15
  const live_events_1 = require("./live-events");
15
16
  const routes_1 = require("./routes");
16
17
  const startServer = async (options) => {
17
- var _a, _b, _c, _d;
18
+ var _a, _b, _c;
18
19
  const [, config] = bundler_1.BundlerInternals.webpackConfig({
19
20
  entry: options.entry,
20
21
  userDefinedComponent: options.userDefinedComponent,
21
22
  outDir: null,
22
23
  environment: 'development',
23
24
  webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : config_1.ConfigInternals.getWebpackOverrideFn(),
24
- envVariables: (_b = options === null || options === void 0 ? void 0 : options.getEnvVariables()) !== null && _b !== void 0 ? _b : {},
25
- maxTimelineTracks: (_c = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _c !== void 0 ? _c : 15,
25
+ maxTimelineTracks: (_b = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _b !== void 0 ? _b : MaxTimelineTracks_1.DEFAULT_TIMELINE_TRACKS,
26
26
  entryPoints: [
27
27
  require.resolve('./hot-middleware/client'),
28
28
  require.resolve('./error-overlay/entry-basic.js'),
@@ -75,7 +75,7 @@ const startServer = async (options) => {
75
75
  }
76
76
  });
77
77
  });
78
- const desiredPort = (_d = options === null || options === void 0 ? void 0 : options.port) !== null && _d !== void 0 ? _d : undefined;
78
+ const desiredPort = (_c = options === null || options === void 0 ? void 0 : options.port) !== null && _c !== void 0 ? _c : undefined;
79
79
  const maxTries = 5;
80
80
  for (let i = 0; i < maxTries; i++) {
81
81
  try {
package/dist/preview.js CHANGED
@@ -20,7 +20,6 @@ const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-
20
20
  const live_events_1 = require("./preview-server/live-events");
21
21
  const public_folder_1 = require("./preview-server/public-folder");
22
22
  const start_server_1 = require("./preview-server/start-server");
23
- const watch_root_file_1 = require("./watch-root-file");
24
23
  const noop = () => undefined;
25
24
  const getShouldOpenBrowser = () => {
26
25
  var _a;
@@ -99,7 +98,6 @@ const previewCommand = async (remotionRoot, args) => {
99
98
  },
100
99
  staticHash,
101
100
  });
102
- (0, watch_root_file_1.watchRootFile)(remotionRoot);
103
101
  const { port, liveEventsServer } = await (0, start_server_1.startServer)({
104
102
  entry: node_path_1.default.resolve(__dirname, 'previewEntry.js'),
105
103
  userDefinedComponent: fullEntryPath,
@@ -16,7 +16,7 @@ const printHelp = () => {
16
16
  log_1.Log.info('Available commands:');
17
17
  log_1.Log.info('');
18
18
  log_1.Log.info('remotion studio <entry-point.ts>');
19
- log_1.Log.info(chalk_1.chalk.gray('Start the preview server.'));
19
+ log_1.Log.info(chalk_1.chalk.gray('Start the Remotion studio.'));
20
20
  printFlags([['--props', 'Pass input props as filename or as JSON']]);
21
21
  log_1.Log.info();
22
22
  log_1.Log.info('remotion render <entry-point.ts> <comp-id> <output-file.mp4>');
@@ -0,0 +1,2 @@
1
+ export declare const setServerReadyComment: (newMessage: string) => void;
2
+ export declare const printServerReadyComment: () => void;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.printServerReadyComment = exports.setServerReadyComment = void 0;
4
+ const log_1 = require("./log");
5
+ let message = null;
6
+ const setServerReadyComment = (newMessage) => {
7
+ message = newMessage;
8
+ };
9
+ exports.setServerReadyComment = setServerReadyComment;
10
+ const printServerReadyComment = () => {
11
+ log_1.Log.info(message);
12
+ };
13
+ exports.printServerReadyComment = printServerReadyComment;
package/dist/studio.js CHANGED
@@ -20,6 +20,7 @@ const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-
20
20
  const live_events_1 = require("./preview-server/live-events");
21
21
  const public_folder_1 = require("./preview-server/public-folder");
22
22
  const start_server_1 = require("./preview-server/start-server");
23
+ const server_ready_comment_1 = require("./server-ready-comment");
23
24
  const watch_root_file_1 = require("./watch-root-file");
24
25
  const noop = () => undefined;
25
26
  const getShouldOpenBrowser = () => {
@@ -119,11 +120,12 @@ const studioCommand = async (remotionRoot, args) => {
119
120
  (0, live_events_1.setLiveEventsListener)(liveEventsServer);
120
121
  const networkAddress = (0, get_network_address_1.getNetworkAddress)();
121
122
  if (networkAddress) {
122
- log_1.Log.info(`Server ready - Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);
123
+ (0, server_ready_comment_1.setServerReadyComment)(`Server ready - Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);
123
124
  }
124
125
  else {
125
- log_1.Log.info(`Running on http://localhost:${port}`);
126
+ (0, server_ready_comment_1.setServerReadyComment)(`Running on http://localhost:${port}`);
126
127
  }
128
+ (0, server_ready_comment_1.printServerReadyComment)();
127
129
  const { reasonForBrowserDecision, shouldOpenBrowser } = getShouldOpenBrowser();
128
130
  if (shouldOpenBrowser) {
129
131
  await (0, better_opn_1.openBrowser)({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/cli",
3
- "version": "4.0.0-alpha10",
3
+ "version": "4.0.0-alpha12",
4
4
  "description": "CLI for Remotion",
5
5
  "main": "dist/index.js",
6
6
  "sideEffects": false,
@@ -35,11 +35,11 @@
35
35
  "prompts": "2.4.1",
36
36
  "semver": "7.3.5",
37
37
  "source-map": "0.6.1",
38
- "@remotion/bundler": "4.0.0-alpha10",
39
- "@remotion/player": "4.0.0-alpha10",
40
- "remotion": "4.0.0-alpha10",
41
- "@remotion/media-utils": "4.0.0-alpha10",
42
- "@remotion/renderer": "4.0.0-alpha10"
38
+ "@remotion/bundler": "4.0.0-alpha12",
39
+ "@remotion/media-utils": "4.0.0-alpha12",
40
+ "@remotion/player": "4.0.0-alpha12",
41
+ "remotion": "4.0.0-alpha12",
42
+ "@remotion/renderer": "4.0.0-alpha12"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "react": ">=16.8.0",
@@ -67,8 +67,8 @@
67
67
  "typescript": "^4.7.0",
68
68
  "vitest": "0.31.1",
69
69
  "zod": "^3.21.4",
70
- "@remotion/zod-types": "4.0.0-alpha10",
71
- "@remotion/tailwind": "4.0.0-alpha10"
70
+ "@remotion/zod-types": "4.0.0-alpha12",
71
+ "@remotion/tailwind": "4.0.0-alpha12"
72
72
  },
73
73
  "keywords": [
74
74
  "remotion",
@@ -1,2 +0,0 @@
1
- export declare const ansiRegex: () => RegExp;
2
- export declare const stripAnsi: (str: string) => string;
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.stripAnsi = exports.ansiRegex = void 0;
4
- const ansiRegex = () => {
5
- const pattern = [
6
- '[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
7
- '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))',
8
- ].join('|');
9
- return new RegExp(pattern, 'g');
10
- };
11
- exports.ansiRegex = ansiRegex;
12
- const stripAnsi = (str) => {
13
- if (typeof str !== 'string') {
14
- throw new TypeError(`Expected a \`string\`, got \`${typeof str}\``);
15
- }
16
- return str.replace((0, exports.ansiRegex)(), '');
17
- };
18
- exports.stripAnsi = stripAnsi;
@@ -1,5 +0,0 @@
1
- import type { FfmpegExecutable } from '@remotion/renderer';
2
- export declare const setFfmpegExecutable: (ffmpegPath: FfmpegExecutable) => void;
3
- export declare const getCustomFfmpegExecutable: () => FfmpegExecutable;
4
- export declare const setFfprobeExecutable: (ffprobePath: FfmpegExecutable) => void;
5
- export declare const getCustomFfprobeExecutable: () => FfmpegExecutable;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getCustomFfprobeExecutable = exports.setFfprobeExecutable = exports.getCustomFfmpegExecutable = exports.setFfmpegExecutable = void 0;
4
- let currentFfmpegExecutablePath = null;
5
- let currentFfprobeExecutablePath = null;
6
- const setFfmpegExecutable = (ffmpegPath) => {
7
- currentFfmpegExecutablePath = ffmpegPath;
8
- };
9
- exports.setFfmpegExecutable = setFfmpegExecutable;
10
- const getCustomFfmpegExecutable = () => {
11
- return currentFfmpegExecutablePath;
12
- };
13
- exports.getCustomFfmpegExecutable = getCustomFfmpegExecutable;
14
- const setFfprobeExecutable = (ffprobePath) => {
15
- currentFfprobeExecutablePath = ffprobePath;
16
- };
17
- exports.setFfprobeExecutable = setFfprobeExecutable;
18
- const getCustomFfprobeExecutable = () => {
19
- return currentFfprobeExecutablePath;
20
- };
21
- exports.getCustomFfprobeExecutable = getCustomFfprobeExecutable;
@@ -1,2 +0,0 @@
1
- export declare const setQuality: (q: number | undefined) => void;
2
- export declare const getQuality: () => number | undefined;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getQuality = exports.setQuality = void 0;
4
- const renderer_1 = require("@remotion/renderer");
5
- const defaultValue = undefined;
6
- let quality = defaultValue;
7
- const setQuality = (q) => {
8
- renderer_1.RenderInternals.validateQuality(q);
9
- if (q === 0 || q === undefined) {
10
- quality = defaultValue;
11
- return;
12
- }
13
- quality = q;
14
- };
15
- exports.setQuality = setQuality;
16
- const getQuality = () => quality;
17
- exports.getQuality = getQuality;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const ClipboardIcon: React.FC;
@@ -1,12 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ClipboardIcon = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const ClipboardIcon = () => {
6
- return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: {
7
- height: 16,
8
- verticalAlign: 'middle',
9
- marginTop: -3,
10
- }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
11
- };
12
- exports.ClipboardIcon = ClipboardIcon;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- export declare const CollapsedCompositionSelector: React.FC<{
3
- onExpand: () => void;
4
- }>;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.CollapsedCompositionSelector = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const colors_1 = require("../helpers/colors");
7
- const caret_1 = require("../icons/caret");
8
- const z_index_1 = require("../state/z-index");
9
- const CollapsedCompositionSelector = ({ onExpand }) => {
10
- const [hovered, setHovered] = (0, react_1.useState)(false);
11
- const { tabIndex } = (0, z_index_1.useZIndex)();
12
- const onPointerEnter = (0, react_1.useCallback)(() => {
13
- setHovered(true);
14
- }, []);
15
- const onPointerLeave = (0, react_1.useCallback)(() => {
16
- setHovered(false);
17
- }, []);
18
- const style = (0, react_1.useMemo)(() => {
19
- return {
20
- border: 'none',
21
- borderRight: '2px solid black',
22
- cursor: 'pointer',
23
- color: 'white',
24
- display: 'flex',
25
- justifyContent: 'center',
26
- alignItems: 'center',
27
- paddingLeft: 7,
28
- paddingRight: 4,
29
- backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
30
- hovered,
31
- selected: false,
32
- }),
33
- appearance: 'none',
34
- WebkitAppearance: 'none',
35
- };
36
- }, [hovered]);
37
- return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) }));
38
- };
39
- exports.CollapsedCompositionSelector = CollapsedCompositionSelector;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const RichTimelineToggle: React.FC;
@@ -1,29 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.RichTimelineToggle = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
7
- const timeline_1 = require("../icons/timeline");
8
- const rich_timeline_1 = require("../state/rich-timeline");
9
- const ControlButton_1 = require("./ControlButton");
10
- const tooltip = 'Enable rich timeline. Go to remotion.dev/docs/timeline for more information.';
11
- const RichTimelineToggle = () => {
12
- const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
13
- const isStill = (0, is_current_selected_still_1.useIsStill)();
14
- const onClick = (0, react_1.useCallback)(() => {
15
- setRichTimeline((c) => {
16
- (0, rich_timeline_1.persistRichTimelineOption)(!c);
17
- return !c;
18
- });
19
- }, [setRichTimeline]);
20
- if (isStill) {
21
- return null;
22
- }
23
- return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(timeline_1.TimelineIcon, { style: {
24
- width: 16,
25
- height: 16,
26
- color: richTimeline ? 'var(--blue)' : 'white',
27
- } }) }));
28
- };
29
- exports.RichTimelineToggle = RichTimelineToggle;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import type { TComposition } from 'remotion';
3
- export declare const Thumbnail: React.FC<{
4
- composition: TComposition<unknown>;
5
- targetHeight: number;
6
- targetWidth: number;
7
- frameToDisplay: number;
8
- }>;
@@ -1,76 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Thumbnail = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const remotion_1 = require("remotion");
7
- const checkerboard_background_1 = require("../helpers/checkerboard-background");
8
- const checkerboard_1 = require("../state/checkerboard");
9
- const Thumbnail = ({ composition, targetHeight, targetWidth, frameToDisplay }) => {
10
- const { height, width } = composition;
11
- const heightRatio = targetHeight / height;
12
- const widthRatio = targetWidth / width;
13
- const ratio = Math.min(heightRatio, widthRatio);
14
- const scale = ratio;
15
- const actualWidth = width * scale;
16
- const actualHeight = height * scale;
17
- const correction = 0 - (1 - scale) / 2;
18
- const xCorrection = correction * width;
19
- const yCorrection = correction * height;
20
- const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
21
- const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
22
- const container = (0, react_1.useMemo)(() => {
23
- return {
24
- width: targetWidth,
25
- height: targetHeight,
26
- backgroundColor: 'rgba(0, 0, 0, 0.4)',
27
- display: 'flex',
28
- justifyContent: 'center',
29
- alignItems: 'center',
30
- };
31
- }, [targetHeight, targetWidth]);
32
- const outer = (0, react_1.useMemo)(() => {
33
- return {
34
- width: actualWidth,
35
- height: actualHeight,
36
- backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(checkerboard),
37
- backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(checkerboard),
38
- backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(25),
39
- backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(25),
40
- };
41
- }, [actualHeight, actualWidth, checkerboard]);
42
- const inner = (0, react_1.useMemo)(() => {
43
- return {
44
- width,
45
- height,
46
- transform: `scale(${scale}) `,
47
- overflow: 'hidden',
48
- marginLeft: xCorrection,
49
- marginTop: yCorrection,
50
- display: 'flex',
51
- color: 'black',
52
- };
53
- }, [height, scale, width, xCorrection, yCorrection]);
54
- const timelineState = (0, react_1.useMemo)(() => {
55
- return {
56
- playing: false,
57
- frame: frameToDisplay,
58
- rootId: thumbnailId,
59
- imperativePlaying: {
60
- current: false,
61
- },
62
- playbackRate: 1,
63
- setPlaybackRate: () => {
64
- throw new Error('thumbnail');
65
- },
66
- audioAndVideoTags: { current: [] },
67
- };
68
- }, [frameToDisplay, thumbnailId]);
69
- const props = (0, react_1.useMemo)(() => {
70
- var _a;
71
- return (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {};
72
- }, [composition.defaultProps]);
73
- const ThumbnailComponent = composition.component;
74
- return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineState, children: (0, jsx_runtime_1.jsx)(ThumbnailComponent, { ...props }) }) }) }) }) }));
75
- };
76
- exports.Thumbnail = Thumbnail;
@@ -1 +0,0 @@
1
- export declare function useCompactUI(): boolean;
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useCompactUI = void 0;
4
- const react_1 = require("react");
5
- const breakpoint = 1200;
6
- function useCompactUI() {
7
- const [compactUI, setCompactUI] = (0, react_1.useState)(window.innerWidth < breakpoint);
8
- (0, react_1.useEffect)(() => {
9
- function handleResize() {
10
- setCompactUI(window.innerWidth < breakpoint);
11
- }
12
- window.addEventListener('resize', handleResize);
13
- handleResize();
14
- return () => window.removeEventListener('resize', handleResize);
15
- }, []);
16
- return compactUI;
17
- }
18
- exports.useCompactUI = useCompactUI;
@@ -1,3 +0,0 @@
1
- import type { SVGProps } from 'react';
2
- import React from 'react';
3
- export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement>>;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FilmIcon = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const FilmIcon = (props) => {
6
- return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M488 64h-8v20c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12V64H96v20c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12V64h-8C10.7 64 0 74.7 0 88v336c0 13.3 10.7 24 24 24h8v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h320v-20c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v20h8c13.3 0 24-10.7 24-24V88c0-13.3-10.7-24-24-24zM96 372c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12H44c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm280 208c0 6.6-5.4 12-12 12H148c-6.6 0-12-5.4-12-12V124c0-6.6 5.4-12 12-12h216c6.6 0 12 5.4 12 12v264zm104-16c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40zm0-96c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40z" }) }));
7
- };
8
- exports.FilmIcon = FilmIcon;
@@ -1,3 +0,0 @@
1
- import type { SVGProps } from 'react';
2
- import React from 'react';
3
- export declare const TimelineIcon: React.FC<SVGProps<SVGSVGElement>>;
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TimelineIcon = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const TimelineIcon = (props) => {
6
- var _a;
7
- return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }) }));
8
- };
9
- exports.TimelineIcon = TimelineIcon;
@@ -1,9 +0,0 @@
1
- /// <reference types="react" />
2
- declare type State = {
3
- richTimeline: boolean;
4
- setRichTimeline: (cb: (prevState: boolean) => boolean) => void;
5
- };
6
- export declare const persistRichTimelineOption: (option: boolean) => void;
7
- export declare const loadRichTimelineOption: () => boolean;
8
- export declare const RichTimelineContext: import("react").Context<State>;
9
- export {};
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.RichTimelineContext = exports.loadRichTimelineOption = exports.persistRichTimelineOption = void 0;
4
- const react_1 = require("react");
5
- const persistRichTimelineOption = (option) => {
6
- localStorage.setItem('richTimeline', String(option));
7
- };
8
- exports.persistRichTimelineOption = persistRichTimelineOption;
9
- const loadRichTimelineOption = () => {
10
- const item = localStorage.getItem('richTimeline');
11
- return item === 'true';
12
- };
13
- exports.loadRichTimelineOption = loadRichTimelineOption;
14
- exports.RichTimelineContext = (0, react_1.createContext)({
15
- richTimeline: (0, exports.loadRichTimelineOption)(),
16
- setRichTimeline: () => undefined,
17
- });
@@ -1,8 +0,0 @@
1
- import type { Codec, RenderMediaOptions } from '@remotion/renderer';
2
- export declare const getRenderMediaOptions: ({ outputLocation, config, serveUrl, codec, remotionRoot, }: {
3
- outputLocation: RenderMediaOptions['outputLocation'];
4
- config: RenderMediaOptions['composition'];
5
- serveUrl: string;
6
- codec: Codec;
7
- remotionRoot: string;
8
- }) => Promise<RenderMediaOptions>;
@@ -1,55 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getRenderMediaOptions = void 0;
4
- const renderer_1 = require("@remotion/renderer");
5
- const config_1 = require("./config");
6
- const get_audio_codec_1 = require("./get-audio-codec");
7
- const get_cli_options_1 = require("./get-cli-options");
8
- const image_formats_1 = require("./image-formats");
9
- const getRenderMediaOptions = async ({ outputLocation, config, serveUrl, codec, remotionRoot, }) => {
10
- const { proResProfile, concurrency, frameRange, overwrite, inputProps, envVariables, quality, crf, pixelFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, } = await (0, get_cli_options_1.getCliOptions)({
11
- isLambda: false,
12
- type: 'series',
13
- remotionRoot,
14
- });
15
- const imageFormat = (0, image_formats_1.getImageFormat)(codec);
16
- const audioCodec = (0, get_audio_codec_1.getResolvedAudioCodec)();
17
- return {
18
- outputLocation,
19
- composition: {
20
- ...config,
21
- width: width !== null && width !== void 0 ? width : config.width,
22
- height: height !== null && height !== void 0 ? height : config.height,
23
- },
24
- crf,
25
- envVariables,
26
- ffmpegExecutable,
27
- ffprobeExecutable,
28
- frameRange,
29
- imageFormat,
30
- inputProps,
31
- overwrite,
32
- pixelFormat,
33
- proResProfile,
34
- quality,
35
- dumpBrowserLogs: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
36
- chromiumOptions,
37
- timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
38
- scale,
39
- port,
40
- numberOfGifLoops,
41
- everyNthFrame,
42
- verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
43
- muted,
44
- enforceAudioTrack,
45
- browserExecutable,
46
- ffmpegOverride,
47
- concurrency,
48
- serveUrl,
49
- codec,
50
- audioBitrate,
51
- videoBitrate,
52
- audioCodec,
53
- };
54
- };
55
- exports.getRenderMediaOptions = getRenderMediaOptions;
package/dist/install.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const INSTALL_COMMAND: "install";
2
- export declare const installCommand: (remotionRoot: string, args: string[]) => Promise<void>;