@remotion/player 4.0.0-webhook.26 → 4.1.0-alpha1

package/package.json

@@ -1,67 +1,81 @@
 {
-	"name": "@remotion/player",
-	"version": "4.0.0-webhook.26+c8e41db11",
-	"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 ."
-	},
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"files": [
-		"dist",
-		"README.md"
-	],
-	"author": "Jonny Burger <jonny@remotion.dev>",
-	"maintainers": [
-		"Jonny Burger <jonny@remotion.dev>",
-		"Shankhadeep Dey <shankhadeepdey99@gmail.com>"
-	],
-	"license": "SEE LICENSE IN LICENSE.md",
-	"dependencies": {
-		"remotion": "4.0.0-webhook.26+c8e41db11"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"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",
-		"csstype": "^3.0.9",
-		"eslint": "8.13.0",
-		"jest": "^27.2.4",
-		"prettier": "^2.0.5",
-		"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",
-		"webpack": "5.74.0"
-	},
-	"keywords": [
-		"remotion",
-		"ffmpeg",
-		"video",
-		"react",
-		"puppeteer",
-		"player"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"gitHead": "c8e41db114d645c5183edbf016a22b733243dce2"
-}
+  "name": "@remotion/player",
+  "version": "4.1.0-alpha1",
+  "description": "Remotion Player",
+  "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "module": "dist/esm/index.mjs",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/cjs/index.d.ts",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "author": "Jonny Burger <jonny@remotion.dev>",
+  "maintainers": [
+    "Jonny Burger <jonny@remotion.dev>",
+    "Shankhadeep Dey <shankhadeepdey99@gmail.com>"
+  ],
+  "license": "SEE LICENSE IN LICENSE.md",
+  "dependencies": {
+    "remotion": "4.1.0-alpha1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.273",
+    "@rollup/plugin-typescript": "^8.2.0",
+    "@testing-library/react": "13.1.1",
+    "@types/node": "18.14.6",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@vitejs/plugin-react": "^2.0.0",
+    "csstype": "^3.1.1",
+    "eslint": "8.42.0",
+    "eslint-plugin-require-extensions": "^0.1.2",
+    "jsdom": "20.0.1",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "^2.70.1",
+    "rollup-plugin-banner2": "^1.2.2",
+    "typescript": "4.9.5",
+    "vitest": "0.31.1",
+    "webpack": "5.83.1",
+    "zod": "^3.21.4"
+  },
+  "keywords": [
+    "remotion",
+    "ffmpeg",
+    "video",
+    "react",
+    "player"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "build": "node ensure-correct-version.js && rollup --config rollup.config.js && tsc -d",
+    "watch": "tsc -w",
+    "prerelease": "cp ../../README.md ."
+  }
+}

package/dist/Player.d.ts

