@mux/mux-player-react 0.1.0-canary.9-cbb4bc0 → 1.0.0-beta.0

package/dist/types-ts3.4/index.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
 import { CSSProperties } from 'react';
 import { StreamTypes } from '@mux/playback-core';
-import '@mux/mux-player';
+import { MediaError } from '@mux/mux-player';
 import MuxPlayerElement from '@mux/mux-player';
 import { Tokens } from '@mux/mux-player';
+export { MediaError };
 declare type ValueOf<T> = T[keyof T];
+interface GenericEventListener<T extends Event = CustomEvent> {
+    (evt: T): void;
+}
 export declare type MuxPlayerRefAttributes = MuxPlayerElement;
 declare type VideoApiAttributes = {
     currentTime: number;
@@ -36,7 +40,12 @@ declare type MuxMediaPropTypes = {
     startTime: number;
     children: never[];
 };
+interface MuxPlayerElementEventMap extends HTMLVideoElementEventMap {
+}
 export declare type MuxPlayerProps = {
+    className?: string;
+    hotkeys?: string;
+    nohotkeys?: boolean;
     defaultHiddenCaptions?: boolean;
     playerSoftwareVersion?: string;
     playerSoftwareName?: string;
@@ -48,25 +57,34 @@ export declare type MuxPlayerProps = {
     primaryColor?: string;
     secondaryColor?: string;
     tertiaryColor?: string;
+    playbackRates?: number[];
+    defaultShowRemainingTime?: boolean;
     thumbnailTime?: number;
+    title?: string;
     tokens?: Tokens;
-    onLoadStart?: EventListener;
-    onLoadedMetadata?: EventListener;
-    onProgress?: EventListener;
-    onDurationChange?: EventListener;
-    onVolumeChange?: EventListener;
-    onRateChange?: EventListener;
-    onResize?: EventListener;
-    onWaiting?: EventListener;
-    onPlay?: EventListener;
-    onPlaying?: EventListener;
-    onTimeUpdate?: EventListener;
-    onPause?: EventListener;
-    onSeeking?: EventListener;
-    onSeeked?: EventListener;
-    onEnded?: EventListener;
-    onError?: EventListener;
-    onPlayerReady?: EventListener;
+    onAbort?: GenericEventListener<MuxPlayerElementEventMap['abort']>;
+    onCanPlay?: GenericEventListener<MuxPlayerElementEventMap['canplay']>;
+    onCanPlayThrough?: GenericEventListener<MuxPlayerElementEventMap['canplaythrough']>;
+    onEmptied?: GenericEventListener<MuxPlayerElementEventMap['emptied']>;
+    onLoadStart?: GenericEventListener<MuxPlayerElementEventMap['loadstart']>;
+    onLoadedData?: GenericEventListener<MuxPlayerElementEventMap['loadeddata']>;
+    onLoadedMetadata?: GenericEventListener<MuxPlayerElementEventMap['loadedmetadata']>;
+    onProgress?: GenericEventListener<MuxPlayerElementEventMap['progress']>;
+    onDurationChange?: GenericEventListener<MuxPlayerElementEventMap['durationchange']>;
+    onVolumeChange?: GenericEventListener<MuxPlayerElementEventMap['volumechange']>;
+    onRateChange?: GenericEventListener<MuxPlayerElementEventMap['ratechange']>;
+    onResize?: GenericEventListener<MuxPlayerElementEventMap['resize']>;
+    onWaiting?: GenericEventListener<MuxPlayerElementEventMap['waiting']>;
+    onPlay?: GenericEventListener<MuxPlayerElementEventMap['play']>;
+    onPlaying?: GenericEventListener<MuxPlayerElementEventMap['playing']>;
+    onTimeUpdate?: GenericEventListener<MuxPlayerElementEventMap['timeupdate']>;
+    onPause?: GenericEventListener<MuxPlayerElementEventMap['pause']>;
+    onSeeking?: GenericEventListener<MuxPlayerElementEventMap['seeking']>;
+    onSeeked?: GenericEventListener<MuxPlayerElementEventMap['seeked']>;
+    onStalled?: GenericEventListener<MuxPlayerElementEventMap['stalled']>;
+    onSuspend?: GenericEventListener<MuxPlayerElementEventMap['suspend']>;
+    onEnded?: GenericEventListener<MuxPlayerElementEventMap['ended']>;
+    onError?: GenericEventListener<MuxPlayerElementEventMap['error']>;
 } & Partial<MuxMediaPropTypes> & Partial<VideoApiAttributes>;
 declare const MuxPlayer: React.ForwardRefExoticComponent<Pick<MuxPlayerProps, Exclude<keyof MuxPlayerProps, "playerSoftwareVersion" | "playerSoftwareName">> & React.RefAttributes<MuxPlayerElement>>;
 export default MuxPlayer;

package/dist/types-ts3.4/useCombinedRefs.d.ts

@@ -7,4 +7,5 @@ interface useCombinedRefs {
     <T>(...refs: Maybe<RefTypes<T>>[]): RefObj<T>;
 }
 export declare const useCombinedRefs: useCombinedRefs;
-export default useCombinedRefs;
+declare const defaultUseCombinedRefs: useCombinedRefs;
+export default defaultUseCombinedRefs;

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@mux/mux-player-react",
-  "version": "0.1.0-canary.9-cbb4bc0",
+  "version": "1.0.0-beta.0",
   "description": "An open source Mux player for React that Just Works™",
-  "main": "dist/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.cjs.js",
+    "default": "./dist/index.cjs.js"
+  },
   "types": "dist/types-ts3.4/index.d.ts",
   "typesVersions": {
     ">=4.3.5": {
@@ -20,14 +26,16 @@
   "license": "MIT",
   "scripts": {
     "clean": "shx rm -rf dist/",
-    "dev:cjs": "open-process | yarn build:cjs --watch",
+    "dev:cjs": "yarn build:cjs --watch=forever",
+    "dev:esm": "yarn build:esm --watch=forever",
     "dev:types": "yarn build:types -w",
-    "dev": "npm-run-all --parallel dev:types dev:cjs",
-    "build:cjs": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types' && downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel build:types 'build:cjs -- --minify'",
+    "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm",
+    "build:cjs": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types'",
+    "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
+    "build": "npm-run-all --parallel build:types 'build:cjs -- --minify' 'build:esm -- --minify'",
     "prebuild": "yarn clean",
-    "prepublishOnly": "yarn build",
     "create-release-notes": "create-release-notes ./CHANGELOG.md",
     "publish-release": "../../scripts/publish.sh"
   },
@@ -45,20 +53,20 @@
     }
   },
   "dependencies": {
-    "@mux/mux-player": "0.1.0-beta.21",
-    "@mux/playback-core": "0.8.0",
+    "@mux/mux-player": "1.0.0-beta.0",
+    "@mux/playback-core": "0.11.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@mux/open-process": "0.1.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "downlevel-dts": "^0.9.0",
-    "esbuild": "^0.13.13",
+    "esbuild": "^0.15.7",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "shx": "^0.3.4",
     "typescript": "^4.5.2"
-  }
+  },
+  "gitHead": "807de779d0c22eec622957f02362d122e1dcd686"
 }

