@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/src/Video/Video.jsx

@@ -8,21 +8,21 @@ import {
   getTokensPropType,
   variantProp
 } from '@telus-uds/components-base'
-import Spinner from '../Spinner'
+import { Spinner } from '../Spinner/Spinner'
 import { warn, htmlAttrs } from '../utils'
-import VideoSplash from '../shared/VideoSplash/VideoSplash'
-import MiddleControlButton from './MiddleControlButton/MiddleControlButton'
-import ControlBar from './ControlBar/ControlBar'
-import videoText from './videoText'
+import { VideoSplash } from '../shared/VideoSplash/VideoSplash'
+import { MiddleControlButton } from './MiddleControlButton/MiddleControlButton'
+import { ControlBar } from './ControlBar/ControlBar'
+import { videoText } from './videoText'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 // TODO: replace with the actual spinner component from UDS
-const VideoPlayerContainer = styled.div(({ videoBorder, borderColor }) => ({
+const VideoPlayerContainer = styled.div(({ $videoBorder, $borderColor }) => ({
   width: '100%',
   outline: 'none',
   position: 'relative',
-  border: videoBorder ? `20px solid ${borderColor}` : undefined
+  border: $videoBorder ? `20px solid ${$borderColor}` : undefined
 }))
 
 const VideoElementContainer = styled.div({
@@ -37,11 +37,11 @@ const VideoPlayer = styled.video({
   height: '100%'
 })
 
-const VideoOverlayContainer = styled.div(({ mouseInactive }) => ({
+const VideoOverlayContainer = styled.div(({ $mouseInactive }) => ({
   width: '100%',
   height: '100%',
   position: 'absolute',
-  cursor: mouseInactive ? 'none' : 'pointer'
+  cursor: $mouseInactive ? 'none' : 'pointer'
 }))
 
 const VideoSplashContainer = styled.div({
@@ -61,819 +61,835 @@ const VideoOverlayElementContainer = styled.div({
   height: '100%'
 })
 
-const Video = ({
-  analyticsTracking,
-  videoTitle,
-  videoBorder = false,
-  simpleMode = false,
-  copy,
-  posterSrc,
-  crossOrigin,
-  defaultVolume = 100,
-  beginMuted = false,
-  sources,
-  tracks,
-  defaultDesktopQuality = 1,
-  defaultMobileQuality = 1,
-  tokens,
-  variant = {},
-  ...rest
-}) => {
-  const refVideoPlayer = React.useRef({})
-  const refVideoPlayerContainer = React.useRef({})
-  const refKeyboardInstructions = React.useRef({})
-
-  let inactivityTimer = null
-
-  const { borderColor, pauseIcon, playIcon, replayIcon } = useThemeTokens('Video', tokens, variant)
-
-  const playerOptions = {
-    mouseTimeout: simpleMode ? 750 : 1500, // defined in ms
-    keyboardSeekIncrement: 5, // defined in s
-    keyboardVolumeIncrement: 0.1, // from 0 to 1
-    compactModeThreshold: 700 // in px
-  }
-
-  const [videoPlayerState, setVideoPlayerState] = React.useState({
-    loadedSources: null,
-    loadedTracks: null,
-    videoLength: 0,
-    videoCurrentTime: -1,
-    videoBufferEnd: 0,
-    videoUnplayed: true,
-    videoIsBuffering: false,
-    videoCurrentVolume: 1,
-    videoIsPlaying: false,
-    videoIsMuted: false,
-    videoIsFullscreen: false,
-    mouseInactive: false,
-    videoEnded: false,
-    videoQuality: defaultDesktopQuality,
-    videoQualityChanged: false,
-    selectedTextTrack: -1,
-    mouseOnControlBar: false,
-    qualityMenuOpen: false,
-    captionsMenuOpen: false,
-    isMobile: false,
-    videoPlayerWidth: 0,
-    percentageWatched: 'watched 0%'
-  })
-
-  const generateSources = (videoQuality) => {
-    return sources.map((source) => {
-      if (source.qualityRank === videoQuality) {
-        return React.createElement('source', {
-          src: source.source,
-          type: source.mediaType,
-          key: source.source
-        })
-      }
+export const Video = React.forwardRef(
+  (
+    {
+      analyticsTracking,
+      videoTitle,
+      videoBorder = false,
+      simpleMode = false,
+      copy,
+      posterSrc,
+      crossOrigin,
+      defaultVolume = 100,
+      beginMuted = false,
+      sources,
+      tracks,
+      defaultDesktopQuality = 1,
+      defaultMobileQuality = 1,
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const refVideoPlayer = React.useRef({})
+    const refVideoPlayerContainer = React.useRef({})
+    const refKeyboardInstructions = React.useRef({})
+
+    let inactivityTimer = null
+
+    const { borderColor, pauseIcon, playIcon, replayIcon } = useThemeTokens(
+      'Video',
+      tokens,
+      variant
+    )
+
+    const playerOptions = {
+      mouseTimeout: simpleMode ? 750 : 1500, // defined in ms
+      keyboardSeekIncrement: 5, // defined in s
+      keyboardVolumeIncrement: 0.1, // from 0 to 1
+      compactModeThreshold: 700 // in px
+    }
 
-      return undefined
+    const [videoPlayerState, setVideoPlayerState] = React.useState({
+      loadedSources: null,
+      loadedTracks: null,
+      videoLength: 0,
+      videoCurrentTime: -1,
+      videoBufferEnd: 0,
+      videoUnplayed: true,
+      videoIsBuffering: false,
+      videoCurrentVolume: 1,
+      videoIsPlaying: false,
+      videoIsMuted: false,
+      videoIsFullscreen: false,
+      mouseInactive: false,
+      videoEnded: false,
+      videoQuality: defaultDesktopQuality,
+      videoQualityChanged: false,
+      selectedTextTrack: -1,
+      mouseOnControlBar: false,
+      qualityMenuOpen: false,
+      captionsMenuOpen: false,
+      isMobile: false,
+      videoPlayerWidth: 0,
+      percentageWatched: 'watched 0%'
     })
-  }
 
-  const generateTracks = () => {
-    return tracks.map((track) => {
-      return React.createElement('track', {
-        label: track.label,
-        kind: track.kind,
-        srcLang: track.language,
-        src: track.source,
-        default: track.isDefault,
-        key: track.source
+    const generateSources = (videoQuality) => {
+      return sources.map((source) => {
+        if (source.qualityRank === videoQuality) {
+          return React.createElement('source', {
+            src: source.source,
+            type: source.mediaType,
+            key: source.source
+          })
+        }
+
+        return undefined
       })
-    })
-  }
+    }
 
-  const refreshMedia = () => {
-    const { videoUnplayed } = videoPlayerState
+    const generateTracks = () => {
+      return tracks.map((track) => {
+        return React.createElement('track', {
+          label: track.label,
+          kind: track.kind,
+          srcLang: track.language,
+          src: track.source,
+          default: track.isDefault,
+          key: track.source
+        })
+      })
+    }
+
+    const refreshMedia = () => {
+      const { videoUnplayed } = videoPlayerState
+
+      // Handle mobile check
+      const isMobile = navigator && navigator.userAgent.indexOf('Mobi') >= 0
+      if (videoUnplayed && isMobile) {
+        setVideoPlayerState((prevState) => ({
+          ...prevState,
+          isMobile,
+          videoQuality: isMobile ? defaultMobileQuality : defaultDesktopQuality
+        }))
+      }
 
-    // Handle mobile check
-    const isMobile = navigator && navigator.userAgent.indexOf('Mobi') >= 0
-    if (videoUnplayed && isMobile) {
+      // Load media
       setVideoPlayerState((prevState) => ({
         ...prevState,
-        isMobile,
-        videoQuality: isMobile ? defaultMobileQuality : defaultDesktopQuality
+        loadedSources: generateSources(prevState.videoQuality),
+        loadedTracks: tracks && generateTracks()
       }))
     }
 
-    // Load media
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      loadedSources: generateSources(prevState.videoQuality),
-      loadedTracks: tracks && generateTracks()
-    }))
-  }
-
-  const percentageBucket = (percentValue) => {
-    if (percentValue < 25) {
-      return setVideoPlayerState((prevState) => {
-        if (prevState !== 'watched 0%') {
-          return { ...prevState, percentageWatched: 'watched 0%' }
-        }
-        return false
-      })
-    }
-    if (percentValue < 50) {
-      return setVideoPlayerState((prevState) => {
-        if (prevState !== 'watched 25%') {
-          return { ...prevState, percentageWatched: 'watched 25%' }
-        }
-        return false
-      })
-    }
-    if (percentValue < 75) {
-      return setVideoPlayerState((prevState) => {
-        if (prevState !== 'watched 50%') {
-          return { ...prevState, percentageWatched: 'watched 50%' }
-        }
-        return false
-      })
-    }
-    if (percentValue < 100) {
-      return setVideoPlayerState((prevState) => {
-        if (prevState !== 'watched 75%') {
-          return { ...prevState, percentageWatched: 'watched 75%' }
-        }
-        return false
-      })
-    }
-    if (percentValue === 100) {
-      return setVideoPlayerState((prevState) => {
-        if (prevState !== 'watched 100%') {
-          return { ...prevState, percentageWatched: 'watched 100%' }
-        }
-        return false
-      })
+    const percentageBucket = (percentValue) => {
+      if (percentValue < 25) {
+        return setVideoPlayerState((prevState) => {
+          if (prevState !== 'watched 0%') {
+            return { ...prevState, percentageWatched: 'watched 0%' }
+          }
+          return false
+        })
+      }
+      if (percentValue < 50) {
+        return setVideoPlayerState((prevState) => {
+          if (prevState !== 'watched 25%') {
+            return { ...prevState, percentageWatched: 'watched 25%' }
+          }
+          return false
+        })
+      }
+      if (percentValue < 75) {
+        return setVideoPlayerState((prevState) => {
+          if (prevState !== 'watched 50%') {
+            return { ...prevState, percentageWatched: 'watched 50%' }
+          }
+          return false
+        })
+      }
+      if (percentValue < 100) {
+        return setVideoPlayerState((prevState) => {
+          if (prevState !== 'watched 75%') {
+            return { ...prevState, percentageWatched: 'watched 75%' }
+          }
+          return false
+        })
+      }
+      if (percentValue === 100) {
+        return setVideoPlayerState((prevState) => {
+          if (prevState !== 'watched 100%') {
+            return { ...prevState, percentageWatched: 'watched 100%' }
+          }
+          return false
+        })
+      }
+      return false
     }
-    return false
-  }
 
-  // required for analytics
-  const calculatePercentageWatched = () => {
-    const { videoCurrentTime, videoLength, percentageWatched } = videoPlayerState
+    // required for analytics
+    const calculatePercentageWatched = () => {
+      const { videoCurrentTime, videoLength, percentageWatched } = videoPlayerState
 
-    let percentValue = (videoCurrentTime / videoLength) * 100
-    percentValue = Math.round(percentValue)
+      let percentValue = (videoCurrentTime / videoLength) * 100
+      percentValue = Math.round(percentValue)
 
-    const previousValue = percentageWatched
-    percentageBucket(percentValue)
+      const previousValue = percentageWatched
+      percentageBucket(percentValue)
 
-    if (previousValue !== percentageWatched) {
-      const analyticsObject = { name: 'video tracking', details: videoTitle }
-      analyticsObject.action = percentageWatched
-      analyticsTracking(analyticsObject)
+      if (previousValue !== percentageWatched) {
+        const analyticsObject = { name: 'video tracking', details: videoTitle }
+        analyticsObject.action = percentageWatched
+        analyticsTracking(analyticsObject)
+      }
     }
-  }
 
-  const setPlaying = async (isPlaying) => {
-    const videoPlayer = refVideoPlayer.current
+    const setPlaying = async (isPlaying) => {
+      const videoPlayer = refVideoPlayer.current
 
-    if (isPlaying) {
-      await videoPlayer.play()
+      if (isPlaying) {
+        await videoPlayer.play()
 
-      if (analyticsTracking !== undefined && videoTitle) {
-        const intervalId = setInterval(calculatePercentageWatched, 300)
-        setVideoPlayerState((prevState) => ({ ...prevState, intervalId }))
-      }
-    } else {
-      const { intervalId } = videoPlayerState
+        if (analyticsTracking !== undefined && videoTitle) {
+          const intervalId = setInterval(calculatePercentageWatched, 300)
+          setVideoPlayerState((prevState) => ({ ...prevState, intervalId }))
+        }
+      } else {
+        const { intervalId } = videoPlayerState
 
-      videoPlayer.pause()
-      clearInterval(intervalId)
+        videoPlayer.pause()
+        clearInterval(intervalId)
+      }
     }
-  }
 
-  const updateAnalyticsData = () => {
-    const { videoIsPlaying, percentageWatched } = videoPlayerState
+    const updateAnalyticsData = () => {
+      const { videoIsPlaying, percentageWatched } = videoPlayerState
 
-    const analyticsObject = { name: 'video tracking', details: videoTitle }
-    analyticsObject.action = videoIsPlaying ? 'play' : 'pause'
-    if (percentageWatched !== 'watched 100%') {
-      analyticsTracking(analyticsObject)
+      const analyticsObject = { name: 'video tracking', details: videoTitle }
+      analyticsObject.action = videoIsPlaying ? 'play' : 'pause'
+      if (percentageWatched !== 'watched 100%') {
+        analyticsTracking(analyticsObject)
+      }
     }
-  }
-
-  const setSeek = (seconds) => {
-    refVideoPlayer.current.currentTime = seconds
-  }
 
-  const qualitySwitchSeek = () => {
-    const { videoCurrentTime } = videoPlayerState
-
-    // The following setState gets the video length on the splash screen in iOS
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      videoLength: refVideoPlayer.current.duration
-    }))
-
-    if (videoCurrentTime > -1) {
-      setSeek(videoCurrentTime)
+    const setSeek = (seconds) => {
+      refVideoPlayer.current.currentTime = seconds
     }
-  }
 
-  const updateVideoTimestamp = () => {
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      videoCurrentTime: refVideoPlayer.current.currentTime
-    }))
-  }
+    const qualitySwitchSeek = () => {
+      const { videoCurrentTime } = videoPlayerState
 
-  const initializeVideoDuration = () => {
-    // This will run on every load() call, meaning it will also run when video quality is changed.
-    setVideoPlayerState((prevState) => {
-      return {
+      // The following setState gets the video length on the splash screen in iOS
+      setVideoPlayerState((prevState) => ({
         ...prevState,
-        videoLength: refVideoPlayer.current.duration,
-        videoBufferEnd:
-          refVideoPlayer.current.buffered.length === 0
-            ? 0
-            : refVideoPlayer.current.buffered.end(refVideoPlayer.current.buffered.length - 1),
-        videoUnplayed: refVideoPlayer.current.played.length === 0 && !prevState.videoQualityChanged
-      }
-    })
-
-    const { videoQualityChanged, videoIsPlaying } = videoPlayerState
+        videoLength: refVideoPlayer.current.duration
+      }))
 
-    // Prevents an IE 11 bug where the video will not continue playing after a quality switch
-    if (videoQualityChanged && videoIsPlaying) {
-      setPlaying(true)
+      if (videoCurrentTime > -1) {
+        setSeek(videoCurrentTime)
+      }
     }
-  }
 
-  const clearInactivityTimer = () => {
-    setVideoPlayerState((prevState) => ({ ...prevState, mouseInactive: false }))
-    clearTimeout(inactivityTimer)
-  }
-
-  const setAsBuffering = () => {
-    // Prevent IE infinite buffer bug with readyState
-    if (refVideoPlayer.current.readyState < 4) {
-      clearInactivityTimer()
+    const updateVideoTimestamp = () => {
       setVideoPlayerState((prevState) => ({
         ...prevState,
-        videoIsPlaying: false,
-        videoIsBuffering: true,
-        mouseInactive: true
+        videoCurrentTime: refVideoPlayer.current.currentTime
       }))
-      setPlaying(false)
     }
-  }
 
-  const playAfterBuffer = () => {
-    const { videoIsBuffering, videoCurrentTime, videoQualityChanged } = videoPlayerState
+    const initializeVideoDuration = () => {
+      // This will run on every load() call, meaning it will also run when video quality is changed.
+      setVideoPlayerState((prevState) => {
+        return {
+          ...prevState,
+          videoLength: refVideoPlayer.current.duration,
+          videoBufferEnd:
+            refVideoPlayer.current.buffered.length === 0
+              ? 0
+              : refVideoPlayer.current.buffered.end(refVideoPlayer.current.buffered.length - 1),
+          videoUnplayed:
+            refVideoPlayer.current.played.length === 0 && !prevState.videoQualityChanged
+        }
+      })
 
-    if (videoIsBuffering && videoCurrentTime !== -1 && !videoQualityChanged) {
-      setPlaying(true)
-      setVideoPlayerState((prevState) => ({ ...prevState, videoIsBuffering: false }))
-    }
-  }
+      const { videoQualityChanged, videoIsPlaying } = videoPlayerState
 
-  const resetInactivityTimer = () => {
-    clearInactivityTimer()
+      // Prevents an IE 11 bug where the video will not continue playing after a quality switch
+      if (videoQualityChanged && videoIsPlaying) {
+        setPlaying(true)
+      }
+    }
 
-    const { videoQualityChanged, videoIsPlaying, mouseOnControlBar } = videoPlayerState
+    const clearInactivityTimer = () => {
+      setVideoPlayerState((prevState) => ({ ...prevState, mouseInactive: false }))
+      clearTimeout(inactivityTimer)
+    }
 
-    if (!videoQualityChanged && videoIsPlaying) {
-      inactivityTimer = setTimeout(() => {
-        if (!mouseOnControlBar) {
-          setVideoPlayerState((prevState) => ({ ...prevState, mouseInactive: true }))
-        }
-      }, playerOptions.mouseTimeout)
+    const setAsBuffering = () => {
+      // Prevent IE infinite buffer bug with readyState
+      if (refVideoPlayer.current.readyState < 4) {
+        clearInactivityTimer()
+        setVideoPlayerState((prevState) => ({
+          ...prevState,
+          videoIsPlaying: false,
+          videoIsBuffering: true,
+          mouseInactive: true
+        }))
+        setPlaying(false)
+      }
     }
-  }
 
-  const setAsPlaying = () => {
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      videoIsPlaying: true,
-      videoIsBuffering: false,
-      videoEnded: false,
-      videoUnplayed: false,
-      videoQualityChanged: false
-    }))
+    const playAfterBuffer = () => {
+      const { videoIsBuffering, videoCurrentTime, videoQualityChanged } = videoPlayerState
 
-    if (analyticsTracking) {
-      updateAnalyticsData()
+      if (videoIsBuffering && videoCurrentTime !== -1 && !videoQualityChanged) {
+        setPlaying(true)
+        setVideoPlayerState((prevState) => ({ ...prevState, videoIsBuffering: false }))
+      }
     }
 
-    resetInactivityTimer()
-  }
+    const resetInactivityTimer = () => {
+      clearInactivityTimer()
 
-  const setAsPaused = () => {
-    clearInactivityTimer()
-    setVideoPlayerState((prevState) => ({ ...prevState, videoIsPlaying: false }))
+      const { videoQualityChanged, videoIsPlaying, mouseOnControlBar } = videoPlayerState
 
-    if (analyticsTracking) {
-      updateAnalyticsData()
+      if (!videoQualityChanged && videoIsPlaying) {
+        inactivityTimer = setTimeout(() => {
+          if (!mouseOnControlBar) {
+            setVideoPlayerState((prevState) => ({ ...prevState, mouseInactive: true }))
+          }
+        }, playerOptions.mouseTimeout)
+      }
     }
-  }
-
-  const returnFromEndState = () => {
-    resetInactivityTimer()
-    setVideoPlayerState((prevState) => ({ ...prevState, videoEnded: false }))
-  }
 
-  const setAsEnded = () => {
-    setVideoPlayerState((prevState) => ({ ...prevState, videoIsPlaying: false, videoEnded: true }))
-    clearInactivityTimer()
-  }
-
-  const updateBufferProgress = () => {
-    const { videoCurrentTime, videoQualityChanged } = videoPlayerState
-    const videoPlayer = refVideoPlayer.current
-    if (videoPlayer && videoPlayer.readyState >= 2) {
-      const { buffered } = videoPlayer
+    const setAsPlaying = () => {
       setVideoPlayerState((prevState) => ({
         ...prevState,
-        videoBufferEnd: buffered.length === 0 ? 0 : buffered.end(buffered.length - 1)
+        videoIsPlaying: true,
+        videoIsBuffering: false,
+        videoEnded: false,
+        videoUnplayed: false,
+        videoQualityChanged: false
       }))
-    } else if (videoCurrentTime !== -1 && !videoQualityChanged && !videoPlayer) {
+
+      if (analyticsTracking) {
+        updateAnalyticsData()
+      }
+
+      resetInactivityTimer()
+    }
+
+    const setAsPaused = () => {
+      clearInactivityTimer()
+      setVideoPlayerState((prevState) => ({ ...prevState, videoIsPlaying: false }))
+
+      if (analyticsTracking) {
+        updateAnalyticsData()
+      }
+    }
+
+    const returnFromEndState = () => {
+      resetInactivityTimer()
+      setVideoPlayerState((prevState) => ({ ...prevState, videoEnded: false }))
+    }
+
+    const setAsEnded = () => {
       setVideoPlayerState((prevState) => ({
         ...prevState,
         videoIsPlaying: false,
-        videoIsBuffering: true
+        videoEnded: true
       }))
+      clearInactivityTimer()
     }
-  }
 
-  const updateVolumeState = () => {
-    resetInactivityTimer()
+    const updateBufferProgress = () => {
+      const { videoCurrentTime, videoQualityChanged } = videoPlayerState
+      const videoPlayer = refVideoPlayer.current
+      if (videoPlayer && videoPlayer.readyState >= 2) {
+        const { buffered } = videoPlayer
+        setVideoPlayerState((prevState) => ({
+          ...prevState,
+          videoBufferEnd: buffered.length === 0 ? 0 : buffered.end(buffered.length - 1)
+        }))
+      } else if (videoCurrentTime !== -1 && !videoQualityChanged && !videoPlayer) {
+        setVideoPlayerState((prevState) => ({
+          ...prevState,
+          videoIsPlaying: false,
+          videoIsBuffering: true
+        }))
+      }
+    }
 
-    const videoPlayer = refVideoPlayer.current
+    const updateVolumeState = () => {
+      resetInactivityTimer()
 
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      videoCurrentVolume: videoPlayer.volume,
-      videoIsMuted: videoPlayer.muted
-    }))
-  }
+      const videoPlayer = refVideoPlayer.current
 
-  const getPlayerWidth = () => {
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      videoPlayerWidth: refVideoPlayerContainer.current.offsetWidth
-    }))
-  }
+      setVideoPlayerState((prevState) => ({
+        ...prevState,
+        videoCurrentVolume: videoPlayer.volume,
+        videoIsMuted: videoPlayer.muted
+      }))
+    }
 
-  const setMouseOnControlBar = (isOver) => {
-    setVideoPlayerState((prevState) => ({ ...prevState, mouseOnControlBar: isOver }))
-  }
+    const getPlayerWidth = () => {
+      setVideoPlayerState((prevState) => ({
+        ...prevState,
+        videoPlayerWidth: refVideoPlayerContainer.current.offsetWidth
+      }))
+    }
+
+    const setMouseOnControlBar = (isOver) => {
+      setVideoPlayerState((prevState) => ({ ...prevState, mouseOnControlBar: isOver }))
+    }
 
-  const togglePlayPause = () => {
-    const { videoIsPlaying } = videoPlayerState
+    const togglePlayPause = () => {
+      const { videoIsPlaying } = videoPlayerState
 
-    setPlaying(!videoIsPlaying)
-  }
+      setPlaying(!videoIsPlaying)
+    }
 
-  const setTextTracks = (trackNumber) => {
-    const { textTracks } = refVideoPlayer.current
+    const setTextTracks = (trackNumber) => {
+      const { textTracks } = refVideoPlayer.current
 
-    for (let i = 0; i < textTracks.length; i += 1) {
-      textTracks[i].mode = i === trackNumber ? 'showing' : 'hidden'
+      for (let i = 0; i < textTracks.length; i += 1) {
+        textTracks[i].mode = i === trackNumber ? 'showing' : 'hidden'
+      }
+      setVideoPlayerState((prevState) => ({ ...prevState, selectedTextTrack: trackNumber }))
     }
-    setVideoPlayerState((prevState) => ({ ...prevState, selectedTextTrack: trackNumber }))
-  }
 
-  const beginVideo = () => {
-    setTextTracks(-1)
-    setPlaying(true)
-    refVideoPlayerContainer.current.focus()
-  }
+    const beginVideo = () => {
+      setTextTracks(-1)
+      setPlaying(true)
+      refVideoPlayerContainer.current.focus()
+    }
 
-  const closeSubMenus = () => {
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      qualityMenuOpen: false,
-      captionsMenuOpen: false
-    }))
-  }
+    const closeSubMenus = () => {
+      setVideoPlayerState((prevState) => ({
+        ...prevState,
+        qualityMenuOpen: false,
+        captionsMenuOpen: false
+      }))
+    }
 
-  const incrementSeek = (seconds) => {
-    refVideoPlayer.current.currentTime += seconds
-  }
+    const incrementSeek = (seconds) => {
+      refVideoPlayer.current.currentTime += seconds
+    }
 
-  const replayVideo = async () => {
-    setSeek(0)
-    togglePlayPause()
-  }
+    const replayVideo = async () => {
+      setSeek(0)
+      togglePlayPause()
+    }
 
-  const incrementVolume = (amount) => {
-    refVideoPlayer.current.volume += amount
-  }
+    const incrementVolume = (amount) => {
+      refVideoPlayer.current.volume += amount
+    }
 
-  const setVolume = (amount) => {
-    refVideoPlayer.current.volume = amount
-  }
+    const setVolume = (amount) => {
+      refVideoPlayer.current.volume = amount
+    }
 
-  const toggleMute = () => {
-    refVideoPlayer.current.muted = !refVideoPlayer.current.muted
-  }
+    const toggleMute = () => {
+      refVideoPlayer.current.muted = !refVideoPlayer.current.muted
+    }
 
-  const setCaptionsMenuOpen = (isOpen) => {
-    setVideoPlayerState((prevState) => ({ ...prevState, captionsMenuOpen: isOpen }))
-  }
+    const setCaptionsMenuOpen = (isOpen) => {
+      setVideoPlayerState((prevState) => ({ ...prevState, captionsMenuOpen: isOpen }))
+    }
 
-  const toggleFullscreen = () => {
-    if (fscreen.fullscreenEnabled) {
-      if (fscreen.fullscreenElement === null) {
-        fscreen.requestFullscreen(refVideoPlayerContainer.current)
-      } else {
-        fscreen.exitFullscreen()
+    const toggleFullscreen = () => {
+      if (fscreen.fullscreenEnabled) {
+        if (fscreen.fullscreenElement === null) {
+          fscreen.requestFullscreen(refVideoPlayerContainer.current)
+        } else {
+          fscreen.exitFullscreen()
+        }
+        setVideoPlayerState((prevState) => {
+          return { ...prevState, videoIsFullscreen: !prevState.videoIsFullscreen }
+        })
       }
-      setVideoPlayerState((prevState) => {
-        return { ...prevState, videoIsFullscreen: !prevState.videoIsFullscreen }
-      })
     }
-  }
 
-  const setVideoQuality = async (newVideoQuality) => {
-    await setPlaying(false)
-    setVideoPlayerState((prevState) => ({
-      ...prevState,
-      videoLength: 0,
-      videoBufferEnd: 0,
-      videoQuality: newVideoQuality,
-      loadedSources: generateSources(newVideoQuality),
-      loadedTracks: tracks && generateTracks(),
-      videoQualityChanged: true
-    }))
-    await refVideoPlayer.current.load()
-    resetInactivityTimer()
-    setSeek(videoPlayerState.videoCurrentTime)
-  }
-
-  const setQualityMenuOpen = (isOpen) => {
-    setVideoPlayerState((prevState) => ({ ...prevState, qualityMenuOpen: isOpen }))
-  }
+    const setVideoQuality = async (newVideoQuality) => {
+      await setPlaying(false)
+      setVideoPlayerState((prevState) => ({
+        ...prevState,
+        videoLength: 0,
+        videoBufferEnd: 0,
+        videoQuality: newVideoQuality,
+        loadedSources: generateSources(newVideoQuality),
+        loadedTracks: tracks && generateTracks(),
+        videoQualityChanged: true
+      }))
+      await refVideoPlayer.current.load()
+      resetInactivityTimer()
+      setSeek(videoPlayerState.videoCurrentTime)
+    }
 
-  const handleClick = (event) => {
-    resetInactivityTimer()
+    const setQualityMenuOpen = (isOpen) => {
+      setVideoPlayerState((prevState) => ({ ...prevState, qualityMenuOpen: isOpen }))
+    }
 
-    // This allows playing videos within components that act like
-    // links, e.g. `PreviewCard`, `StoryCard`, etc.
-    event?.preventDefault()
-    event?.stopPropagation()
-  }
+    const handleClick = (event) => {
+      resetInactivityTimer()
 
-  const handleKeyboard = (event) => {
-    const { videoLength, videoCurrentVolume } = videoPlayerState
+      // This allows playing videos within components that act like
+      // links, e.g. `PreviewCard`, `StoryCard`, etc.
+      event?.preventDefault()
+      event?.stopPropagation()
+    }
 
-    const key = event.key || event.keyCode
+    const handleKeyboard = (event) => {
+      const { videoLength, videoCurrentVolume } = videoPlayerState
 
-    // *** Begin Seek & Play Control ****
-    if (key === ' ' || key === 32 || key === 'k' || key === 75) {
-      event.preventDefault()
-      resetInactivityTimer()
-      togglePlayPause()
-    }
+      const key = event.key || event.keyCode
 
-    // Disables all keys except for play/pause when in simpleMode
-    if (!simpleMode) {
-      if (key === 'ArrowRight' || key === 39 || key === '.' || key === 190) {
+      // *** Begin Seek & Play Control ****
+      if (key === ' ' || key === 32 || key === 'k' || key === 75) {
+        event.preventDefault()
         resetInactivityTimer()
-
-        incrementSeek(playerOptions.keyboardSeekIncrement)
+        togglePlayPause()
       }
 
-      if (key === 'ArrowLeft' || key === 37 || key === ',' || key === 188) {
-        resetInactivityTimer()
+      // Disables all keys except for play/pause when in simpleMode
+      if (!simpleMode) {
+        if (key === 'ArrowRight' || key === 39 || key === '.' || key === 190) {
+          resetInactivityTimer()
 
-        incrementSeek(-playerOptions.keyboardSeekIncrement)
-      }
+          incrementSeek(playerOptions.keyboardSeekIncrement)
+        }
 
-      if (key === '0' || key === 48 || key === 'numpad 0' || key === 96) {
-        setSeek(0)
-      }
+        if (key === 'ArrowLeft' || key === 37 || key === ',' || key === 188) {
+          resetInactivityTimer()
 
-      if (key === '1' || key === 49 || key === 'numpad 1' || key === 97) {
-        setSeek(videoLength * 0.1)
-      }
+          incrementSeek(-playerOptions.keyboardSeekIncrement)
+        }
 
-      if (key === '2' || key === 50 || key === 'numpad 2' || key === 98) {
-        setSeek(videoLength * 0.2)
-      }
+        if (key === '0' || key === 48 || key === 'numpad 0' || key === 96) {
+          setSeek(0)
+        }
 
-      if (key === '3' || key === 51 || key === 'numpad 3' || key === 99) {
-        setSeek(videoLength * 0.3)
-      }
+        if (key === '1' || key === 49 || key === 'numpad 1' || key === 97) {
+          setSeek(videoLength * 0.1)
+        }
 
-      if (key === '4' || key === 52 || key === 'numpad 4' || key === 100) {
-        setSeek(videoLength * 0.4)
-      }
+        if (key === '2' || key === 50 || key === 'numpad 2' || key === 98) {
+          setSeek(videoLength * 0.2)
+        }
 
-      if (key === '5' || key === 53 || key === 'numpad 5' || key === 101) {
-        setSeek(videoLength * 0.5)
-      }
+        if (key === '3' || key === 51 || key === 'numpad 3' || key === 99) {
+          setSeek(videoLength * 0.3)
+        }
 
-      if (key === '6' || key === 54 || key === 'numpad 6' || key === 102) {
-        setSeek(videoLength * 0.6)
-      }
+        if (key === '4' || key === 52 || key === 'numpad 4' || key === 100) {
+          setSeek(videoLength * 0.4)
+        }
 
-      if (key === '7' || key === 55 || key === 'numpad 7' || key === 103) {
-        setSeek(videoLength * 0.7)
-      }
+        if (key === '5' || key === 53 || key === 'numpad 5' || key === 101) {
+          setSeek(videoLength * 0.5)
+        }
 
-      if (key === '8' || key === 56 || key === 'numpad 8' || key === 104) {
-        setSeek(videoLength * 0.8)
-      }
+        if (key === '6' || key === 54 || key === 'numpad 6' || key === 102) {
+          setSeek(videoLength * 0.6)
+        }
 
-      if (key === '9' || key === 57 || key === 'numpad 9' || key === 105) {
-        setSeek(videoLength * 0.9)
-      }
+        if (key === '7' || key === 55 || key === 'numpad 7' || key === 103) {
+          setSeek(videoLength * 0.7)
+        }
 
-      // **** End Seek & Play Control ****
+        if (key === '8' || key === 56 || key === 'numpad 8' || key === 104) {
+          setSeek(videoLength * 0.8)
+        }
 
-      // **** Begin Volume Control ****
+        if (key === '9' || key === 57 || key === 'numpad 9' || key === 105) {
+          setSeek(videoLength * 0.9)
+        }
 
-      const { keyboardVolumeIncrement } = playerOptions
+        // **** End Seek & Play Control ****
 
-      if (
-        key === 'ArrowUp' ||
-        key === 38 ||
-        key === '=' ||
-        key === 187 ||
-        key === 'add' ||
-        key === 107
-      ) {
-        resetInactivityTimer()
+        // **** Begin Volume Control ****
 
-        if (videoCurrentVolume + keyboardVolumeIncrement < 1) {
-          incrementVolume(keyboardVolumeIncrement)
-        } else {
-          setVolume(1)
-        }
-      }
+        const { keyboardVolumeIncrement } = playerOptions
 
-      if (
-        key === 'ArrowDown' ||
-        key === 40 ||
-        key === '-' ||
-        key === 189 ||
-        key === 'subtract' ||
-        key === 109
-      ) {
-        resetInactivityTimer()
+        if (
+          key === 'ArrowUp' ||
+          key === 38 ||
+          key === '=' ||
+          key === 187 ||
+          key === 'add' ||
+          key === 107
+        ) {
+          resetInactivityTimer()
 
-        if (videoCurrentVolume - keyboardVolumeIncrement > 0) {
-          incrementVolume(-keyboardVolumeIncrement)
-        } else {
-          setVolume(0)
+          if (videoCurrentVolume + keyboardVolumeIncrement < 1) {
+            incrementVolume(keyboardVolumeIncrement)
+          } else {
+            setVolume(1)
+          }
         }
-      }
 
-      if (key === 'm' || key === 77) {
-        resetInactivityTimer()
+        if (
+          key === 'ArrowDown' ||
+          key === 40 ||
+          key === '-' ||
+          key === 189 ||
+          key === 'subtract' ||
+          key === 109
+        ) {
+          resetInactivityTimer()
+
+          if (videoCurrentVolume - keyboardVolumeIncrement > 0) {
+            incrementVolume(-keyboardVolumeIncrement)
+          } else {
+            setVolume(0)
+          }
+        }
 
-        toggleMute()
-      }
+        if (key === 'm' || key === 77) {
+          resetInactivityTimer()
 
-      if (key === 'f' || key === 70) {
-        resetInactivityTimer()
+          toggleMute()
+        }
 
-        toggleFullscreen()
-      }
+        if (key === 'f' || key === 70) {
+          resetInactivityTimer()
 
-      if (key === 'Escape' || key === 27) {
-        // Resets focus back to container if user is focused on ControlBar button
-        refVideoPlayerContainer.current.focus()
-        closeSubMenus()
-      }
+          toggleFullscreen()
+        }
+
+        if (key === 'Escape' || key === 27) {
+          // Resets focus back to container if user is focused on ControlBar button
+          refVideoPlayerContainer.current.focus()
+          closeSubMenus()
+        }
 
-      if (key === 'q' || key === 81) {
-        refKeyboardInstructions.current.focus()
+        if (key === 'q' || key === 81) {
+          refKeyboardInstructions.current.focus()
+        }
       }
     }
-  }
 
-  // Prepares video and caption files
-  React.useEffect(() => {
-    refreshMedia()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    // Prepares video and caption files
+    React.useEffect(() => {
+      refreshMedia()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
 
-  // Initial Setup after loading sources
-  React.useEffect(() => {
-    const { loadedSources, loadedTracks } = videoPlayerState
+    // Initial Setup after loading sources
+    React.useEffect(() => {
+      const { loadedSources, loadedTracks } = videoPlayerState
 
-    if (loadedSources && loadedTracks) {
-      const videoPlayer = refVideoPlayer.current
+      if (loadedSources && loadedTracks) {
+        const videoPlayer = refVideoPlayer.current
 
-      // Initializes Settings
-      videoPlayer.volume = defaultVolume / 100
-      videoPlayer.muted = beginMuted || simpleMode
+        // Initializes Settings
+        videoPlayer.volume = defaultVolume / 100
+        videoPlayer.muted = beginMuted || simpleMode
 
-      getPlayerWidth()
+        getPlayerWidth()
 
-      // Reports when the video has completed loading metadata (used for seeking after quality switch)
-      videoPlayer.onloadedmetadata = qualitySwitchSeek
+        // Reports when the video has completed loading metadata (used for seeking after quality switch)
+        videoPlayer.onloadedmetadata = qualitySwitchSeek
 
-      // Reports the video's duration when the video player is ready to play
-      videoPlayer.oncanplay = initializeVideoDuration
+        // Reports the video's duration when the video player is ready to play
+        videoPlayer.oncanplay = initializeVideoDuration
 
-      // Reports the video's width on resize
-      window.addEventListener('resize', getPlayerWidth)
+        // Reports the video's width on resize
+        window.addEventListener('resize', getPlayerWidth)
 
-      // Reports the current video timestamp
-      videoPlayer.ontimeupdate = updateVideoTimestamp
+        // Reports the current video timestamp
+        videoPlayer.ontimeupdate = updateVideoTimestamp
 
-      // Reports when the video has paused due to buffering
-      videoPlayer.onwaiting = setAsBuffering
+        // Reports when the video has paused due to buffering
+        videoPlayer.onwaiting = setAsBuffering
 
-      // Reports the video's latest buffering progress if video player is properly initialized
-      videoPlayer.onprogress = updateBufferProgress
+        // Reports the video's latest buffering progress if video player is properly initialized
+        videoPlayer.onprogress = updateBufferProgress
 
-      // Reports when the video has recovered from buffering
-      videoPlayer.oncanplaythrough = playAfterBuffer
+        // Reports when the video has recovered from buffering
+        videoPlayer.oncanplaythrough = playAfterBuffer
 
-      // Reports when the video has ended
-      videoPlayer.onended = setAsEnded
+        // Reports when the video has ended
+        videoPlayer.onended = setAsEnded
 
-      // Reports when the video is playing and disables the buffer spinner (even if buffering is still needed)
-      videoPlayer.onplay = setAsPlaying
+        // Reports when the video is playing and disables the buffer spinner (even if buffering is still needed)
+        videoPlayer.onplay = setAsPlaying
 
-      // Reports when the video has been paused
-      videoPlayer.onpause = setAsPaused
+        // Reports when the video has been paused
+        videoPlayer.onpause = setAsPaused
 
-      // Reports when the video has been seeked
-      videoPlayer.onseeked = returnFromEndState
+        // Reports when the video has been seeked
+        videoPlayer.onseeked = returnFromEndState
 
-      // Reports when the video's volume has been changed, or if the video has been muted
-      videoPlayer.onvolumechange = updateVolumeState
+        // Reports when the video's volume has been changed, or if the video has been muted
+        videoPlayer.onvolumechange = updateVolumeState
 
-      // Video Analytics
-      if (
-        (analyticsTracking !== undefined && videoTitle === undefined) ||
-        (analyticsTracking === undefined && videoTitle !== undefined)
-      ) {
-        warn(
-          'Video',
-          'Both the `analyticsTracking` and `videoTitle` props must be defined in order to return a proper analytics object.'
-        )
-      }
+        // Video Analytics
+        if (
+          (analyticsTracking !== undefined && videoTitle === undefined) ||
+          (analyticsTracking === undefined && videoTitle !== undefined)
+        ) {
+          warn(
+            'Video',
+            'Both the `analyticsTracking` and `videoTitle` props must be defined in order to return a proper analytics object.'
+          )
+        }
 
-      return () => {
-        clearInactivityTimer()
-        window.removeEventListener('resize', getPlayerWidth)
-        clearInterval(videoPlayerState.intervalId)
+        return () => {
+          clearInactivityTimer()
+          window.removeEventListener('resize', getPlayerWidth)
+          clearInterval(videoPlayerState.intervalId)
+        }
       }
-    }
 
-    return () => {} // returning a noop for sake of consistency
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoPlayerState.loadedSources, videoPlayerState.loadedTracks])
-
-  const {
-    loadedSources,
-    loadedTracks,
-    isMobile,
-    mouseInactive,
-    selectedTextTrack,
-    qualityMenuOpen,
-    captionsMenuOpen,
-    videoUnplayed,
-    videoEnded,
-    videoIsBuffering,
-    videoIsPlaying,
-    videoIsFullscreen,
-    videoIsMuted,
-    videoQualityChanged,
-    videoLength,
-    videoBufferEnd,
-    videoCurrentTime,
-    videoCurrentVolume,
-    videoQuality,
-    videoPlayerWidth
-  } = videoPlayerState
-  const { style, className, as, ...safeRest } = rest
-
-  return (
-    <VideoPlayerContainer
-      {...safeRest}
-      ref={refVideoPlayerContainer}
-      videoBorder={videoBorder}
-      borderColor={borderColor}
-      onMouseMove={resetInactivityTimer}
-      onClick={handleClick}
-      onKeyDown={handleKeyboard}
-      tabIndex="0"
-      aria-label={simpleMode ? videoText[copy].videoSelectedSimple : videoText[copy].videoSelected}
-      data-testid="videoPlayer"
-      {...selectProps(rest)}
-    >
-      <VideoOverlayContainer
-        mouseInactive={mouseInactive}
-        onClick={() => {
-          closeSubMenus()
-          togglePlayPause()
-        }}
+      return () => {} // returning a noop for sake of consistency
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoPlayerState.loadedSources, videoPlayerState.loadedTracks])
+
+    const {
+      loadedSources,
+      loadedTracks,
+      isMobile,
+      mouseInactive,
+      selectedTextTrack,
+      qualityMenuOpen,
+      captionsMenuOpen,
+      videoUnplayed,
+      videoEnded,
+      videoIsBuffering,
+      videoIsPlaying,
+      videoIsFullscreen,
+      videoIsMuted,
+      videoQualityChanged,
+      videoLength,
+      videoBufferEnd,
+      videoCurrentTime,
+      videoCurrentVolume,
+      videoQuality,
+      videoPlayerWidth
+    } = videoPlayerState
+    const { style, className, as, ...safeRest } = rest
+
+    return (
+      <VideoPlayerContainer
+        {...safeRest}
+        ref={refVideoPlayerContainer}
+        $videoBorder={videoBorder}
+        $borderColor={borderColor}
+        onMouseMove={resetInactivityTimer}
+        onClick={handleClick}
+        onKeyDown={handleKeyboard}
+        tabIndex="0"
+        aria-label={
+          simpleMode ? videoText[copy].videoSelectedSimple : videoText[copy].videoSelected
+        }
+        data-testid="videoPlayer"
+        {...selectProps(rest)}
       >
-        {/* ======== Video Splash Screen ======== */}
-        {videoUnplayed && !videoQualityChanged && (
-          <VideoSplashContainer>
-            <VideoSplash
-              poster={posterSrc}
-              copy={copy}
-              videoLength={videoLength}
-              simpleMode={simpleMode}
-              iconLeftOffsetPx={2}
-              onClick={beginVideo}
-            />
-          </VideoSplashContainer>
-        )}
-        {/* =================================== */}
-        <VideoOverlayElementContainer>
-          {/* ======== Replay Button ======== */}
-          {videoEnded && <MiddleControlButton icon={replayIcon} onClick={replayVideo} />}
-          {/* ================================ */}
-          {/* ======== Middle Play/Pause Button ======= */}
-          {!videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && (
-            <MiddleControlButton
-              icon={videoIsPlaying ? pauseIcon : playIcon}
-              isHidden={mouseInactive}
-              onClick={togglePlayPause}
-              onFocus={resetInactivityTimer}
-            />
-          )}
-          {/* ========================================== */}
-
-          {/* ======== Spinner Display ======= */}
-          {videoIsBuffering && !isMobile && <Spinner show />}
-          {/* ================================ */}
-        </VideoOverlayElementContainer>
-      </VideoOverlayContainer>
-
-      {/* ======== Video Element ======= */}
-      <VideoElementContainer videoIsFullscreen={videoIsFullscreen} mouseInactive={mouseInactive}>
-        <VideoPlayer
-          ref={refVideoPlayer}
-          controls={isMobile}
-          videoIsFullscreen={videoIsFullscreen}
-          crossOrigin={crossOrigin}
-          playsinline
+        <VideoOverlayContainer
+          $mouseInactive={mouseInactive}
+          onClick={() => {
+            closeSubMenus()
+            togglePlayPause()
+          }}
         >
-          {loadedSources}
-          {loadedTracks}
-          Your browser does not support the video tag.
-        </VideoPlayer>
-      </VideoElementContainer>
-      {/* ============================== */}
-
-      {!simpleMode && (
-        <ControlBar
-          videoPlayer={refVideoPlayer}
-          videoPlayerContainer={refVideoPlayerContainer}
-          sources={sources}
-          tracks={tracks}
-          videoLength={videoLength}
-          videoBufferEnd={videoBufferEnd}
-          videoCurrentTime={videoCurrentTime}
-          videoPlaying={refVideoPlayer.current !== null ? !refVideoPlayer.current.paused : false}
-          videoUnplayed={videoUnplayed}
-          videoCurrentVolume={videoCurrentVolume}
-          videoIsMuted={videoIsMuted}
-          setVolume={setVolume}
-          isHidden={(mouseInactive || videoUnplayed) && !videoEnded}
-          isMobile={isMobile}
-          tracksAvailable={tracks !== undefined}
-          togglePlayPause={togglePlayPause}
-          setSeek={setSeek}
-          toggleMute={toggleMute}
-          toggleFullscreen={toggleFullscreen}
-          videoIsFullscreen={videoIsFullscreen}
-          setTextTracks={setTextTracks}
-          selectedTextTrack={selectedTextTrack}
-          resetInactivityTimer={resetInactivityTimer}
-          videoQuality={videoQuality}
-          setVideoQuality={setVideoQuality}
-          qualityMenuOpen={qualityMenuOpen}
-          setQualityMenuOpen={setQualityMenuOpen}
-          captionsMenuOpen={captionsMenuOpen}
-          setCaptionsMenuOpen={setCaptionsMenuOpen}
-          clearInactivityTimer={clearInactivityTimer}
-          copy={copy}
-          compactModeThreshold={playerOptions.compactModeThreshold}
-          videoPlayerWidth={videoPlayerWidth}
-          onMouseOver={() => setMouseOnControlBar(true)}
-          onMouseOut={() => setMouseOnControlBar(false)}
-          onFocus={() => {}}
-          onBlur={() => {}}
+          {/* ======== Video Splash Screen ======== */}
+          {videoUnplayed && !videoQualityChanged && (
+            <VideoSplashContainer>
+              <VideoSplash
+                poster={posterSrc}
+                copy={copy}
+                videoLength={videoLength}
+                simpleMode={simpleMode}
+                iconLeftOffsetPx={2}
+                onClick={beginVideo}
+              />
+            </VideoSplashContainer>
+          )}
+          {/* =================================== */}
+          <VideoOverlayElementContainer>
+            {/* ======== Replay Button ======== */}
+            {videoEnded && <MiddleControlButton icon={replayIcon} onClick={replayVideo} />}
+            {/* ================================ */}
+            {/* ======== Middle Play/Pause Button ======= */}
+            {!videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && (
+              <MiddleControlButton
+                icon={videoIsPlaying ? pauseIcon : playIcon}
+                isHidden={mouseInactive}
+                onClick={togglePlayPause}
+                onFocus={resetInactivityTimer}
+              />
+            )}
+            {/* ========================================== */}
+
+            {/* ======== Spinner Display ======= */}
+            {videoIsBuffering && !isMobile && <Spinner show />}
+            {/* ================================ */}
+          </VideoOverlayElementContainer>
+        </VideoOverlayContainer>
+
+        {/* ======== Video Element ======= */}
+        <VideoElementContainer ref={ref}>
+          <VideoPlayer
+            ref={refVideoPlayer}
+            controls={isMobile}
+            crossOrigin={crossOrigin}
+            playsInline
+          >
+            {loadedSources}
+            {loadedTracks}
+            Your browser does not support the video tag.
+          </VideoPlayer>
+        </VideoElementContainer>
+        {/* ============================== */}
+
+        {!simpleMode && (
+          <ControlBar
+            videoPlayer={refVideoPlayer}
+            videoPlayerContainer={refVideoPlayerContainer}
+            sources={sources}
+            tracks={tracks}
+            videoLength={videoLength}
+            videoBufferEnd={videoBufferEnd}
+            videoCurrentTime={videoCurrentTime}
+            videoPlaying={refVideoPlayer.current !== null ? !refVideoPlayer.current.paused : false}
+            videoUnplayed={videoUnplayed}
+            videoCurrentVolume={videoCurrentVolume}
+            videoIsMuted={videoIsMuted}
+            setVolume={setVolume}
+            isHidden={(mouseInactive || videoUnplayed) && !videoEnded}
+            isMobile={isMobile}
+            tracksAvailable={tracks !== undefined}
+            togglePlayPause={togglePlayPause}
+            setSeek={setSeek}
+            toggleMute={toggleMute}
+            toggleFullscreen={toggleFullscreen}
+            videoIsFullscreen={videoIsFullscreen}
+            setTextTracks={setTextTracks}
+            selectedTextTrack={selectedTextTrack}
+            resetInactivityTimer={resetInactivityTimer}
+            videoQuality={videoQuality}
+            setVideoQuality={setVideoQuality}
+            qualityMenuOpen={qualityMenuOpen}
+            setQualityMenuOpen={setQualityMenuOpen}
+            captionsMenuOpen={captionsMenuOpen}
+            setCaptionsMenuOpen={setCaptionsMenuOpen}
+            clearInactivityTimer={clearInactivityTimer}
+            copy={copy}
+            compactModeThreshold={playerOptions.compactModeThreshold}
+            videoPlayerWidth={videoPlayerWidth}
+            onMouseOver={() => setMouseOnControlBar(true)}
+            onMouseOut={() => setMouseOnControlBar(false)}
+            onFocus={() => {}}
+            onBlur={() => {}}
+          />
+        )}
+
+        {/* ======== Screen Reader Keyboard Instructions ======= */}
+        <span
+          tabIndex="-1"
+          ref={refKeyboardInstructions}
+          aria-label={videoText[copy].videoPlayer}
+          role="note"
         />
-      )}
-
-      {/* ======== Screen Reader Keyboard Instructions ======= */}
-      <span
-        tabIndex="-1"
-        ref={refKeyboardInstructions}
-        aria-label={videoText[copy].videoPlayer}
-        role="note"
-      />
-      {/* ==================================================== */}
-    </VideoPlayerContainer>
-  )
-}
+        {/* ==================================================== */}
+      </VideoPlayerContainer>
+    )
+  }
+)
+Video.displayName = 'Video'
 
 Video.propTypes = {
   ...selectedSystemPropTypes,
@@ -970,5 +986,3 @@ Video.propTypes = {
   tokens: getTokensPropType('Video'),
   variant: variantProp.propType
 }
-
-export default Video