@@ -1,49 +0,0 @@
-import type { ComponentType, MutableRefObject } from 'react';
-import React from 'react';
-import type { CompProps } from 'remotion';
-import type { PlayerRef } from './player-methods';
-import type { RenderLoading, RenderPoster } from './PlayerUI';
-declare type PropsIfHasProps<Props> = {} extends Props ? {
-    inputProps?: Props;
-} : {
-    inputProps: Props;
-};
-export declare type ErrorFallback = (info: {
-    error: Error;
-}) => React.ReactNode;
-export declare type PlayerProps<T> = {
-    durationInFrames: number;
-    compositionWidth: number;
-    compositionHeight: number;
-    fps: number;
-    showVolumeControls?: boolean;
-    controls?: boolean;
-    errorFallback?: ErrorFallback;
-    style?: React.CSSProperties;
-    loop?: boolean;
-    autoPlay?: boolean;
-    allowFullscreen?: boolean;
-    clickToPlay?: boolean;
-    doubleClickToFullscreen?: boolean;
-    spaceKeyToPlayOrPause?: boolean;
-    numberOfSharedAudioTags?: number;
-    playbackRate?: number;
-    renderLoading?: RenderLoading;
-    moveToBeginningWhenEnded?: boolean;
-    className?: string;
-    initialFrame?: number;
-    renderPoster?: RenderPoster;
-    showPosterWhenPaused?: boolean;
-    showPosterWhenEnded?: boolean;
-    showPosterWhenUnplayed?: boolean;
-    inFrame?: number | null;
-    outFrame?: number | null;
-    initiallyShowControls?: number | boolean;
-} & PropsIfHasProps<T> & CompProps<T>;
-export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
-declare module 'react' {
-    function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;
-export {};

package/dist/PlayerControls.js

@@ -1,137 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Controls = exports.X_PADDING = exports.X_SPACER = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const format_time_1 = require("./format-time");
-const icons_1 = require("./icons");
-const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
-const PlayerSeekBar_1 = require("./PlayerSeekBar");
-const use_video_controls_resize_1 = require("./use-video-controls-resize");
-exports.X_SPACER = 10;
-exports.X_PADDING = 12;
-const containerStyle = {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    paddingTop: 10,
-    paddingBottom: 10,
-    background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.4))',
-    display: 'flex',
-    paddingRight: exports.X_PADDING,
-    paddingLeft: exports.X_PADDING,
-    flexDirection: 'column',
-    transition: 'opacity 0.3s',
-};
-const buttonStyle = {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    padding: 0,
-    display: 'inline',
-    marginBottom: 0,
-    marginTop: 0,
-    height: 25,
-};
-const controlsRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    userSelect: 'none',
-};
-const leftPartStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    userSelect: 'none',
-    alignItems: 'center',
-};
-const xSpacer = {
-    width: 10,
-};
-const ySpacer = {
-    height: 8,
-};
-const flex1 = {
-    flex: 1,
-};
-const fullscreen = {};
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, }) => {
-    const playButtonRef = (0, react_1.useRef)(null);
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
-    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
-    const [shouldShowInitially, setInitiallyShowControls] = (0, react_1.useState)(() => {
-        if (typeof initiallyShowControls === 'boolean') {
-            return initiallyShowControls;
-        }
-        if (typeof initiallyShowControls === 'number') {
-            if (initiallyShowControls % 1 !== 0) {
-                throw new Error('initiallyShowControls must be an integer or a boolean');
-            }
-            if (Number.isNaN(initiallyShowControls)) {
-                throw new Error('initiallyShowControls must not be NaN');
-            }
-            if (!Number.isFinite(initiallyShowControls)) {
-                throw new Error('initiallyShowControls must be finite');
-            }
-            if (initiallyShowControls <= 0) {
-                throw new Error('initiallyShowControls must be a positive integer');
-            }
-            return initiallyShowControls;
-        }
-        throw new TypeError('initiallyShowControls must be a number or a boolean');
-    });
-    const containerCss = (0, react_1.useMemo)(() => {
-        // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing || shouldShowInitially;
-        return {
-            ...containerStyle,
-            opacity: Number(shouldShow),
-        };
-    }, [hovered, shouldShowInitially, player.playing]);
-    (0, react_1.useEffect)(() => {
-        if (playButtonRef.current && spaceKeyToPlayOrPause) {
-            // This switches focus to play button when player.playing flag changes
-            playButtonRef.current.focus({
-                preventScroll: true,
-            });
-        }
-    }, [player.playing, spaceKeyToPlayOrPause]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        // Must be handled client-side to avoid SSR hydration mismatch
-        setSupportsFullscreen((_a = (typeof document !== 'undefined' &&
-            (document.fullscreenEnabled || document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (shouldShowInitially === false) {
-            return;
-        }
-        const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
-        const timeout = setTimeout(() => {
-            setInitiallyShowControls(false);
-        }, time);
-        return () => {
-            clearInterval(timeout);
-        };
-    }, [shouldShowInitially]);
-    const timeLabel = (0, react_1.useMemo)(() => {
-        return {
-            color: 'white',
-            fontFamily: 'sans-serif',
-            fontSize: 14,
-            maxWidth: maxTimeLabelWidth,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        };
-    }, [maxTimeLabelWidth]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
-                                ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
-};
-exports.Controls = Controls;

package/dist/calculate-scale.d.ts

@@ -1,20 +0,0 @@
-import type { PreviewSize } from './utils/preview-size';
-import type { Size } from './utils/use-element-size';
-export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
-    previewSize: PreviewSize['size'];
-    compositionWidth: number;
-    compositionHeight: number;
-    canvasSize: Size;
-}) => number;
-export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-    previewSize: PreviewSize['size'];
-    compositionWidth: number;
-    compositionHeight: number;
-    canvasSize: Size;
-}) => {
-    centerX: number;
-    centerY: number;
-    xCorrection: number;
-    yCorrection: number;
-    scale: number;
-};

package/dist/calculate-scale.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateCanvasTransformation = exports.calculateScale = void 0;
-const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
-    const heightRatio = canvasSize.height / compositionHeight;
-    const widthRatio = canvasSize.width / compositionWidth;
-    const ratio = Math.min(heightRatio, widthRatio);
-    return previewSize === 'auto' ? ratio : Number(previewSize);
-};
-exports.calculateScale = calculateScale;
-const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
-    const scale = (0, exports.calculateScale)({
-        canvasSize,
-        compositionHeight,
-        compositionWidth,
-        previewSize,
-    });
-    const correction = 0 - (1 - scale) / 2;
-    const xCorrection = correction * compositionWidth;
-    const yCorrection = correction * compositionHeight;
-    const width = compositionWidth * scale;
-    const height = compositionHeight * scale;
-    const centerX = canvasSize.width / 2 - width / 2;
-    const centerY = canvasSize.height / 2 - height / 2;
-    return {
-        centerX,
-        centerY,
-        xCorrection,
-        yCorrection,
-        scale,
-    };
-};
-exports.calculateCanvasTransformation = calculateCanvasTransformation;

