@remotion/player 4.0.176 → 4.0.178
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/README.md +16 -84
- package/dist/cjs/Player.d.ts +1 -1
- package/dist/cjs/Player.js +1 -1
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/test/index.test.js +3 -3
- package/dist/cjs/test/validate-in-out-frames.test.js +12 -12
- package/dist/cjs/test/validate-prop.test.js +24 -24
- package/package.json +8 -17
package/README.md
CHANGED
|
@@ -1,86 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[ on how to get FFMPEG on your machine.
|
|
12
|
-
|
|
13
|
-
Install this package and Remotion with the package manager that you use for project:
|
|
14
|
-
|
|
1
|
+
# @remotion/player
|
|
2
|
+
|
|
3
|
+
React component for embedding a Remotion preview into your app
|
|
4
|
+
|
|
5
|
+
[](https://npmcharts.com/compare/@remotion/player?minimal=true)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
15
9
|
```bash
|
|
16
|
-
npm
|
|
10
|
+
npm install @remotion/player --save-exact
|
|
17
11
|
```
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
> Make sure all Remotion packages you install (`remotion`, `@remotion/player`, `@remotion/gif`...) [have the same version](https://remotion.dev/docs/version-mismatch).
|
|
28
|
-
|
|
29
|
-
## Getting started
|
|
30
|
-
|
|
31
|
-
Now that you have this package as a dependency in your React project, it is time to see some of the basic examples that you can spin up with this package.
|
|
32
|
-
|
|
33
|
-
The `@remotion/player` package can be imported as a React component from the library, which you can make use of in your components, either by nesting it in a custom component of yours or simply making it a standalone component.
|
|
34
|
-
|
|
35
|
-
```javascript
|
|
36
|
-
// components/MyVideo.js
|
|
37
|
-
import React from 'react';
|
|
38
|
-
import {useCurrentFrame} from 'remotion';
|
|
39
|
-
|
|
40
|
-
const MyVideo = () => {
|
|
41
|
-
const frame = useCurrentFrame();
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<div
|
|
45
|
-
style={{
|
|
46
|
-
flex: 1,
|
|
47
|
-
textAlign: 'center',
|
|
48
|
-
fontSize: '7em',
|
|
49
|
-
}}
|
|
50
|
-
>
|
|
51
|
-
The current frame is {frame}.
|
|
52
|
-
</div>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
```javascript
|
|
58
|
-
import {Player} from '@remotion/player';
|
|
59
|
-
import {MyVideo} from '../components/MyVideo';
|
|
60
|
-
|
|
61
|
-
export const App = () => {
|
|
62
|
-
return (
|
|
63
|
-
<Player
|
|
64
|
-
component={MyVideo}
|
|
65
|
-
durationInFrames={120}
|
|
66
|
-
compositionWidth={1920}
|
|
67
|
-
compositionHeight={1080}
|
|
68
|
-
fps={30}
|
|
69
|
-
/>
|
|
70
|
-
);
|
|
71
|
-
};
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
## API
|
|
75
|
-
|
|
76
|
-
The most important props accepted:
|
|
77
|
-
|
|
78
|
-
| Props | Function |
|
|
79
|
-
| ----------------- | ---------------------------------------- |
|
|
80
|
-
| component | A React component that renders the video |
|
|
81
|
-
| durationInFrames | The duration of the video in frames |
|
|
82
|
-
| compositionHeight | The height of the composition in pixels |
|
|
83
|
-
| compositionWidth | The width of the composition in pixels |
|
|
84
|
-
| fps | The frame rate of the video |
|
|
85
|
-
|
|
86
|
-
For a complete reference of the available props, refer to [@remotion/player API](https://www.remotion.dev/docs/player/player).
|
|
12
|
+
|
|
13
|
+
When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
|
|
14
|
+
Remove the `^` character from the version number to use the exact version.
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
See the [documentation](https://www.remotion.dev/docs/player) for more information.
|
package/dist/cjs/Player.d.ts
CHANGED
|
@@ -52,7 +52,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props> = {
|
|
|
52
52
|
export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
|
|
53
53
|
/**
|
|
54
54
|
* @description Creates and renders a customizable video player with various interactive controls for a React application.
|
|
55
|
-
* @see [Documentation](https://remotion.dev/docs/player/
|
|
55
|
+
* @see [Documentation](https://remotion.dev/docs/player/player)
|
|
56
56
|
* @param {PlayerProps<Schema, Props>} props The properties for configuring the player, including video specifics and UI controls.
|
|
57
57
|
* @param {MutableRefObject<PlayerRef>} ref Reference to the player for controlling playback, volume, and other aspects.
|
|
58
58
|
* @returns {JSX.Element} The rendered video player component.
|
package/dist/cjs/Player.js
CHANGED
|
@@ -145,7 +145,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
|
|
|
145
145
|
const forward = react_1.forwardRef;
|
|
146
146
|
/**
|
|
147
147
|
* @description Creates and renders a customizable video player with various interactive controls for a React application.
|
|
148
|
-
* @see [Documentation](https://remotion.dev/docs/player/
|
|
148
|
+
* @see [Documentation](https://remotion.dev/docs/player/player)
|
|
149
149
|
* @param {PlayerProps<Schema, Props>} props The properties for configuring the player, including video specifics and UI controls.
|
|
150
150
|
* @param {MutableRefObject<PlayerRef>} ref Reference to the player for controlling playback, volume, and other aspects.
|
|
151
151
|
* @returns {JSX.Element} The rendered video player component.
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export declare const PlayerInternals: {
|
|
|
19
19
|
isFirstFrame: boolean;
|
|
20
20
|
emitter: PlayerEmitter;
|
|
21
21
|
playing: boolean;
|
|
22
|
-
play: (e?:
|
|
22
|
+
play: (e?: import("react").SyntheticEvent<Element, Event> | PointerEvent | undefined) => void;
|
|
23
23
|
pause: () => void;
|
|
24
24
|
pauseAndReturnToPlayStart: () => void;
|
|
25
25
|
seek: (newFrame: number) => void;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const
|
|
3
|
+
const bun_test_1 = require("bun:test");
|
|
4
4
|
const use_player_js_1 = require("../use-player.js");
|
|
5
|
-
(0,
|
|
6
|
-
(0,
|
|
5
|
+
(0, bun_test_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
|
|
6
|
+
(0, bun_test_1.expect)(() => {
|
|
7
7
|
(0, use_player_js_1.usePlayer)();
|
|
8
8
|
}).toThrow();
|
|
9
9
|
});
|
|
@@ -1,54 +1,54 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const
|
|
3
|
+
const bun_test_1 = require("bun:test");
|
|
4
4
|
const validate_in_out_frame_js_1 = require("../utils/validate-in-out-frame.js");
|
|
5
|
-
(0,
|
|
6
|
-
(0,
|
|
5
|
+
(0, bun_test_1.test)('Validate in out frames', () => {
|
|
6
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
7
7
|
durationInFrames: 200,
|
|
8
8
|
inFrame: 201,
|
|
9
9
|
outFrame: undefined,
|
|
10
10
|
})).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
|
|
11
|
-
(0,
|
|
11
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
12
12
|
durationInFrames: 200,
|
|
13
13
|
inFrame: 199,
|
|
14
14
|
outFrame: 201,
|
|
15
15
|
})).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
|
|
16
|
-
(0,
|
|
16
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
17
17
|
durationInFrames: 200,
|
|
18
18
|
inFrame: -10,
|
|
19
19
|
outFrame: null,
|
|
20
20
|
})).toThrow(/inFrame must be greater than 0, but is -10/);
|
|
21
|
-
(0,
|
|
21
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
22
22
|
durationInFrames: 200,
|
|
23
23
|
inFrame: null,
|
|
24
24
|
outFrame: -10,
|
|
25
25
|
})).toThrow(/outFrame must be greater than 0, but is -10/);
|
|
26
|
-
(0,
|
|
26
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
27
27
|
durationInFrames: 200,
|
|
28
28
|
inFrame: 1.5,
|
|
29
29
|
outFrame: null,
|
|
30
30
|
})).toThrow(/"inFrame" must be an integer, but is 1.5/);
|
|
31
|
-
(0,
|
|
31
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
32
32
|
durationInFrames: 200,
|
|
33
33
|
inFrame: 20,
|
|
34
34
|
outFrame: 20,
|
|
35
35
|
})).toThrow(/outFrame must be greater than inFrame, but is 20/);
|
|
36
|
-
(0,
|
|
36
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
37
37
|
durationInFrames: 200,
|
|
38
38
|
inFrame: 21,
|
|
39
39
|
outFrame: 20,
|
|
40
40
|
})).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
|
|
41
|
-
(0,
|
|
41
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
42
42
|
durationInFrames: 200,
|
|
43
43
|
inFrame: null,
|
|
44
44
|
outFrame: 20,
|
|
45
45
|
})).not.toThrow();
|
|
46
|
-
(0,
|
|
46
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
47
47
|
durationInFrames: 200,
|
|
48
48
|
inFrame: null,
|
|
49
49
|
outFrame: null,
|
|
50
50
|
})).not.toThrow();
|
|
51
|
-
(0,
|
|
51
|
+
(0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
|
|
52
52
|
durationInFrames: 200,
|
|
53
53
|
inFrame: 10,
|
|
54
54
|
outFrame: 20,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const bun_test_1 = require("bun:test");
|
|
4
5
|
const remotion_1 = require("remotion");
|
|
5
|
-
const vitest_1 = require("vitest");
|
|
6
6
|
const index_js_1 = require("../index.js");
|
|
7
7
|
const test_utils_js_1 = require("./test-utils.js");
|
|
8
|
-
(0,
|
|
8
|
+
(0, bun_test_1.test)('no compositionWidth should give errors', () => {
|
|
9
9
|
try {
|
|
10
10
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player
|
|
11
11
|
// @ts-expect-error
|
|
@@ -14,27 +14,27 @@ const test_utils_js_1 = require("./test-utils.js");
|
|
|
14
14
|
compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
|
|
15
15
|
}
|
|
16
16
|
catch (e) {
|
|
17
|
-
(0,
|
|
17
|
+
(0, bun_test_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
(0,
|
|
20
|
+
(0, bun_test_1.test)('no compositionHeight should give errors', () => {
|
|
21
21
|
try {
|
|
22
22
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong',
|
|
23
23
|
// @ts-expect-error
|
|
24
24
|
compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
|
|
25
25
|
}
|
|
26
26
|
catch (e) {
|
|
27
|
-
(0,
|
|
27
|
+
(0, bun_test_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
(0,
|
|
30
|
+
(0, bun_test_1.test)('No fps should give errors', () => {
|
|
31
31
|
try {
|
|
32
32
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong',
|
|
33
33
|
// @ts-expect-error
|
|
34
34
|
fps: null, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
|
|
35
35
|
}
|
|
36
36
|
catch (e) {
|
|
37
|
-
(0,
|
|
37
|
+
(0, bun_test_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
|
|
38
38
|
}
|
|
39
39
|
try {
|
|
40
40
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong',
|
|
@@ -42,51 +42,51 @@ const test_utils_js_1 = require("./test-utils.js");
|
|
|
42
42
|
fps: undefined, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
|
|
43
43
|
}
|
|
44
44
|
catch (e) {
|
|
45
|
-
(0,
|
|
45
|
+
(0, bun_test_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
-
(0,
|
|
48
|
+
(0, bun_test_1.test)('No durationInFrames should give errors', () => {
|
|
49
49
|
try {
|
|
50
50
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30,
|
|
51
51
|
// @ts-expect-error
|
|
52
52
|
durationInFrames: undefined, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
|
|
53
53
|
}
|
|
54
54
|
catch (e) {
|
|
55
|
-
(0,
|
|
55
|
+
(0, bun_test_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
-
(0,
|
|
58
|
+
(0, bun_test_1.test)('Invalid playbackRate should give error', () => {
|
|
59
59
|
try {
|
|
60
60
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5, inputProps: {} }));
|
|
61
61
|
}
|
|
62
62
|
catch (e) {
|
|
63
|
-
(0,
|
|
63
|
+
(0, bun_test_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
|
-
(0,
|
|
66
|
+
(0, bun_test_1.test)('playbackRate of 0 should not be possible', () => {
|
|
67
67
|
try {
|
|
68
68
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
|
|
69
69
|
}
|
|
70
70
|
catch (e) {
|
|
71
|
-
(0,
|
|
71
|
+
(0, bun_test_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
|
-
(0,
|
|
74
|
+
(0, bun_test_1.test)('playbackRate of wrong type should not be possible', () => {
|
|
75
75
|
try {
|
|
76
76
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true,
|
|
77
77
|
// @ts-expect-error
|
|
78
78
|
playbackRate: 'hi' }));
|
|
79
79
|
}
|
|
80
80
|
catch (e) {
|
|
81
|
-
(0,
|
|
81
|
+
(0, bun_test_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
|
-
(0,
|
|
84
|
+
(0, bun_test_1.test)('playbackRate of undefined should be okay', () => {
|
|
85
85
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
|
|
86
|
-
(0,
|
|
86
|
+
(0, bun_test_1.expect)(true).toBe(true);
|
|
87
87
|
});
|
|
88
|
-
(0,
|
|
89
|
-
(0,
|
|
88
|
+
(0, bun_test_1.test)('passing in <Composition /> instance should not be possible', () => {
|
|
89
|
+
(0, bun_test_1.expect)(() => {
|
|
90
90
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
|
|
91
91
|
id: 'HelloWorld',
|
|
92
92
|
width: 500,
|
|
@@ -97,8 +97,8 @@ const test_utils_js_1 = require("./test-utils.js");
|
|
|
97
97
|
} }));
|
|
98
98
|
}).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
|
|
99
99
|
});
|
|
100
|
-
(0,
|
|
101
|
-
(0,
|
|
100
|
+
(0, bun_test_1.test)('passing in <Composition /> instance should not be possible', () => {
|
|
101
|
+
(0, bun_test_1.expect)(() => {
|
|
102
102
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500,
|
|
103
103
|
// @ts-expect-error
|
|
104
104
|
component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_js_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
|
|
@@ -111,7 +111,7 @@ const test_utils_js_1 = require("./test-utils.js");
|
|
|
111
111
|
} }));
|
|
112
112
|
}).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
|
|
113
113
|
});
|
|
114
|
-
|
|
114
|
+
bun_test_1.test.each([
|
|
115
115
|
['controls'],
|
|
116
116
|
['loop'],
|
|
117
117
|
['autoPlay'],
|
|
@@ -126,6 +126,6 @@ vitest_1.test.each([
|
|
|
126
126
|
(0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_js_1.HelloWorld, ...props }));
|
|
127
127
|
}
|
|
128
128
|
catch (e) {
|
|
129
|
-
(0,
|
|
129
|
+
(0, bun_test_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
|
|
130
130
|
}
|
|
131
131
|
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
+
"repository": {
|
|
3
|
+
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
|
|
4
|
+
},
|
|
2
5
|
"name": "@remotion/player",
|
|
3
|
-
"version": "4.0.
|
|
4
|
-
"description": "Remotion
|
|
6
|
+
"version": "4.0.178",
|
|
7
|
+
"description": "React component for embedding a Remotion preview into your app",
|
|
5
8
|
"main": "dist/cjs/index.js",
|
|
6
9
|
"types": "dist/cjs/index.d.ts",
|
|
7
10
|
"module": "dist/esm/index.mjs",
|
|
@@ -15,9 +18,6 @@
|
|
|
15
18
|
"require": "./dist/cjs/index.js"
|
|
16
19
|
}
|
|
17
20
|
},
|
|
18
|
-
"repository": {
|
|
19
|
-
"url": "https://github.com/remotion-dev/remotion"
|
|
20
|
-
},
|
|
21
21
|
"bugs": {
|
|
22
22
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
23
23
|
},
|
|
@@ -28,28 +28,18 @@
|
|
|
28
28
|
],
|
|
29
29
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"remotion": "4.0.
|
|
31
|
+
"remotion": "4.0.178"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
|
35
35
|
"react-dom": ">=16.8.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@jonny/eslint-config": "3.0.281",
|
|
39
38
|
"@testing-library/react": "13.1.1",
|
|
40
39
|
"@happy-dom/global-registrator": "14.5.1",
|
|
41
|
-
"@types/node": "18.14.6",
|
|
42
|
-
"@types/react": "18.3.1",
|
|
43
|
-
"@types/react-dom": "18.3.0",
|
|
44
40
|
"csstype": "^3.1.1",
|
|
45
|
-
"eslint": "8.56.0",
|
|
46
|
-
"eslint-plugin-require-extensions": "^0.1.2",
|
|
47
|
-
"jsdom": "20.0.1",
|
|
48
|
-
"prettier": "3.2.5",
|
|
49
|
-
"prettier-plugin-organize-imports": "3.2.4",
|
|
50
41
|
"react": "18.3.1",
|
|
51
42
|
"react-dom": "18.3.1",
|
|
52
|
-
"vitest": "0.31.1",
|
|
53
43
|
"webpack": "5.83.1",
|
|
54
44
|
"zod": "3.22.3"
|
|
55
45
|
},
|
|
@@ -63,11 +53,12 @@
|
|
|
63
53
|
"publishConfig": {
|
|
64
54
|
"access": "public"
|
|
65
55
|
},
|
|
56
|
+
"homepage": "https://www.remotion.dev/docs/player",
|
|
66
57
|
"scripts": {
|
|
67
58
|
"formatting": "prettier src --check",
|
|
68
59
|
"lint": "eslint src --ext ts,tsx",
|
|
69
60
|
"build": "bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
|
|
70
|
-
"test": "
|
|
61
|
+
"test": "bun test src",
|
|
71
62
|
"prerelease": "cp ../../README.md ."
|
|
72
63
|
}
|
|
73
64
|
}
|