package/CHANGELOG.md

@@ -1,131 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# 0.1.0-beta.21 (2022-07-05)
-
-### Bug Fixes
-
-- enable cast docs + cast fix ([#253](https://github.com/muxinc/elements/issues/253)) ([421d515](https://github.com/muxinc/elements/commit/421d515cc4700cf9d7ca4f0d09aa600ec4adac7b))
-- **mux-player-react:** Missing preload prop type def. ([19b2e15](https://github.com/muxinc/elements/commit/19b2e15dc844e6fb0f90e9ad62a436587260094a))
-- prettier format all elements files ([741d607](https://github.com/muxinc/elements/commit/741d607521ca9578cfad9f0a9216a6565b4c56a1))
-- switch cjs extension to .cjs.js ([30e83c3](https://github.com/muxinc/elements/commit/30e83c3ce0bd9bfda4817c30ffe0921e425619e4))
-- update react peerDependencies to allow ^18 ([1cfb019](https://github.com/muxinc/elements/commit/1cfb019b71cf9aa280abccaf4a7818d585b56d86))
-
-### Features
-
-- add beaconCollectionDomain option to replace beaconDomain ([a44b699](https://github.com/muxinc/elements/commit/a44b699ae3138590b9d953f693f95971694658df))
-- default-hidden-captions to turn off showing captions by default ([#98](https://github.com/muxinc/elements/issues/98)) ([9edc3cd](https://github.com/muxinc/elements/commit/9edc3cd008e47234472b14784ea89493736599cb))
-- Extended autoplay options ([#116](https://github.com/muxinc/elements/issues/116)) ([475e838](https://github.com/muxinc/elements/commit/475e83884f641c578fa601c9501147d485fc1831))
-- **mux-player-react:** Add audio only. Cleanup StreamTypes source of truth. ([4f37d7f](https://github.com/muxinc/elements/commit/4f37d7f10ef66eef48af0dd9cf1efc79322b660d))
-- **mux-player-react:** Add basic support for custom video domains. ([ac61aff](https://github.com/muxinc/elements/commit/ac61affffdd38ef0df3151d2f75023f7d2772688))
-- **mux-player-react:** Add thumbnail-time support to mux-player-react. Document prop. ([d1c1a4c](https://github.com/muxinc/elements/commit/d1c1a4c65b200c59bab7cc68453c0e307eb75ae4))
-
-### Reverts
-
-- Revert "Publish" ([42fc528](https://github.com/muxinc/elements/commit/42fc528216346ff52d967cec5392a1191f74a1c0))
-
-# [0.1.0-beta.20](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.19...@mux-elements/mux-player-react@0.1.0-beta.20) (2022-06-23)
-
-### Bug Fixes
-
-- enable cast docs + cast fix ([#253](https://github.com/muxinc/elements/issues/253)) ([421d515](https://github.com/muxinc/elements/commit/421d515cc4700cf9d7ca4f0d09aa600ec4adac7b))
-
-### Features
-
-- **mux-player-react:** Add basic support for custom video domains. ([ac61aff](https://github.com/muxinc/elements/commit/ac61affffdd38ef0df3151d2f75023f7d2772688))
-
-# [0.1.0-beta.19](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.18...@mux-elements/mux-player-react@0.1.0-beta.19) (2022-06-07)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.18](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.17...@mux-elements/mux-player-react@0.1.0-beta.18) (2022-06-06)
-
-### Features
-
-- **mux-player-react:** Add audio only. Cleanup StreamTypes source of truth. ([4f37d7f](https://github.com/muxinc/elements/commit/4f37d7f10ef66eef48af0dd9cf1efc79322b660d))
-
-# [0.1.0-beta.17](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.16...@mux-elements/mux-player-react@0.1.0-beta.17) (2022-05-26)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.16](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.15...@mux-elements/mux-player-react@0.1.0-beta.16) (2022-05-23)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.15](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.14...@mux-elements/mux-player-react@0.1.0-beta.15) (2022-05-23)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.14](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.13...@mux-elements/mux-player-react@0.1.0-beta.14) (2022-05-20)
-
-### Bug Fixes
-
-- switch cjs extension to .cjs.js ([30e83c3](https://github.com/muxinc/elements/commit/30e83c3ce0bd9bfda4817c30ffe0921e425619e4))
-
-# [0.1.0-beta.13](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.12...@mux-elements/mux-player-react@0.1.0-beta.13) (2022-05-19)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.12](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.11...@mux-elements/mux-player-react@0.1.0-beta.12) (2022-05-12)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.11](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.10...@mux-elements/mux-player-react@0.1.0-beta.11) (2022-05-11)
-
-### Bug Fixes
-
-- **mux-player-react:** Missing preload prop type def. ([19b2e15](https://github.com/muxinc/elements/commit/19b2e15dc844e6fb0f90e9ad62a436587260094a))
-
-### Features
-
-- **mux-player-react:** Add thumbnail-time support to mux-player-react. Document prop. ([d1c1a4c](https://github.com/muxinc/elements/commit/d1c1a4c65b200c59bab7cc68453c0e307eb75ae4))
-
-# [0.1.0-beta.10](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.9...@mux-elements/mux-player-react@0.1.0-beta.10) (2022-05-10)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.9](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.8...@mux-elements/mux-player-react@0.1.0-beta.9) (2022-05-03)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.8](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.7...@mux-elements/mux-player-react@0.1.0-beta.8) (2022-04-22)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.7](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.6...@mux-elements/mux-player-react@0.1.0-beta.7) (2022-04-18)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.6](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.5...@mux-elements/mux-player-react@0.1.0-beta.6) (2022-04-13)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.5](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.4...@mux-elements/mux-player-react@0.1.0-beta.5) (2022-04-12)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.4](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.3...@mux-elements/mux-player-react@0.1.0-beta.4) (2022-04-08)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.3](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.2...@mux-elements/mux-player-react@0.1.0-beta.3) (2022-04-01)
-
-**Note:** Version bump only for package @mux-elements/mux-player-react
-
-# [0.1.0-beta.2](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.1...@mux-elements/mux-player-react@0.1.0-beta.2) (2022-04-01)
-
-### Reverts
-
-- Revert "Publish" ([42fc528](https://github.com/muxinc/elements/commit/42fc528216346ff52d967cec5392a1191f74a1c0))
-
-# [0.1.0-beta.1](https://github.com/muxinc/elements/compare/@mux-elements/mux-player-react@0.1.0-beta.0...@mux-elements/mux-player-react@0.1.0-beta.1) (2022-03-28)
-
-### Bug Fixes
-
-- prettier format all elements files ([741d607](https://github.com/muxinc/elements/commit/741d607521ca9578cfad9f0a9216a6565b4c56a1))
-
-### Features
-
-- add beaconCollectionDomain option to replace beaconDomain ([a44b699](https://github.com/muxinc/elements/commit/a44b699ae3138590b9d953f693f95971694658df))

package/dist/index.js

@@ -1,2 +0,0 @@
-var H=Object.create;var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var g=e=>c(e,"__esModule",{value:!0});var q=(e,t)=>{g(e);for(var n in t)c(e,n,{get:t[n],enumerable:!0})},J=(e,t,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of W(t))!_.call(e,r)&&r!=="default"&&c(e,r,{get:()=>t[r],enumerable:!(n=z(t,r))||n.enumerable});return e},l=e=>J(g(c(e!=null?H(Z(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);q(exports,{default:()=>ye});var i=l(require("react")),ge=l(require("@mux/mux-player"));var b={className:"class",classname:"class",htmlFor:"for",crossOrigin:"crossorigin",viewBox:"viewBox",playsInline:"playsinline",autoPlay:"autoplay"},Y=e=>e==null,$=(e,t)=>Y(t)?!1:e in t,G=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),Q=(e,t)=>{if(!(typeof t=="boolean"&&!t)){if($(e,b))return b[e];if(typeof t!=null)return/[A-Z]/.test(e)?G(e):e}};var X=(e,t)=>typeof e=="boolean"?"":e,P=(e={})=>Object.entries(e).reduce((t,[n,r])=>{let a=Q(n,r);if(!a)return t;let s=X(r,n);return t[a]=s,t},{});var E=l(require("react"));var f=l(require("react")),T=(...e)=>{let t=(0,f.useRef)(null);return(0,f.useEffect)(()=>{e.forEach(n=>{!n||(typeof n=="function"?n(t.current):n.current=t.current)})},[e]),t};var x=l(require("react")),B=Object.prototype.hasOwnProperty,ee=(e,t)=>{if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(Array.isArray(e))return!Array.isArray(t)||e.length!==t.length?!1:e.some((a,s)=>t[s]===a);let n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(let a=0;a<n.length;a++)if(!B.call(t,n[a])||!Object.is(e[n[a]],t[n[a]]))return!1;return!0},m=(e,t,n)=>!ee(t,e[n]),te=(e,t,n)=>{e[n]=t},ne=(e,t,n,r=te,a=m)=>(0,x.useEffect)(()=>{let s=n==null?void 0:n.current;!s||!a(s,t,e)||r(s,t,e)},[n==null?void 0:n.current,t]),y=ne;var re=()=>{try{return"0.1.0-canary.9-cbb4bc0"}catch{}return"UNKNOWN"},ae=re(),R=()=>ae;var oe=i.default.forwardRef(({children:e,...t},n)=>i.default.createElement("mux-player",P({...t,ref:n}),e)),o=(e,t,n)=>(0,i.useEffect)(()=>{let r=t==null?void 0:t.current;if(!(!r||!n))return r.addEventListener(e,n),()=>{r.removeEventListener(e,n)}},[t==null?void 0:t.current,n]),se=(e,t)=>{let{onLoadStart:n,onLoadedMetadata:r,onProgress:a,onDurationChange:s,onVolumeChange:p,onRateChange:v,onResize:k,onWaiting:O,onPlay:M,onPlaying:w,onTimeUpdate:S,onPause:h,onSeeking:L,onSeeked:C,onEnded:V,onError:A,onPlayerReady:N,metadata:I,tokens:K,paused:j,playbackId:D,...U}=t;return y("metadata",I,e),y("tokens",K,e),y("playbackId",D,e),y("paused",j,e,(u,d)=>{d!=null&&(d?u.pause():u.play())},(u,d,F)=>u.hasAttribute("autoplay")&&!u.hasPlayed?!1:m(u,d,F)),o("loadstart",e,n),o("loadedmetadata",e,r),o("progress",e,a),o("durationchange",e,s),o("volumechange",e,p),o("ratechange",e,v),o("resize",e,k),o("waiting",e,O),o("play",e,M),o("playing",e,w),o("timeupdate",e,S),o("pause",e,h),o("seeking",e,L),o("seeked",e,C),o("ended",e,V),o("error",e,A),o("playerready",e,N),[U]},ie=R(),ue="mux-player-react",le=i.default.forwardRef((e,t)=>{let{forwardSeekOffset:n=10,backwardSeekOffset:r=10}=e,a=(0,E.useRef)(null),s=T(a,t),[p]=se(a,e);return i.default.createElement(oe,{ref:s,playerSoftwareName:ue,playerSoftwareVersion:ie,forwardSeekOffset:n,backwardSeekOffset:r,...p})}),ye=le;
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/index.tsx", "../src/common/utils.ts", "../src/useCombinedRefs.ts", "../src/useObjectPropEffect.ts", "../src/env.ts"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { StreamTypes } from '@mux/playback-core';\nimport '@mux/mux-player';\nimport type MuxPlayerElement from '@mux/mux-player';\nimport type { Tokens } from '@mux/mux-player';\nimport { toNativeProps } from './common/utils';\nimport { useRef } from 'react';\nimport { useCombinedRefs } from './useCombinedRefs';\nimport useObjectPropEffect, { defaultHasChanged } from './useObjectPropEffect';\nimport { getPlayerVersion } from './env';\n\ntype ValueOf<T> = T[keyof T];\n\nexport type MuxPlayerRefAttributes = MuxPlayerElement;\ntype VideoApiAttributes = {\n  currentTime: number;\n  volume: number;\n  paused: boolean;\n  src: string | null;\n  poster: string;\n  playbackRate: number;\n  playsInline: boolean;\n  preload: string;\n  crossOrigin: string;\n  autoPlay: boolean | string;\n  loop: boolean;\n  muted: boolean;\n  style: CSSProperties;\n};\n\ntype MuxMediaPropTypes = {\n  audio: boolean;\n  // envKey: Options[\"data\"][\"env_key\"];\n  envKey: string;\n  // debug: Options[\"debug\"] & Hls[\"config\"][\"debug\"];\n  debug: boolean;\n  // metadata: Partial<Options[\"data\"]>;\n  metadata: { [k: string]: any };\n  beaconCollectionDomain: string;\n  customDomain: string;\n  playbackId: string;\n  preferMse: boolean;\n  streamType: ValueOf<StreamTypes> | 'vod';\n  startTime: number;\n  children: never[];\n};\n\nexport type MuxPlayerProps = {\n  defaultHiddenCaptions?: boolean;\n  playerSoftwareVersion?: string;\n  playerSoftwareName?: string;\n  forwardSeekOffset?: number;\n  backwardSeekOffset?: number;\n  metadataVideoId?: string;\n  metadataVideoTitle?: string;\n  metadataViewerUserId?: string;\n  primaryColor?: string;\n  secondaryColor?: string;\n  tertiaryColor?: string;\n  thumbnailTime?: number;\n  tokens?: Tokens;\n  onLoadStart?: EventListener;\n  onLoadedMetadata?: EventListener;\n  onProgress?: EventListener;\n  onDurationChange?: EventListener;\n  onVolumeChange?: EventListener;\n  onRateChange?: EventListener;\n  onResize?: EventListener;\n  onWaiting?: EventListener;\n  onPlay?: EventListener;\n  onPlaying?: EventListener;\n  onTimeUpdate?: EventListener;\n  onPause?: EventListener;\n  onSeeking?: EventListener;\n  onSeeked?: EventListener;\n  onEnded?: EventListener;\n  onError?: EventListener;\n  onPlayerReady?: EventListener;\n} & Partial<MuxMediaPropTypes> &\n  Partial<VideoApiAttributes>;\n\nconst MuxPlayerInternal = React.forwardRef<MuxPlayerRefAttributes, MuxPlayerProps>(({ children, ...props }, ref) => {\n  return React.createElement('mux-player', toNativeProps({ ...props, ref }), children);\n});\n\nconst useEventCallbackEffect = (\n  type: string,\n  ref: // | ((instance: EventTarget | null) => void)\n  React.MutableRefObject<EventTarget | null> | null | undefined,\n  callback: EventListener | undefined\n) => {\n  return useEffect(() => {\n    const eventTarget = ref?.current;\n    if (!eventTarget || !callback) return;\n    eventTarget.addEventListener(type, callback);\n    return () => {\n      eventTarget.removeEventListener(type, callback);\n    };\n  }, [ref?.current, callback]);\n};\n\nconst usePlayer = (\n  ref: // | ((instance: EventTarget | null) => void)\n  React.MutableRefObject<MuxPlayerElement | null> | null | undefined,\n  props: MuxPlayerProps\n) => {\n  const {\n    onLoadStart,\n    onLoadedMetadata,\n    onProgress,\n    onDurationChange,\n    onVolumeChange,\n    onRateChange,\n    onResize,\n    onWaiting,\n    onPlay,\n    onPlaying,\n    onTimeUpdate,\n    onPause,\n    onSeeking,\n    onSeeked,\n    onEnded,\n    onError,\n    onPlayerReady,\n    metadata,\n    tokens,\n    paused,\n    playbackId,\n    ...remainingProps\n  } = props;\n  useObjectPropEffect('metadata', metadata, ref);\n  useObjectPropEffect('tokens', tokens, ref);\n  useObjectPropEffect('playbackId', playbackId, ref);\n  useObjectPropEffect(\n    'paused',\n    paused,\n    ref,\n    (playerEl: HTMLMediaElement, pausedVal?: boolean) => {\n      if (pausedVal == null) return;\n      if (pausedVal) {\n        playerEl.pause();\n      } else {\n        playerEl.play();\n      }\n    },\n    (playerEl, value, propName) => {\n      if (playerEl.hasAttribute('autoplay') && !playerEl.hasPlayed) {\n        return false;\n      }\n      return defaultHasChanged(playerEl, value, propName);\n    }\n  );\n  useEventCallbackEffect('loadstart', ref, onLoadStart);\n  useEventCallbackEffect('loadedmetadata', ref, onLoadedMetadata);\n  useEventCallbackEffect('progress', ref, onProgress);\n  useEventCallbackEffect('durationchange', ref, onDurationChange);\n  useEventCallbackEffect('volumechange', ref, onVolumeChange);\n  useEventCallbackEffect('ratechange', ref, onRateChange);\n  useEventCallbackEffect('resize', ref, onResize);\n  useEventCallbackEffect('waiting', ref, onWaiting);\n  useEventCallbackEffect('play', ref, onPlay);\n  useEventCallbackEffect('playing', ref, onPlaying);\n  useEventCallbackEffect('timeupdate', ref, onTimeUpdate);\n  useEventCallbackEffect('pause', ref, onPause);\n  useEventCallbackEffect('seeking', ref, onSeeking);\n  useEventCallbackEffect('seeked', ref, onSeeked);\n  useEventCallbackEffect('ended', ref, onEnded);\n  useEventCallbackEffect('error', ref, onError);\n  useEventCallbackEffect('playerready', ref, onPlayerReady);\n  return [remainingProps];\n};\n\nconst playerSoftwareVersion = getPlayerVersion();\nconst playerSoftwareName = 'mux-player-react';\n\nconst MuxPlayer = React.forwardRef<\n  MuxPlayerRefAttributes,\n  Omit<MuxPlayerProps, 'playerSoftwareVersion' | 'playerSoftwareName'>\n>((props, ref) => {\n  const {\n    /** @TODO Remove these once defaults are added to mux-player (CJP) */\n    forwardSeekOffset = 10,\n    backwardSeekOffset = 10,\n  } = props;\n\n  const innerPlayerRef = useRef<MuxPlayerElement>(null);\n  const playerRef = useCombinedRefs(innerPlayerRef, ref);\n  const [remainingProps] = usePlayer(innerPlayerRef, props);\n\n  return (\n    <MuxPlayerInternal\n      /** @TODO Fix types relationships (CJP) */\n      ref={playerRef as typeof innerPlayerRef}\n      playerSoftwareName={playerSoftwareName}\n      playerSoftwareVersion={playerSoftwareVersion}\n      forwardSeekOffset={forwardSeekOffset}\n      backwardSeekOffset={backwardSeekOffset}\n      {...remainingProps}\n    />\n  );\n});\n\nexport default MuxPlayer;\n", "// NOTE: As a forward-looking implementation, we may want to assume\n// prop names -> attribute names is always a simple name.toLowerCase()\n// and provide a mechanism for passing in per-component overrides for\n// e.g. kebab cases, as that's the way React/Preact handles these. (CJP)\nconst ReactPropToAttrNameMap = {\n  className: 'class',\n  classname: 'class',\n  htmlFor: 'for',\n  crossOrigin: 'crossorigin',\n  viewBox: 'viewBox',\n  playsInline: 'playsinline',\n  autoPlay: 'autoplay',\n};\n\ntype KeyTypes = string | number | symbol;\n\nexport const isNil = (x: unknown): x is null | undefined => x == undefined;\n\n// Type Guard to determine if a given key is actually a key of some object of type T\nexport const isKeyOf = <T = unknown>(k: KeyTypes, o: T): k is keyof T => {\n  if (isNil(o)) return false;\n  return k in o;\n};\n\nconst toKebabCase = (string: string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);\n\nexport const toNativeAttrName = (propName: string, propValue: any): string | undefined => {\n  if (typeof propValue === 'boolean' && !propValue) return undefined;\n  if (isKeyOf(propName, ReactPropToAttrNameMap)) return ReactPropToAttrNameMap[propName];\n  if (typeof propValue == undefined) return undefined;\n  if (/[A-Z]/.test(propName)) return toKebabCase(propName);\n  return propName;\n};\nexport const toStyleAttr = <T>(x: T) => x;\n\nexport const toNativeAttrValue = (propValue: any, propName: string) => {\n  if (typeof propValue === 'boolean') return '';\n  return propValue;\n};\n\nexport const toNativeProps = (props = {}) => {\n  return Object.entries(props).reduce<{ [k: string]: string }>((transformedProps, [propName, propValue]) => {\n    const attrName = toNativeAttrName(propName, propValue);\n\n    // prop was stripped. Don't add.\n    if (!attrName) {\n      return transformedProps;\n    }\n\n    const attrValue = toNativeAttrValue(propValue, propName);\n    transformedProps[attrName] = attrValue;\n    return transformedProps;\n  }, {});\n};\n", "import { useEffect, useRef } from 'react';\nimport type { MutableRefObject, ForwardedRef } from 'react';\n\ntype Maybe<T> = T | null | undefined;\ntype RefCb<T> = (instance: Maybe<T>) => void;\ntype RefObj<T> = MutableRefObject<Maybe<T>>;\ntype RefTypes<T> = RefObj<T> | RefCb<T> | ForwardedRef<T>;\ninterface useCombinedRefs {\n  <T>(...refs: Maybe<RefTypes<T>>[]): RefObj<T>;\n}\n\nexport const useCombinedRefs: useCombinedRefs = (...refs) => {\n  const targetRef = useRef(null);\n\n  useEffect(() => {\n    refs.forEach((ref) => {\n      if (!ref) return;\n\n      if (typeof ref === 'function') {\n        ref(targetRef.current);\n      } else {\n        ref.current = targetRef.current;\n      }\n    });\n  }, [refs]);\n\n  return targetRef;\n};\n\nexport default useCombinedRefs;\n", "import { useEffect } from 'react';\n\nconst hasOwnProperty = Object.prototype.hasOwnProperty;\n\n/**\n * Slightly modified version of React's shallowEqual, with optimizations for Arrays\n * so we may treat them specifically as unequal if they are not a) both arrays\n * or b) don't contain the same (shallowly compared) elements.\n */\nconst shallowEqual = (objA: any, objB: any): boolean => {\n  if (Object.is(objA, objB)) {\n    return true;\n  }\n\n  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {\n    return false;\n  }\n\n  if (Array.isArray(objA)) {\n    // Early \"cheap\" array compares\n    if (!Array.isArray(objB) || objA.length !== objB.length) return false;\n    // Shallow compare for arrays\n    return objA.some((vVal, i) => objB[i] === vVal);\n  }\n\n  const keysA = Object.keys(objA);\n  const keysB = Object.keys(objB);\n\n  if (keysA.length !== keysB.length) {\n    return false;\n  }\n\n  // Test for A's keys different from B.\n  for (let i = 0; i < keysA.length; i++) {\n    if (!hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {\n      return false;\n    }\n  }\n\n  return true;\n};\n\nexport const defaultHasChanged = (obj: any, v: any, k: string) => {\n  return !shallowEqual(v, obj[k]);\n};\n\nconst defaultUpdateValue = (obj: any, v: any, k: string) => {\n  obj[k] = v;\n};\n\nexport const useObjectPropEffect = <T extends { [k: string]: any }, V>(\n  propName: string,\n  propValue: V | null | undefined,\n  ref: React.MutableRefObject<T | null> | null | undefined,\n  updateValue = defaultUpdateValue,\n  hasChanged = defaultHasChanged\n) => {\n  return useEffect(() => {\n    const obj = ref?.current;\n    if (!obj) return;\n    if (!hasChanged(obj, propValue, propName)) return;\n    updateValue(obj, propValue, propName);\n  }, [ref?.current, propValue]);\n};\n\nexport default useObjectPropEffect;\n", "const getEnvPlayerVersion = () => {\n  try {\n    // @ts-ignore\n    return PLAYER_VERSION as string;\n  } catch {}\n  return 'UNKNOWN';\n};\n\nconst player_version: string = getEnvPlayerVersion();\n\nexport const getPlayerVersion = () => player_version;\n"],
-  "mappings": "mlBAAA,kCAAiC,oBAGjC,GAAO,8BCCP,GAAM,GAAyB,CAC7B,UAAW,QACX,UAAW,QACX,QAAS,MACT,YAAa,cACb,QAAS,UACT,YAAa,cACb,SAAU,YAKC,EAAQ,AAAC,GAAsC,GAAK,KAGpD,EAAU,CAAc,EAAa,IAC5C,EAAM,GAAW,GACd,IAAK,GAGR,EAAc,AAAC,GAAmB,EAAO,QAAQ,SAAU,AAAC,GAAU,IAAI,EAAM,iBAEzE,EAAmB,CAAC,EAAkB,IAAuC,CACxF,GAAI,QAAO,IAAc,WAAa,CAAC,GACvC,IAAI,EAAQ,EAAU,GAAyB,MAAO,GAAuB,GAC7E,GAAI,MAAO,IAAa,KACxB,MAAI,QAAQ,KAAK,GAAkB,EAAY,GACxC,IAIF,GAAM,GAAoB,CAAC,EAAgB,IAC5C,MAAO,IAAc,UAAkB,GACpC,EAGI,EAAgB,CAAC,EAAQ,KAC7B,OAAO,QAAQ,GAAO,OAAgC,CAAC,EAAkB,CAAC,EAAU,KAAe,CACxG,GAAM,GAAW,EAAiB,EAAU,GAG5C,GAAI,CAAC,EACH,MAAO,GAGT,GAAM,GAAY,EAAkB,EAAW,GAC/C,SAAiB,GAAY,EACtB,GACN,ID7CL,MAAuB,oBEPvB,MAAkC,oBAWrB,EAAmC,IAAI,IAAS,CAC3D,GAAM,GAAY,aAAO,MAEzB,sBAAU,IAAM,CACd,EAAK,QAAQ,AAAC,GAAQ,CACpB,AAAI,CAAC,GAEL,CAAI,MAAO,IAAQ,WACjB,EAAI,EAAU,SAEd,EAAI,QAAU,EAAU,YAG3B,CAAC,IAEG,GC1BT,MAA0B,oBAEpB,EAAiB,OAAO,UAAU,eAOlC,GAAe,CAAC,EAAW,IAAuB,CACtD,GAAI,OAAO,GAAG,EAAM,GAClB,MAAO,GAGT,GAAI,MAAO,IAAS,UAAY,IAAS,MAAQ,MAAO,IAAS,UAAY,IAAS,KACpF,MAAO,GAGT,GAAI,MAAM,QAAQ,GAEhB,MAAI,CAAC,MAAM,QAAQ,IAAS,EAAK,SAAW,EAAK,OAAe,GAEzD,EAAK,KAAK,CAAC,EAAM,IAAM,EAAK,KAAO,GAG5C,GAAM,GAAQ,OAAO,KAAK,GACpB,EAAQ,OAAO,KAAK,GAE1B,GAAI,EAAM,SAAW,EAAM,OACzB,MAAO,GAIT,OAAS,GAAI,EAAG,EAAI,EAAM,OAAQ,IAChC,GAAI,CAAC,EAAe,KAAK,EAAM,EAAM,KAAO,CAAC,OAAO,GAAG,EAAK,EAAM,IAAK,EAAK,EAAM,KAChF,MAAO,GAIX,MAAO,IAGI,EAAoB,CAAC,EAAU,EAAQ,IAC3C,CAAC,GAAa,EAAG,EAAI,IAGxB,GAAqB,CAAC,EAAU,EAAQ,IAAc,CAC1D,EAAI,GAAK,GAGE,GAAsB,CACjC,EACA,EACA,EACA,EAAc,GACd,EAAa,IAEN,gBAAU,IAAM,CACrB,GAAM,GAAM,iBAAK,QACjB,AAAI,CAAC,GACD,CAAC,EAAW,EAAK,EAAW,IAChC,EAAY,EAAK,EAAW,IAC3B,CAAC,iBAAK,QAAS,IAGb,EAAQ,GCjEf,GAAM,IAAsB,IAAM,CAChC,GAAI,CAEF,MAAO,8BACP,EACF,MAAO,WAGH,GAAyB,KAElB,EAAmB,IAAM,GJwEtC,GAAM,IAAoB,UAAM,WAAmD,CAAC,CAAE,cAAa,GAAS,IACnG,UAAM,cAAc,aAAc,EAAc,IAAK,EAAO,QAAQ,IAGvE,EAAyB,CAC7B,EACA,EAEA,IAEO,gBAAU,IAAM,CACrB,GAAM,GAAc,iBAAK,QACzB,GAAI,GAAC,GAAe,CAAC,GACrB,SAAY,iBAAiB,EAAM,GAC5B,IAAM,CACX,EAAY,oBAAoB,EAAM,KAEvC,CAAC,iBAAK,QAAS,IAGd,GAAY,CAChB,EAEA,IACG,CACH,GAAM,CACJ,cACA,mBACA,aACA,mBACA,iBACA,eACA,WACA,YACA,SACA,YACA,eACA,UACA,YACA,WACA,UACA,UACA,gBACA,WACA,SACA,SACA,gBACG,GACD,EACJ,SAAoB,WAAY,EAAU,GAC1C,EAAoB,SAAU,EAAQ,GACtC,EAAoB,aAAc,EAAY,GAC9C,EACE,SACA,EACA,EACA,CAAC,EAA4B,IAAwB,CACnD,AAAI,GAAa,MACjB,CAAI,EACF,EAAS,QAET,EAAS,SAGb,CAAC,EAAU,EAAO,IACZ,EAAS,aAAa,aAAe,CAAC,EAAS,UAC1C,GAEF,EAAkB,EAAU,EAAO,IAG9C,EAAuB,YAAa,EAAK,GACzC,EAAuB,iBAAkB,EAAK,GAC9C,EAAuB,WAAY,EAAK,GACxC,EAAuB,iBAAkB,EAAK,GAC9C,EAAuB,eAAgB,EAAK,GAC5C,EAAuB,aAAc,EAAK,GAC1C,EAAuB,SAAU,EAAK,GACtC,EAAuB,UAAW,EAAK,GACvC,EAAuB,OAAQ,EAAK,GACpC,EAAuB,UAAW,EAAK,GACvC,EAAuB,aAAc,EAAK,GAC1C,EAAuB,QAAS,EAAK,GACrC,EAAuB,UAAW,EAAK,GACvC,EAAuB,SAAU,EAAK,GACtC,EAAuB,QAAS,EAAK,GACrC,EAAuB,QAAS,EAAK,GACrC,EAAuB,cAAe,EAAK,GACpC,CAAC,IAGJ,GAAwB,IACxB,GAAqB,mBAErB,GAAY,UAAM,WAGtB,CAAC,EAAO,IAAQ,CAChB,GAAM,CAEJ,oBAAoB,GACpB,qBAAqB,IACnB,EAEE,EAAiB,aAAyB,MAC1C,EAAY,EAAgB,EAAgB,GAC5C,CAAC,GAAkB,GAAU,EAAgB,GAEnD,MACE,yBAAC,GAAD,CAEE,IAAK,EACL,mBAAoB,GACpB,sBAAuB,GACvB,kBAAmB,EACnB,mBAAoB,KAChB,MAKH,GAAQ",
-  "names": []
-}

package/src/common/utils.ts

@@ -1,54 +0,0 @@
-// NOTE: As a forward-looking implementation, we may want to assume
-// prop names -> attribute names is always a simple name.toLowerCase()
-// and provide a mechanism for passing in per-component overrides for
-// e.g. kebab cases, as that's the way React/Preact handles these. (CJP)
-const ReactPropToAttrNameMap = {
-  className: 'class',
-  classname: 'class',
-  htmlFor: 'for',
-  crossOrigin: 'crossorigin',
-  viewBox: 'viewBox',
-  playsInline: 'playsinline',
-  autoPlay: 'autoplay',
-};
-
-type KeyTypes = string | number | symbol;
-
-export const isNil = (x: unknown): x is null | undefined => x == undefined;
-
-// Type Guard to determine if a given key is actually a key of some object of type T
-export const isKeyOf = <T = unknown>(k: KeyTypes, o: T): k is keyof T => {
-  if (isNil(o)) return false;
-  return k in o;
-};
-
-const toKebabCase = (string: string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-
-export const toNativeAttrName = (propName: string, propValue: any): string | undefined => {
-  if (typeof propValue === 'boolean' && !propValue) return undefined;
-  if (isKeyOf(propName, ReactPropToAttrNameMap)) return ReactPropToAttrNameMap[propName];
-  if (typeof propValue == undefined) return undefined;
-  if (/[A-Z]/.test(propName)) return toKebabCase(propName);
-  return propName;
-};
-export const toStyleAttr = <T>(x: T) => x;
-
-export const toNativeAttrValue = (propValue: any, propName: string) => {
-  if (typeof propValue === 'boolean') return '';
-  return propValue;
-};
-
-export const toNativeProps = (props = {}) => {
-  return Object.entries(props).reduce<{ [k: string]: string }>((transformedProps, [propName, propValue]) => {
-    const attrName = toNativeAttrName(propName, propValue);
-
-    // prop was stripped. Don't add.
-    if (!attrName) {
-      return transformedProps;
-    }
-
-    const attrValue = toNativeAttrValue(propValue, propName);
-    transformedProps[attrName] = attrValue;
-    return transformedProps;
-  }, {});
-};

package/src/env.ts

@@ -1,11 +0,0 @@
-const getEnvPlayerVersion = () => {
-  try {
-    // @ts-ignore
-    return PLAYER_VERSION as string;
-  } catch {}
-  return 'UNKNOWN';
-};
-
-const player_version: string = getEnvPlayerVersion();
-
-export const getPlayerVersion = () => player_version;

package/src/index.tsx

@@ -1,204 +0,0 @@
-import React, { useEffect } from 'react';
-import type { CSSProperties } from 'react';
-import type { StreamTypes } from '@mux/playback-core';
-import '@mux/mux-player';
-import type MuxPlayerElement from '@mux/mux-player';
-import type { Tokens } from '@mux/mux-player';
-import { toNativeProps } from './common/utils';
-import { useRef } from 'react';
-import { useCombinedRefs } from './useCombinedRefs';
-import useObjectPropEffect, { defaultHasChanged } from './useObjectPropEffect';
-import { getPlayerVersion } from './env';
-
-type ValueOf<T> = T[keyof T];
-
-export type MuxPlayerRefAttributes = MuxPlayerElement;
-type VideoApiAttributes = {
-  currentTime: number;
-  volume: number;
-  paused: boolean;
-  src: string | null;
-  poster: string;
-  playbackRate: number;
-  playsInline: boolean;
-  preload: string;
-  crossOrigin: string;
-  autoPlay: boolean | string;
-  loop: boolean;
-  muted: boolean;
-  style: CSSProperties;
-};
-
-type MuxMediaPropTypes = {
-  audio: boolean;
-  // envKey: Options["data"]["env_key"];
-  envKey: string;
-  // debug: Options["debug"] & Hls["config"]["debug"];
-  debug: boolean;
-  // metadata: Partial<Options["data"]>;
-  metadata: { [k: string]: any };
-  beaconCollectionDomain: string;
-  customDomain: string;
-  playbackId: string;
-  preferMse: boolean;
-  streamType: ValueOf<StreamTypes> | 'vod';
-  startTime: number;
-  children: never[];
-};
-
-export type MuxPlayerProps = {
-  defaultHiddenCaptions?: boolean;
-  playerSoftwareVersion?: string;
-  playerSoftwareName?: string;
-  forwardSeekOffset?: number;
-  backwardSeekOffset?: number;
-  metadataVideoId?: string;
-  metadataVideoTitle?: string;
-  metadataViewerUserId?: string;
-  primaryColor?: string;
-  secondaryColor?: string;
-  tertiaryColor?: string;
-  thumbnailTime?: number;
-  tokens?: Tokens;
-  onLoadStart?: EventListener;
-  onLoadedMetadata?: EventListener;
-  onProgress?: EventListener;
-  onDurationChange?: EventListener;
-  onVolumeChange?: EventListener;
-  onRateChange?: EventListener;
-  onResize?: EventListener;
-  onWaiting?: EventListener;
-  onPlay?: EventListener;
-  onPlaying?: EventListener;
-  onTimeUpdate?: EventListener;
-  onPause?: EventListener;
-  onSeeking?: EventListener;
-  onSeeked?: EventListener;
-  onEnded?: EventListener;
-  onError?: EventListener;
-  onPlayerReady?: EventListener;
-} & Partial<MuxMediaPropTypes> &
-  Partial<VideoApiAttributes>;
-
-const MuxPlayerInternal = React.forwardRef<MuxPlayerRefAttributes, MuxPlayerProps>(({ children, ...props }, ref) => {
-  return React.createElement('mux-player', toNativeProps({ ...props, ref }), children);
-});
-
-const useEventCallbackEffect = (
-  type: string,
-  ref: // | ((instance: EventTarget | null) => void)
-  React.MutableRefObject<EventTarget | null> | null | undefined,
-  callback: EventListener | undefined
-) => {
-  return useEffect(() => {
-    const eventTarget = ref?.current;
-    if (!eventTarget || !callback) return;
-    eventTarget.addEventListener(type, callback);
-    return () => {
-      eventTarget.removeEventListener(type, callback);
-    };
-  }, [ref?.current, callback]);
-};
-
-const usePlayer = (
-  ref: // | ((instance: EventTarget | null) => void)
-  React.MutableRefObject<MuxPlayerElement | null> | null | undefined,
-  props: MuxPlayerProps
-) => {
-  const {
-    onLoadStart,
-    onLoadedMetadata,
-    onProgress,
-    onDurationChange,
-    onVolumeChange,
-    onRateChange,
-    onResize,
-    onWaiting,
-    onPlay,
-    onPlaying,
-    onTimeUpdate,
-    onPause,
-    onSeeking,
-    onSeeked,
-    onEnded,
-    onError,
-    onPlayerReady,
-    metadata,
-    tokens,
-    paused,
-    playbackId,
-    ...remainingProps
-  } = props;
-  useObjectPropEffect('metadata', metadata, ref);
-  useObjectPropEffect('tokens', tokens, ref);
-  useObjectPropEffect('playbackId', playbackId, ref);
-  useObjectPropEffect(
-    'paused',
-    paused,
-    ref,
-    (playerEl: HTMLMediaElement, pausedVal?: boolean) => {
-      if (pausedVal == null) return;
-      if (pausedVal) {
-        playerEl.pause();
-      } else {
-        playerEl.play();
-      }
-    },
-    (playerEl, value, propName) => {
-      if (playerEl.hasAttribute('autoplay') && !playerEl.hasPlayed) {
-        return false;
-      }
-      return defaultHasChanged(playerEl, value, propName);
-    }
-  );
-  useEventCallbackEffect('loadstart', ref, onLoadStart);
-  useEventCallbackEffect('loadedmetadata', ref, onLoadedMetadata);
-  useEventCallbackEffect('progress', ref, onProgress);
-  useEventCallbackEffect('durationchange', ref, onDurationChange);
-  useEventCallbackEffect('volumechange', ref, onVolumeChange);
-  useEventCallbackEffect('ratechange', ref, onRateChange);
-  useEventCallbackEffect('resize', ref, onResize);
-  useEventCallbackEffect('waiting', ref, onWaiting);
-  useEventCallbackEffect('play', ref, onPlay);
-  useEventCallbackEffect('playing', ref, onPlaying);
-  useEventCallbackEffect('timeupdate', ref, onTimeUpdate);
-  useEventCallbackEffect('pause', ref, onPause);
-  useEventCallbackEffect('seeking', ref, onSeeking);
-  useEventCallbackEffect('seeked', ref, onSeeked);
-  useEventCallbackEffect('ended', ref, onEnded);
-  useEventCallbackEffect('error', ref, onError);
-  useEventCallbackEffect('playerready', ref, onPlayerReady);
-  return [remainingProps];
-};
-
-const playerSoftwareVersion = getPlayerVersion();
-const playerSoftwareName = 'mux-player-react';
-
-const MuxPlayer = React.forwardRef<
-  MuxPlayerRefAttributes,
-  Omit<MuxPlayerProps, 'playerSoftwareVersion' | 'playerSoftwareName'>
->((props, ref) => {
-  const {
-    /** @TODO Remove these once defaults are added to mux-player (CJP) */
-    forwardSeekOffset = 10,
-    backwardSeekOffset = 10,
-  } = props;
-
-  const innerPlayerRef = useRef<MuxPlayerElement>(null);
-  const playerRef = useCombinedRefs(innerPlayerRef, ref);
-  const [remainingProps] = usePlayer(innerPlayerRef, props);
-
-  return (
-    <MuxPlayerInternal
-      /** @TODO Fix types relationships (CJP) */
-      ref={playerRef as typeof innerPlayerRef}
-      playerSoftwareName={playerSoftwareName}
-      playerSoftwareVersion={playerSoftwareVersion}
-      forwardSeekOffset={forwardSeekOffset}
-      backwardSeekOffset={backwardSeekOffset}
-      {...remainingProps}
-    />
-  );
-});
-
-export default MuxPlayer;

package/src/useCombinedRefs.ts

@@ -1,30 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { MutableRefObject, ForwardedRef } from 'react';
-
-type Maybe<T> = T | null | undefined;
-type RefCb<T> = (instance: Maybe<T>) => void;
-type RefObj<T> = MutableRefObject<Maybe<T>>;
-type RefTypes<T> = RefObj<T> | RefCb<T> | ForwardedRef<T>;
-interface useCombinedRefs {
-  <T>(...refs: Maybe<RefTypes<T>>[]): RefObj<T>;
-}
-
-export const useCombinedRefs: useCombinedRefs = (...refs) => {
-  const targetRef = useRef(null);
-
-  useEffect(() => {
-    refs.forEach((ref) => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-
-  return targetRef;
-};
-
-export default useCombinedRefs;