@remotion/player 4.0.177 → 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 CHANGED
@@ -1,86 +1,18 @@
1
- ### Remotion Player
2
-
3
- [![NPM Version](https://img.shields.io/npm/v/@remotion/player.svg?style=flat)](https://www.npmjs.org/package/@remotion/player)
4
- [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/player.svg?style=flat)](https://npmcharts.com/compare/@remotion/player?minimal=true)
5
- [![Install Size](https://packagephobia.now.sh/badge?p=@remotion/player)](https://packagephobia.now.sh/result?p=@remotion/player)
6
-
7
- The `@remotion/player` package allows you to embed a video powered by Remotion in a React application.
8
-
9
- ## Installation and prerequisites
10
-
11
- The dependencies that Remotion requires you to have pre-installed on your machine are Node.js and FFMPEG. You can take a look at this [guide](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-FFmpeg) 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
+ [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/player.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/player?minimal=true)
6
+
7
+ ## Installation
8
+
15
9
  ```bash
16
- npm i remotion @remotion/player
10
+ npm install @remotion/player --save-exact
17
11
  ```
18
-
19
- ```bash
20
- yarn add remotion @remotion/player
21
- ```
22
-
23
- ```bash
24
- pnpm i remotion @remotion/player
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.
@@ -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/api)
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.
@@ -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/api)
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.
@@ -19,7 +19,7 @@ export declare const PlayerInternals: {
19
19
  isFirstFrame: boolean;
20
20
  emitter: PlayerEmitter;
21
21
  playing: boolean;
22
- play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
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 vitest_1 = require("vitest");
3
+ const bun_test_1 = require("bun:test");
4
4
  const use_player_js_1 = require("../use-player.js");
5
- (0, vitest_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
6
- (0, vitest_1.expect)(() => {
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 vitest_1 = require("vitest");
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, vitest_1.test)('Validate in out frames', () => {
6
- (0, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
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, vitest_1.test)('no compositionWidth should give errors', () => {
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, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
17
+ (0, bun_test_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
18
18
  }
19
19
  });
20
- (0, vitest_1.test)('no compositionHeight should give errors', () => {
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, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
27
+ (0, bun_test_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
28
28
  }
29
29
  });
30
- (0, vitest_1.test)('No fps should give errors', () => {
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, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
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, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
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, vitest_1.test)('No durationInFrames should give errors', () => {
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, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
55
+ (0, bun_test_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
56
56
  }
57
57
  });
58
- (0, vitest_1.test)('Invalid playbackRate should give error', () => {
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, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
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, vitest_1.test)('playbackRate of 0 should not be possible', () => {
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, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
71
+ (0, bun_test_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
72
72
  }
73
73
  });
74
- (0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
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, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
81
+ (0, bun_test_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
82
82
  }
83
83
  });
84
- (0, vitest_1.test)('playbackRate of undefined should be okay', () => {
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, vitest_1.expect)(true).toBe(true);
86
+ (0, bun_test_1.expect)(true).toBe(true);
87
87
  });
88
- (0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
89
- (0, vitest_1.expect)(() => {
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, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
101
- (0, vitest_1.expect)(() => {
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
- vitest_1.test.each([
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, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
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.177",
4
- "description": "Remotion Player",
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.177"
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": "vitest src --run",
61
+ "test": "bun test src",
71
62
  "prerelease": "cp ../../README.md ."
72
63
  }
73
64
  }