UNPKG

@mux/mux-audio-react

Version:

A custom mux audio element for React that Just Works™

8 lines (7 loc) 8.83 kB
{ "version": 3, "sources": ["../src/use-combined-refs.ts", "../src/index.tsx", "../src/env.ts"], "sourcesContent": ["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\n// TS assumed default export was interface def instead of function value (CJP)\nconst defaultUseCombinedRefs = useCombinedRefs;\nexport default defaultUseCombinedRefs;\n", "'use client';\n\nimport { useCombinedRefs } from './use-combined-refs';\nimport React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n allMediaTypes,\n initialize,\n teardown,\n MuxMediaProps,\n StreamTypes,\n PlaybackTypes,\n toMuxVideoURL,\n generatePlayerInitTime,\n CmcdTypes,\n} from '@mux/playback-core';\nimport type { PlaybackCore } 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\nexport const playerSoftwareVersion = getPlayerVersion();\nexport const playerSoftwareName = 'mux-audio-react';\nexport { generatePlayerInitTime };\n\nconst MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>((props, ref) => {\n const { playbackId, src: outerSrc, children, autoPlay, preload, tokens, playbackToken, ...restProps } = props;\n\n const nativeAudioProps = Object.fromEntries(\n Object.entries(restProps).filter(([key]) => !Object.keys(MuxAudio.propTypes as any).includes(key))\n );\n\n const [playerInitTime] = useState(props.playerInitTime ?? generatePlayerInitTime());\n const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(props) ?? outerSrc);\n const playbackCoreRef = useRef<PlaybackCore | undefined>(undefined);\n const innerMediaElRef = useRef<HTMLAudioElement>(null);\n const mediaElRef = useCombinedRefs(innerMediaElRef, ref);\n\n useEffect(() => {\n setSrc(toMuxVideoURL(props) ?? outerSrc);\n }, [outerSrc, playbackId]);\n\n useEffect(() => {\n const propsWithState = {\n // NOTE: Applying playerInitTime first as a simple way of overriding it if/when folks update\n // the value via props after initial load (e.g. when swapping src)\n playerInitTime,\n ...props,\n src,\n playerSoftwareName,\n playerSoftwareVersion,\n autoplay: autoPlay,\n };\n\n // mediaEl required caching here so the ref was not null in the unmount callback.\n let mediaEl = mediaElRef.current;\n if (mediaEl) {\n playbackCoreRef.current = initialize(propsWithState, mediaEl, playbackCoreRef.current);\n }\n\n return () => {\n teardown(mediaEl, playbackCoreRef.current);\n mediaEl = undefined;\n playbackCoreRef.current = undefined;\n };\n }, [src]);\n\n useEffect(() => {\n playbackCoreRef.current?.setAutoplay(autoPlay);\n }, [autoPlay]);\n\n useEffect(() => {\n playbackCoreRef.current?.setPreload(preload);\n }, [preload]);\n\n return (\n /** @TODO Fix types relationships (CJP) */\n <audio ref={mediaElRef as typeof innerMediaElRef} {...nativeAudioProps}>\n {children}\n </audio>\n );\n});\n\nMuxAudio.propTypes = {\n _hlsConfig: PropTypes.any,\n beaconCollectionDomain: PropTypes.string,\n customDomain: PropTypes.string,\n debug: PropTypes.bool,\n disableCookies: PropTypes.bool,\n disableTracking: PropTypes.bool,\n envKey: PropTypes.string,\n errorTranslator: PropTypes.any,\n liveEdgeStart: PropTypes.number,\n maxResolution: PropTypes.oneOf(['720p', '1080p', '1440p', '2160p']),\n metadata: PropTypes.any,\n minResolution: PropTypes.oneOf(['480p', '540p', '720p', '1080p', '1440p', '2160p']),\n playbackId: PropTypes.string,\n playbackToken: PropTypes.string,\n playerInitTime: PropTypes.number,\n preferCmcd: PropTypes.oneOf(Object.values(CmcdTypes)),\n programStartTime: PropTypes.number,\n programEndTime: PropTypes.number,\n assetStartTime: PropTypes.number,\n assetEndTime: PropTypes.number,\n preferPlayback: PropTypes.oneOf(Object.values(PlaybackTypes)),\n renditionOrder: PropTypes.oneOf(['desc']),\n startTime: PropTypes.number,\n streamType: PropTypes.oneOf(Object.values(StreamTypes)),\n targetLiveWindow: PropTypes.number,\n tokens: PropTypes.object,\n type: PropTypes.oneOf(allMediaTypes),\n};\n\nexport default MuxAudio;\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": "aAAA,OAAS,aAAAA,EAAW,UAAAC,MAAgC,QAU7C,IAAMC,EAAmC,IAAIC,IAAS,CAC3D,IAAMC,EAAYH,EAAO,IAAI,EAE7B,OAAAD,EAAU,IAAM,CACdG,EAAK,QAASE,GAAQ,CACfA,IAED,OAAOA,GAAQ,WACjBA,EAAID,EAAU,OAAO,EAErBC,EAAI,QAAUD,EAAU,QAE5B,CAAC,CACH,EAAG,CAACD,CAAI,CAAC,EAEFC,CACT,ECvBA,OAAOE,GAAS,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAOC,MAAe,aACtB,OACE,iBAAAC,EACA,cAAAC,EACA,YAAAC,EAEA,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,0BAAAC,EACA,aAAAC,MACK,qBCXP,IAAMC,EAAsB,IAAM,CAChC,GAAI,CAEF,MAAO,QACT,MAAQ,CAAC,CACT,MAAO,SACT,EAEMC,EAAyBD,EAAoB,EAEtCE,EAAmB,IAAMD,EDW/B,IAAME,EAAwBC,EAAiB,EACzCC,EAAqB,kBAGlC,IAAMC,EAAWC,EAAM,WAAyD,CAACC,EAAOC,IAAQ,CA7BhG,IAAAC,EAAAC,EA8BE,GAAM,CAAE,WAAAC,EAAY,IAAKC,EAAU,SAAAC,EAAU,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,cAAAC,EAAe,GAAGC,CAAU,EAAIX,EAElGY,EAAmB,OAAO,YAC9B,OAAO,QAAQD,CAAS,EAAE,OAAO,CAAC,CAACE,CAAG,IAAM,CAAC,OAAO,KAAKf,EAAS,SAAgB,EAAE,SAASe,CAAG,CAAC,CACnG,EAEM,CAACC,CAAc,EAAIC,GAASb,EAAAF,EAAM,iBAAN,KAAAE,EAAwBc,EAAuB,CAAC,EAC5E,CAACC,EAAKC,CAAM,EAAIH,GAA+BZ,EAAAgB,EAAcnB,CAAK,IAAnB,KAAAG,EAAwBE,CAAQ,EAC/Ee,EAAkBC,EAAiC,MAAS,EAC5DC,EAAkBD,EAAyB,IAAI,EAC/CE,EAAaC,EAAgBF,EAAiBrB,CAAG,EAEvD,OAAAwB,EAAU,IAAM,CA1ClB,IAAAvB,EA2CIgB,GAAOhB,EAAAiB,EAAcnB,CAAK,IAAnB,KAAAE,EAAwBG,CAAQ,CACzC,EAAG,CAACA,EAAUD,CAAU,CAAC,EAEzBqB,EAAU,IAAM,CACd,IAAMC,EAAiB,CAGrB,eAAAZ,EACA,GAAGd,EACH,IAAAiB,EACA,mBAAAU,EACA,sBAAAC,EACA,SAAUrB,CACZ,EAGIsB,EAAUN,EAAW,QACzB,OAAIM,IACFT,EAAgB,QAAUU,EAAWJ,EAAgBG,EAAST,EAAgB,OAAO,GAGhF,IAAM,CACXW,EAASF,EAAST,EAAgB,OAAO,EACzCS,EAAU,OACVT,EAAgB,QAAU,MAC5B,CACF,EAAG,CAACH,CAAG,CAAC,EAERQ,EAAU,IAAM,CAvElB,IAAAvB,GAwEIA,EAAAkB,EAAgB,UAAhB,MAAAlB,EAAyB,YAAYK,EACvC,EAAG,CAACA,CAAQ,CAAC,EAEbkB,EAAU,IAAM,CA3ElB,IAAAvB,GA4EIA,EAAAkB,EAAgB,UAAhB,MAAAlB,EAAyB,WAAWM,EACtC,EAAG,CAACA,CAAO,CAAC,EAIVT,EAAA,cAAC,SAAM,IAAKwB,EAAuC,GAAGX,GACnDN,CACH,CAEJ,CAAC,EAEDR,EAAS,UAAY,CACnB,WAAYkC,EAAU,IACtB,uBAAwBA,EAAU,OAClC,aAAcA,EAAU,OACxB,MAAOA,EAAU,KACjB,eAAgBA,EAAU,KAC1B,gBAAiBA,EAAU,KAC3B,OAAQA,EAAU,OAClB,gBAAiBA,EAAU,IAC3B,cAAeA,EAAU,OACzB,cAAeA,EAAU,MAAM,CAAC,OAAQ,QAAS,QAAS,OAAO,CAAC,EAClE,SAAUA,EAAU,IACpB,cAAeA,EAAU,MAAM,CAAC,OAAQ,OAAQ,OAAQ,QAAS,QAAS,OAAO,CAAC,EAClF,WAAYA,EAAU,OACtB,cAAeA,EAAU,OACzB,eAAgBA,EAAU,OAC1B,WAAYA,EAAU,MAAM,OAAO,OAAOC,CAAS,CAAC,EACpD,iBAAkBD,EAAU,OAC5B,eAAgBA,EAAU,OAC1B,eAAgBA,EAAU,OAC1B,aAAcA,EAAU,OACxB,eAAgBA,EAAU,MAAM,OAAO,OAAOE,CAAa,CAAC,EAC5D,eAAgBF,EAAU,MAAM,CAAC,MAAM,CAAC,EACxC,UAAWA,EAAU,OACrB,WAAYA,EAAU,MAAM,OAAO,OAAOG,CAAW,CAAC,EACtD,iBAAkBH,EAAU,OAC5B,OAAQA,EAAU,OAClB,KAAMA,EAAU,MAAMI,CAAa,CACrC,EAEA,IAAOC,EAAQvC", "names": ["useEffect", "useRef", "useCombinedRefs", "refs", "targetRef", "ref", "React", "useEffect", "useRef", "useState", "PropTypes", "allMediaTypes", "initialize", "teardown", "StreamTypes", "PlaybackTypes", "toMuxVideoURL", "generatePlayerInitTime", "CmcdTypes", "getEnvPlayerVersion", "player_version", "getPlayerVersion", "playerSoftwareVersion", "getPlayerVersion", "playerSoftwareName", "MuxAudio", "React", "props", "ref", "_a", "_b", "playbackId", "outerSrc", "children", "autoPlay", "preload", "tokens", "playbackToken", "restProps", "nativeAudioProps", "key", "playerInitTime", "useState", "generatePlayerInitTime", "src", "setSrc", "toMuxVideoURL", "playbackCoreRef", "useRef", "innerMediaElRef", "mediaElRef", "useCombinedRefs", "useEffect", "propsWithState", "playerSoftwareName", "playerSoftwareVersion", "mediaEl", "initialize", "teardown", "PropTypes", "CmcdTypes", "PlaybackTypes", "StreamTypes", "allMediaTypes", "index_default"] }