@remotion/cli 3.3.25 → 3.3.27
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/log.d.ts +1 -1
- package/dist/editor/components/NewComposition/RemInput.d.ts +3 -1
- package/dist/editor/helpers/colors.d.ts +1 -1
- package/dist/event-source-events.d.ts +4 -0
- package/dist/event-source.js +3 -0
- package/dist/get-cli-options.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/preview-server/dev-middleware/range-parser.d.ts +1 -1
- package/dist/preview-server/public-folder.d.ts +8 -3
- package/dist/preview-server/public-folder.js +26 -10
- package/dist/preview-server/routes.d.ts +2 -2
- package/dist/preview-server/routes.js +6 -5
- package/dist/preview-server/start-server.d.ts +6 -1
- package/dist/preview-server/start-server.js +6 -9
- package/dist/preview.js +29 -2
- package/package.json +9 -9
- package/dist/convert-entry-point-to-serve-url.d.ts +0 -1
- package/dist/convert-entry-point-to-serve-url.js +0 -15
- package/dist/editor/components/CollapsableOptions.d.ts +0 -6
- package/dist/editor/components/CollapsableOptions.js +0 -35
- package/dist/editor/components/InlineAction.d.ts +0 -5
- package/dist/editor/components/InlineAction.js +0 -34
- package/dist/editor/components/RenderButton.d.ts +0 -6
- package/dist/editor/components/RenderButton.js +0 -43
- package/dist/editor/components/RenderModal/RenderErrorModal.d.ts +0 -5
- package/dist/editor/components/RenderModal/RenderErrorModal.js +0 -64
- package/dist/editor/components/RenderModal/RenderModal.d.ts +0 -11
- package/dist/editor/components/RenderModal/RenderModal.js +0 -262
- package/dist/editor/components/RenderQueue/CircularProgress.d.ts +0 -5
- package/dist/editor/components/RenderQueue/CircularProgress.js +0 -18
- package/dist/editor/components/RenderQueue/RenderQueueError.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueError.js +0 -26
- package/dist/editor/components/RenderQueue/RenderQueueItem.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueItem.js +0 -38
- package/dist/editor/components/RenderQueue/RenderQueueItemStatus.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueItemStatus.js +0 -27
- package/dist/editor/components/RenderQueue/RenderQueueOutputName.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueOutputName.js +0 -30
- package/dist/editor/components/RenderQueue/RenderQueueProgressMessage.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueProgressMessage.js +0 -27
- package/dist/editor/components/RenderQueue/RenderQueueRemoveItem.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueRemoveItem.js +0 -22
- package/dist/editor/components/RenderQueue/RenderQueueRepeat.d.ts +0 -5
- package/dist/editor/components/RenderQueue/RenderQueueRepeat.js +0 -22
- package/dist/editor/components/RenderQueue/actions.d.ts +0 -32
- package/dist/editor/components/RenderQueue/actions.js +0 -75
- package/dist/editor/components/RenderQueue/context.d.ts +0 -19
- package/dist/editor/components/RenderQueue/context.js +0 -54
- package/dist/editor/components/RenderQueue/index.d.ts +0 -2
- package/dist/editor/components/RenderQueue/index.js +0 -18
- package/dist/editor/components/RenderQueue/item-style.d.ts +0 -2
- package/dist/editor/components/RenderQueue/item-style.js +0 -21
- package/dist/editor/components/RenderToolbarIcon.d.ts +0 -2
- package/dist/editor/components/RenderToolbarIcon.js +0 -47
- package/dist/editor/components/RendersTab.d.ts +0 -6
- package/dist/editor/components/RendersTab.js +0 -44
- package/dist/editor/components/SegmentedControl.d.ts +0 -15
- package/dist/editor/components/SegmentedControl.js +0 -46
- package/dist/editor/components/SidebarContent.d.ts +0 -5
- package/dist/editor/components/SidebarContent.js +0 -51
- package/dist/editor/components/Tabs/index.d.ts +0 -11
- package/dist/editor/components/Tabs/index.js +0 -51
- package/dist/editor/helpers/use-file-existence.d.ts +0 -1
- package/dist/editor/helpers/use-file-existence.js +0 -57
- package/dist/editor/icons/RenderStillIcon.d.ts +0 -3
- package/dist/editor/icons/RenderStillIcon.js +0 -8
- package/dist/editor/icons/render.d.ts +0 -5
- package/dist/editor/icons/render.js +0 -8
- package/dist/editor/icons/video.d.ts +0 -5
- package/dist/editor/icons/video.js +0 -8
- package/dist/file-watcher.d.ts +0 -9
- package/dist/file-watcher.js +0 -35
- package/dist/find-closest-package-json.d.ts +0 -2
- package/dist/find-closest-package-json.js +0 -35
- package/dist/get-default-out-name.d.ts +0 -4
- package/dist/get-default-out-name.js +0 -8
- package/dist/preview-server/actions.d.ts +0 -0
- package/dist/preview-server/actions.js +0 -1
- package/dist/preview-server/api-routes.d.ts +0 -4
- package/dist/preview-server/api-routes.js +0 -15
- package/dist/preview-server/api-types.d.ts +0 -26
- package/dist/preview-server/api-types.js +0 -2
- package/dist/preview-server/file-existence-watchers.d.ts +0 -10
- package/dist/preview-server/file-existence-watchers.js +0 -46
- package/dist/preview-server/get-file-existence.d.ts +0 -2
- package/dist/preview-server/get-file-existence.js +0 -36
- package/dist/preview-server/get-files-in-public-folder.d.ts +0 -2
- package/dist/preview-server/get-files-in-public-folder.js +0 -7
- package/dist/preview-server/handler.d.ts +0 -9
- package/dist/preview-server/handler.js +0 -34
- package/dist/preview-server/live-event-listener.d.ts +0 -0
- package/dist/preview-server/live-event-listener.js +0 -1
- package/dist/preview-server/parse-body.d.ts +0 -2
- package/dist/preview-server/parse-body.js +0 -16
- package/dist/preview-server/render-queue/add-render.d.ts +0 -3
- package/dist/preview-server/render-queue/add-render.js +0 -34
- package/dist/preview-server/render-queue/index.d.ts +0 -18
- package/dist/preview-server/render-queue/index.js +0 -146
- package/dist/preview-server/render-queue/job.d.ts +0 -79
- package/dist/preview-server/render-queue/job.js +0 -2
- package/dist/preview-server/render-queue/make-retry-payload.d.ts +0 -3
- package/dist/preview-server/render-queue/make-retry-payload.js +0 -32
- package/dist/preview-server/render-queue/open-directory-in-finder.d.ts +0 -1
- package/dist/preview-server/render-queue/open-directory-in-finder.js +0 -34
- package/dist/preview-server/render-queue/open-in-file-explorer.d.ts +0 -2
- package/dist/preview-server/render-queue/open-in-file-explorer.js +0 -31
- package/dist/preview-server/render-queue/process-still.d.ts +0 -8
- package/dist/preview-server/render-queue/process-still.js +0 -50
- package/dist/preview-server/render-queue/process-video.d.ts +0 -8
- package/dist/preview-server/render-queue/process-video.js +0 -57
- package/dist/preview-server/render-queue/queue.d.ts +0 -20
- package/dist/preview-server/render-queue/queue.js +0 -169
- package/dist/preview-server/render-queue/remove-render.d.ts +0 -2
- package/dist/preview-server/render-queue/remove-render.js +0 -29
- package/dist/preview-server/routes/add-render.d.ts +0 -3
- package/dist/preview-server/routes/add-render.js +0 -52
- package/dist/preview-server/routes/open-in-file-explorer.d.ts +0 -3
- package/dist/preview-server/routes/open-in-file-explorer.js +0 -14
- package/dist/preview-server/routes/remove-render.d.ts +0 -3
- package/dist/preview-server/routes/remove-render.js +0 -9
- package/dist/preview-server/routes/subscribe-to-file-existence.d.ts +0 -3
- package/dist/preview-server/routes/subscribe-to-file-existence.js +0 -13
- package/dist/preview-server/routes/unsubscribe-from-file-existence.d.ts +0 -3
- package/dist/preview-server/routes/unsubscribe-from-file-existence.js +0 -9
- package/dist/preview-server/write-files-definition-file.d.ts +0 -2
- package/dist/preview-server/write-files-definition-file.js +0 -37
- package/dist/render-flows/render.d.ts +0 -35
- package/dist/render-flows/render.js +0 -245
- package/dist/render-flows/still.d.ts +0 -31
- package/dist/render-flows/still.js +0 -168
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
|
|
4
|
-
const callApi = (endpoint, body) => {
|
|
5
|
-
return new Promise((resolve, reject) => {
|
|
6
|
-
fetch(endpoint, {
|
|
7
|
-
method: 'post',
|
|
8
|
-
headers: {
|
|
9
|
-
'content-type': 'application/json',
|
|
10
|
-
},
|
|
11
|
-
body: JSON.stringify(body),
|
|
12
|
-
})
|
|
13
|
-
.then((res) => res.json())
|
|
14
|
-
.then((data) => {
|
|
15
|
-
if (data.success) {
|
|
16
|
-
resolve(data.data);
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
reject(new Error(data.error));
|
|
20
|
-
}
|
|
21
|
-
})
|
|
22
|
-
.catch((err) => {
|
|
23
|
-
reject(err);
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
exports.callApi = callApi;
|
|
28
|
-
const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, }) => {
|
|
29
|
-
return (0, exports.callApi)('/api/render', {
|
|
30
|
-
compositionId,
|
|
31
|
-
type: 'still',
|
|
32
|
-
outName,
|
|
33
|
-
imageFormat,
|
|
34
|
-
quality,
|
|
35
|
-
frame,
|
|
36
|
-
scale,
|
|
37
|
-
verbose,
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
exports.addStillRenderJob = addStillRenderJob;
|
|
41
|
-
const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, }) => {
|
|
42
|
-
return (0, exports.callApi)('/api/render', {
|
|
43
|
-
compositionId,
|
|
44
|
-
type: 'video',
|
|
45
|
-
outName,
|
|
46
|
-
imageFormat,
|
|
47
|
-
quality,
|
|
48
|
-
scale,
|
|
49
|
-
verbose,
|
|
50
|
-
codec,
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
exports.addVideoRenderJob = addVideoRenderJob;
|
|
54
|
-
const unsubscribeFromFileExistenceWatcher = ({ file }) => {
|
|
55
|
-
return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file });
|
|
56
|
-
};
|
|
57
|
-
exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
|
|
58
|
-
const subscribeToFileExistenceWatcher = async ({ file, }) => {
|
|
59
|
-
const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', { file });
|
|
60
|
-
return exists;
|
|
61
|
-
};
|
|
62
|
-
exports.subscribeToFileExistenceWatcher = subscribeToFileExistenceWatcher;
|
|
63
|
-
const openInFileExplorer = ({ directory }) => {
|
|
64
|
-
const body = {
|
|
65
|
-
directory,
|
|
66
|
-
};
|
|
67
|
-
return (0, exports.callApi)('/api/open-in-file-explorer', body);
|
|
68
|
-
};
|
|
69
|
-
exports.openInFileExplorer = openInFileExplorer;
|
|
70
|
-
const removeRenderJob = (job) => {
|
|
71
|
-
return (0, exports.callApi)('/api/remove-render', {
|
|
72
|
-
jobId: job.id,
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
|
-
exports.removeRenderJob = removeRenderJob;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { RenderJob } from '../../../preview-server/render-queue/job';
|
|
3
|
-
declare global {
|
|
4
|
-
interface Window {
|
|
5
|
-
remotion_initialRenderQueue: RenderJob[];
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
declare type RenderQueueContextType = {
|
|
9
|
-
jobs: RenderJob[];
|
|
10
|
-
};
|
|
11
|
-
export declare const RenderQueueContext: React.Context<RenderQueueContextType>;
|
|
12
|
-
export declare const useShouldRenderLeftSidebarTabs: () => boolean;
|
|
13
|
-
export declare const renderJobsRef: React.RefObject<{
|
|
14
|
-
updateRenderJobs: (jobs: RenderJob[]) => void;
|
|
15
|
-
}>;
|
|
16
|
-
export declare const RenderQueueContextProvider: React.FC<{
|
|
17
|
-
children: React.ReactNode;
|
|
18
|
-
}>;
|
|
19
|
-
export {};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.RenderQueueContextProvider = exports.renderJobsRef = exports.useShouldRenderLeftSidebarTabs = exports.RenderQueueContext = void 0;
|
|
27
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
|
-
const react_1 = __importStar(require("react"));
|
|
29
|
-
exports.RenderQueueContext = react_1.default.createContext({
|
|
30
|
-
jobs: [],
|
|
31
|
-
});
|
|
32
|
-
const useShouldRenderLeftSidebarTabs = () => {
|
|
33
|
-
const context = (0, react_1.useContext)(exports.RenderQueueContext);
|
|
34
|
-
return context.jobs.length > 0;
|
|
35
|
-
};
|
|
36
|
-
exports.useShouldRenderLeftSidebarTabs = useShouldRenderLeftSidebarTabs;
|
|
37
|
-
exports.renderJobsRef = (0, react_1.createRef)();
|
|
38
|
-
const RenderQueueContextProvider = ({ children }) => {
|
|
39
|
-
const [jobs, setJobs] = (0, react_1.useState)(window.remotion_initialRenderQueue);
|
|
40
|
-
const value = (0, react_1.useMemo)(() => {
|
|
41
|
-
return {
|
|
42
|
-
jobs,
|
|
43
|
-
};
|
|
44
|
-
}, [jobs]);
|
|
45
|
-
(0, react_1.useImperativeHandle)(exports.renderJobsRef, () => {
|
|
46
|
-
return {
|
|
47
|
-
updateRenderJobs: (newJobs) => {
|
|
48
|
-
setJobs(newJobs);
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
}, []);
|
|
52
|
-
return ((0, jsx_runtime_1.jsx)(exports.RenderQueueContext.Provider, { value: value, children: children }));
|
|
53
|
-
};
|
|
54
|
-
exports.RenderQueueContextProvider = RenderQueueContextProvider;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.RenderQueue = 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 context_1 = require("./context");
|
|
8
|
-
const RenderQueueItem_1 = require("./RenderQueueItem");
|
|
9
|
-
const separatorStyle = {
|
|
10
|
-
borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
|
|
11
|
-
};
|
|
12
|
-
const RenderQueue = () => {
|
|
13
|
-
const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
|
|
14
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: jobs.map((j, index) => {
|
|
15
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
|
|
16
|
-
}) }));
|
|
17
|
-
};
|
|
18
|
-
exports.RenderQueue = RenderQueue;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.renderQueueItemSubtitleStyle = void 0;
|
|
4
|
-
const colors_1 = require("../../helpers/colors");
|
|
5
|
-
const layout_1 = require("../layout");
|
|
6
|
-
exports.renderQueueItemSubtitleStyle = {
|
|
7
|
-
fontSize: 13,
|
|
8
|
-
color: colors_1.LIGHT_TEXT,
|
|
9
|
-
appearance: 'none',
|
|
10
|
-
border: 'none',
|
|
11
|
-
padding: 0,
|
|
12
|
-
cursor: 'pointer',
|
|
13
|
-
lineHeight: 1.2,
|
|
14
|
-
textAlign: 'left',
|
|
15
|
-
whiteSpace: 'nowrap',
|
|
16
|
-
marginRight: layout_1.SPACING_UNIT,
|
|
17
|
-
overflowX: 'hidden',
|
|
18
|
-
// size smaller than viewport causes actual ellipse
|
|
19
|
-
maxWidth: 500,
|
|
20
|
-
textOverflow: 'ellipsis',
|
|
21
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.RenderStillButton = 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 get_default_out_name_1 = require("../../get-default-out-name");
|
|
8
|
-
const RenderStillIcon_1 = require("../icons/RenderStillIcon");
|
|
9
|
-
const modals_1 = require("../state/modals");
|
|
10
|
-
const ControlButton_1 = require("./ControlButton");
|
|
11
|
-
const tooltip = 'Export the current frame as a still image';
|
|
12
|
-
const style = {
|
|
13
|
-
width: 18,
|
|
14
|
-
height: 18,
|
|
15
|
-
color: 'white',
|
|
16
|
-
};
|
|
17
|
-
const RenderStillButton = () => {
|
|
18
|
-
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
|
|
19
|
-
const video = remotion_1.Internals.useVideo();
|
|
20
|
-
const frame = (0, remotion_1.useCurrentFrame)();
|
|
21
|
-
const onClick = (0, react_1.useCallback)(() => {
|
|
22
|
-
var _a, _b, _c, _d, _e;
|
|
23
|
-
if (!video) {
|
|
24
|
-
return null;
|
|
25
|
-
}
|
|
26
|
-
setSelectedModal({
|
|
27
|
-
type: 'render',
|
|
28
|
-
compositionId: video.id,
|
|
29
|
-
initialFrame: frame,
|
|
30
|
-
// TODO: JPEG for video, PNG for image
|
|
31
|
-
initialImageFormat: 'png',
|
|
32
|
-
initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
|
|
33
|
-
compositionName: video.id,
|
|
34
|
-
defaultExtension: 'png',
|
|
35
|
-
}),
|
|
36
|
-
// TODO: Determine defaults from config file
|
|
37
|
-
initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
|
|
38
|
-
initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
|
|
39
|
-
initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
|
|
40
|
-
});
|
|
41
|
-
}, [frame, setSelectedModal, video]);
|
|
42
|
-
if (!video) {
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(RenderStillIcon_1.RenderStill, { style: style }) }));
|
|
46
|
-
};
|
|
47
|
-
exports.RenderStillButton = RenderStillButton;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.RendersTab = 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 layout_1 = require("./layout");
|
|
8
|
-
const context_1 = require("./RenderQueue/context");
|
|
9
|
-
const Tabs_1 = require("./Tabs");
|
|
10
|
-
const row = {
|
|
11
|
-
display: 'flex',
|
|
12
|
-
flexDirection: 'row',
|
|
13
|
-
fontSize: 13,
|
|
14
|
-
justifyContent: 'center',
|
|
15
|
-
color: 'inherit',
|
|
16
|
-
alignItems: 'center',
|
|
17
|
-
};
|
|
18
|
-
const badge = {
|
|
19
|
-
height: 16,
|
|
20
|
-
width: 16,
|
|
21
|
-
borderRadius: 8,
|
|
22
|
-
fontSize: 10,
|
|
23
|
-
display: 'inline-flex',
|
|
24
|
-
justifyContent: 'center',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
};
|
|
27
|
-
// TODO: Don't show if preview server is disconnected
|
|
28
|
-
const RendersTab = ({ selected, onClick }) => {
|
|
29
|
-
const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
|
|
30
|
-
const failedJobs = jobs.filter((j) => j.status === 'failed').length;
|
|
31
|
-
const jobCount = jobs.length;
|
|
32
|
-
const badgeStyle = (0, react_1.useMemo)(() => {
|
|
33
|
-
return {
|
|
34
|
-
...badge,
|
|
35
|
-
backgroundColor: failedJobs > 0 ? colors_1.FAIL_COLOR : 'transparent',
|
|
36
|
-
color: failedJobs > 0 ? 'white' : colors_1.LIGHT_TEXT,
|
|
37
|
-
borderWidth: failedJobs > 0 ? 0 : 1,
|
|
38
|
-
borderStyle: 'solid',
|
|
39
|
-
borderColor: colors_1.LIGHT_TEXT,
|
|
40
|
-
};
|
|
41
|
-
}, [failedJobs]);
|
|
42
|
-
return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: selected, onClick: onClick, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: ["Renders", jobCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { style: badgeStyle, children: jobCount })] })) : null] }) }));
|
|
43
|
-
};
|
|
44
|
-
exports.RendersTab = RendersTab;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { PropsWithChildren } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export declare type SegmentedControlItem = {
|
|
4
|
-
label: React.ReactNode;
|
|
5
|
-
onClick: () => void;
|
|
6
|
-
key: string;
|
|
7
|
-
selected: boolean;
|
|
8
|
-
};
|
|
9
|
-
export declare const SegmentedControl: React.FC<{
|
|
10
|
-
items: SegmentedControlItem[];
|
|
11
|
-
}>;
|
|
12
|
-
export declare const Item: React.FC<PropsWithChildren<{
|
|
13
|
-
selected: boolean;
|
|
14
|
-
onClick: () => void;
|
|
15
|
-
}>>;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Item = exports.SegmentedControl = 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 z_index_1 = require("../state/z-index");
|
|
8
|
-
const container = {
|
|
9
|
-
display: 'flex',
|
|
10
|
-
flexDirection: 'row',
|
|
11
|
-
overflow: 'hidden',
|
|
12
|
-
border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
|
|
13
|
-
};
|
|
14
|
-
const item = {
|
|
15
|
-
display: 'flex',
|
|
16
|
-
fontSize: 13,
|
|
17
|
-
padding: '4px 12px',
|
|
18
|
-
cursor: 'pointer',
|
|
19
|
-
appearance: 'none',
|
|
20
|
-
border: 'none',
|
|
21
|
-
};
|
|
22
|
-
const SegmentedControl = ({ items }) => {
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: container, children: items.map((i) => {
|
|
24
|
-
return ((0, jsx_runtime_1.jsx)(exports.Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
|
|
25
|
-
}) }));
|
|
26
|
-
};
|
|
27
|
-
exports.SegmentedControl = SegmentedControl;
|
|
28
|
-
const Item = ({ selected, onClick, children }) => {
|
|
29
|
-
const [hovered, setHovered] = (0, react_1.useState)(false);
|
|
30
|
-
const { tabIndex } = (0, z_index_1.useZIndex)();
|
|
31
|
-
const onPointerEnter = (0, react_1.useCallback)(() => {
|
|
32
|
-
setHovered(true);
|
|
33
|
-
}, []);
|
|
34
|
-
const onPointerLeave = (0, react_1.useCallback)(() => {
|
|
35
|
-
setHovered(false);
|
|
36
|
-
}, []);
|
|
37
|
-
const itemStyle = (0, react_1.useMemo)(() => {
|
|
38
|
-
return {
|
|
39
|
-
...item,
|
|
40
|
-
backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
|
|
41
|
-
color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
|
|
42
|
-
};
|
|
43
|
-
}, [hovered, selected]);
|
|
44
|
-
return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
|
|
45
|
-
};
|
|
46
|
-
exports.Item = Item;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SidebarContent = exports.leftSidebarTabs = 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 CompositionSelector_1 = require("./CompositionSelector");
|
|
8
|
-
const RenderQueue_1 = require("./RenderQueue");
|
|
9
|
-
const context_1 = require("./RenderQueue/context");
|
|
10
|
-
const RendersTab_1 = require("./RendersTab");
|
|
11
|
-
const Tabs_1 = require("./Tabs");
|
|
12
|
-
const container = {
|
|
13
|
-
width: '100%',
|
|
14
|
-
};
|
|
15
|
-
const tabsContainer = {
|
|
16
|
-
borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
|
|
17
|
-
};
|
|
18
|
-
exports.leftSidebarTabs = (0, react_1.createRef)();
|
|
19
|
-
const localStorageKey = 'remotion.sidebarPanel';
|
|
20
|
-
const persistSelectedPanel = (panel) => {
|
|
21
|
-
localStorage.setItem(localStorageKey, panel);
|
|
22
|
-
};
|
|
23
|
-
const getSelectedPanel = (shouldRender) => {
|
|
24
|
-
const panel = localStorage.getItem(localStorageKey);
|
|
25
|
-
if (panel === 'renders' && shouldRender) {
|
|
26
|
-
return 'renders';
|
|
27
|
-
}
|
|
28
|
-
return 'compositions';
|
|
29
|
-
};
|
|
30
|
-
const SidebarContent = () => {
|
|
31
|
-
const shouldRender = (0, context_1.useShouldRenderLeftSidebarTabs)();
|
|
32
|
-
const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(shouldRender));
|
|
33
|
-
const onCompositionsSelected = (0, react_1.useCallback)(() => {
|
|
34
|
-
setPanel('compositions');
|
|
35
|
-
persistSelectedPanel('compositions');
|
|
36
|
-
}, []);
|
|
37
|
-
const onRendersSelected = (0, react_1.useCallback)(() => {
|
|
38
|
-
setPanel('renders');
|
|
39
|
-
persistSelectedPanel('renders');
|
|
40
|
-
}, []);
|
|
41
|
-
(0, react_1.useImperativeHandle)(exports.leftSidebarTabs, () => {
|
|
42
|
-
return {
|
|
43
|
-
selectRendersPanel: () => {
|
|
44
|
-
setPanel('renders');
|
|
45
|
-
persistSelectedPanel('renders');
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
}, []);
|
|
49
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}))] }));
|
|
50
|
-
};
|
|
51
|
-
exports.SidebarContent = SidebarContent;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare const Tabs: React.FC<{
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
style?: React.CSSProperties;
|
|
5
|
-
}>;
|
|
6
|
-
export declare const Tab: React.FC<{
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
9
|
-
style?: React.CSSProperties;
|
|
10
|
-
selected: boolean;
|
|
11
|
-
}>;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Tab = exports.Tabs = 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 z_index_1 = require("../../state/z-index");
|
|
8
|
-
const tabsContainer = {
|
|
9
|
-
display: 'flex',
|
|
10
|
-
flexDirection: 'row',
|
|
11
|
-
};
|
|
12
|
-
const Tabs = ({ children, style }) => {
|
|
13
|
-
const definiteStyle = (0, react_1.useMemo)(() => {
|
|
14
|
-
return {
|
|
15
|
-
...tabsContainer,
|
|
16
|
-
...style,
|
|
17
|
-
};
|
|
18
|
-
}, [style]);
|
|
19
|
-
return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
|
|
20
|
-
};
|
|
21
|
-
exports.Tabs = Tabs;
|
|
22
|
-
const selectorButton = {
|
|
23
|
-
border: 'none',
|
|
24
|
-
flex: 1,
|
|
25
|
-
padding: 8,
|
|
26
|
-
fontSize: 13,
|
|
27
|
-
};
|
|
28
|
-
const Tab = ({ children, onClick, style, selected }) => {
|
|
29
|
-
const [hovered, setHovered] = (0, react_1.useState)(false);
|
|
30
|
-
const { tabIndex } = (0, z_index_1.useZIndex)();
|
|
31
|
-
const onPointerEnter = (0, react_1.useCallback)(() => {
|
|
32
|
-
setHovered(true);
|
|
33
|
-
}, []);
|
|
34
|
-
const onPointerLeave = (0, react_1.useCallback)(() => {
|
|
35
|
-
setHovered(false);
|
|
36
|
-
}, []);
|
|
37
|
-
const definiteStyle = (0, react_1.useMemo)(() => {
|
|
38
|
-
return {
|
|
39
|
-
...selectorButton,
|
|
40
|
-
backgroundColor: selected
|
|
41
|
-
? colors_1.SELECTED_BACKGROUND
|
|
42
|
-
: hovered
|
|
43
|
-
? colors_1.CLEAR_HOVER
|
|
44
|
-
: 'transparent',
|
|
45
|
-
color: selected ? 'white' : colors_1.LIGHT_TEXT,
|
|
46
|
-
...style,
|
|
47
|
-
};
|
|
48
|
-
}, [hovered, selected, style]);
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
|
|
50
|
-
};
|
|
51
|
-
exports.Tab = Tab;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useFileExistence: (outName: string) => boolean;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useFileExistence = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const event_source_1 = require("../../event-source");
|
|
6
|
-
const actions_1 = require("../components/RenderQueue/actions");
|
|
7
|
-
const useFileExistence = (outName) => {
|
|
8
|
-
const [exists, setExists] = (0, react_1.useState)(false);
|
|
9
|
-
const currentOutName = (0, react_1.useRef)('');
|
|
10
|
-
currentOutName.current = outName;
|
|
11
|
-
(0, react_1.useEffect)(() => {
|
|
12
|
-
(0, actions_1.subscribeToFileExistenceWatcher)({ file: outName }).then((_exists) => {
|
|
13
|
-
if (currentOutName.current === outName) {
|
|
14
|
-
setExists(_exists);
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
return () => {
|
|
18
|
-
(0, actions_1.unsubscribeFromFileExistenceWatcher)({ file: outName });
|
|
19
|
-
};
|
|
20
|
-
}, [outName]);
|
|
21
|
-
(0, react_1.useEffect)(() => {
|
|
22
|
-
const listener = (event) => {
|
|
23
|
-
if (event.type !== 'watched-file-deleted') {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
if (event.file !== currentOutName.current) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (currentOutName.current === outName) {
|
|
30
|
-
setExists(false);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const unsub = (0, event_source_1.subscribeToEvent)('watched-file-deleted', listener);
|
|
34
|
-
return () => {
|
|
35
|
-
unsub();
|
|
36
|
-
};
|
|
37
|
-
}, [outName]);
|
|
38
|
-
(0, react_1.useEffect)(() => {
|
|
39
|
-
const listener = (event) => {
|
|
40
|
-
if (event.type !== 'watched-file-undeleted') {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
if (event.file !== outName) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
if (currentOutName.current === outName) {
|
|
47
|
-
setExists(true);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
const unsub = (0, event_source_1.subscribeToEvent)('watched-file-undeleted', listener);
|
|
51
|
-
return () => {
|
|
52
|
-
unsub();
|
|
53
|
-
};
|
|
54
|
-
}, [outName]);
|
|
55
|
-
return exists;
|
|
56
|
-
};
|
|
57
|
-
exports.useFileExistence = useFileExistence;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.RenderStill = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const RenderStill = (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: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" }) }));
|
|
7
|
-
};
|
|
8
|
-
exports.RenderStill = RenderStill;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.RenderIcon = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const RenderIcon = (props) => {
|
|
6
|
-
return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M408 143.1C408 166.1 390.1 183.1 368 183.1C345.9 183.1 328 166.1 328 143.1C328 121.9 345.9 103.1 368 103.1C390.1 103.1 408 121.9 408 143.1zM384 312.1V394.2C384 419.7 370.6 443.2 348.7 456.2L260.2 508.6C252.8 513 243.6 513.1 236.1 508.9C228.6 504.6 224 496.6 224 488V373.3C224 350.6 215 328.1 199 312.1C183 296.1 161.4 288 138.7 288H24C15.38 288 7.414 283.4 3.146 275.9C-1.123 268.4-1.042 259.2 3.357 251.8L55.83 163.3C68.79 141.4 92.33 127.1 117.8 127.1H199.9C281.7-3.798 408.8-8.546 483.9 5.272C495.6 7.411 504.6 16.45 506.7 28.07C520.5 103.2 515.8 230.3 384 312.1V312.1zM197.9 253.9C210.8 260.2 222.6 268.7 232.1 279C243.3 289.4 251.8 301.2 258.1 314.1C363.9 284.1 414.8 234.5 439.7 188C464.7 141.3 466.1 90.47 461.7 50.33C421.5 45.02 370.7 47.34 323.1 72.33C277.5 97.16 227.9 148.1 197.9 253.9H197.9zM41.98 345.5C76.37 311.1 132.1 311.1 166.5 345.5C200.9 379.9 200.9 435.6 166.5 470C117 519.5 .4765 511.5 .4765 511.5C.4765 511.5-7.516 394.1 41.98 345.5V345.5zM64.58 447.4C64.58 447.4 103.3 450.1 119.8 433.6C131.2 422.2 131.2 403.6 119.8 392.2C108.3 380.8 89.81 380.8 78.38 392.2C61.92 408.7 64.58 447.4 64.58 447.4z" }) }));
|
|
7
|
-
};
|
|
8
|
-
exports.RenderIcon = RenderIcon;
|
|
@@ -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 = ({ color, ...props }) => {
|
|
6
|
-
return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM384 64v176H128V64H384zM32 96c0-17.64 14.36-32 32-32h32v80H32V96zM32 176h64v64H32V176zM32 272h64v64H32V272zM64 448c-17.64 0-32-14.36-32-32v-48h64V448H64zM128 448V272h256V448H128zM480 416c0 17.64-14.36 32-32 32h-32v-80h64V416zM480 336h-64v-64h64V336zM480 240h-64v-64h64V240zM480 144h-64V64h32c17.64 0 32 14.36 32 32V144z" }) }));
|
|
7
|
-
};
|
|
8
|
-
exports.FilmIcon = FilmIcon;
|
package/dist/file-watcher.d.ts
DELETED
package/dist/file-watcher.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.installFileWatcher = void 0;
|
|
7
|
-
const fs_1 = __importDefault(require("fs"));
|
|
8
|
-
const installFileWatcher = ({ file, onChange, }) => {
|
|
9
|
-
const existedAtBeginning = fs_1.default.existsSync(file);
|
|
10
|
-
let existedBefore = existedAtBeginning;
|
|
11
|
-
const listener = () => {
|
|
12
|
-
const existsNow = fs_1.default.existsSync(file);
|
|
13
|
-
if (!existedBefore && existsNow) {
|
|
14
|
-
onChange('created');
|
|
15
|
-
existedBefore = true;
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (existedBefore && !existsNow) {
|
|
19
|
-
onChange('deleted');
|
|
20
|
-
existedBefore = false;
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
if (existsNow) {
|
|
24
|
-
onChange('changed');
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
fs_1.default.watchFile(file, { interval: 100 }, listener);
|
|
28
|
-
return {
|
|
29
|
-
exists: existedAtBeginning,
|
|
30
|
-
unwatch: () => {
|
|
31
|
-
fs_1.default.unwatchFile(file, listener);
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
exports.installFileWatcher = installFileWatcher;
|