@remotion/player 4.0.364 → 4.0.365

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.364",
+	"version": "4.0.365",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.364"
+		"remotion": "4.0.365"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.0.0",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.364",
+		"@remotion/eslint-config-internal": "4.0.365",
 		"eslint": "9.19.0"
 	},
 	"keywords": [

package/bundle.ts

@@ -1,19 +0,0 @@
-import {build} from 'bun';
-
-if (process.env.NODE_ENV !== 'production') {
-	throw new Error('This script must be run using NODE_ENV=production');
-}
-
-const output = await build({
-	entrypoints: ['src/index.ts'],
-	naming: '[name].mjs',
-	target: 'node',
-	external: ['remotion', 'remotion/no-react', 'react'],
-});
-
-const [file] = output.outputs;
-const text = await file.text();
-
-await Bun.write('dist/esm/index.mjs', `"use client";\n${text}`);
-
-export {};

package/dist/cjs/test/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/test/index.test.js

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

package/dist/cjs/test/test-utils.d.ts

@@ -1,6 +0,0 @@
-import type { queries, RenderOptions } from '@testing-library/react';
-import type { FC, ReactElement } from 'react';
-declare const HelloWorld: FC;
-declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
-export * from '@testing-library/react';
-export { HelloWorld, customRender as render };

package/dist/cjs/test/test-utils.js

@@ -1,31 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.render = exports.HelloWorld = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@testing-library/react");
-const HelloWorld = () => {
-    return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" });
-};
-exports.HelloWorld = HelloWorld;
-const AllTheProviders = ({ children }) => {
-    // overwriting console.error console does not gets poluted with all the errors
-    window.console.error = () => { };
-    return (0, jsx_runtime_1.jsx)("div", { children: children });
-};
-const customRender = (ui, options) => (0, react_1.render)(ui, { wrapper: AllTheProviders, ...options });
-exports.render = customRender;
-__exportStar(require("@testing-library/react"), exports);

package/dist/cjs/test/validate-in-out-frames.test.d.ts

@@ -1 +0,0 @@
-export {};

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

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

package/dist/cjs/test/validate-prop.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,135 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const bun_test_1 = require("bun:test");
-const remotion_1 = require("remotion");
-const index_js_1 = require("../index.js");
-const test_utils_js_1 = require("./test-utils.js");
-(0, bun_test_1.test)('no compositionWidth should give errors', () => {
-    try {
-        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player
-        // @ts-expect-error
-        , { 
-            // @ts-expect-error
-            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
-    }
-});
-(0, bun_test_1.test)('no compositionHeight should give errors', () => {
-    try {
-        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
-            // @ts-expect-error
-            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
-    }
-});
-(0, bun_test_1.test)('No fps should give errors', () => {
-    try {
-        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
-            // @ts-expect-error
-            fps: null, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
-    }
-    try {
-        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
-            // @ts-expect-error
-            fps: undefined, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
-    }
-});
-(0, bun_test_1.test)('No durationInFrames should give errors', () => {
-    try {
-        (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, 
-            // @ts-expect-error
-            durationInFrames: undefined, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
-    }
-});
-(0, bun_test_1.test)('Invalid playbackRate should give error', () => {
-    try {
-        (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: {} }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
-    }
-});
-(0, bun_test_1.test)('playbackRate of 0 should not be possible', () => {
-    try {
-        (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 }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
-    }
-});
-(0, bun_test_1.test)('playbackRate of wrong type should not be possible', () => {
-    try {
-        (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, 
-            // @ts-expect-error
-            playbackRate: 'hi' }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
-    }
-});
-(0, bun_test_1.test)('playbackRate of undefined should be okay', () => {
-    (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 }));
-    (0, bun_test_1.expect)(true).toBe(true);
-});
-(0, bun_test_1.test)('volumePersistenceKey of string should be okay', () => {
-    (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, volumePersistenceKey: "custom-key" }));
-    (0, bun_test_1.expect)(true).toBe(true);
-});
-(0, bun_test_1.test)('passing in <Composition /> instance should not be possible', () => {
-    (0, bun_test_1.expect)(() => {
-        (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: {
-                id: 'HelloWorld',
-                width: 500,
-                height: 400,
-                fps: 30,
-                durationInFrames: 500,
-                component: test_utils_js_1.HelloWorld,
-            } }));
-    }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
-});
-(0, bun_test_1.test)('passing in <Composition /> instance should not be possible', () => {
-    (0, bun_test_1.expect)(() => {
-        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_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_js_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
-                id: 'HelloWorld',
-                width: 500,
-                height: 400,
-                fps: 30,
-                durationInFrames: 500,
-                component: test_utils_js_1.HelloWorld,
-            } }));
-    }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
-});
-bun_test_1.test.each([
-    ['controls'],
-    ['loop'],
-    ['autoPlay'],
-    ['showVolumeControls'],
-    ['allowFullscreen'],
-    ['clickToPlay'],
-    ['doubleClickToFullscreen'],
-])('No durationInFrames should give errors %s', (a) => {
-    const props = {};
-    props[a] = 'hey';
-    try {
-        (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 }));
-    }
-    catch (e) {
-        (0, bun_test_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
-    }
-});

package/eslint.config.mjs

@@ -1,23 +0,0 @@
-import {remotionFlatConfig} from '@remotion/eslint-config-internal';
-
-const config = remotionFlatConfig({react: true});
-
-export default {
-	...config,
-	rules: {
-		...config.rules,
-		'no-console': 'error',
-		'@typescript-eslint/no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'zod',
-						message: 'Can only import zod as a type',
-						allowTypeImports: true,
-					},
-				],
-			},
-		],
-	},
-};