@mux/mux-player-react 0.1.0-beta.25 → 0.1.0-beta.28

package/README.md

@@ -103,6 +103,100 @@ Enable the [Google Cast](https://developers.google.com/cast) button in the contr
 <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
 ```
 
+### Hiding controls
+
+By default, Mux Player will show all the controls associated with the current player size and stream type.
+
+To hide certain controls, use CSS variables like this:  
+`--play-button` will control the display of the play button. Set it to `none` to hide it completely.
+
+```css
+mux-player {
+  --play-button: none;
+}
+```
+
+CSS vars can also be passed inline
+
+```jsx
+<MuxPlayer style={{ '--play-button': 'none' }}></MuxPlayer>
+```
+
+#### Controls sections
+
+It's possible to target specific sections of the player by prefixing the CSS vars.  
+The following sections are available:
+
+- `top` the top control bar that shows on the small player size
+- `center` the center controls that show the seek forward/backward button and play button
+- `bottom` the bottom control bar
+
+```jsx
+<MuxPlayer style={{ '--center-controls': 'none', '--top-captions-button': 'none' }}></MuxPlayer>
+```
+
+#### Available CSS variables
+
+The below CSS selector shows all available CSS vars for hiding, each one can be prefixed with a section.
+
+```css
+mux-player {
+  /* Hide all controls at once */
+  --controls: none;
+
+  /* Target all sections by excluding the section prefix */
+  --play-button: none;
+  --seek-live-button: none;
+  --seek-backward-button: none;
+  --seek-forward-button: none;
+  --mute-button: none;
+  --captions-button: none;
+  --airplay-button: none;
+  --pip-button: none;
+  --fullscreen-button: none;
+  --cast-button: none;
+  --playback-rate-button: none;
+  --volume-range: none;
+  --time-range: none;
+  --time-display: none;
+  --duration-display: none;
+
+  /* Target a specific section by prefixing the CSS var with (top|center|bottom) */
+  --center-controls: none;
+  --bottom-play-button: none;
+}
+```
+
+### CSS Parts
+
+Mux Player uses a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
+to encapsulate its styles and behaviors.
+As a result, it's not possible to target its internals with the usual CSS selectors.
+Instead, some components expose **parts** that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
+, or `::part()`.
+
+```html
+<!-- Global style in HTML or added using preferred React styles convention/library -->
+<style>
+  mux-player::part(center play button) {
+    display: none;
+  }
+</style>
+```
+
+```jsx
+<MuxPlayer playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"></MuxPlayer>
+```
+
+Supported **parts**:
+`seek-live`, `layer`, `media-layer`, `poster-layer`, `vertical-layer`, `centered-layer`,
+`top`, `center`, `bottom`, `play`, `button`, `seek-backward`, `seek-forward`, `mute`,
+`captions`, `airplay`, `pip`, `cast`, `fullscreen`, `playbackrate`, `volume`, `range`, `time`, `display`
+
+CSS parts allow you to style each part individually with a selector like `::part(center play button)`
+or target multiple elements if the part is assigned to multiple elements internally, usage `::part(button)`.
+Every CSS property can be declared in the selector, this makes it a very powerfull API.
+
 ### Tokens
 
 Using JSON Web Tokens allows you to secure your media content from public playback, and Mux Video provides a way to do [set this up for your assets](https://docs.mux.com/guides/video/secure-video-playback). To apply these tokens in `<MuxPlayer/>`, you can use the `tokens` property. `<MuxPlayer/>` will automatically generate appropriate URLs for each asset for any provided tokens. The possible tokens are `playback` (for the video asset/`playback-id`), `thumbnail` (for the poster image), and `storyboard` (for the seek preview thumbnail images).
@@ -145,56 +239,40 @@ Example:
 
 ### Props
 
-| Prop                     | Type                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                      | Default       |
-| ------------------------ | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
-| `playbackId`             | `string`                                                  | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A           |
-| `envKey`                 | `string`                                                  | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset.                                                                                                              | `undefined`   |
-| `streamType`             | `"on-demand" \| "live" \| "ll-live" \| "dvr" \| "ll-dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback.                                                                                                                                                                                                                                                       | `"on-demand"` |
-| `audio`                  | `boolean`                                                 | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets.                                                                                                                                                                                                                                                                                  | `false`       |
-| `metadata`               | `object`\*                                                | An object for configuring any metadata you'd like to send to Mux Data. For more, see the [Metadata section](#metadata), below.                                                                                                                                                                                                                                                                   | N/A           |
-| `tokens`                 | `object`\*                                                | An object for configuring any tokens for your assets if you're using [Signed URLs](https://docs.mux.com/guides/video/secure-video-playback). For more, see the [Tokens section](#tokens), below.                                                                                                                                                                                                 | N/A           |
-| `debug`                  | `boolean`                                                 | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console.                                                                                                                                                                                                                                                         | `false`       |
-| `startTime`              | `number` (seconds)                                        | Specify where in the media's timeline you want playback to start.                                                                                                                                                                                                                                                                                                                                | `0`           |
-| `thumbnailTime`          | `number` (seconds)                                        | Offset for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`.                                                                                                                                                                                 | `0`           |
-| `preferMse`              | `boolean`                                                 | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`preferMse`](#preferMse)                                                                                                                                                                                                                             | `false`       |
-| `defaultHiddenCaptions`  | `boolean`                                                 | Hide captions by default instead of showing them on initial load (when available)                                                                                                                                                                                                                                                                                                                | `false`       |
-| `forwardSeekOffset`      | `number` (seconds)                                        | Offset applied to the forward seek button                                                                                                                                                                                                                                                                                                                                                        | `10`          |
-| `backwardSeekOffset`     | `number` (seconds)                                        | Offset applied to the backward seek button                                                                                                                                                                                                                                                                                                                                                       | `10`          |
-| `primaryColor`           | (Any valid CSS color style)                               | The primary color used by the player                                                                                                                                                                                                                                                                                                                                                             | N/A           |
-| `secondaryColor`         | (Any valid CSS color style)                               | The secondary color used by the player                                                                                                                                                                                                                                                                                                                                                           | N/A           |
-| `currentTime`            | `number` (seconds)                                        | Sets the current time of the media                                                                                                                                                                                                                                                                                                                                                               | N/A           |
-| `volume`                 | `number` (0-1)                                            | Sets the volume of the player from 0 to 1.                                                                                                                                                                                                                                                                                                                                                       | Varies        |
-| `muted`                  | `boolean`                                                 | Toggles the muted state of the player.                                                                                                                                                                                                                                                                                                                                                           | Varies        |
-| `paused`                 | `boolean`                                                 | Toggles the paused state of the player                                                                                                                                                                                                                                                                                                                                                           | N/A           |
-| `autoPlay`               | `boolean`                                                 | Toggles whether or not media should auto-play when initially loaded                                                                                                                                                                                                                                                                                                                              | N/A           |
-| `playbackRate`           | `number`                                                  | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down.                                                                                                                                                                                                                                                                                                     | `1`           |
-| `loop`                   | `boolean`                                                 | Automatically loop playback of your media when it finishes.                                                                                                                                                                                                                                                                                                                                      | `false`       |
-| `nohotkeys`              | `boolean`                                                 | Toggles keyboard shortcut (hot keys) support when focus in inside the player.                                                                                                                                                                                                                                                                                                                    | `false`       |
-| `playsInline`            | `boolean`                                                 | Set to assert that media should be played inline. Useful for mobile playback cases.                                                                                                                                                                                                                                                                                                              | `false`       |
-| `crossOrigin`            | `string`                                                  | Establishes various CORS policies. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin)                                                                                                                                                                                                                                                 | N/A           |
-| `poster`                 | `string` (URL)                                            | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default.                                                                                                                                                                                                                                                                                    | Derived       |
-| `beaconCollectionDomain` | `string` (Domain name)                                    | Assigns a custom domain to be used for Mux Data collection.                                                                                                                                                                                                                                                                                                                                      | N/A           |
-| `customDomain`           | `string` (Domain name)                                    | Assigns a custom domain to be used for Mux Video. Will use the standard `mux.com` domain with your playback-id for poster, video, and thumbnail URLs by default.                                                                                                                                                                                                                                 | N/A           |
+| Prop                       | Type                                                               | Description                                                                                                                                                                                                                                                                                                                                                                                      | Default       |
+| -------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
+| `playbackId`               | `string`                                                           | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A           |
+| `envKey`                   | `string`                                                           | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset.                                                                                                              | `undefined`   |
+| `streamType`               | `"on-demand" \| "live" \| "ll-live" \|"live:dvr" \| "ll-live:dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback.                                                                                                                                                                                                                                                       | `"on-demand"` |
+| `audio`                    | `boolean`                                                          | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets.                                                                                                                                                                                                                                                                                  | `false`       |
+| `metadata`                 | `object`\*                                                         | An object for configuring any metadata you'd like to send to Mux Data. For more, see the [Metadata section](#metadata), below.                                                                                                                                                                                                                                                                   | N/A           |
+| `tokens`                   | `object`\*                                                         | An object for configuring any tokens for your assets if you're using [Signed URLs](https://docs.mux.com/guides/video/secure-video-playback). For more, see the [Tokens section](#tokens), below.                                                                                                                                                                                                 | N/A           |
+| `debug`                    | `boolean`                                                          | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console.                                                                                                                                                                                                                                                         | `false`       |
+| `startTime`                | `number` (seconds)                                                 | Specify where in the media's timeline you want playback to start.                                                                                                                                                                                                                                                                                                                                | `0`           |
+| `thumbnailTime`            | `number` (seconds)                                                 | Offset for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`.                                                                                                                                                                                 | `0`           |
+| `preferMse`                | `boolean`                                                          | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`preferMse`](#preferMse)                                                                                                                                                                                                                             | `false`       |
+| `defaultHiddenCaptions`    | `boolean`                                                          | Hide captions by default instead of showing them on initial load (when available)                                                                                                                                                                                                                                                                                                                | `false`       |
+| `defaultShowRemainingTime` | `boolean`                                                          | Show remaining playback time (instead of current playback time) by default                                                                                                                                                                                                                                                                                                                       | `false`       |
+| `forwardSeekOffset`        | `number` (seconds)                                                 | Offset applied to the forward seek button                                                                                                                                                                                                                                                                                                                                                        | `10`          |
+| `backwardSeekOffset`       | `number` (seconds)                                                 | Offset applied to the backward seek button                                                                                                                                                                                                                                                                                                                                                       | `10`          |
+| `primaryColor`             | (Any valid CSS color style)                                        | The primary color used by the player                                                                                                                                                                                                                                                                                                                                                             | N/A           |
+| `secondaryColor`           | (Any valid CSS color style)                                        | The secondary color used by the player                                                                                                                                                                                                                                                                                                                                                           | N/A           |
+| `currentTime`              | `number` (seconds)                                                 | Sets the current time of the media                                                                                                                                                                                                                                                                                                                                                               | N/A           |
+| `volume`                   | `number` (0-1)                                                     | Sets the volume of the player from 0 to 1.                                                                                                                                                                                                                                                                                                                                                       | Varies        |
+| `muted`                    | `boolean`                                                          | Toggles the muted state of the player.                                                                                                                                                                                                                                                                                                                                                           | Varies        |
+| `paused`                   | `boolean`                                                          | Toggles the paused state of the player                                                                                                                                                                                                                                                                                                                                                           | N/A           |
+| `autoPlay`                 | `boolean`                                                          | Toggles whether or not media should auto-play when initially loaded                                                                                                                                                                                                                                                                                                                              | N/A           |
+| `playbackRate`             | `number`                                                           | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down.                                                                                                                                                                                                                                                                                                     | `1`           |
+| `playbackRates`            | `number[]`                                                         | The array of numbers that will be used by the playback rate button while toggling through rates.                                                                                                                                                                                                                                                                                                 | `1`           |
+| `loop`                     | `boolean`                                                          | Automatically loop playback of your media when it finishes.                                                                                                                                                                                                                                                                                                                                      | `false`       |
+| `nohotkeys`                | `boolean`                                                          | Toggles keyboard shortcut (hot keys) support when focus in inside the player.                                                                                                                                                                                                                                                                                                                    | `false`       |
+| `playsInline`              | `boolean`                                                          | Set to assert that media should be played inline. Useful for mobile playback cases.                                                                                                                                                                                                                                                                                                              | `false`       |
+| `crossOrigin`              | `string`                                                           | Establishes various CORS policies. For more details, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin)                                                                                                                                                                                                                                                 | N/A           |
+| `title`                    | `string`                                                           | Show the title for your content.                                                                                                                                                                                                                                                                                                                                                                 | `""`          |
+| `poster`                   | `string` (URL)                                                     | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default.                                                                                                                                                                                                                                                                                    | Derived       |
+| `beaconCollectionDomain`   | `string` (Domain name)                                             | Assigns a custom domain to be used for Mux Data collection.                                                                                                                                                                                                                                                                                                                                      | N/A           |
+| `customDomain`             | `string` (Domain name)                                             | Assigns a custom domain to be used for Mux Video. Will use the standard `mux.com` domain with your playback-id for poster, video, and thumbnail URLs by default.                                                                                                                                                                                                                                 | N/A           |
 
 ### Callbacks
 
-`<MuxPlayer/>` has a number of callbacks associated with events for media loading, playback, and the player itself.
-
-| Prop               | Description                                                                                                                          |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `onLoadStart`      | Invoked when the media starts loading                                                                                                |
-| `onLoadedMetadata` | Invoked when the media's metadata has loaded                                                                                         |
-| `onProgress`       | Description                                                                                                                          |
-| `onDurationChange` | Invoked when the media's duration changes, generally either because live media is coming to an end or a new playback-id has been set |
-| `onVolumeChange`   | Invoked when the player's volume changes                                                                                             |
-| `onRateChange`     | Invoked when the player's playbackRate changes                                                                                       |
-| `onResize`         | Invoked when the player resizes                                                                                                      |
-| `onWaiting`        | Invoked when playback is waiting to load more media to play (rebuffering).                                                           |
-| `onPlay`           | Invoked when playback begins                                                                                                         |
-| `onPlaying`        | Invoked when playback is ready after e.g. a pause or temporary rebuffering                                                           |
-| `onPause`          | Invoked when playback is paused                                                                                                      |
-| `onTimeUpdate`     | Invoked when the media's currentTime changes, either from playback or seeking                                                        |
-| `onSeeking`        | Invoked when an attempt to seek forward or backward in the media begins                                                              |
-| `onSeeked`         | Invoked when an attempt to seek forward or backward in the media finishes                                                            |
-| `onEnded`          | Invoked when media playback reaches the end of the media                                                                             |
-| `onError`          | Invoked when an error occurs in playback or in the player                                                                            |
+`<MuxPlayer/>` has a number of callbacks associated with events for media loading, playback, and the player itself. For example, a callback for 'loadstart` event is`onLoadStart`. See [mux-player's document](https://github.com/muxinc/elements/blob/main/packages/mux-player/README.md#events) for detail of events.

package/dist/index.cjs.js

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

package/dist/index.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "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 { MediaError } from '@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\nexport { MediaError };\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  hotkeys?: string;\n  nohotkeys?: boolean;\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  playbackRates?: number[];\n  defaultShowRemainingTime?: boolean;\n  thumbnailTime?: number;\n  title?: string;\n  tokens?: Tokens;\n  onAbort?: EventListener;\n  onCanPlay?: EventListener;\n  onCanPlayThrough?: EventListener;\n  onEmptied?: EventListener;\n  onLoadStart?: EventListener;\n  onLoadedData?: 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  onStalled?: EventListener;\n  onSuspend?: 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    onAbort,\n    onCanPlay,\n    onCanPlayThrough,\n    onEmptied,\n    onLoadStart,\n    onLoadedData,\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    onStalled,\n    onSuspend,\n    onEnded,\n    onError,\n    onPlayerReady,\n    metadata,\n    tokens,\n    paused,\n    playbackId,\n    playbackRates,\n    ...remainingProps\n  } = props;\n  useObjectPropEffect('playbackRates', playbackRates, ref);\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('abort', ref, onAbort);\n  useEventCallbackEffect('canplay', ref, onCanPlay);\n  useEventCallbackEffect('canplaythrough', ref, onCanPlayThrough);\n  useEventCallbackEffect('emptied', ref, onEmptied);\n  useEventCallbackEffect('loadstart', ref, onLoadStart);\n  useEventCallbackEffect('loadeddata', ref, onLoadedData);\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('stalled', ref, onStalled);\n  useEventCallbackEffect('suspend', ref, onSuspend);\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": "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",
+  "names": []
+}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import y,{useEffect as re}from"react";import{MediaError as Pe}from"@mux/mux-player";var p={className:"class",classname:"class",htmlFor:"for",crossOrigin:"crossorigin",viewBox:"viewBox",playsInline:"playsinline",autoPlay:"autoplay"},W=e=>e==null,Z=(e,t)=>W(t)?!1:e in t,_=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),q=(e,t)=>{if(!(typeof t=="boolean"&&!t)){if(Z(e,p))return p[e];if(typeof t!=null)return/[A-Z]/.test(e)?_(e):e}};var J=(e,t)=>typeof e=="boolean"?"":e,m=(e={})=>Object.entries(e).reduce((t,[n,o])=>{let a=q(n,o);if(!a)return t;let s=J(o,n);return t[a]=s,t},{});import{useRef as ae}from"react";import{useEffect as Y,useRef as $}from"react";var f=(...e)=>{let t=$(null);return Y(()=>{e.forEach(n=>{!n||(typeof n=="function"?n(t.current):n.current=t.current)})},[e]),t};import{useEffect as G}from"react";var Q=Object.prototype.hasOwnProperty,X=(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),o=Object.keys(t);if(n.length!==o.length)return!1;for(let a=0;a<n.length;a++)if(!Q.call(t,n[a])||!Object.is(e[n[a]],t[n[a]]))return!1;return!0},c=(e,t,n)=>!X(t,e[n]),B=(e,t,n)=>{e[n]=t},ee=(e,t,n,o=B,a=c)=>G(()=>{let s=n==null?void 0:n.current;!s||!a(s,t,e)||o(s,t,e)},[n==null?void 0:n.current,t]),l=ee;var te=()=>{try{return"0.1.0-beta.28"}catch{}return"UNKNOWN"},ne=te(),g=()=>ne;var oe=y.forwardRef(({children:e,...t},n)=>y.createElement("mux-player",m({...t,ref:n}),e)),r=(e,t,n)=>re(()=>{let o=t==null?void 0:t.current;if(!(!o||!n))return o.addEventListener(e,n),()=>{o.removeEventListener(e,n)}},[t==null?void 0:t.current,n]),se=(e,t)=>{let{onAbort:n,onCanPlay:o,onCanPlayThrough:a,onEmptied:s,onLoadStart:d,onLoadedData:b,onLoadedMetadata:P,onProgress:E,onDurationChange:T,onVolumeChange:R,onRateChange:v,onResize:x,onWaiting:k,onPlay:h,onPlaying:L,onTimeUpdate:O,onPause:M,onSeeking:S,onSeeked:C,onStalled:w,onSuspend:A,onEnded:V,onError:N,onPlayerReady:I,metadata:D,tokens:K,paused:j,playbackId:U,playbackRates:F,...H}=t;return l("playbackRates",F,e),l("metadata",D,e),l("tokens",K,e),l("playbackId",U,e),l("paused",j,e,(i,u)=>{u!=null&&(u?i.pause():i.play())},(i,u,z)=>i.hasAttribute("autoplay")&&!i.hasPlayed?!1:c(i,u,z)),r("abort",e,n),r("canplay",e,o),r("canplaythrough",e,a),r("emptied",e,s),r("loadstart",e,d),r("loadeddata",e,b),r("loadedmetadata",e,P),r("progress",e,E),r("durationchange",e,T),r("volumechange",e,R),r("ratechange",e,v),r("resize",e,x),r("waiting",e,k),r("play",e,h),r("playing",e,L),r("timeupdate",e,O),r("pause",e,M),r("seeking",e,S),r("seeked",e,C),r("stalled",e,w),r("suspend",e,A),r("ended",e,V),r("error",e,N),r("playerready",e,I),[H]},ie=g(),le="mux-player-react",ue=y.forwardRef((e,t)=>{let{forwardSeekOffset:n=10,backwardSeekOffset:o=10}=e,a=ae(null),s=f(a,t),[d]=se(a,e);return y.createElement(oe,{ref:s,playerSoftwareName:le,playerSoftwareVersion:ie,forwardSeekOffset:n,backwardSeekOffset:o,...d})}),ke=ue;export{Pe as MediaError,ke as default};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "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 { MediaError } from '@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\nexport { MediaError };\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  hotkeys?: string;\n  nohotkeys?: boolean;\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  playbackRates?: number[];\n  defaultShowRemainingTime?: boolean;\n  thumbnailTime?: number;\n  title?: string;\n  tokens?: Tokens;\n  onAbort?: EventListener;\n  onCanPlay?: EventListener;\n  onCanPlayThrough?: EventListener;\n  onEmptied?: EventListener;\n  onLoadStart?: EventListener;\n  onLoadedData?: 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  onStalled?: EventListener;\n  onSuspend?: 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    onAbort,\n    onCanPlay,\n    onCanPlayThrough,\n    onEmptied,\n    onLoadStart,\n    onLoadedData,\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    onStalled,\n    onSuspend,\n    onEnded,\n    onError,\n    onPlayerReady,\n    metadata,\n    tokens,\n    paused,\n    playbackId,\n    playbackRates,\n    ...remainingProps\n  } = props;\n  useObjectPropEffect('playbackRates', playbackRates, ref);\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('abort', ref, onAbort);\n  useEventCallbackEffect('canplay', ref, onCanPlay);\n  useEventCallbackEffect('canplaythrough', ref, onCanPlayThrough);\n  useEventCallbackEffect('emptied', ref, onEmptied);\n  useEventCallbackEffect('loadstart', ref, onLoadStart);\n  useEventCallbackEffect('loadeddata', ref, onLoadedData);\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('stalled', ref, onStalled);\n  useEventCallbackEffect('suspend', ref, onSuspend);\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": "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",
+  "names": []
+}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"program":{"fileNames":["../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.dom.iterable.d.ts","../../../node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../../../node_modules/typescript/lib/lib.scripthost.d.ts","../../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2019.full.d.ts","../src/env.ts","../../../node_modules/@types/react/global.d.ts","../../../node_modules/csstype/index.d.ts","../../../node_modules/@types/prop-types/index.d.ts","../../../node_modules/@types/scheduler/tracing.d.ts","../../../node_modules/@types/react/index.d.ts","../../../node_modules/hls.js/dist/hls.js.d.ts","../../playback-core/dist/types/autoplay.d.ts","../../playback-core/dist/types/errors.d.ts","../../playback-core/dist/types/tracks.d.ts","../../playback-core/dist/types/index.d.ts","../../mux-video/dist/types/CustomVideoElement.d.ts","../../mux-video/dist/types/index.d.ts","../../mux-player/dist/types/video-api.d.ts","../../mux-player/dist/types/index.d.ts","../src/common/utils.ts","../src/useCombinedRefs.ts","../src/useObjectPropEffect.ts","../src/index.tsx","../../../types/media-chrome.d.ts","../../../types/mux-embed.d.ts","../../../types/mux.d.ts"],"fileInfos":[{"version":"3ac1b83264055b28c0165688fda6dfcc39001e9e7828f649299101c23ad0a0c3","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84",{"version":"72704b10d97777e15f1a581b73f88273037ef752d2e50b72287bd0a90af64fe6","affectsGlobalScope":true},{"version":"dbb73d4d99be496175cb432c74c2615f78c76f4272f1d83cba11ee0ed6dbddf0","affectsGlobalScope":true},{"version":"7fac8cb5fc820bc2a59ae11ef1c5b38d3832c6d0dfaec5acdb5569137d09a481","affectsGlobalScope":true},{"version":"097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"c5c05907c02476e4bde6b7e76a79ffcd948aedd14b6a8f56e4674221b0417398","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},"1f03b495671c3a1bd24510f38b8947f0991dfd6bf0278c68eca14af15b306e1f","a6b7e3c103b4424b9c9d6dce7f059c16bbf037844b9f418775b86506d3d141d4",{"version":"bbdf156fea2fabed31a569445835aeedcc33643d404fcbaa54541f06c109df3f","affectsGlobalScope":true},"ea0aa24a32c073b8639aa1f3130ba0add0f0f2f76b314d9ba988a5cb91d7e3c4","6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"0bcebfaf66be25c793d0281a8dce761bc078d203f02c573e6ee3b844a5ad7fbc","affectsGlobalScope":true},"ece0cccc693a3364f05f68d7feb4d472e05b9f2eaea80f19fc10b17a0a6aa14d","e19277f843527448cadd35fd674e358d0d2a7f261e9631026ecc82feb85ecec8","8b1a6692156440f6585937b6b8de1c2692e7cac5c43aeb8893bfbd293f719552","16d89c2619e5c73fe784212aa78a4c3f6581d54e5bb566a942dfd4598c974370","6e7872c5ff282b768873500c6b800914f375037e346a733df49e544b084ef7cc","6b8ca5a4e0a75f6c8e48c0fc2ff204502f780db438b3d56d07d5c8b5da2da9c2",{"version":"35a3049e63a6c25a98834a50fad77e7879dfed1eedd1fa77924006ef93e6fecb","affectsGlobalScope":true},"8d43187447157b28e4c7d6a1a56af6cc88be8265e38b553317d0cdb2e4c621fe","da7a0e1e6c9457be15e474f52ff75509b612cf89f0294bc4a7754e74a29387d7","01aacd272dab2b1d9a461f9768ba4cb50252ac44e800725fe461a8adaeca6e3b","0a1108b169c08a6588b5f5f6d745a1e1ed5dbc1414034c557c14222d401fcfdc","721526438283d40d50c6356064d346f1c57693f7e9930a3854c20c73bf4380a5","03f91bf5348f6acf2c9a5f451cc20324b81c3acca96afae94c435d5bfadf8874","3cf4c7825a6c0ef1965e8906b85844aafdcdda9d95c8b4bcfcb3a20811cfd0b1","c5a4764697efe3b6b4eaf19b3dc1880cf3df665d30ec93e212233c29a2fa7207",{"version":"ee8e401f800f3d48020eda76c4fd27afd5bab992195252939329ae56dc9d1889","affectsGlobalScope":true}],"options":{"composite":true,"declaration":true,"emitDeclarationOnly":true,"esModuleInterop":true,"jsx":2,"module":5,"noImplicitAny":true,"outDir":"./types","rootDir":"../src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":6},"fileIdsList":[[37,38,39,40],[36,41,46,50,51,52,53],[41],[42,46,48,49,55],[48],[47],[42,46,47],[42],[42,43,44,45,56]],"referencedMap":[[41,1],[54,2],[52,3],[53,3],[50,4],[49,5],[47,6],[48,7],[43,8],[46,9],[45,8],[57,8]],"exportedModulesMap":[[41,1],[54,2],[52,3],[53,3],[50,4],[49,5],[47,6],[48,7],[43,8],[46,9],[45,8],[57,8]],"semanticDiagnosticsPerFile":[39,37,41,40,38,42,7,8,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,35,32,33,34,1,10,9,51,36,54,52,53,50,49,47,48,43,44,46,45,55,56,57]},"version":"4.6.4"}
+{"program":{"fileNames":["../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.dom.iterable.d.ts","../../../node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../../../node_modules/typescript/lib/lib.scripthost.d.ts","../../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2019.full.d.ts","../src/env.ts","../../../node_modules/@types/react/global.d.ts","../../../node_modules/csstype/index.d.ts","../../../node_modules/@types/prop-types/index.d.ts","../../../node_modules/@types/scheduler/tracing.d.ts","../../../node_modules/@types/react/index.d.ts","../../../node_modules/hls.js/dist/hls.js.d.ts","../../playback-core/dist/types/autoplay.d.ts","../../playback-core/dist/types/errors.d.ts","../../playback-core/dist/types/tracks.d.ts","../../playback-core/dist/types/index.d.ts","../../mux-video/dist/types/CustomVideoElement.d.ts","../../mux-video/dist/types/index.d.ts","../../../shared/polyfills/index.d.ts","../../mux-player/dist/types/video-api.d.ts","../../mux-player/dist/types/helpers.d.ts","../../mux-player/dist/types/index.d.ts","../src/common/utils.ts","../src/useCombinedRefs.ts","../src/useObjectPropEffect.ts","../src/index.tsx","../../../types/media-chrome.d.ts","../../../types/mux-embed.d.ts","../../../types/mux.d.ts"],"fileInfos":[{"version":"3ac1b83264055b28c0165688fda6dfcc39001e9e7828f649299101c23ad0a0c3","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84",{"version":"72704b10d97777e15f1a581b73f88273037ef752d2e50b72287bd0a90af64fe6","affectsGlobalScope":true},{"version":"dbb73d4d99be496175cb432c74c2615f78c76f4272f1d83cba11ee0ed6dbddf0","affectsGlobalScope":true},{"version":"7fac8cb5fc820bc2a59ae11ef1c5b38d3832c6d0dfaec5acdb5569137d09a481","affectsGlobalScope":true},{"version":"097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"c5c05907c02476e4bde6b7e76a79ffcd948aedd14b6a8f56e4674221b0417398","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},"1f03b495671c3a1bd24510f38b8947f0991dfd6bf0278c68eca14af15b306e1f","a6b7e3c103b4424b9c9d6dce7f059c16bbf037844b9f418775b86506d3d141d4",{"version":"bbdf156fea2fabed31a569445835aeedcc33643d404fcbaa54541f06c109df3f","affectsGlobalScope":true},"ea0aa24a32c073b8639aa1f3130ba0add0f0f2f76b314d9ba988a5cb91d7e3c4","6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"0bcebfaf66be25c793d0281a8dce761bc078d203f02c573e6ee3b844a5ad7fbc","affectsGlobalScope":true},"ece0cccc693a3364f05f68d7feb4d472e05b9f2eaea80f19fc10b17a0a6aa14d","e19277f843527448cadd35fd674e358d0d2a7f261e9631026ecc82feb85ecec8","8b1a6692156440f6585937b6b8de1c2692e7cac5c43aeb8893bfbd293f719552","16d89c2619e5c73fe784212aa78a4c3f6581d54e5bb566a942dfd4598c974370","51781f2d796522117c57972bfabe36de652182f7bec8b73e026df3659de0481e","6b8ca5a4e0a75f6c8e48c0fc2ff204502f780db438b3d56d07d5c8b5da2da9c2",{"version":"35a3049e63a6c25a98834a50fad77e7879dfed1eedd1fa77924006ef93e6fecb","affectsGlobalScope":true},"9c0eebd3a0506c79c428ca5c9c7abd895645879bca18ca793d9d367518dbff31","3c9a8856d43ff9d3aab7c2d76b40f92c597d897a060f86c6f09b1e21d513799c","1a99ea6d1fc721282c66eadb850c355591a225b4bdfbec2f922f7bf8de6410b0","1d6966e0377b7557bf827306dd5fa30a7253fca59e80d1cee463c39b8d4fb987","01aacd272dab2b1d9a461f9768ba4cb50252ac44e800725fe461a8adaeca6e3b","0a1108b169c08a6588b5f5f6d745a1e1ed5dbc1414034c557c14222d401fcfdc","721526438283d40d50c6356064d346f1c57693f7e9930a3854c20c73bf4380a5","31a039f28cf927dd53e2fe98d95b24beca3a38a99c856bea770ebb2761d6ed99","3cf4c7825a6c0ef1965e8906b85844aafdcdda9d95c8b4bcfcb3a20811cfd0b1","c5a4764697efe3b6b4eaf19b3dc1880cf3df665d30ec93e212233c29a2fa7207",{"version":"ee8e401f800f3d48020eda76c4fd27afd5bab992195252939329ae56dc9d1889","affectsGlobalScope":true}],"options":{"composite":true,"declaration":true,"emitDeclarationOnly":true,"esModuleInterop":true,"jsx":2,"module":5,"noImplicitAny":true,"outDir":"./types","rootDir":"../src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":6},"fileIdsList":[[37,38,39,40],[36,41,46,52,53,54,55],[41],[52],[42,46,48,50,51,57],[48,49],[47],[42,46,47],[42],[42,43,44,45,58]],"referencedMap":[[41,1],[56,2],[54,3],[55,3],[51,4],[52,5],[50,6],[47,7],[48,8],[43,9],[46,10],[45,9],[59,9]],"exportedModulesMap":[[41,1],[56,2],[54,3],[55,3],[51,4],[52,5],[50,6],[47,7],[48,8],[43,9],[46,10],[45,9],[59,9]],"semanticDiagnosticsPerFile":[39,37,41,40,38,42,7,8,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,35,32,33,34,1,10,9,53,36,56,54,55,51,52,50,47,48,43,44,46,45,49,57,58,59]},"version":"4.6.4"}

package/dist/types/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { CSSProperties } from 'react';
 import type { StreamTypes } from '@mux/playback-core';
-import '@mux/mux-player';
+import { MediaError } from '@mux/mux-player';
 import type MuxPlayerElement from '@mux/mux-player';
 import type { Tokens } from '@mux/mux-player';
+export { MediaError };
 declare type ValueOf<T> = T[keyof T];
 export declare type MuxPlayerRefAttributes = MuxPlayerElement;
 declare type VideoApiAttributes = {
@@ -37,6 +38,7 @@ declare type MuxMediaPropTypes = {
     children: never[];
 };
 export declare type MuxPlayerProps = {
+    hotkeys?: string;
     nohotkeys?: boolean;
     defaultHiddenCaptions?: boolean;
     playerSoftwareVersion?: string;
@@ -49,9 +51,17 @@ export declare type MuxPlayerProps = {
     primaryColor?: string;
     secondaryColor?: string;
     tertiaryColor?: string;
+    playbackRates?: number[];
+    defaultShowRemainingTime?: boolean;
     thumbnailTime?: number;
+    title?: string;
     tokens?: Tokens;
+    onAbort?: EventListener;
+    onCanPlay?: EventListener;
+    onCanPlayThrough?: EventListener;
+    onEmptied?: EventListener;
     onLoadStart?: EventListener;
+    onLoadedData?: EventListener;
     onLoadedMetadata?: EventListener;
     onProgress?: EventListener;
     onDurationChange?: EventListener;
@@ -65,6 +75,8 @@ export declare type MuxPlayerProps = {
     onPause?: EventListener;
     onSeeking?: EventListener;
     onSeeked?: EventListener;
+    onStalled?: EventListener;
+    onSuspend?: EventListener;
     onEnded?: EventListener;
     onError?: EventListener;
     onPlayerReady?: EventListener;

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

@@ -1,9 +1,10 @@
 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];
 export declare type MuxPlayerRefAttributes = MuxPlayerElement;
 declare type VideoApiAttributes = {
@@ -37,6 +38,7 @@ declare type MuxMediaPropTypes = {
     children: never[];
 };
 export declare type MuxPlayerProps = {
+    hotkeys?: string;
     nohotkeys?: boolean;
     defaultHiddenCaptions?: boolean;
     playerSoftwareVersion?: string;
@@ -49,9 +51,17 @@ export declare type MuxPlayerProps = {
     primaryColor?: string;
     secondaryColor?: string;
     tertiaryColor?: string;
+    playbackRates?: number[];
+    defaultShowRemainingTime?: boolean;
     thumbnailTime?: number;
+    title?: string;
     tokens?: Tokens;
+    onAbort?: EventListener;
+    onCanPlay?: EventListener;
+    onCanPlayThrough?: EventListener;
+    onEmptied?: EventListener;
     onLoadStart?: EventListener;
+    onLoadedData?: EventListener;
     onLoadedMetadata?: EventListener;
     onProgress?: EventListener;
     onDurationChange?: EventListener;
@@ -65,6 +75,8 @@ export declare type MuxPlayerProps = {
     onPause?: EventListener;
     onSeeking?: EventListener;
     onSeeked?: EventListener;
+    onStalled?: EventListener;
+    onSuspend?: EventListener;
     onEnded?: EventListener;
     onError?: EventListener;
     onPlayerReady?: EventListener;

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@mux/mux-player-react",
-  "version": "0.1.0-beta.25",
+  "version": "0.1.0-beta.28",
   "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": {
@@ -21,13 +27,15 @@
   "scripts": {
     "clean": "shx rm -rf dist/",
     "dev:cjs": "open-process | yarn build:cjs --watch",
+    "dev:esm": "open-process | yarn build:esm --watch",
     "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,8 +53,8 @@
     }
   },
   "dependencies": {
-    "@mux/mux-player": "0.1.0-beta.25",
-    "@mux/playback-core": "0.9.0",
+    "@mux/mux-player": "0.1.0-beta.27",
+    "@mux/playback-core": "0.10.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
@@ -61,5 +69,5 @@
     "shx": "^0.3.4",
     "typescript": "^4.5.2"
   },
-  "gitHead": "4ef4afea4e82bf3558225d105dbab0cbff6aa6ce"
+  "gitHead": "72f1ae00a6c718fcaf8797a09f94aef8bfd9e0c6"
 }

package/CHANGELOG.md

@@ -1,151 +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.25](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.24...@mux/mux-player-react@0.1.0-beta.25) (2022-08-02)
-
-### Features
-
-- types and docs for nohotkeys in mux-player-react ([a9f78d4](https://github.com/muxinc/elements/commit/a9f78d422d64bf661de59cad834aa1c819e88ff8))
-
-# [0.1.0-beta.24](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.23...@mux/mux-player-react@0.1.0-beta.24) (2022-07-21)
-
-### Features
-
-- add defaultMuted, defaultPlaybackRate props ([#252](https://github.com/muxinc/elements/issues/252)) ([1a72165](https://github.com/muxinc/elements/commit/1a7216545cba27b34bc743cf5dd6225d4dcae738))
-
-# [0.1.0-beta.23](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.22...@mux/mux-player-react@0.1.0-beta.23) (2022-07-11)
-
-**Note:** Version bump only for package @mux/mux-player-react
-
-# [0.1.0-beta.22](https://github.com/muxinc/elements/compare/@mux/mux-player-react@0.1.0-beta.21...@mux/mux-player-react@0.1.0-beta.22) (2022-07-05)
-
-**Note:** Version bump only for package @mux/mux-player-react
-
-# 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-beta.25"}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:h,onTimeUpdate:w,onPause:S,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,h),o("timeupdate",e,w),o("pause",e,S),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  nohotkeys?: boolean;\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": "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",
-  "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,205 +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 = {
-  nohotkeys?: boolean;
-  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;

package/src/useObjectPropEffect.ts

@@ -1,66 +0,0 @@
-import { useEffect } from 'react';
-
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
-/**
- * Slightly modified version of React's shallowEqual, with optimizations for Arrays
- * so we may treat them specifically as unequal if they are not a) both arrays
- * or b) don't contain the same (shallowly compared) elements.
- */
-const shallowEqual = (objA: any, objB: any): boolean => {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-
-  if (Array.isArray(objA)) {
-    // Early "cheap" array compares
-    if (!Array.isArray(objB) || objA.length !== objB.length) return false;
-    // Shallow compare for arrays
-    return objA.some((vVal, i) => objB[i] === vVal);
-  }
-
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-
-  // Test for A's keys different from B.
-  for (let i = 0; i < keysA.length; i++) {
-    if (!hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-
-  return true;
-};
-
-export const defaultHasChanged = (obj: any, v: any, k: string) => {
-  return !shallowEqual(v, obj[k]);
-};
-
-const defaultUpdateValue = (obj: any, v: any, k: string) => {
-  obj[k] = v;
-};
-
-export const useObjectPropEffect = <T extends { [k: string]: any }, V>(
-  propName: string,
-  propValue: V | null | undefined,
-  ref: React.MutableRefObject<T | null> | null | undefined,
-  updateValue = defaultUpdateValue,
-  hasChanged = defaultHasChanged
-) => {
-  return useEffect(() => {
-    const obj = ref?.current;
-    if (!obj) return;
-    if (!hasChanged(obj, propValue, propName)) return;
-    updateValue(obj, propValue, propName);
-  }, [ref?.current, propValue]);
-};
-
-export default useObjectPropEffect;

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react",
-    "rootDir": "src",
-    "outDir": "dist",
-    "incremental": true,
-    "target": "ES2019",
-    "module": "es6",
-    "declaration": true,
-    "sourceMap": true,
-    "composite": true,
-    "strict": true,
-    "noImplicitAny": true,
-    "moduleResolution": "Node",
-    "baseUrl": "./packages",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "typeRoots": ["node_modules/@types", "../../types"]
-  },
-  "include": ["src/**/*", "../../types"]
-}