@remotion/cli 4.0.0-alpha10 → 4.0.0-alpha11
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/image-format.d.ts +1 -1
- package/dist/config/index.d.ts +4 -4
- package/dist/config/log.d.ts +1 -1
- package/dist/config/max-timeline-tracks.js +4 -4
- package/dist/config/preview-server.js +2 -2
- 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 +1 -1
- package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts +1 -1
- package/dist/editor/components/NewComposition/RemTextarea.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/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/RenderModal/human-readable-codec.d.ts +1 -1
- package/dist/editor/components/RenderQueue/index.js +1 -1
- package/dist/editor/helpers/colors.d.ts +1 -1
- 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 +2 -2
- package/dist/index.d.ts +11 -11
- package/dist/log.d.ts +3 -3
- package/dist/preview-server/dev-middleware/range-parser.d.ts +1 -1
- 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/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
|
@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
|
|
|
2
2
|
export declare const setStillImageFormat: (format: StillImageFormat) => void;
|
|
3
3
|
export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
|
|
4
4
|
export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
|
|
5
|
-
export declare const getUserPreferredVideoImageFormat: () => "
|
|
5
|
+
export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
|
package/dist/config/index.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ declare global {
|
|
|
17
17
|
*/
|
|
18
18
|
readonly setCachingEnabled: (flag: boolean) => void;
|
|
19
19
|
/**
|
|
20
|
-
* Define on which port Remotion should start it's HTTP servers
|
|
20
|
+
* Define on which port Remotion should start it's HTTP servers.
|
|
21
21
|
* By default, Remotion will try to find a free port.
|
|
22
22
|
* If you specify a port, but it's not available, Remotion will throw an error.
|
|
23
23
|
*/
|
|
@@ -50,14 +50,14 @@ declare global {
|
|
|
50
50
|
*/
|
|
51
51
|
readonly setNumberOfSharedAudioTags: (numberOfAudioTags: number) => void;
|
|
52
52
|
/**
|
|
53
|
-
* Enable Webpack polling instead of file system listeners for hot reloading in the
|
|
53
|
+
* Enable Webpack polling instead of file system listeners for hot reloading in the Studio.
|
|
54
54
|
* This is useful if you are using a remote directory or a virtual machine.
|
|
55
55
|
* @param interval
|
|
56
56
|
* @default null
|
|
57
57
|
*/
|
|
58
58
|
readonly setWebpackPollingInMilliseconds: (interval: number | null) => void;
|
|
59
59
|
/**
|
|
60
|
-
* Whether Remotion should open a browser when starting the
|
|
60
|
+
* Whether Remotion should open a browser when starting the Studio.
|
|
61
61
|
* @param should
|
|
62
62
|
* @default true
|
|
63
63
|
*/
|
|
@@ -273,7 +273,7 @@ export declare const ConfigInternals: {
|
|
|
273
273
|
getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
|
|
274
274
|
getDotEnvLocation: () => string | null;
|
|
275
275
|
getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
|
|
276
|
-
getUserPreferredVideoImageFormat: () => "
|
|
276
|
+
getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
|
|
277
277
|
getWebpackOverrideFn: () => WebpackOverrideFn;
|
|
278
278
|
getWebpackCaching: () => boolean;
|
|
279
279
|
getOutputLocation: () => string | null;
|
package/dist/config/log.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const getLogLevel: () => "
|
|
1
|
+
export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
|
|
@@ -4,16 +4,16 @@ exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
|
|
|
4
4
|
let maxTimelineTracks = 15;
|
|
5
5
|
const setMaxTimelineTracks = (maxTracks) => {
|
|
6
6
|
if (typeof maxTracks !== 'number') {
|
|
7
|
-
throw new Error(`Need to pass a number to Config.
|
|
7
|
+
throw new Error(`Need to pass a number to Config.setMaxTimelineTracks(), got ${typeof maxTracks}`);
|
|
8
8
|
}
|
|
9
9
|
if (Number.isNaN(maxTracks)) {
|
|
10
|
-
throw new Error(`Need to pass a real number to Config.
|
|
10
|
+
throw new Error(`Need to pass a real number to Config.setMaxTimelineTracks(), got NaN`);
|
|
11
11
|
}
|
|
12
12
|
if (!Number.isFinite(maxTracks)) {
|
|
13
|
-
throw new Error(`Need to pass a real number to Config.
|
|
13
|
+
throw new Error(`Need to pass a real number to Config.setMaxTimelineTracks(), got ${maxTracks}`);
|
|
14
14
|
}
|
|
15
15
|
if (maxTracks < 0) {
|
|
16
|
-
throw new Error(`Need to pass a non-negative number to Config.
|
|
16
|
+
throw new Error(`Need to pass a non-negative number to Config.setMaxTimelineTracks(), got ${maxTracks}`);
|
|
17
17
|
}
|
|
18
18
|
maxTimelineTracks = maxTracks;
|
|
19
19
|
};
|
|
@@ -4,14 +4,14 @@ exports.getServerPort = exports.setPort = void 0;
|
|
|
4
4
|
let serverPort;
|
|
5
5
|
const setPort = (port) => {
|
|
6
6
|
if (!['number', 'undefined'].includes(typeof port)) {
|
|
7
|
-
throw new Error(`
|
|
7
|
+
throw new Error(`Studio server port should be a number. Got ${typeof port} (${JSON.stringify(port)})`);
|
|
8
8
|
}
|
|
9
9
|
if (port === undefined) {
|
|
10
10
|
serverPort = undefined;
|
|
11
11
|
return;
|
|
12
12
|
}
|
|
13
13
|
if (port < 1 || port > 65535) {
|
|
14
|
-
throw new Error(`
|
|
14
|
+
throw new Error(`Studio server port should be a number between 1 and 65535. Got ${port}`);
|
|
15
15
|
}
|
|
16
16
|
serverPort = port;
|
|
17
17
|
};
|
|
@@ -27,7 +27,7 @@ const CurrentCompositionKeybindings = () => {
|
|
|
27
27
|
return;
|
|
28
28
|
}
|
|
29
29
|
if (type !== 'connected') {
|
|
30
|
-
(0, NotificationCenter_1.sendErrorNotification)('
|
|
30
|
+
(0, NotificationCenter_1.sendErrorNotification)('Studio server is offline');
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
33
|
const renderButton = document.getElementById('render-modal-button');
|
|
@@ -52,6 +52,6 @@ const li = {
|
|
|
52
52
|
fontSize: 14,
|
|
53
53
|
};
|
|
54
54
|
const KeyboardShortcutsExplainer = () => {
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
|
|
56
56
|
};
|
|
57
57
|
exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export declare const MENU_INITIATOR_CLASSNAME = "__remotion-
|
|
2
|
-
export declare const MENU_ITEM_CLASSNAME = "__remotion-
|
|
1
|
+
export declare const MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
|
|
2
|
+
export declare const MENU_ITEM_CLASSNAME = "__remotion-studio-menu-item";
|
|
3
3
|
export declare const HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
|
|
4
4
|
export declare const VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
|
|
5
5
|
export declare const isMenuItem: (el: HTMLElement) => boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.isMenuItem = exports.VERTICAL_SCROLLBAR_CLASSNAME = exports.HORIZONTAL_SCROLLBAR_CLASSNAME = exports.MENU_ITEM_CLASSNAME = exports.MENU_INITIATOR_CLASSNAME = void 0;
|
|
4
|
-
exports.MENU_INITIATOR_CLASSNAME = '__remotion-
|
|
5
|
-
exports.MENU_ITEM_CLASSNAME = '__remotion-
|
|
4
|
+
exports.MENU_INITIATOR_CLASSNAME = '__remotion-studio-menu-initiator';
|
|
5
|
+
exports.MENU_ITEM_CLASSNAME = '__remotion-studio-menu-item';
|
|
6
6
|
exports.HORIZONTAL_SCROLLBAR_CLASSNAME = '__remotion-horizontal-scrollbar';
|
|
7
7
|
exports.VERTICAL_SCROLLBAR_CLASSNAME = '__remotion-vertical-scrollbar';
|
|
8
8
|
const isMenuItem = (el) => {
|
|
@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
|
|
|
13
13
|
isFocused: boolean;
|
|
14
14
|
isHovered: boolean;
|
|
15
15
|
}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
|
|
16
|
-
export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "
|
|
16
|
+
export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
|
|
17
17
|
export {};
|
|
@@ -3,5 +3,5 @@ import type { RemInputStatus } from './RemInput';
|
|
|
3
3
|
declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
|
|
4
4
|
status: RemInputStatus;
|
|
5
5
|
};
|
|
6
|
-
export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "
|
|
6
|
+
export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
|
|
7
7
|
export {};
|
|
@@ -3,5 +3,5 @@ declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextA
|
|
|
3
3
|
status: 'error' | 'warning' | 'ok';
|
|
4
4
|
};
|
|
5
5
|
export declare const inputBaseStyle: React.CSSProperties;
|
|
6
|
-
export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "
|
|
6
|
+
export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
7
7
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ValidationMessage = void 0;
|
|
3
|
+
exports.ValidationMessage = exports.WarningTriangle = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const colors_1 = require("../../helpers/colors");
|
|
@@ -8,6 +8,7 @@ const layout_1 = require("../layout");
|
|
|
8
8
|
const WarningTriangle = (props) => {
|
|
9
9
|
return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
|
|
10
10
|
};
|
|
11
|
+
exports.WarningTriangle = WarningTriangle;
|
|
11
12
|
const style = {
|
|
12
13
|
width: 12,
|
|
13
14
|
height: 12,
|
|
@@ -28,6 +29,6 @@ const ValidationMessage = ({ message, align, type }) => {
|
|
|
28
29
|
fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
|
|
29
30
|
};
|
|
30
31
|
}, [type]);
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
|
|
32
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(exports.WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
|
|
32
33
|
};
|
|
33
34
|
exports.ValidationMessage = ValidationMessage;
|
|
@@ -44,6 +44,6 @@ const ServerDisconnected = () => {
|
|
|
44
44
|
if (pageIsGoingToReload) {
|
|
45
45
|
return null;
|
|
46
46
|
}
|
|
47
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
|
|
48
48
|
};
|
|
49
49
|
exports.ServerDisconnected = ServerDisconnected;
|
|
@@ -31,7 +31,7 @@ const RenderButton = () => {
|
|
|
31
31
|
const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
|
|
32
32
|
const tooltip = type === 'connected'
|
|
33
33
|
? 'Export the current composition ' + shortcut
|
|
34
|
-
: 'Connect to the
|
|
34
|
+
: 'Connect to the Studio server to render';
|
|
35
35
|
const iconStyle = (0, react_1.useMemo)(() => {
|
|
36
36
|
return {
|
|
37
37
|
style: {
|
|
@@ -260,7 +260,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
|
|
|
260
260
|
serializedJSON,
|
|
261
261
|
]);
|
|
262
262
|
if (connectionStatus === 'disconnected') {
|
|
263
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The
|
|
263
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
|
|
264
264
|
}
|
|
265
265
|
if (schema === 'no-zod') {
|
|
266
266
|
return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.ZodNotInstalled, {});
|
|
@@ -130,7 +130,7 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, val
|
|
|
130
130
|
borderColor: colors_1.FAIL_COLOR,
|
|
131
131
|
};
|
|
132
132
|
}, [localValue]);
|
|
133
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
|
|
133
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
|
|
134
134
|
!(localValue.validJSON && !localValue.zodValidation.success), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
|
|
135
135
|
!localValue.validJSON ||
|
|
136
136
|
!hasChanged ||
|
|
@@ -51,11 +51,11 @@ const NoDefaultProps = () => {
|
|
|
51
51
|
exports.NoDefaultProps = NoDefaultProps;
|
|
52
52
|
const InvalidDefaultProps = ({ zodValidationResult }) => {
|
|
53
53
|
// TODO: Does not react to when schema is updated
|
|
54
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
|
|
54
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
|
|
55
55
|
};
|
|
56
56
|
exports.InvalidDefaultProps = InvalidDefaultProps;
|
|
57
57
|
const InvalidSchema = ({ zodValidationResult, reset }) => {
|
|
58
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
|
|
59
59
|
};
|
|
60
60
|
exports.InvalidSchema = InvalidSchema;
|
|
61
61
|
const TopLevelZodValue = ({ typeReceived }) => {
|
|
@@ -2,22 +2,47 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ZodErrorMessages = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
5
6
|
const colors_1 = require("../../../helpers/colors");
|
|
6
|
-
const
|
|
7
|
+
const layout_1 = require("../../layout");
|
|
8
|
+
const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
|
|
9
|
+
const schemaLabel = {
|
|
7
10
|
fontSize: 14,
|
|
8
11
|
color: colors_1.LIGHT_TEXT,
|
|
12
|
+
};
|
|
13
|
+
const jsonLabel = {
|
|
14
|
+
color: 'white',
|
|
15
|
+
fontSize: 13,
|
|
9
16
|
fontFamily: 'sans-serif',
|
|
17
|
+
display: 'flex',
|
|
18
|
+
alignItems: 'center',
|
|
10
19
|
};
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
20
|
+
const triangleStyle = {
|
|
21
|
+
width: 12,
|
|
22
|
+
height: 12,
|
|
23
|
+
flexShrink: 0,
|
|
24
|
+
fill: colors_1.FAIL_COLOR,
|
|
14
25
|
};
|
|
15
|
-
const ZodErrorMessages = ({ zodValidationResult }) => {
|
|
26
|
+
const ZodErrorMessages = ({ zodValidationResult, viewTab }) => {
|
|
16
27
|
if (zodValidationResult.success) {
|
|
17
28
|
throw new Error('Expected error');
|
|
18
29
|
}
|
|
30
|
+
const style = (0, react_1.useMemo)(() => {
|
|
31
|
+
return viewTab === 'json' ? jsonLabel : schemaLabel;
|
|
32
|
+
}, [viewTab]);
|
|
33
|
+
const code = (0, react_1.useMemo)(() => {
|
|
34
|
+
return {
|
|
35
|
+
...schemaLabel,
|
|
36
|
+
fontFamily: 'monospace',
|
|
37
|
+
};
|
|
38
|
+
}, []);
|
|
39
|
+
if (viewTab === 'json') {
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: zodValidationResult.error.errors.map((error) => {
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: [(0, jsx_runtime_1.jsx)(ValidationMessage_1.WarningTriangle, { style: triangleStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), error.path.length === 0 ? 'Root' : error.path.join('.'), ":", ' ', error.message] }, error.path.join('.')));
|
|
42
|
+
}) }));
|
|
43
|
+
}
|
|
19
44
|
return ((0, jsx_runtime_1.jsx)("div", { children: zodValidationResult.error.errors.map((error) => {
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style:
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["-", ' ', (0, jsx_runtime_1.jsx)("code", { style: code, children: error.path.length === 0 ? 'Root' : error.path.join('.') }), ": ", error.message] }, error.path.join('.')));
|
|
21
46
|
}) }));
|
|
22
47
|
};
|
|
23
48
|
exports.ZodErrorMessages = ZodErrorMessages;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { Codec } from '@remotion/renderer';
|
|
2
|
-
export declare const humanReadableCodec: (codec: Codec) => "
|
|
2
|
+
export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
|
|
@@ -38,7 +38,7 @@ const RenderQueue = () => {
|
|
|
38
38
|
const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
|
|
39
39
|
const jobCount = jobs.length;
|
|
40
40
|
if (connectionStatus === 'disconnected') {
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The studio server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
|
|
42
42
|
}
|
|
43
43
|
if (jobCount === 0) {
|
|
44
44
|
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
|
|
@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
|
|
|
16
16
|
export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
|
|
17
17
|
selected: boolean;
|
|
18
18
|
hovered: boolean;
|
|
19
|
-
}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "
|
|
19
|
+
}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
|
|
@@ -5,7 +5,7 @@ const react_1 = require("react");
|
|
|
5
5
|
const keybindings_1 = require("../state/keybindings");
|
|
6
6
|
const z_index_1 = require("../state/z-index");
|
|
7
7
|
if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
|
|
8
|
-
console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.
|
|
8
|
+
console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
|
|
9
9
|
}
|
|
10
10
|
const areKeyboardShortcutsDisabled = () => {
|
|
11
11
|
return !process.env.KEYBOARD_SHORTCUTS_ENABLED;
|
|
@@ -138,7 +138,7 @@ const useMenuStructure = (closeMenu) => {
|
|
|
138
138
|
onClick: () => {
|
|
139
139
|
closeMenu();
|
|
140
140
|
if (type !== 'connected') {
|
|
141
|
-
(0, NotificationCenter_1.sendErrorNotification)('
|
|
141
|
+
(0, NotificationCenter_1.sendErrorNotification)('Restart the studio to render');
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
144
|
const renderButton = document.getElementById('render-modal-button');
|
package/dist/event-source.js
CHANGED
|
@@ -47,7 +47,7 @@ const openEventSource = () => {
|
|
|
47
47
|
source.addEventListener('error', () => {
|
|
48
48
|
var _a;
|
|
49
49
|
(_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
|
|
50
|
-
// Display an error message that the
|
|
50
|
+
// Display an error message that the studio server has disconnected.
|
|
51
51
|
source === null || source === void 0 ? void 0 : source.close();
|
|
52
52
|
// Retry later
|
|
53
53
|
setTimeout(() => {
|
|
@@ -20,7 +20,7 @@ export declare const getCliOptions: (options: {
|
|
|
20
20
|
numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
|
|
21
21
|
stillFrame: number;
|
|
22
22
|
browserExecutable: BrowserExecutable;
|
|
23
|
-
logLevel: "
|
|
23
|
+
logLevel: "verbose" | "info" | "warn" | "error";
|
|
24
24
|
scale: number;
|
|
25
25
|
chromiumOptions: ChromiumOptions;
|
|
26
26
|
overwrite: boolean;
|
|
@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
|
|
|
33
33
|
videoBitrate: string | null;
|
|
34
34
|
height: number | null;
|
|
35
35
|
width: number | null;
|
|
36
|
-
configFileImageFormat: "
|
|
36
|
+
configFileImageFormat: "png" | "jpeg" | "none" | undefined;
|
|
37
37
|
}>;
|
package/dist/index.d.ts
CHANGED
|
@@ -62,19 +62,19 @@ export declare const CliInternals: {
|
|
|
62
62
|
verbose: (message?: any, ...optionalParams: any[]) => void;
|
|
63
63
|
verboseAdvanced: (options: {
|
|
64
64
|
indent: boolean;
|
|
65
|
-
logLevel: "
|
|
65
|
+
logLevel: "verbose" | "info" | "warn" | "error";
|
|
66
66
|
} & {
|
|
67
67
|
tag?: string | undefined;
|
|
68
68
|
}, message?: any, ...optionalParams: any[]) => void;
|
|
69
69
|
info: (message?: any, ...optionalParams: any[]) => void;
|
|
70
70
|
infoAdvanced: (options: {
|
|
71
71
|
indent: boolean;
|
|
72
|
-
logLevel: "
|
|
72
|
+
logLevel: "verbose" | "info" | "warn" | "error";
|
|
73
73
|
}, message?: any, ...optionalParams: any[]) => void;
|
|
74
74
|
warn: (message?: any, ...optionalParams: any[]) => void;
|
|
75
75
|
warnAdvanced: (options: {
|
|
76
76
|
indent: boolean;
|
|
77
|
-
logLevel: "
|
|
77
|
+
logLevel: "verbose" | "info" | "warn" | "error";
|
|
78
78
|
}, message?: any, ...optionalParams: any[]) => void;
|
|
79
79
|
error: (message?: any, ...optionalParams: any[]) => void;
|
|
80
80
|
};
|
|
@@ -98,7 +98,7 @@ export declare const CliInternals: {
|
|
|
98
98
|
numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
|
|
99
99
|
stillFrame: number;
|
|
100
100
|
browserExecutable: import("@remotion/renderer").BrowserExecutable;
|
|
101
|
-
logLevel: "
|
|
101
|
+
logLevel: "verbose" | "info" | "warn" | "error";
|
|
102
102
|
scale: number;
|
|
103
103
|
chromiumOptions: import("@remotion/renderer").ChromiumOptions;
|
|
104
104
|
overwrite: boolean;
|
|
@@ -111,7 +111,7 @@ export declare const CliInternals: {
|
|
|
111
111
|
videoBitrate: string | null;
|
|
112
112
|
height: number | null;
|
|
113
113
|
width: number | null;
|
|
114
|
-
configFileImageFormat: "
|
|
114
|
+
configFileImageFormat: "png" | "jpeg" | "none" | undefined;
|
|
115
115
|
}>;
|
|
116
116
|
loadConfig: (remotionRoot: string) => Promise<string | null>;
|
|
117
117
|
initializeCli: (remotionRoot: string) => Promise<void>;
|
|
@@ -120,7 +120,7 @@ export declare const CliInternals: {
|
|
|
120
120
|
parsedCli: {
|
|
121
121
|
"browser-executable": import("@remotion/renderer").BrowserExecutable;
|
|
122
122
|
"pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
|
|
123
|
-
"image-format": "
|
|
123
|
+
"image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
|
|
124
124
|
"prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
|
|
125
125
|
"bundle-cache": string;
|
|
126
126
|
"env-file": string;
|
|
@@ -172,7 +172,7 @@ export declare const CliInternals: {
|
|
|
172
172
|
} & {
|
|
173
173
|
_: string[];
|
|
174
174
|
};
|
|
175
|
-
handleCommonError: (err: Error, logLevel: "
|
|
175
|
+
handleCommonError: (err: Error, logLevel: "verbose" | "info" | "warn" | "error") => Promise<void>;
|
|
176
176
|
formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
|
|
177
177
|
locale: string;
|
|
178
178
|
bits?: boolean | undefined;
|
|
@@ -184,7 +184,7 @@ export declare const CliInternals: {
|
|
|
184
184
|
downloadName: string | null;
|
|
185
185
|
outName: string | null;
|
|
186
186
|
configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
|
|
187
|
-
cliFlag: "
|
|
187
|
+
cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
|
|
188
188
|
isLambda: boolean;
|
|
189
189
|
fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
|
|
190
190
|
}) => {
|
|
@@ -199,8 +199,8 @@ export declare const CliInternals: {
|
|
|
199
199
|
};
|
|
200
200
|
getVideoImageFormat: ({ codec, uiImageFormat, }: {
|
|
201
201
|
codec: import("@remotion/renderer").CodecOrUndefined;
|
|
202
|
-
uiImageFormat: "
|
|
203
|
-
}) => "
|
|
202
|
+
uiImageFormat: "png" | "jpeg" | "none" | null;
|
|
203
|
+
}) => "png" | "jpeg" | "none";
|
|
204
204
|
printCompositions: (compositions: import("remotion").AnyCompMetadata[]) => void;
|
|
205
205
|
getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
|
|
206
206
|
cliFlag: import("@remotion/renderer").CodecOrUndefined;
|
|
@@ -214,7 +214,7 @@ export declare const CliInternals: {
|
|
|
214
214
|
};
|
|
215
215
|
listOfRemotionPackages: string[];
|
|
216
216
|
shouldUseNonOverlayingLogger: ({ logLevel, }: {
|
|
217
|
-
logLevel: "
|
|
217
|
+
logLevel: "verbose" | "info" | "warn" | "error";
|
|
218
218
|
}) => boolean;
|
|
219
219
|
getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, downloadMap, serveUrlOrWebpackUrl, indent, inputProps, verbose, }: {
|
|
220
220
|
height: number | null;
|
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
|
};
|
|
@@ -11,5 +11,5 @@ declare type Range = {
|
|
|
11
11
|
declare type Ranges = Range[] & {
|
|
12
12
|
type?: string;
|
|
13
13
|
};
|
|
14
|
-
export declare function parseRange(size: number, str: string | string[]): -1 |
|
|
14
|
+
export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
|
|
15
15
|
export {};
|
|
@@ -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,
|
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-alpha11",
|
|
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
|
-
"@remotion/
|
|
42
|
-
"
|
|
38
|
+
"@remotion/bundler": "4.0.0-alpha11",
|
|
39
|
+
"@remotion/media-utils": "4.0.0-alpha11",
|
|
40
|
+
"@remotion/player": "4.0.0-alpha11",
|
|
41
|
+
"@remotion/renderer": "4.0.0-alpha11",
|
|
42
|
+
"remotion": "4.0.0-alpha11"
|
|
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/
|
|
71
|
-
"@remotion/
|
|
70
|
+
"@remotion/tailwind": "4.0.0-alpha11",
|
|
71
|
+
"@remotion/zod-types": "4.0.0-alpha11"
|
|
72
72
|
},
|
|
73
73
|
"keywords": [
|
|
74
74
|
"remotion",
|