@remotion/studio 4.0.409 → 4.0.410
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/api/write-static-file.js +1 -1
- package/dist/components/InstallPackage.js +27 -18
- package/dist/components/RenderButton.js +29 -41
- package/dist/esm/{chunk-yhf0gvmn.js → chunk-nqxpz7r0.js} +177 -160
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/internals.mjs +177 -160
- package/dist/esm/previewEntry.mjs +179 -162
- package/dist/esm/renderEntry.mjs +1 -1
- package/package.json +9 -9
|
@@ -5,7 +5,7 @@ const writeStaticFile = async ({ contents, filePath, }) => {
|
|
|
5
5
|
if (window.remotion_isReadOnlyStudio) {
|
|
6
6
|
throw new Error('writeStaticFile() is not available in read-only Studio');
|
|
7
7
|
}
|
|
8
|
-
const url = new URL(
|
|
8
|
+
const url = new URL(`${window.remotion_staticBase}/api/add-asset`, window.location.origin);
|
|
9
9
|
if (filePath.includes('\\')) {
|
|
10
10
|
return Promise.reject(new Error('File path cannot contain backslashes'));
|
|
11
11
|
}
|
|
@@ -103,24 +103,33 @@ const InstallPackageModal = ({ packageManager }) => {
|
|
|
103
103
|
enter.unregister();
|
|
104
104
|
};
|
|
105
105
|
}, [disabled, onClick, registerKeybinding]);
|
|
106
|
-
return ((0, jsx_runtime_1.jsxs)(DismissableModal_1.DismissableModal, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: "Install packages" }), (0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? ((0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully. Restart the server to complete."] })) : state.type === 'restarting' ? ((0, jsx_runtime_1.jsx)("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? ((0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', ". Check your terminal for progress."] })) : ((0, jsx_runtime_1.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
106
|
+
return ((0, jsx_runtime_1.jsxs)(DismissableModal_1.DismissableModal, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: "Install packages" }), (0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? ((0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully. Restart the server to complete."] })) : state.type === 'restarting' ? ((0, jsx_runtime_1.jsx)("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? ((0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', ". Check your terminal for progress."] })) : ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
|
|
107
|
+
.filter(([, install]) => install)
|
|
108
|
+
.map(([pkgShort]) => {
|
|
109
|
+
var _a, _b;
|
|
110
|
+
const pkg = pkgShort === 'core' ? 'remotion' : `@remotion/${pkgShort}`;
|
|
111
|
+
const isInstalled = (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(pkg)) !== null && _b !== void 0 ? _b : false;
|
|
112
|
+
const link = studio_shared_1.apiDocs[pkgShort];
|
|
113
|
+
const description = studio_shared_1.descriptions[pkgShort];
|
|
114
|
+
if (!link) {
|
|
115
|
+
throw new Error('No link for ' + pkg);
|
|
116
|
+
}
|
|
117
|
+
if (!description) {
|
|
118
|
+
throw new Error('No description for ' + pkg);
|
|
119
|
+
}
|
|
120
|
+
return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: map[pkg], name: pkg, onChange: () => {
|
|
121
|
+
setMap((prev) => ({ ...prev, [pkg]: !prev[pkg] }));
|
|
122
|
+
}, disabled: !canSelectPackages || isInstalled }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InstallablePackage_1.InstallablePackageComp, { description: description, isInstalled: isInstalled, link: link, pkg: pkg })] }, pkg));
|
|
123
|
+
}), studio_shared_1.extraPackages.map((extraPkg) => {
|
|
124
|
+
var _a, _b;
|
|
125
|
+
const isInstalled = (_b = (_a = window.remotion_installedPackages) === null || _a === void 0 ? void 0 : _a.includes(extraPkg.name)) !== null && _b !== void 0 ? _b : false;
|
|
126
|
+
return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: map[extraPkg.name], name: extraPkg.name, onChange: () => {
|
|
127
|
+
setMap((prev) => ({
|
|
128
|
+
...prev,
|
|
129
|
+
[extraPkg.name]: !prev[extraPkg.name],
|
|
130
|
+
}));
|
|
131
|
+
}, disabled: !canSelectPackages || isInstalled }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })] }, extraPkg.name));
|
|
132
|
+
})] })) }), (0, jsx_runtime_1.jsx)(ModalFooter_1.ModalFooterContainer, { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [state.type === 'idle' ? ((0, jsx_runtime_1.jsxs)("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', (0, jsx_runtime_1.jsx)("br", {}), "using ", packageManager, ", Remotion v", remotion_1.VERSION] })) : null, (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
|
|
124
133
|
? 'Restarting...'
|
|
125
134
|
: state.type === 'installing'
|
|
126
135
|
? 'Installing...'
|
|
@@ -102,6 +102,34 @@ const RenderButton = ({ readOnlyStudio, }) => {
|
|
|
102
102
|
shouldApplyCssTransforms: true,
|
|
103
103
|
});
|
|
104
104
|
const refresh = size === null || size === void 0 ? void 0 : size.refresh;
|
|
105
|
+
const onPointerDown = (0, react_1.useCallback)(() => {
|
|
106
|
+
setDropdownOpened((o) => {
|
|
107
|
+
if (!o) {
|
|
108
|
+
refresh === null || refresh === void 0 ? void 0 : refresh();
|
|
109
|
+
}
|
|
110
|
+
return !o;
|
|
111
|
+
});
|
|
112
|
+
}, [refresh]);
|
|
113
|
+
const onClickDropdown = (0, react_1.useCallback)((e) => {
|
|
114
|
+
e.stopPropagation();
|
|
115
|
+
const isKeyboardInitiated = e.detail === 0;
|
|
116
|
+
if (!isKeyboardInitiated) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
setDropdownOpened((o) => {
|
|
120
|
+
if (!o) {
|
|
121
|
+
refresh === null || refresh === void 0 ? void 0 : refresh();
|
|
122
|
+
window.addEventListener('pointerup', (evt) => {
|
|
123
|
+
if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
|
|
124
|
+
setDropdownOpened(false);
|
|
125
|
+
}
|
|
126
|
+
}, {
|
|
127
|
+
once: true,
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
return !o;
|
|
131
|
+
});
|
|
132
|
+
}, [refresh]);
|
|
105
133
|
const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
|
|
106
134
|
.previewServerState.type;
|
|
107
135
|
const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
|
|
@@ -252,46 +280,6 @@ const RenderButton = ({ readOnlyStudio, }) => {
|
|
|
252
280
|
},
|
|
253
281
|
];
|
|
254
282
|
}, [handleRenderTypeChange]);
|
|
255
|
-
(0, react_1.useEffect)(() => {
|
|
256
|
-
const { current } = dropdownRef;
|
|
257
|
-
if (!current) {
|
|
258
|
-
return;
|
|
259
|
-
}
|
|
260
|
-
const onPointerDown = () => {
|
|
261
|
-
return setDropdownOpened((o) => {
|
|
262
|
-
if (!o) {
|
|
263
|
-
refresh === null || refresh === void 0 ? void 0 : refresh();
|
|
264
|
-
}
|
|
265
|
-
return !o;
|
|
266
|
-
});
|
|
267
|
-
};
|
|
268
|
-
const onClickDropdown = (e) => {
|
|
269
|
-
e.stopPropagation();
|
|
270
|
-
const isKeyboardInitiated = e.detail === 0;
|
|
271
|
-
if (!isKeyboardInitiated) {
|
|
272
|
-
return;
|
|
273
|
-
}
|
|
274
|
-
return setDropdownOpened((o) => {
|
|
275
|
-
if (!o) {
|
|
276
|
-
refresh === null || refresh === void 0 ? void 0 : refresh();
|
|
277
|
-
window.addEventListener('pointerup', (evt) => {
|
|
278
|
-
if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
|
|
279
|
-
setDropdownOpened(false);
|
|
280
|
-
}
|
|
281
|
-
}, {
|
|
282
|
-
once: true,
|
|
283
|
-
});
|
|
284
|
-
}
|
|
285
|
-
return !o;
|
|
286
|
-
});
|
|
287
|
-
};
|
|
288
|
-
current.addEventListener('pointerdown', onPointerDown);
|
|
289
|
-
current.addEventListener('click', onClickDropdown);
|
|
290
|
-
return () => {
|
|
291
|
-
current.removeEventListener('pointerdown', onPointerDown);
|
|
292
|
-
current.removeEventListener('click', onClickDropdown);
|
|
293
|
-
};
|
|
294
|
-
}, [refresh]);
|
|
295
283
|
const spaceToBottom = (0, react_1.useMemo)(() => {
|
|
296
284
|
const margin = 10;
|
|
297
285
|
if (size && dropdownOpened) {
|
|
@@ -350,7 +338,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
|
|
|
350
338
|
if (!video) {
|
|
351
339
|
return null;
|
|
352
340
|
}
|
|
353
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: connectionStatus !== 'connected' && renderType === 'server-render', onClick: openServerRenderModal, type: "button" }), ' ', (0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-client",
|
|
341
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: connectionStatus !== 'connected' && renderType === 'server-render', onClick: openServerRenderModal, type: "button" }), ' ', (0, jsx_runtime_1.jsx)("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), (0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: connectionStatus !== 'connected' && renderType === 'server-render', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: mainButtonContent, children: [(0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: "currentcolor", svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: renderLabel })] }) }), shouldShowDropdown ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: dividerStyle }), (0, jsx_runtime_1.jsx)("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}) })] })) : null] }), portalStyle
|
|
354
342
|
? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
|
|
355
343
|
: null] }));
|
|
356
344
|
};
|