@remotion/studio 4.0.135 → 4.0.136
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/.turbo/turbo-build.log +1 -1
- package/dist/components/NewComposition/CopyHint.js +2 -2
- package/dist/components/NewComposition/NewComposition.d.ts +3 -2
- package/dist/components/NewComposition/NewComposition.js +4 -45
- package/dist/components/NewComposition/new-comp-layout.d.ts +0 -1
- package/dist/components/NewComposition/new-comp-layout.js +1 -9
- package/dist/components/PlayerEmitterContext.d.ts +4 -0
- package/dist/components/PlayerEmitterContext.js +11 -0
- package/dist/components/RenderModal/RenderModalInput.d.ts +12 -0
- package/dist/components/RenderModal/RenderModalInput.js +13 -0
- package/dist/helpers/colors.d.ts +1 -1
- package/package.json +7 -7
- package/tsconfig.tsbuildinfo +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -22,9 +22,9 @@ const CopyHint = () => {
|
|
|
22
22
|
setProjectInfo(null);
|
|
23
23
|
});
|
|
24
24
|
}, []);
|
|
25
|
-
if (!(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.
|
|
25
|
+
if (!(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.rootFile)) {
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.rootFile, children: projectInfo.relativeRootFile }), ' ', "file."] }));
|
|
29
29
|
};
|
|
30
30
|
exports.CopyHint = CopyHint;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { CompType } from '../../state/modals';
|
|
3
|
-
declare const
|
|
3
|
+
declare const DuplicateComposition: React.FC<{
|
|
4
4
|
initialCompType: CompType;
|
|
5
|
+
compositionId: string;
|
|
5
6
|
}>;
|
|
6
|
-
export default
|
|
7
|
+
export default DuplicateComposition;
|
|
@@ -7,16 +7,13 @@ const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data")
|
|
|
7
7
|
const Checkmark_1 = require("../../icons/Checkmark");
|
|
8
8
|
const aspect_ratio_locked_1 = require("../../state/aspect-ratio-locked");
|
|
9
9
|
const modals_1 = require("../../state/modals");
|
|
10
|
-
const CopyButton_1 = require("../CopyButton");
|
|
11
10
|
const layout_1 = require("../layout");
|
|
12
11
|
const ModalContainer_1 = require("../ModalContainer");
|
|
13
12
|
const ModalHeader_1 = require("../ModalHeader");
|
|
14
13
|
const ComboBox_1 = require("./ComboBox");
|
|
15
|
-
const CopyHint_1 = require("./CopyHint");
|
|
16
14
|
const InputDragger_1 = require("./InputDragger");
|
|
17
15
|
const new_comp_layout_1 = require("./new-comp-layout");
|
|
18
16
|
const NewCompAspectRatio_1 = require("./NewCompAspectRatio");
|
|
19
|
-
const NewCompCode_1 = require("./NewCompCode");
|
|
20
17
|
const NewCompDuration_1 = require("./NewCompDuration");
|
|
21
18
|
const RemInput_1 = require("./RemInput");
|
|
22
19
|
const ValidationMessage_1 = require("./ValidationMessage");
|
|
@@ -27,33 +24,11 @@ const left = {
|
|
|
27
24
|
flex: 1,
|
|
28
25
|
fontSize: 13,
|
|
29
26
|
};
|
|
30
|
-
const panelRight = {
|
|
31
|
-
backgroundColor: 'black',
|
|
32
|
-
display: 'flex',
|
|
33
|
-
justifyContent: 'center',
|
|
34
|
-
alignItems: 'center',
|
|
35
|
-
position: 'relative',
|
|
36
|
-
width: 400,
|
|
37
|
-
};
|
|
38
|
-
const pre = {
|
|
39
|
-
fontSize: 17,
|
|
40
|
-
fontFamily: 'monospace',
|
|
41
|
-
};
|
|
42
27
|
const comboBoxStyle = {
|
|
43
28
|
width: new_comp_layout_1.inputArea.width,
|
|
44
29
|
};
|
|
45
|
-
const copyRowStyle = {
|
|
46
|
-
position: 'absolute',
|
|
47
|
-
bottom: 10,
|
|
48
|
-
right: 0,
|
|
49
|
-
paddingRight: 10,
|
|
50
|
-
paddingLeft: 20,
|
|
51
|
-
width: '100%',
|
|
52
|
-
alignItems: 'center',
|
|
53
|
-
color: new_comp_layout_1.leftLabel.color,
|
|
54
|
-
};
|
|
55
30
|
const commonFrameRates = [24, 25, 29.97, 30, 48, 50];
|
|
56
|
-
const
|
|
31
|
+
const DuplicateComposition = (props) => {
|
|
57
32
|
const { initialCompType } = props;
|
|
58
33
|
const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(String(commonFrameRates[0]));
|
|
59
34
|
const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
|
|
@@ -67,7 +42,7 @@ const NewComposition = (props) => {
|
|
|
67
42
|
return {
|
|
68
43
|
flexDirection: 'row',
|
|
69
44
|
display: 'flex',
|
|
70
|
-
width: (0, ModalContainer_1.getMaxModalWidth)(
|
|
45
|
+
width: (0, ModalContainer_1.getMaxModalWidth)(600),
|
|
71
46
|
height: type === 'composition'
|
|
72
47
|
? (0, ModalContainer_1.getMaxModalHeight)(490)
|
|
73
48
|
: (0, ModalContainer_1.getMaxModalHeight)(340),
|
|
@@ -183,22 +158,6 @@ const NewComposition = (props) => {
|
|
|
183
158
|
},
|
|
184
159
|
];
|
|
185
160
|
}, [onTypeChanged]);
|
|
186
|
-
return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "
|
|
187
|
-
type,
|
|
188
|
-
durationInFrames: Number(durationInFrames),
|
|
189
|
-
fps: Number(selectedFrameRate),
|
|
190
|
-
height: Number(size.height),
|
|
191
|
-
width: Number(size.width),
|
|
192
|
-
name,
|
|
193
|
-
raw: false,
|
|
194
|
-
}) }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: copyRowStyle, children: [(0, jsx_runtime_1.jsx)(CopyHint_1.CopyHint, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { label: "Copy code", labelWhenCopied: "Copied!", textToCopy: (0, NewCompCode_1.getNewCompositionCode)({
|
|
195
|
-
type,
|
|
196
|
-
durationInFrames: Number(durationInFrames),
|
|
197
|
-
fps: Number(selectedFrameRate),
|
|
198
|
-
height: Number(size.height),
|
|
199
|
-
width: Number(size.width),
|
|
200
|
-
name,
|
|
201
|
-
raw: true,
|
|
202
|
-
}) })] })] }), ' '] })] }));
|
|
161
|
+
return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Duplicate composition" }), (0, jsx_runtime_1.jsx)("div", { style: panelContent, children: (0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name", status: "ok", rightAlign: false }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }) })] }));
|
|
203
162
|
};
|
|
204
|
-
exports.default =
|
|
163
|
+
exports.default = DuplicateComposition;
|
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.rightLabel = exports.inputArea =
|
|
3
|
+
exports.rightLabel = exports.inputArea = void 0;
|
|
4
4
|
const colors_1 = require("../../helpers/colors");
|
|
5
|
-
exports.leftLabel = {
|
|
6
|
-
width: 160,
|
|
7
|
-
display: 'inline-block',
|
|
8
|
-
textAlign: 'right',
|
|
9
|
-
paddingRight: 30,
|
|
10
|
-
fontSize: 14,
|
|
11
|
-
color: colors_1.LIGHT_COLOR,
|
|
12
|
-
};
|
|
13
5
|
exports.inputArea = {
|
|
14
6
|
width: 190,
|
|
15
7
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PlayerEmitterContext = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const player_1 = require("@remotion/player");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const PlayerEmitterContext = ({ children }) => {
|
|
8
|
+
const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
|
|
10
|
+
};
|
|
11
|
+
exports.PlayerEmitterContext = PlayerEmitterContext;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { RenderType } from './RenderModalAdvanced';
|
|
3
|
+
type Props = {
|
|
4
|
+
existence: boolean;
|
|
5
|
+
inputStyle: React.CSSProperties;
|
|
6
|
+
outName: string;
|
|
7
|
+
onValueChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
8
|
+
validationMessage: string | null;
|
|
9
|
+
renderType: RenderType;
|
|
10
|
+
};
|
|
11
|
+
export declare function RenderModalInput({ existence, inputStyle, outName, onValueChange, validationMessage, renderType, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RenderModalInput = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const layout_1 = require("../layout");
|
|
6
|
+
const RemInput_1 = require("../NewComposition/RemInput");
|
|
7
|
+
const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
|
|
8
|
+
const layout_2 = require("./layout");
|
|
9
|
+
// eslint-disable-next-line react/function-component-definition
|
|
10
|
+
function RenderModalInput({ existence, inputStyle, outName, onValueChange, validationMessage, renderType, }) {
|
|
11
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(layout_1.Column, { children: (0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: renderType === 'sequence' ? 'Folder name' : 'Output name' }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })] })) : existence ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten", type: 'warning' })] })) : null] }) })] }));
|
|
12
|
+
}
|
|
13
|
+
exports.RenderModalInput = RenderModalInput;
|
package/dist/helpers/colors.d.ts
CHANGED
|
@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
|
|
|
23
23
|
export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
|
|
24
24
|
selected: boolean;
|
|
25
25
|
hovered: boolean;
|
|
26
|
-
}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)"
|
|
26
|
+
}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/studio",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.136",
|
|
4
4
|
"description": "Remotion Editor",
|
|
5
5
|
"main": "dist",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
"memfs": "3.4.3",
|
|
19
19
|
"source-map": "0.7.3",
|
|
20
20
|
"open": "^8.4.2",
|
|
21
|
-
"remotion": "4.0.
|
|
22
|
-
"@remotion/
|
|
23
|
-
"@remotion/
|
|
24
|
-
"@remotion/
|
|
25
|
-
"@remotion/
|
|
21
|
+
"remotion": "4.0.136",
|
|
22
|
+
"@remotion/player": "4.0.136",
|
|
23
|
+
"@remotion/media-utils": "4.0.136",
|
|
24
|
+
"@remotion/renderer": "4.0.136",
|
|
25
|
+
"@remotion/studio-shared": "4.0.136"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"react": "18.2.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"prettier-plugin-organize-imports": "3.2.4",
|
|
41
41
|
"vitest": "0.31.1",
|
|
42
42
|
"zod": "^3.22.3",
|
|
43
|
-
"@remotion/zod-types": "4.0.
|
|
43
|
+
"@remotion/zod-types": "4.0.136"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|