@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.
- package/dist/config/index.d.ts +3 -3
- package/dist/config/log.d.ts +1 -1
- package/dist/config/max-timeline-tracks.js +6 -5
- package/dist/config/preview-server.js +2 -2
- package/dist/editor/components/AudioWaveform.d.ts +0 -1
- package/dist/editor/components/AudioWaveform.js +11 -6
- package/dist/editor/components/CurrentCompositionSideEffects.js +1 -1
- package/dist/editor/components/KeyboardShortcutsExplainer.js +1 -1
- package/dist/editor/components/Menu/is-menu-item.d.ts +2 -2
- package/dist/editor/components/Menu/is-menu-item.js +2 -2
- package/dist/editor/components/NewComposition/RemInput.d.ts +2 -2
- package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts +1 -1
- package/dist/editor/components/NewComposition/ValidationMessage.d.ts +2 -0
- package/dist/editor/components/NewComposition/ValidationMessage.js +3 -2
- package/dist/editor/components/Notifications/ServerDisconnected.js +1 -1
- package/dist/editor/components/RenderButton.js +1 -1
- package/dist/editor/components/RenderModal/DataEditor.js +1 -1
- package/dist/editor/components/RenderModal/RenderModalData.d.ts +2 -3
- package/dist/editor/components/RenderModal/RenderModalData.js +34 -23
- package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.js +1 -1
- package/dist/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.js +2 -2
- package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.d.ts +1 -0
- package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.js +31 -6
- package/dist/editor/components/RenderQueue/index.js +1 -1
- package/dist/editor/components/Splitter/SplitterContainer.js +1 -0
- package/dist/editor/components/Timeline/MaxTimelineTracks.d.ts +1 -0
- package/dist/editor/components/Timeline/MaxTimelineTracks.js +3 -2
- package/dist/editor/components/Timeline/Timeline.js +4 -5
- package/dist/editor/components/Timeline/TimelineDragHandler.js +26 -11
- package/dist/editor/components/Timeline/TimelineInOutPointer.js +7 -5
- package/dist/editor/components/Timeline/TimelineInOutPointerHandle.js +9 -3
- package/dist/editor/components/Timeline/TimelineSequence.d.ts +0 -1
- package/dist/editor/components/Timeline/TimelineSequence.js +23 -21
- package/dist/editor/components/Timeline/TimelineSlider.js +17 -4
- package/dist/editor/components/Timeline/TimelineTimeIndicators.js +21 -23
- package/dist/editor/components/Timeline/TimelineTracks.d.ts +0 -1
- package/dist/editor/components/Timeline/TimelineTracks.js +2 -2
- package/dist/editor/components/Timeline/TimelineWidthProvider.d.ts +7 -0
- package/dist/editor/components/Timeline/TimelineWidthProvider.js +17 -0
- package/dist/editor/helpers/get-left-of-timeline-slider.d.ts +0 -4
- package/dist/editor/helpers/get-left-of-timeline-slider.js +1 -24
- package/dist/editor/helpers/use-keybinding.js +1 -1
- package/dist/editor/helpers/use-menu-structure.js +1 -1
- package/dist/event-source.js +1 -1
- package/dist/get-cli-options.d.ts +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/log.d.ts +3 -3
- package/dist/preview-server/live-events.js +5 -0
- package/dist/preview-server/render-queue/process-still.js +1 -1
- package/dist/preview-server/render-queue/process-video.js +1 -1
- package/dist/preview-server/start-server.js +4 -4
- package/dist/preview.js +0 -2
- package/dist/print-help.js +1 -1
- package/dist/server-ready-comment.d.ts +2 -0
- package/dist/server-ready-comment.js +13 -0
- package/dist/studio.js +4 -2
- package/package.json +8 -8
- package/dist/ansi/ansi-regex.d.ts +0 -2
- package/dist/ansi/ansi-regex.js +0 -18
- package/dist/config/ffmpeg-executable.d.ts +0 -5
- package/dist/config/ffmpeg-executable.js +0 -21
- package/dist/config/quality.d.ts +0 -2
- package/dist/config/quality.js +0 -17
- package/dist/editor/components/ClipboardIcon.d.ts +0 -2
- package/dist/editor/components/ClipboardIcon.js +0 -12
- package/dist/editor/components/CollapsedCompositionSelector.d.ts +0 -4
- package/dist/editor/components/CollapsedCompositionSelector.js +0 -39
- package/dist/editor/components/RichTimelineToggle.d.ts +0 -2
- package/dist/editor/components/RichTimelineToggle.js +0 -29
- package/dist/editor/components/Thumbnail.d.ts +0 -8
- package/dist/editor/components/Thumbnail.js +0 -76
- package/dist/editor/helpers/use-compact-ui.d.ts +0 -1
- package/dist/editor/helpers/use-compact-ui.js +0 -18
- package/dist/editor/icons/film.d.ts +0 -3
- package/dist/editor/icons/film.js +0 -8
- package/dist/editor/icons/timeline.d.ts +0 -3
- package/dist/editor/icons/timeline.js +0 -9
- package/dist/editor/state/rich-timeline.d.ts +0 -9
- package/dist/editor/state/rich-timeline.js +0 -17
- package/dist/get-render-media-options.d.ts +0 -8
- package/dist/get-render-media-options.js +0 -55
- package/dist/install.d.ts +0 -2
- package/dist/install.js +0 -36
- package/dist/is-javascript.d.ts +0 -2
- package/dist/is-javascript.js +0 -9
- package/dist/preview-server/dev-middleware/is-color-supported.d.ts +0 -1
- package/dist/preview-server/dev-middleware/is-color-supported.js +0 -37
- package/dist/preview-server/hot-middleware/strip-ansi.d.ts +0 -1
- 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: "
|
|
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: "
|
|
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: "
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
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 = (
|
|
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,
|
package/dist/print-help.js
CHANGED
|
@@ -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
|
|
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,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
|
-
|
|
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
|
-
|
|
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-
|
|
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-
|
|
39
|
-
"@remotion/
|
|
40
|
-
"remotion": "4.0.0-
|
|
41
|
-
"
|
|
42
|
-
"@remotion/renderer": "4.0.0-
|
|
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-
|
|
71
|
-
"@remotion/tailwind": "4.0.0-
|
|
70
|
+
"@remotion/zod-types": "4.0.0-alpha12",
|
|
71
|
+
"@remotion/tailwind": "4.0.0-alpha12"
|
|
72
72
|
},
|
|
73
73
|
"keywords": [
|
|
74
74
|
"remotion",
|
package/dist/ansi/ansi-regex.js
DELETED
|
@@ -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;
|
package/dist/config/quality.d.ts
DELETED
package/dist/config/quality.js
DELETED
|
@@ -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,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,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,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,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,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,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