@mux/mux-audio-react 0.3.12-canary.0-556dabf

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.3.11](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.10...@mux-elements/mux-audio-react@0.3.11) (2022-06-23)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.10](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.9...@mux-elements/mux-audio-react@0.3.10) (2022-06-06)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.9](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.8...@mux-elements/mux-audio-react@0.3.9) (2022-05-26)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.8](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.7...@mux-elements/mux-audio-react@0.3.8) (2022-05-23)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.7](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.6...@mux-elements/mux-audio-react@0.3.7) (2022-05-20)
+
+### Bug Fixes
+
+- switch cjs extension to .cjs.js ([30e83c3](https://github.com/muxinc/elements/commit/30e83c3ce0bd9bfda4817c30ffe0921e425619e4))
+
+## [0.3.6](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.5...@mux-elements/mux-audio-react@0.3.6) (2022-05-10)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.5](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.4...@mux-elements/mux-audio-react@0.3.5) (2022-05-03)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.4](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.3...@mux-elements/mux-audio-react@0.3.4) (2022-04-22)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.3](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.2...@mux-elements/mux-audio-react@0.3.3) (2022-04-18)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.2](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.1...@mux-elements/mux-audio-react@0.3.2) (2022-04-12)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+## [0.3.1](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.3.0...@mux-elements/mux-audio-react@0.3.1) (2022-04-01)
+
+**Note:** Version bump only for package @mux-elements/mux-audio-react
+
+# [0.3.0](https://github.com/muxinc/elements/compare/@mux-elements/mux-audio-react@0.2.0...@mux-elements/mux-audio-react@0.3.0) (2022-03-28)
+
+### Bug Fixes
+
+- **mux-audio-react:** use generateInitTime() instead of Date.now. ([d60f98c](https://github.com/muxinc/elements/commit/d60f98c3f9d626c2a0cb656ccafbb21b4802ca13))
+- 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/README.md

@@ -0,0 +1,180 @@
+<p align="center">
+  <h1 align="center">&lt;MuxAudio/&gt;</h1>
+  <a href="https://npmcharts.com/compare/@mux/mux-audio-react?interval=30"><img src="https://img.shields.io/npm/dm/@mux/mux-audio-react.svg?sanitize=true" alt="Downloads"></a>
+    <a href="https://www.npmjs.com/package/@mux/mux-audio-react"><img src="https://img.shields.io/npm/v/@mux/mux-audio-react.svg?sanitize=true" alt="Version"></a>
+    <a href="https://www.npmjs.com/package/@mux/mux-audio-react"><img src="https://img.shields.io/npm/l/@mux/mux-audio-react.svg?sanitize=true" alt="License"></a>
+</p>
+
+# Introduction
+
+`<MuxAudio/>` is a Mux-flavored React audio component.
+
+If you are familiar with using `<audio />` + [Hls.js](https://github.com/video-dev/hls.js) in your application, then you'll feel right at home with this React component.
+
+# Installation
+
+If you're using `npm` or `yarn`, install that way:
+
+## Package manager
+
+```
+yarn add @mux/mux-audio-react
+```
+
+or
+
+```
+npm i @mux/mux-audio-react
+```
+
+Then, import the library into your application with either `import` or `require`:
+
+```js
+import '@mux/mux-audio-react';
+```
+
+or
+
+```js
+require('@mux/mux-audio-react');
+```
+
+## Features and benefits
+
+Without `<MuxAudio/>`, if you want to use the browser built-in HTML5 audio element for playback you would have to wire up [Hls.js](https://github.com/video-dev/hls.js) and [Mux Data](https://docs.mux.com/guides/data/monitor-hls-js) yourself.
+
+`<MuxAudio/>` will automatically handle recoverable errors that happen during audio playback. This is particularly handy for live streams that may experience disconnects.
+
+`<MuxAudio/>` will use the optimial Hls.js settings for Mux Video so you don't have to worry about that. `<MuxAudio/>` will also periodically test new versions of Hls.js and upgrade to known stable versions so you don't have to worry about upgrading to a new version of Hls.js yourself.
+
+## Usage
+
+Loading this library in the browser will register a [custom web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) for `<mux-audio>`.
+
+Now you are free to use this web component in your HTML, just as you would with the HTML5 `<audio>` element.
+
+```jsx
+const MuxAudioExample = () => {
+  return (
+    <div>
+      <h1>Simple MuxAudio Example</h1>
+      <MuxAudio
+        style={{ height: '100%', maxWidth: '100%' }}
+        playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
+        metadata={{
+          video_id: 'audio-id-123456',
+          video_title: 'Super Interesting Audio',
+          viewer_user_id: 'user-id-bc-789',
+        }}
+        streamType="on-demand"
+        controls
+        autoPlay
+        muted
+      />
+    </div>
+  );
+};
+```
+
+### Primary Props:
+
+- `playbackId: string`: This is the playback ID for your Mux Asset or Mux Live Stream. The playback-id is the variable you may have used before to construct a `.m3u8` hls url like this:`https://stream.mux.com/{PLAYBACK_ID}.m3u8`. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id).
+- `envKey: string`: This is the environment key for Mux Data. 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 and you are playing a Mux Video (audio) asset, the environment will be inferred.
+  <img src="../../images/env-key.png" alt="Mux Data dashboard env key"></img>
+- `metadata: Object`: This is an object for configuring any metadata you'd like to send to Mux Data. For a detailed discussion of the available metadata fields and what they represent, check out the [Mux Data docs](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata). A few high priority keys that you'll likely want to set are:
+  - `video_id: string`: Your internal ID for the audio.
+  - `video_title: string`: Title of the audio player (e.g.: 'Awesome Show: Pilot')
+  - `viewer_user_id: string`: An ID representing the viewer who is watching the stream. Use this to look up video views for an individual viewer. If no value is specified, a unique ID will be generated by the SDK. Note: You should not use any value that is personally identifiable on its own (such as email address, username, etc). Instead, you should supply an anonymized viewer ID which you have stored within your own system.
+- `streamType: string`: Enum value: one of `"on-demand"`, `"live"` (HLS live stream), `"ll-live"` (low latency live). Not strictly required, but preferred so that `<MuxAudio/>` can make optimizations based on the type of stream.
+- `startTime: number (seconds)`: Set this to start playback of your media at some time other than 0.
+
+In addition, any props that you would use on a `<audio>` element like `poster`, `controls`, `muted` and `autoPlay` are available and should work the same as they do when using a audio element in react. One sidenote about `autoPlay` though -- [read this to understand why that might not always work as expected](https://docs.mux.com/guides/video/web-autoplay-your-videos).
+
+### Advanced: preferMse
+
+By default `<MuxAudio/>` will try to use native playback via the underlying `<audio/>` tag whenever possible. However, it can also instead use an in-code player as long as the browser supports [Media Source Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API). This includes MSE in Mac OS Safari.
+
+If you prefer to use the in-code MSE-based engine (currently hls.js) whenever possible, then simply set the `preferMse` prop.
+
+```jsx
+<MuxAudio
+  playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
+  metadata={{
+    video_id: 'audio-id-123456',
+    video_title: 'Super Interesting Audio',
+    viewer_user_id: 'user-id-bc-789',
+  }}
+  preferMse
+  controls
+/>
+```
+
+### Advanced: type
+
+By default `<MuxAudio/>` will try to figure out the type of media you're trying to play (for example, an HLS/m3u8 media source, an mp4, etc.) based the extension of the file from the `src` attribute's url. This allows `<MuxAudio/>` to determine whether it can/should use an in-code player or native playback. By way of example, the code below has an identifiable "mp4" extension, so `<MuxAudio/>` will rely on native playback via the underlying `<audio/>` tag.
+
+```jsx
+<MuxAudio
+  src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
+  metadata={{
+    video_id: 'audio-id-123456',
+    video_title: 'Super Interesting Audio',
+    viewer_user_id: 'user-id-bc-789',
+  }}
+  controls
+/>
+```
+
+Sometimes, however, your `src` URL may not have an identifiable extension. In these cases, we recommend relying on the `type` attribute, similar to the `<source/>` tag's [type attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type). Below is an example of explicitly declaring the MIME type for an HLS/m3u8 media source:
+
+```jsx
+<MuxAudio
+  src="https://stream.notmux.com/path/to/an/hls/source/playlist"
+  type="application/vnd.apple.mpegurl"
+  metadata={{
+    video_id: 'video-id-123456',
+    video_title: 'Super Interesting Video',
+    viewer_user_id: 'user-id-bc-789',
+  }}
+  controls
+/>
+```
+
+Or, for convenience, we also support the shorthand `type="hls`:
+
+```jsx
+<MuxAudio
+  src="https://stream.notmux.com/path/to/an/hls/source/playlist"
+  type="hls"
+  metadata={{
+    video_id: 'audio-id-123456',
+    video_title: 'Super Interesting Audio',
+    viewer_user_id: 'user-id-bc-789',
+  }}
+  controls
+/>
+```
+
+### Advanced: Signed URLs and other playback query params
+
+Mux supports a number of query parameters on HLS playback URLs. Most commonly the `token=` param is [used for signed URLs](https://docs.mux.com/guides/video/secure-video-playback).
+
+In order to use `token=` -- or any other query params, pass them through with the `playbackId` prop:
+
+```
+playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe?token=jwt-signed-token"
+```
+
+# FAQ
+
+### Can I use `<MuxAudio/>` with `TypeScript`?
+
+Yes! In fact, `@mux-element/mux-audio-react` is written entirely in `TypeScript` and provides a definitions file automatically (no additional installs needed).
+
+### If I'm using Mux, do I have to use this library?
+
+No, you do not. The way Mux delivers HLS is compliant with the HLS spec. Any audio player that supports HLS will work with Mux Video.
+
+### If I'm not using Mux Video, can I still use this library?
+
+You sure can! Instead of passing in `playbackId=""` prop, pass in `src=""` with an HLS url. You can still use `envKey=""` to get all the features of Mux Data with your non-Mux audio.

package/dist/index.js

@@ -0,0 +1,2 @@
+var k=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var M=e=>c(e,"__esModule",{value:!0});var V=(e,t)=>{M(e);for(var o in t)c(e,o,{get:t[o],enumerable:!0})},N=(e,t,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!I.call(e,s)&&s!=="default"&&c(e,s,{get:()=>t[s],enumerable:!(o=j(t,s))||o.enumerable});return e},l=e=>N(M(c(e!=null?k(H(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);V(exports,{default:()=>_});var y=l(require("react")),U=(...e)=>{let t=(0,y.useRef)(null);return(0,y.useEffect)(()=>{e.forEach(o=>{!o||(typeof o=="function"?o(t.current):o.current=t.current)})},[e]),t},P=U;var r=l(require("react")),a=l(require("prop-types")),n=l(require("@mux/playback-core"));var h=()=>{try{return"0.3.12-canary.0-556dabf"}catch{}return"UNKNOWN"},D=h(),g=()=>D;var K=g(),W="mux-audio-react",x=r.default.forwardRef((e,t)=>{var R;let{envKey:o,debug:s,beaconCollectionDomain:z,playbackId:f,preferMse:B,type:Y,streamType:q,startTime:F,src:d,children:E,autoPlay:i,...A}=e,[O]=(0,r.useState)((0,n.generatePlayerInitTime)()),[T,S]=(0,r.useState)((R=(0,n.toMuxVideoURL)(f))!=null?R:d),m=(0,r.useRef)(void 0),v=(0,r.useRef)(null),b=P(v,t),G=(0,r.useRef)(void 0),[C,L]=(0,r.useState)(()=>u=>{});return(0,r.useEffect)(()=>{var p;let u=(p=(0,n.toMuxVideoURL)(f))!=null?p:d;S(u)},[d,f]),(0,r.useEffect)(()=>{let u={...e,src:T,playerInitTime:O,playerSoftwareName:W,playerSoftwareVersion:K,autoplay:i},p=(0,n.initialize)(u,b.current,m.current);m.current=p,L(()=>(0,n.setupAutoplay)(b.current,i,m.current))},[T]),(0,r.useEffect)(()=>{C(i)},[i]),r.default.createElement("audio",{ref:b,...A},E)});x.propTypes={envKey:a.default.string,debug:a.default.bool,metadata:a.default.any,beaconCollectionDomain:a.default.string,playbackId:a.default.string,playerInitTime:a.default.number,preferMse:a.default.bool,type:a.default.oneOf(n.allMediaTypes),streamType:a.default.oneOf(Object.values(n.StreamTypes)),startTime:a.default.number};var _=x;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.tsx", "../src/use-combined-refs.ts", "../src/env.ts"],
+  "sourcesContent": ["import useCombinedRefs from './use-combined-refs';\nimport React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  allMediaTypes,\n  initialize,\n  type Autoplay,\n  type UpdateAutoplay,\n  setupAutoplay,\n  MuxMediaProps,\n  StreamTypes,\n  toMuxVideoURL,\n  PlaybackEngine,\n  generatePlayerInitTime,\n} from '@mux/playback-core';\nimport { getPlayerVersion } from './env';\n\nexport type Props = Omit<\n  React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>,\n  'autoPlay'\n> &\n  MuxMediaProps;\n\nconst playerSoftwareVersion = getPlayerVersion();\nconst playerSoftwareName = 'mux-audio-react';\n\nconst MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>((props, ref) => {\n  const {\n    envKey,\n    debug,\n    beaconCollectionDomain,\n    playbackId,\n    preferMse,\n    type,\n    streamType,\n    startTime,\n    src: outerSrc,\n    children,\n    autoPlay,\n    ...restProps\n  } = props;\n\n  const [playerInitTime] = useState(generatePlayerInitTime());\n\n  const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(playbackId) ?? outerSrc);\n\n  const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined);\n  const innerMediaElRef = useRef<HTMLAudioElement>(null);\n\n  const mediaElRef = useCombinedRefs(innerMediaElRef, ref);\n  const updateAutoplayRef = useRef<UpdateAutoplay | undefined>(undefined);\n  const [updateAutoplay, setUpdateAutoplay] = useState(() => (x: any) => {});\n\n  useEffect(() => {\n    const src = toMuxVideoURL(playbackId) ?? outerSrc;\n    setSrc(src);\n  }, [outerSrc, playbackId]);\n\n  useEffect(() => {\n    const propsWithState = {\n      ...props,\n      src,\n      playerInitTime,\n      playerSoftwareName,\n      playerSoftwareVersion,\n      autoplay: autoPlay,\n    };\n    const nextPlaybackEngineRef = initialize(propsWithState, mediaElRef.current, playbackEngineRef.current);\n    playbackEngineRef.current = nextPlaybackEngineRef;\n    setUpdateAutoplay(() => setupAutoplay(mediaElRef.current, autoPlay, playbackEngineRef.current));\n  }, [src]);\n\n  useEffect(() => {\n    updateAutoplay(autoPlay);\n  }, [autoPlay]);\n\n  return (\n    <audio ref={mediaElRef} {...restProps}>\n      {children}\n    </audio>\n  );\n});\n\nMuxAudio.propTypes = {\n  envKey: PropTypes.string,\n  debug: PropTypes.bool,\n  // Improve this by adding a full shape() definition for all metadata props\n  // metadata: PropTypes.shape({}),\n  metadata: PropTypes.any,\n  beaconCollectionDomain: PropTypes.string,\n  playbackId: PropTypes.string,\n  playerInitTime: PropTypes.number,\n  preferMse: PropTypes.bool,\n  type: PropTypes.oneOf(allMediaTypes),\n  streamType: PropTypes.oneOf(Object.values(StreamTypes)),\n  startTime: PropTypes.number,\n};\n\nexport default MuxAudio;\n", "import { useEffect, useRef, MutableRefObject } 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>;\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", "export const isMaybeBrowser = () => typeof window != 'undefined';\n// @ts-ignore\nexport const isMaybeServer = () => typeof global != 'undefined';\n\nconst getEnvPlayerVersion = () => {\n  try {\n    // @ts-ignore\n    return PLAYER_VERSION as string;\n  } catch {}\n  return 'UNKNOWN';\n};\n\nconst player_version: string = getEnvPlayerVersion();\n\nexport const getPlayerVersion = () => player_version;\n"],
+  "mappings": "mlBAAA,2BCAA,MAAoD,oBAUvC,EAAmC,IAAI,IAAS,CAC3D,GAAM,GAAY,aAAO,MAEzB,sBAAU,IAAM,CACd,EAAK,QAAQ,AAAC,GAAQ,CACpB,AAAI,CAAC,GAEL,CAAI,MAAO,IAAQ,WACjB,EAAI,EAAU,SAEd,EAAI,QAAU,EAAU,YAG3B,CAAC,IAEG,GAGF,EAAQ,ED3Bf,MAAmD,oBACnD,EAAsB,yBACtB,EAWO,iCEVP,GAAM,GAAsB,IAAM,CAChC,GAAI,CAEF,MAAO,+BACP,EACF,MAAO,WAGH,EAAyB,IAElB,EAAmB,IAAM,EFStC,GAAM,GAAwB,IACxB,EAAqB,kBAErB,EAAW,UAAM,WAAyD,CAAC,EAAO,IAAQ,CA1BhG,MA2BE,GAAM,CACJ,SACA,QACA,yBACA,aACA,YACA,OACA,aACA,YACA,IAAK,EACL,WACA,cACG,GACD,EAEE,CAAC,GAAkB,eAAS,gCAE5B,CAAC,EAAK,GAAU,eAA+B,uBAAc,KAAd,OAA6B,GAE5E,EAAoB,aAAmC,QACvD,EAAkB,aAAyB,MAE3C,EAAa,EAAgB,EAAiB,GAC9C,EAAoB,aAAmC,QACvD,CAAC,EAAgB,GAAqB,eAAS,IAAM,AAAC,GAAW,IAEvE,sBAAU,IAAM,CArDlB,MAsDI,GAAM,GAAM,uBAAc,KAAd,OAA6B,EACzC,EAAO,IACN,CAAC,EAAU,IAEd,gBAAU,IAAM,CACd,GAAM,GAAiB,IAClB,EACH,MACA,iBACA,qBACA,wBACA,SAAU,GAEN,EAAwB,iBAAW,EAAgB,EAAW,QAAS,EAAkB,SAC/F,EAAkB,QAAU,EAC5B,EAAkB,IAAM,oBAAc,EAAW,QAAS,EAAU,EAAkB,WACrF,CAAC,IAEJ,gBAAU,IAAM,CACd,EAAe,IACd,CAAC,IAGF,wBAAC,QAAD,CAAO,IAAK,KAAgB,GACzB,KAKP,EAAS,UAAY,CACnB,OAAQ,UAAU,OAClB,MAAO,UAAU,KAGjB,SAAU,UAAU,IACpB,uBAAwB,UAAU,OAClC,WAAY,UAAU,OACtB,eAAgB,UAAU,OAC1B,UAAW,UAAU,KACrB,KAAM,UAAU,MAAM,iBACtB,WAAY,UAAU,MAAM,OAAO,OAAO,gBAC1C,UAAW,UAAU,QAGvB,GAAO,GAAQ",
+  "names": []
+}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +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","../src/use-combined-refs.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/index.d.ts","../src/index.tsx","../../../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","1ee6056d39213c8481cc8af4adb2b1dc373e15e8b2b9864739e6c0b2da60cf1d",{"version":"bbdf156fea2fabed31a569445835aeedcc33643d404fcbaa54541f06c109df3f","affectsGlobalScope":true},"ea0aa24a32c073b8639aa1f3130ba0add0f0f2f76b314d9ba988a5cb91d7e3c4","6a386ff939f180ae8ef064699d8b7b6e62bc2731a62d7fbf5e02589383838dea","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"0bcebfaf66be25c793d0281a8dce761bc078d203f02c573e6ee3b844a5ad7fbc","affectsGlobalScope":true},"2cc645fb9925522f7c230c3e152d7c518665ed8efb09361b70d5edbcb687aa34","ece0cccc693a3364f05f68d7feb4d472e05b9f2eaea80f19fc10b17a0a6aa14d","e19277f843527448cadd35fd674e358d0d2a7f261e9631026ecc82feb85ecec8","8b1a6692156440f6585937b6b8de1c2692e7cac5c43aeb8893bfbd293f719552","eb22b463efe9cdd4c0852f62cf92ca3dfa59b136d82e28b7473b67105d19c780","63e38b0ba598c56d110bc71de8c7d6c02b51a6ab460444e3d64ff74b40d7ae73","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,39,41,42,46],[41],[43],[43,44,45,48]],"referencedMap":[[41,1],[47,2],[42,3],[44,4],[46,5],[49,4]],"exportedModulesMap":[[41,1],[47,2],[42,3],[44,4],[46,5],[49,4]],"semanticDiagnosticsPerFile":[39,37,41,40,38,43,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,36,47,42,44,45,46,48,49]},"version":"4.6.4"}

package/dist/types/env.d.ts

@@ -0,0 +1,3 @@
+export declare const isMaybeBrowser: () => boolean;
+export declare const isMaybeServer: () => boolean;
+export declare const getPlayerVersion: () => string;

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MuxMediaProps } from '@mux/playback-core';
+export declare type Props = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay'> & MuxMediaProps;
+declare const MuxAudio: React.ForwardRefExoticComponent<Pick<Partial<Props>, "controls" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("@mux/playback-core").MuxMediaPropTypes> & React.RefAttributes<HTMLAudioElement | undefined>>;
+export default MuxAudio;

package/dist/types/use-combined-refs.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+declare type Maybe<T> = T | null | undefined;
+declare type RefCb<T> = (instance: Maybe<T>) => void;
+declare type RefObj<T> = MutableRefObject<Maybe<T>>;
+declare type RefTypes<T> = RefObj<T> | RefCb<T>;
+interface useCombinedRefs {
+    <T>(...refs: Maybe<RefTypes<T>>[]): RefObj<T>;
+}
+export declare const useCombinedRefs: useCombinedRefs;
+export default useCombinedRefs;

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

@@ -0,0 +1,3 @@
+export declare const isMaybeBrowser: () => boolean;
+export declare const isMaybeServer: () => boolean;
+export declare const getPlayerVersion: () => string;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MuxMediaProps } from '@mux/playback-core';
+export declare type Props = Pick<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, Exclude<keyof React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay'>> & MuxMediaProps;
+declare const MuxAudio: React.ForwardRefExoticComponent<Pick<Partial<Props>, "controls" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("@mux/playback-core").MuxMediaPropTypes> & React.RefAttributes<HTMLAudioElement | undefined>>;
+export default MuxAudio;

package/dist/types-ts3.4/use-combined-refs.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+declare type Maybe<T> = T | null | undefined;
+declare type RefCb<T> = (instance: Maybe<T>) => void;
+declare type RefObj<T> = MutableRefObject<Maybe<T>>;
+declare type RefTypes<T> = RefObj<T> | RefCb<T>;
+interface useCombinedRefs {
+    <T>(...refs: Maybe<RefTypes<T>>[]): RefObj<T>;
+}
+export declare const useCombinedRefs: useCombinedRefs;
+export default useCombinedRefs;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@mux/mux-audio-react",
+  "version": "0.3.12-canary.0-556dabf",
+  "description": "A custom mux audio element for React that Just Works™",
+  "main": "dist/index.js",
+  "types": "dist/types-ts3.4/index.d.ts",
+  "typesVersions": {
+    ">=4.3.5": {
+      "*": [
+        "dist/types/index.d.ts"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muxinc/elements",
+    "directory": "packages/mux-video"
+  },
+  "author": "Mux, Inc.",
+  "license": "MIT",
+  "scripts": {
+    "clean": "shx rm -rf dist/",
+    "dev:cjs": "open-process | yarn build:cjs --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 --outdir=dist --external:react --external:prop-types --external:@mux/* --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'",
+    "prebuild": "yarn clean",
+    "prepublishOnly": "yarn build",
+    "create-release-notes": "create-release-notes ./CHANGELOG.md",
+    "publish-release": "../../scripts/publish.sh"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.8.6 || ^17.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@mux/playback-core": "0.7.0",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "@mux/open-process": "0.1.0",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "downlevel-dts": "^0.9.0",
+    "esbuild": "^0.13.13",
+    "npm-run-all": "^4.1.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "shx": "^0.3.4",
+    "typescript": "^4.5.2"
+  }
+}

package/src/env.ts

@@ -0,0 +1,15 @@
+export const isMaybeBrowser = () => typeof window != 'undefined';
+// @ts-ignore
+export const isMaybeServer = () => typeof global != 'undefined';
+
+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

@@ -0,0 +1,99 @@
+import useCombinedRefs from './use-combined-refs';
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  allMediaTypes,
+  initialize,
+  type Autoplay,
+  type UpdateAutoplay,
+  setupAutoplay,
+  MuxMediaProps,
+  StreamTypes,
+  toMuxVideoURL,
+  PlaybackEngine,
+  generatePlayerInitTime,
+} from '@mux/playback-core';
+import { getPlayerVersion } from './env';
+
+export type Props = Omit<
+  React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>,
+  'autoPlay'
+> &
+  MuxMediaProps;
+
+const playerSoftwareVersion = getPlayerVersion();
+const playerSoftwareName = 'mux-audio-react';
+
+const MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>((props, ref) => {
+  const {
+    envKey,
+    debug,
+    beaconCollectionDomain,
+    playbackId,
+    preferMse,
+    type,
+    streamType,
+    startTime,
+    src: outerSrc,
+    children,
+    autoPlay,
+    ...restProps
+  } = props;
+
+  const [playerInitTime] = useState(generatePlayerInitTime());
+
+  const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(playbackId) ?? outerSrc);
+
+  const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined);
+  const innerMediaElRef = useRef<HTMLAudioElement>(null);
+
+  const mediaElRef = useCombinedRefs(innerMediaElRef, ref);
+  const updateAutoplayRef = useRef<UpdateAutoplay | undefined>(undefined);
+  const [updateAutoplay, setUpdateAutoplay] = useState(() => (x: any) => {});
+
+  useEffect(() => {
+    const src = toMuxVideoURL(playbackId) ?? outerSrc;
+    setSrc(src);
+  }, [outerSrc, playbackId]);
+
+  useEffect(() => {
+    const propsWithState = {
+      ...props,
+      src,
+      playerInitTime,
+      playerSoftwareName,
+      playerSoftwareVersion,
+      autoplay: autoPlay,
+    };
+    const nextPlaybackEngineRef = initialize(propsWithState, mediaElRef.current, playbackEngineRef.current);
+    playbackEngineRef.current = nextPlaybackEngineRef;
+    setUpdateAutoplay(() => setupAutoplay(mediaElRef.current, autoPlay, playbackEngineRef.current));
+  }, [src]);
+
+  useEffect(() => {
+    updateAutoplay(autoPlay);
+  }, [autoPlay]);
+
+  return (
+    <audio ref={mediaElRef} {...restProps}>
+      {children}
+    </audio>
+  );
+});
+
+MuxAudio.propTypes = {
+  envKey: PropTypes.string,
+  debug: PropTypes.bool,
+  // Improve this by adding a full shape() definition for all metadata props
+  // metadata: PropTypes.shape({}),
+  metadata: PropTypes.any,
+  beaconCollectionDomain: PropTypes.string,
+  playbackId: PropTypes.string,
+  playerInitTime: PropTypes.number,
+  preferMse: PropTypes.bool,
+  type: PropTypes.oneOf(allMediaTypes),
+  streamType: PropTypes.oneOf(Object.values(StreamTypes)),
+  startTime: PropTypes.number,
+};
+
+export default MuxAudio;

package/src/use-combined-refs.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef, MutableRefObject } 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>;
+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/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "incremental": true,
+    "target": "ES2019",
+    "module": "es6",
+    "jsx": "react",
+    "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"]
+}