package/dist/emitter-context.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { PlayerEmitter } from './event-emitter';
-export declare const PlayerEventEmitterContext: React.Context<PlayerEmitter | undefined>;

package/dist/event-emitter.d.ts

@@ -1,52 +0,0 @@
-declare type SeekPayload = {
-    frame: number;
-};
-declare type ErrorPayload = {
-    error: Error;
-};
-declare type TimeUpdateEventPayload = {
-    frame: number;
-};
-declare type FrameUpdateEventPayload = {
-    frame: number;
-};
-declare type RateChangeEventPayload = {
-    playbackRate: number;
-};
-declare type FullscreenChangeEventPayload = {
-    isFullscreen: boolean;
-};
-declare type StateEventMap = {
-    seeked: SeekPayload;
-    pause: undefined;
-    play: undefined;
-    ratechange: RateChangeEventPayload;
-    ended: undefined;
-    error: ErrorPayload;
-    timeupdate: TimeUpdateEventPayload;
-    frameupdate: FrameUpdateEventPayload;
-    fullscreenchange: FullscreenChangeEventPayload;
-};
-export declare type EventTypes = keyof StateEventMap;
-export declare type CallbackListener<T extends EventTypes> = (data: {
-    detail: StateEventMap[T];
-}) => void;
-declare type Listeners = {
-    [EventType in EventTypes]: CallbackListener<EventType>[];
-};
-export declare class PlayerEmitter {
-    listeners: Listeners;
-    addEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
-    removeEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
-    private dispatchEvent;
-    dispatchSeek(frame: number): void;
-    dispatchPause(): void;
-    dispatchPlay(): void;
-    dispatchEnded(): void;
-    dispatchRatechange(playbackRate: number): void;
-    dispatchError(error: Error): void;
-    dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
-    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
-    dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
-}
-export {};

package/dist/index.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerInternals = exports.Player = void 0;
-const calculate_scale_1 = require("./calculate-scale");
-const emitter_context_1 = require("./emitter-context");
-const event_emitter_1 = require("./event-emitter");
-const use_hover_state_1 = require("./use-hover-state");
-const use_playback_1 = require("./use-playback");
-const use_player_1 = require("./use-player");
-const use_element_size_1 = require("./utils/use-element-size");
-var Player_1 = require("./Player");
-Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_1.Player; } });
-exports.PlayerInternals = {
-    PlayerEventEmitterContext: emitter_context_1.PlayerEventEmitterContext,
-    PlayerEmitter: event_emitter_1.PlayerEmitter,
-    usePlayer: use_player_1.usePlayer,
-    usePlayback: use_playback_1.usePlayback,
-    useElementSize: use_element_size_1.useElementSize,
-    calculateCanvasTransformation: calculate_scale_1.calculateCanvasTransformation,
-    useHoverState: use_hover_state_1.useHoverState,
-    updateAllElementsSizes: use_element_size_1.updateAllElementsSizes,
-    calculateScale: calculate_scale_1.calculateScale,
-};

package/dist/test/index.test.js

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

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

@@ -1,130 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const remotion_1 = require("remotion");
-const index_1 = require("../index");
-const test_utils_1 = require("./test-utils");
-test('no compositionWidth should give errors', () => {
-    try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player
-        // @ts-expect-error
-        , { 
-            // @ts-expect-error
-            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/);
-    }
-});
-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/);
-    }
-});
-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/);
-    }
-    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: 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/);
-    }
-});
-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/);
-    }
-});
-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/);
-    }
-});
-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./);
-    }
-});
-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./);
-    }
-});
-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);
-});
-test('passing in <Composition /> instance should not be possible', () => {
-    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,
-                height: 400,
-                fps: 30,
-                durationInFrames: 500,
-                component: test_utils_1.HelloWorld,
-            } }));
-    }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
-});
-test('passing in <Composition /> instance should not be possible', () => {
-    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: {
-                id: 'HelloWorld',
-                width: 500,
-                height: 400,
-                fps: 30,
-                durationInFrames: 500,
-                component: test_utils_1.HelloWorld,
-            } }));
-    }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
-});
-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_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`);
-    }
-});