@remotion/player 3.2.32 → 3.2.34

package/dist/MediaVolumeSlider.js

@@ -16,7 +16,9 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const parentDivRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const hover = (0, use_hover_state_1.useHoverState)(parentDivRef);
-    const [randomClass] = (0, react_1.useState)(() => `slider-${(0, remotion_1.random)(null)}`.replace('.', ''));
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const randomId = typeof react_1.useId === 'undefined' ? 'volume-slider' : (0, react_1.useId)();
+    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
     const isMutedOrZero = mediaMuted || mediaVolume === 0;
     const onVolumeChange = (e) => {
         setMediaVolume(parseFloat(e.target.value));

package/dist/test/index.test.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 const use_player_1 = require("../use-player");
-test('It should throw an error if not being used inside a RemotionRoot', () => {
-    expect(() => {
+(0, vitest_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
+    (0, vitest_1.expect)(() => {
         (0, use_player_1.usePlayer)();
     }).toThrow();
 });

package/dist/test/validate-in-out-frames.test.js

@@ -1,53 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 const validate_in_out_frame_1 = require("../utils/validate-in-out-frame");
-test('Validate in out frames', () => {
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+(0, vitest_1.test)('Validate in out frames', () => {
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 201,
         outFrame: undefined,
     })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 199,
         outFrame: 201,
     })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: -10,
         outFrame: null,
     })).toThrow(/inFrame must be greater than 0, but is -10/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: -10,
     })).toThrow(/outFrame must be greater than 0, but is -10/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 1.5,
         outFrame: null,
     })).toThrow(/"inFrame" must be an integer, but is 1.5/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 20,
         outFrame: 20,
     })).toThrow(/outFrame must be greater than inFrame, but is 20/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 21,
         outFrame: 20,
     })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: 20,
     })).not.toThrow();
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: null,
     })).not.toThrow();
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 10,
         outFrame: 20,

package/dist/test/validate-prop.test.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+const vitest_1 = require("vitest");
 const index_1 = require("../index");
 const test_utils_1 = require("./test-utils");
-test('no compositionWidth should give errors', () => {
+(0, vitest_1.test)('no compositionWidth should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player
         // @ts-expect-error
@@ -13,27 +14,27 @@ test('no compositionWidth should give errors', () => {
             compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
     }
 });
-test('no compositionHeight should give errors', () => {
+(0, vitest_1.test)('no compositionHeight should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
     }
 });
-test('No fps should give errors', () => {
+(0, vitest_1.test)('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
     }
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
@@ -41,51 +42,51 @@ test('No fps should give errors', () => {
             fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
     }
 });
-test('No durationInFrames should give errors', () => {
+(0, vitest_1.test)('No durationInFrames should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
             // @ts-expect-error
             durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
-test('Invalid playbackRate should give error', () => {
+(0, vitest_1.test)('Invalid playbackRate should give error', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+        (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
     }
 });
-test('playbackRate of 0 should not be possible', () => {
+(0, vitest_1.test)('playbackRate of 0 should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of wrong type should not be possible', () => {
+(0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
             // @ts-expect-error
             playbackRate: 'hi' }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of undefined should be okay', () => {
+(0, vitest_1.test)('playbackRate of undefined should be okay', () => {
     (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
-    expect(true).toBe(true);
+    (0, vitest_1.expect)(true).toBe(true);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
                 id: 'HelloWorld',
                 width: 500,
@@ -96,8 +97,8 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
             // @ts-expect-error
             component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
@@ -110,7 +111,7 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
-test.each([
+vitest_1.test.each([
     ['controls'],
     ['loop'],
     ['autoPlay'],
@@ -125,6 +126,6 @@ test.each([
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
     }
     catch (e) {
-        expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+        (0, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
     }
 });

package/package.json

@@ -1,12 +1,11 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.32",
+	"version": "3.2.34",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
 		"lint": "eslint src --ext ts,tsx",
-		"test": "jest",
 		"build": "tsc -d",
 		"watch": "tsc -w",
 		"prerelease": "cp ../../README.md ."
@@ -28,7 +27,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.32"
+		"remotion": "3.2.34"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -37,19 +36,19 @@
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
 		"@testing-library/react": "13.1.1",
-		"@types/jest": "^27.4.0",
 		"@types/node": "^14.14.14",
 		"@types/react": "18.0.1",
 		"@types/react-dom": "18.0.0",
+		"@vitejs/plugin-react": "^2.0.0",
 		"csstype": "^3.0.9",
-		"eslint": "8.13.0",
-		"jest": "^27.2.4",
-		"prettier": "^2.0.5",
+		"eslint": "8.25.0",
+		"jsdom": "20.0.1",
+		"prettier": "^2.7.1",
 		"prettier-plugin-organize-imports": "^2.3.4",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
-		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0",
+		"vitest": "0.24.3",
 		"webpack": "5.74.0"
 	},
 	"keywords": [
@@ -63,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4f7ab3637405d140041f898f95f78c99943d1b40"
+	"gitHead": "82f5d37510dfdf0630c5836cbe5655d7d3ebb2b2"
 }