feat: add Mux player

examples/react/src/App.js

@@ -298,6 +298,13 @@ class App extends Component {
                   {this.renderLoadButton('https://vimeo.com/169599296', 'Test B')}
                 </td>
               </tr>
+              <tr>
+                <th>Mux</th>
+                <td>
+                  {this.renderLoadButton('https://stream.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k', 'Test A')}
+                  {this.renderLoadButton('https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008', 'Test B')}
+                </td>
+              </tr>
               <tr>
                 <th>Twitch</th>
                 <td>

src/patterns.js

@@ -3,6 +3,7 @@ import { isMediaStream, isBlobUrl } from './utils'
 export const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//
 export const MATCH_URL_SOUNDCLOUD = /(?:soundcloud\.com|snd\.sc)\/[^.]+$/
 export const MATCH_URL_VIMEO = /vimeo\.com\/(?!progressive_redirect).+/
+export const MATCH_URL_MUX = /stream\.mux\.com\/(\w+)/
 export const MATCH_URL_FACEBOOK = /^https?:\/\/(www\.)?facebook\.com.*\/(video(s)?|watch|story)(\.php?|\/).+$/
 export const MATCH_URL_FACEBOOK_WATCH = /^https?:\/\/fb\.watch\/.+$/
 export const MATCH_URL_STREAMABLE = /streamable\.com\/([a-z0-9]+)$/
@@ -52,6 +53,7 @@ export const canPlay = {
   },
   soundcloud: url => MATCH_URL_SOUNDCLOUD.test(url) && !AUDIO_EXTENSIONS.test(url),
   vimeo: url => MATCH_URL_VIMEO.test(url) && !VIDEO_EXTENSIONS.test(url) && !HLS_EXTENSIONS.test(url),
+  mux: url => MATCH_URL_MUX.test(url),
   facebook: url => MATCH_URL_FACEBOOK.test(url) || MATCH_URL_FACEBOOK_WATCH.test(url),
   streamable: url => MATCH_URL_STREAMABLE.test(url),
   wistia: url => MATCH_URL_WISTIA.test(url),

src/players/Mux.js

@@ -0,0 +1,209 @@
+import React, { Component } from 'react'
+
+import { canPlay, MATCH_URL_MUX } from '../patterns'
+
+const SDK_URL = 'https://cdn.jsdelivr.net/npm/@mux/mux-player@2/dist/mux-player.mjs'
+
+export default class Mux extends Component {
+  static displayName = 'Mux'
+  static canPlay = canPlay.mux
+
+  componentDidMount () {
+    this.props.onMount && this.props.onMount(this)
+    this.addListeners(this.player)
+    const playbackId = this.getPlaybackId(this.props.url) // Ensure src is set in strict mode
+    if (playbackId) {
+      this.player.playbackId = playbackId
+    }
+  }
+
+  componentWillUnmount () {
+    this.player.playbackId = null
+    this.removeListeners(this.player)
+  }
+
+  addListeners (player) {
+    const { playsinline } = this.props
+    player.addEventListener('play', this.onPlay)
+    player.addEventListener('waiting', this.onBuffer)
+    player.addEventListener('playing', this.onBufferEnd)
+    player.addEventListener('pause', this.onPause)
+    player.addEventListener('seeked', this.onSeek)
+    player.addEventListener('ended', this.onEnded)
+    player.addEventListener('error', this.onError)
+    player.addEventListener('ratechange', this.onPlayBackRateChange)
+    player.addEventListener('enterpictureinpicture', this.onEnablePIP)
+    player.addEventListener('leavepictureinpicture', this.onDisablePIP)
+    player.addEventListener('webkitpresentationmodechanged', this.onPresentationModeChange)
+    player.addEventListener('canplay', this.onReady)
+    if (playsinline) {
+      player.setAttribute('playsinline', '')
+    }
+  }
+
+  removeListeners (player) {
+    player.removeEventListener('canplay', this.onReady)
+    player.removeEventListener('play', this.onPlay)
+    player.removeEventListener('waiting', this.onBuffer)
+    player.removeEventListener('playing', this.onBufferEnd)
+    player.removeEventListener('pause', this.onPause)
+    player.removeEventListener('seeked', this.onSeek)
+    player.removeEventListener('ended', this.onEnded)
+    player.removeEventListener('error', this.onError)
+    player.removeEventListener('ratechange', this.onPlayBackRateChange)
+    player.removeEventListener('enterpictureinpicture', this.onEnablePIP)
+    player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
+    player.removeEventListener('canplay', this.onReady)
+  }
+
+  // Proxy methods to prevent listener leaks
+  onReady = (...args) => this.props.onReady(...args)
+  onPlay = (...args) => this.props.onPlay(...args)
+  onBuffer = (...args) => this.props.onBuffer(...args)
+  onBufferEnd = (...args) => this.props.onBufferEnd(...args)
+  onPause = (...args) => this.props.onPause(...args)
+  onEnded = (...args) => this.props.onEnded(...args)
+  onError = (...args) => this.props.onError(...args)
+  onPlayBackRateChange = (event) => this.props.onPlaybackRateChange(event.target.playbackRate)
+  onEnablePIP = (...args) => this.props.onEnablePIP(...args)
+
+  onSeek = e => {
+    this.props.onSeek(e.target.currentTime)
+  }
+
+  async load (url) {
+    const { onError } = this.props
+
+    if (!globalThis.customElements?.get('mux-player')) {
+      try {
+        await import(SDK_URL)
+        this.props.onLoaded()
+      } catch (error) {
+        onError(error)
+      }
+    }
+
+    const [, id] = url.match(MATCH_URL_MUX)
+    this.player.playbackId = id
+  }
+
+  onDurationChange = () => {
+    const duration = this.getDuration()
+    this.props.onDuration(duration)
+  }
+
+  play () {
+    const promise = this.player.play()
+    if (promise) {
+      promise.catch(this.props.onError)
+    }
+  }
+
+  pause () {
+    this.player.pause()
+  }
+
+  stop () {
+    this.player.removeAttribute('src')
+  }
+
+  seekTo (seconds, keepPlaying = true) {
+    this.player.currentTime = seconds
+    if (!keepPlaying) {
+      this.pause()
+    }
+  }
+
+  setVolume (fraction) {
+    this.player.volume = fraction
+  }
+
+  mute = () => {
+    this.player.muted = true
+  }
+
+  unmute = () => {
+    this.player.muted = false
+  }
+
+  enablePIP () {
+    if (this.player.requestPictureInPicture && document.pictureInPictureElement !== this.player) {
+      this.player.requestPictureInPicture()
+    }
+  }
+
+  disablePIP () {
+    if (document.exitPictureInPicture && document.pictureInPictureElement === this.player) {
+      document.exitPictureInPicture()
+    }
+  }
+
+  setPlaybackRate (rate) {
+    try {
+      this.player.playbackRate = rate
+    } catch (error) {
+      this.props.onError(error)
+    }
+  }
+
+  getDuration () {
+    if (!this.player) return null
+    const { duration, seekable } = this.player
+    // on iOS, live streams return Infinity for the duration
+    // so instead we use the end of the seekable timerange
+    if (duration === Infinity && seekable.length > 0) {
+      return seekable.end(seekable.length - 1)
+    }
+    return duration
+  }
+
+  getCurrentTime () {
+    if (!this.player) return null
+    return this.player.currentTime
+  }
+
+  getSecondsLoaded () {
+    if (!this.player) return null
+    const { buffered } = this.player
+    if (buffered.length === 0) {
+      return 0
+    }
+    const end = buffered.end(buffered.length - 1)
+    const duration = this.getDuration()
+    if (end > duration) {
+      return duration
+    }
+    return end
+  }
+
+  getPlaybackId (url) {
+    const [, id] = url.match(MATCH_URL_MUX)
+    return id
+  }
+
+  ref = player => {
+    this.player = player
+  }
+
+  render () {
+    const { url, playing, loop, controls, muted, width, height } = this.props
+    const style = {
+      width: width === 'auto' ? width : '100%',
+      height: height === 'auto' ? height : '100%'
+    }
+    if (controls === false) {
+      style['--controls'] = 'none'
+    }
+    return (
+      <mux-player
+        ref={this.ref}
+        playback-id={this.getPlaybackId(url)}
+        style={style}
+        preload='auto'
+        autoPlay={playing || undefined}
+        muted={muted ? '' : undefined}
+        loop={loop ? '' : undefined}
+      />
+    )
+  }
+}

src/players/index.js

@@ -20,6 +20,12 @@ export default [
     canPlay: canPlay.vimeo,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerVimeo' */'./Vimeo'))
   },
+  {
+    key: 'mux',
+    name: 'Mux',
+    canPlay: canPlay.mux,
+    lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerMux' */'./Mux'))
+  },
   {
     key: 'facebook',
     name: 'Facebook',