@telus-uds/components-web 1.7.0 → 1.9.0

package/lib/Video/Video.js

@@ -0,0 +1,1072 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fscreen = _interopRequireDefault(require("fscreen"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _utils = require("../utils");
+
+var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
+
+var _MiddleControlButton = _interopRequireDefault(require("./MiddleControlButton/MiddleControlButton"));
+
+var _ControlBar = _interopRequireDefault(require("./ControlBar/ControlBar"));
+
+var _videoText = _interopRequireDefault(require("./videoText"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]); // TODO: replace with the actual spinner component from UDS
+
+const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Video__VideoPlayerContainer",
+  componentId: "components-web__sc-12ltnuw-0"
+})(_ref => {
+  let {
+    videoBorder,
+    borderColor
+  } = _ref;
+  return {
+    width: '100%',
+    outline: 'none',
+    position: 'relative',
+    border: videoBorder ? `20px solid ${borderColor}` : undefined
+  };
+});
+
+const VideoElementContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Video__VideoElementContainer",
+  componentId: "components-web__sc-12ltnuw-1"
+})({
+  outline: 'none',
+  width: '100%',
+  height: '100%',
+  fontSize: 0
+});
+
+const VideoPlayer = /*#__PURE__*/_styledComponents.default.video.withConfig({
+  displayName: "Video__VideoPlayer",
+  componentId: "components-web__sc-12ltnuw-2"
+})({
+  width: '100%',
+  height: '100%'
+});
+
+const VideoOverlayContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Video__VideoOverlayContainer",
+  componentId: "components-web__sc-12ltnuw-3"
+})(_ref2 => {
+  let {
+    mouseInactive
+  } = _ref2;
+  return {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    cursor: mouseInactive ? 'none' : 'pointer'
+  };
+});
+
+const VideoSplashContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Video__VideoSplashContainer",
+  componentId: "components-web__sc-12ltnuw-4"
+})({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  zIndex: 5
+});
+
+const VideoOverlayElementContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Video__VideoOverlayElementContainer",
+  componentId: "components-web__sc-12ltnuw-5"
+})({
+  position: 'absolute',
+  zIndex: 4,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%'
+});
+
+const Video = props => {
+  const refVideoPlayer = (0, _react.useRef)({});
+  const refVideoPlayerContainer = (0, _react.useRef)({});
+  const refKeyboardInstructions = (0, _react.useRef)({});
+  let inactivityTimer = null;
+  const {
+    videoBorder,
+    simpleMode,
+    copy,
+    posterSrc,
+    crossOrigin,
+    defaultVolume,
+    sources,
+    tracks,
+    defaultDesktopQuality,
+    tokens,
+    variant = {},
+    ...rest
+  } = props;
+  const {
+    borderColor,
+    pauseIcon,
+    playIcon,
+    replayIcon
+  } = (0, _componentsBase.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] = (0, _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 /*#__PURE__*/_react.default.createElement('source', {
+          src: source.source,
+          type: source.mediaType,
+          key: source.source
+        });
+      }
+
+      return undefined;
+    });
+  };
+
+  const generateTracks = () => {
+    return tracks.map(track => {
+      return /*#__PURE__*/_react.default.createElement('track', {
+        label: track.label,
+        kind: track.kind,
+        srcLang: track.language,
+        src: track.source,
+        default: track.isDefault,
+        key: track.source
+      });
+    });
+  };
+
+  const refreshMedia = () => {
+    const {
+      defaultMobileQuality
+    } = props;
+    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
+      }));
+    } // 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;
+      });
+    }
+
+    return false;
+  }; // required for analytics
+
+
+  const calculatePercentageWatched = () => {
+    const {
+      videoCurrentTime,
+      videoLength,
+      percentageWatched
+    } = videoPlayerState;
+    const {
+      videoTitle,
+      analyticsTracking
+    } = props;
+    let percentValue = videoCurrentTime / videoLength * 100;
+    percentValue = Math.round(percentValue);
+    const previousValue = percentageWatched;
+    percentageBucket(percentValue);
+
+    if (previousValue !== percentageWatched) {
+      const analyticsObject = {
+        name: 'video tracking',
+        details: videoTitle
+      };
+      analyticsObject.action = percentageWatched;
+      analyticsTracking(analyticsObject);
+    }
+  };
+
+  const setPlaying = async isPlaying => {
+    const videoPlayer = refVideoPlayer.current;
+    const {
+      analyticsTracking,
+      videoTitle
+    } = props;
+
+    if (isPlaying) {
+      await videoPlayer.play();
+
+      if (analyticsTracking !== undefined && videoTitle) {
+        const intervalId = setInterval(calculatePercentageWatched, 300);
+        setVideoPlayerState(prevState => ({ ...prevState,
+          intervalId
+        }));
+      }
+    } else {
+      const {
+        intervalId
+      } = videoPlayerState;
+      videoPlayer.pause();
+      clearInterval(intervalId);
+    }
+  };
+
+  const updateAnalyticsData = () => {
+    const {
+      videoTitle,
+      analyticsTracking
+    } = props;
+    const {
+      videoIsPlaying,
+      percentageWatched
+    } = videoPlayerState;
+    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 updateVideoTimestamp = () => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      videoCurrentTime: refVideoPlayer.current.currentTime
+    }));
+  };
+
+  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
+      };
+    });
+    const {
+      videoQualityChanged,
+      videoIsPlaying
+    } = videoPlayerState; // Prevents an IE 11 bug where the video will not continue playing after a quality switch
+
+    if (videoQualityChanged && videoIsPlaying) {
+      setPlaying(true);
+    }
+  };
+
+  const clearInactivityTimer = () => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      mouseInactive: false
+    }));
+    clearTimeout(inactivityTimer);
+  };
+
+  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 playAfterBuffer = () => {
+    const {
+      videoIsBuffering,
+      videoCurrentTime,
+      videoQualityChanged
+    } = videoPlayerState;
+
+    if (videoIsBuffering && videoCurrentTime !== -1 && !videoQualityChanged) {
+      setPlaying(true);
+      setVideoPlayerState(prevState => ({ ...prevState,
+        videoIsBuffering: false
+      }));
+    }
+  };
+
+  const resetInactivityTimer = () => {
+    clearInactivityTimer();
+    const {
+      videoQualityChanged,
+      videoIsPlaying,
+      mouseOnControlBar
+    } = videoPlayerState;
+
+    if (!videoQualityChanged && videoIsPlaying) {
+      inactivityTimer = setTimeout(() => {
+        if (!mouseOnControlBar) {
+          setVideoPlayerState(prevState => ({ ...prevState,
+            mouseInactive: true
+          }));
+        }
+      }, playerOptions.mouseTimeout);
+    }
+  };
+
+  const setAsPlaying = () => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      videoIsPlaying: true,
+      videoIsBuffering: false,
+      videoEnded: false,
+      videoUnplayed: false,
+      videoQualityChanged: false
+    }));
+    const {
+      analyticsTracking
+    } = props;
+
+    if (analyticsTracking) {
+      updateAnalyticsData();
+    }
+
+    resetInactivityTimer();
+  };
+
+  const setAsPaused = () => {
+    clearInactivityTimer();
+    setVideoPlayerState(prevState => ({ ...prevState,
+      videoIsPlaying: false
+    }));
+    const {
+      analyticsTracking
+    } = props;
+
+    if (analyticsTracking) {
+      updateAnalyticsData();
+    }
+  };
+
+  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;
+      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 updateVolumeState = () => {
+    resetInactivityTimer();
+    const videoPlayer = refVideoPlayer.current;
+    setVideoPlayerState(prevState => ({ ...prevState,
+      videoCurrentVolume: videoPlayer.volume,
+      videoIsMuted: videoPlayer.muted
+    }));
+  };
+
+  const getPlayerWidth = () => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      videoPlayerWidth: refVideoPlayerContainer.current.offsetWidth
+    }));
+  };
+
+  const setMouseOnControlBar = isOver => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      mouseOnControlBar: isOver
+    }));
+  };
+
+  const togglePlayPause = () => {
+    const {
+      videoIsPlaying
+    } = videoPlayerState;
+    setPlaying(!videoIsPlaying);
+  };
+
+  const setTextTracks = trackNumber => {
+    const {
+      textTracks
+    } = refVideoPlayer.current;
+
+    for (let i = 0; i < textTracks.length; i += 1) {
+      textTracks[i].mode = i === trackNumber ? 'showing' : 'hidden';
+    }
+
+    setVideoPlayerState(prevState => ({ ...prevState,
+      selectedTextTrack: trackNumber
+    }));
+  };
+
+  const beginVideo = () => {
+    setTextTracks(-1);
+    setPlaying(true);
+    refVideoPlayerContainer.current.focus();
+  };
+
+  const closeSubMenus = () => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      qualityMenuOpen: false,
+      captionsMenuOpen: false
+    }));
+  };
+
+  const incrementSeek = seconds => {
+    refVideoPlayer.current.currentTime += seconds;
+  };
+
+  const replayVideo = async () => {
+    setSeek(0);
+    togglePlayPause();
+  };
+
+  const incrementVolume = amount => {
+    refVideoPlayer.current.volume += amount;
+  };
+
+  const setVolume = amount => {
+    refVideoPlayer.current.volume = amount;
+  };
+
+  const toggleMute = () => {
+    refVideoPlayer.current.muted = !refVideoPlayer.current.muted;
+  };
+
+  const setCaptionsMenuOpen = isOpen => {
+    setVideoPlayerState(prevState => ({ ...prevState,
+      captionsMenuOpen: isOpen
+    }));
+  };
+
+  const toggleFullscreen = () => {
+    if (_fscreen.default.fullscreenEnabled) {
+      if (_fscreen.default.fullscreenElement === null) {
+        _fscreen.default.requestFullscreen(refVideoPlayerContainer.current);
+      } else {
+        _fscreen.default.exitFullscreen();
+      }
+
+      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 handleClick = event => {
+    resetInactivityTimer(); // This allows playing videos within components that act like
+    // links, e.g. `PreviewCard`, `StoryCard`, etc.
+
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+  };
+
+  const handleKeyboard = event => {
+    const {
+      videoLength,
+      videoCurrentVolume
+    } = videoPlayerState;
+    const key = event.key || event.keyCode; // *** Begin Seek & Play Control ****
+
+    if (key === ' ' || key === 32 || key === 'k' || key === 75) {
+      event.preventDefault();
+      resetInactivityTimer();
+      togglePlayPause();
+    } // Disables all keys except for play/pause when in simpleMode
+
+
+    if (!simpleMode) {
+      if (key === 'ArrowRight' || key === 39 || key === '.' || key === 190) {
+        resetInactivityTimer();
+        incrementSeek(playerOptions.keyboardSeekIncrement);
+      }
+
+      if (key === 'ArrowLeft' || key === 37 || key === ',' || key === 188) {
+        resetInactivityTimer();
+        incrementSeek(-playerOptions.keyboardSeekIncrement);
+      }
+
+      if (key === '0' || key === 48 || key === 'numpad 0' || key === 96) {
+        setSeek(0);
+      }
+
+      if (key === '1' || key === 49 || key === 'numpad 1' || key === 97) {
+        setSeek(videoLength * 0.1);
+      }
+
+      if (key === '2' || key === 50 || key === 'numpad 2' || key === 98) {
+        setSeek(videoLength * 0.2);
+      }
+
+      if (key === '3' || key === 51 || key === 'numpad 3' || key === 99) {
+        setSeek(videoLength * 0.3);
+      }
+
+      if (key === '4' || key === 52 || key === 'numpad 4' || key === 100) {
+        setSeek(videoLength * 0.4);
+      }
+
+      if (key === '5' || key === 53 || key === 'numpad 5' || key === 101) {
+        setSeek(videoLength * 0.5);
+      }
+
+      if (key === '6' || key === 54 || key === 'numpad 6' || key === 102) {
+        setSeek(videoLength * 0.6);
+      }
+
+      if (key === '7' || key === 55 || key === 'numpad 7' || key === 103) {
+        setSeek(videoLength * 0.7);
+      }
+
+      if (key === '8' || key === 56 || key === 'numpad 8' || key === 104) {
+        setSeek(videoLength * 0.8);
+      }
+
+      if (key === '9' || key === 57 || key === 'numpad 9' || key === 105) {
+        setSeek(videoLength * 0.9);
+      } // **** End Seek & Play Control ****
+      // **** Begin Volume Control ****
+
+
+      const {
+        keyboardVolumeIncrement
+      } = playerOptions;
+
+      if (key === 'ArrowUp' || key === 38 || key === '=' || key === 187 || key === 'add' || key === 107) {
+        resetInactivityTimer();
+
+        if (videoCurrentVolume + keyboardVolumeIncrement < 1) {
+          incrementVolume(keyboardVolumeIncrement);
+        } else {
+          setVolume(1);
+        }
+      }
+
+      if (key === 'ArrowDown' || key === 40 || key === '-' || key === 189 || key === 'subtract' || key === 109) {
+        resetInactivityTimer();
+
+        if (videoCurrentVolume - keyboardVolumeIncrement > 0) {
+          incrementVolume(-keyboardVolumeIncrement);
+        } else {
+          setVolume(0);
+        }
+      }
+
+      if (key === 'm' || key === 77) {
+        resetInactivityTimer();
+        toggleMute();
+      }
+
+      if (key === 'f' || key === 70) {
+        resetInactivityTimer();
+        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();
+      }
+    }
+  }; // Prepares video and caption files
+
+
+  (0, _react.useEffect)(() => {
+    refreshMedia(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Initial Setup after loading sources
+
+  (0, _react.useEffect)(() => {
+    const {
+      loadedSources,
+      loadedTracks
+    } = videoPlayerState;
+
+    if (loadedSources && loadedTracks) {
+      const {
+        beginMuted,
+        analyticsTracking,
+        videoTitle
+      } = props;
+      const videoPlayer = refVideoPlayer.current; // Initializes Settings
+
+      videoPlayer.volume = defaultVolume / 100;
+      videoPlayer.muted = beginMuted || simpleMode;
+      getPlayerWidth(); // 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 width on resize
+
+      window.addEventListener('resize', getPlayerWidth); // Reports the current video timestamp
+
+      videoPlayer.ontimeupdate = updateVideoTimestamp; // 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 when the video has recovered from buffering
+
+      videoPlayer.oncanplaythrough = playAfterBuffer; // 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 has been paused
+
+      videoPlayer.onpause = setAsPaused; // 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; // Video Analytics
+
+      if (analyticsTracking !== undefined && videoTitle === undefined || analyticsTracking === undefined && videoTitle !== undefined) {
+        (0, _utils.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 () => {}; // 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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoPlayerContainer, { ...safeRest,
+    ref: refVideoPlayerContainer,
+    videoBorder: videoBorder,
+    borderColor: borderColor,
+    onMouseMove: resetInactivityTimer,
+    onClick: handleClick,
+    onKeyDown: handleKeyboard,
+    tabIndex: "0",
+    "aria-label": simpleMode ? _videoText.default[copy].videoSelectedSimple : _videoText.default[copy].videoSelected,
+    "data-testid": "videoPlayer",
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoOverlayContainer, {
+      mouseInactive: mouseInactive,
+      onClick: () => {
+        closeSubMenus();
+        togglePlayPause();
+      },
+      children: [videoUnplayed && !videoQualityChanged && /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoSplashContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+          poster: posterSrc,
+          copy: copy,
+          videoLength: videoLength,
+          simpleMode: simpleMode,
+          iconLeftOffsetPx: 2,
+          onClick: beginVideo
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoOverlayElementContainer, {
+        children: [videoEnded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.default, {
+          icon: replayIcon,
+          onClick: replayVideo
+        }), !videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.default, {
+          icon: videoIsPlaying ? pauseIcon : playIcon,
+          isHidden: mouseInactive,
+          onClick: togglePlayPause,
+          onFocus: resetInactivityTimer
+        }), videoIsBuffering && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          show: true
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoElementContainer, {
+      videoIsFullscreen: videoIsFullscreen,
+      mouseInactive: mouseInactive,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoPlayer, {
+        ref: refVideoPlayer,
+        controls: isMobile,
+        videoIsFullscreen: videoIsFullscreen,
+        crossOrigin: crossOrigin,
+        playsinline: true,
+        children: [loadedSources, loadedTracks, "Your browser does not support the video tag."]
+      })
+    }), !simpleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ControlBar.default, {
+      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: () => {}
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      tabIndex: "-1",
+      ref: refKeyboardInstructions,
+      "aria-label": _videoText.default[copy].videoPlayer,
+      role: "note"
+    })]
+  });
+};
+
+Video.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * An array of objects that defines each video file. See the "Basic Usage" section for more information.
+   */
+  sources: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** A path to a video file */
+    source: _propTypes.default.string.isRequired,
+
+    /** The video's MIME type (example: `video/mp4`) */
+    mediaType: _propTypes.default.string.isRequired,
+
+    /** The label to be given to this file in the quality selector (example: `1080p`) */
+    qualityName: _propTypes.default.string.isRequired,
+
+    /** A number indicating the video's quality, with 1 being the best, and the number increasing from there as quality degrades */
+    qualityRank: _propTypes.default.number.isRequired,
+
+    /** A boolean that defines its source as a fallback for another source with the same `qualityRank` */
+    isFallback: _propTypes.default.bool
+  })).isRequired,
+
+  /**
+   * A path of the image that will be displayed on the video's splash screen.
+   */
+  posterSrc: _propTypes.default.string.isRequired,
+
+  /**
+   * An array of objects that defines each caption file. See the "Basic Usage" section for more information.
+   */
+  tracks: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** A path to the track file */
+    source: _propTypes.default.string.isRequired,
+
+    /** The name of the track file as it will appear in the "Captions" dialogue */
+    label: _propTypes.default.string.isRequired,
+
+    /** The track's file type, typically one of "subtitles", "captions", or "descriptions". See [MDN's documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#Attributes) for more information on these types */
+    kind: _propTypes.default.string.isRequired,
+
+    /** The language of the track file represented as a ISO 639-1 language code */
+    language: _propTypes.default.string.isRequired
+  })),
+
+  /**
+   * The video's default volume, defined from 1 to 100. Please use the `beginMuted` prop to have the video start silenced.
+   */
+  defaultVolume: _propTypes.default.number,
+
+  /**
+   * Defines if the video should start muted.
+   */
+  beginMuted: _propTypes.default.bool,
+
+  /**
+   * The default quality level if the user is on mobile. See the `sources` prop for available quality levels.
+   */
+  defaultMobileQuality: _propTypes.default.number,
+
+  /**
+   * The default quality level if the user is on desktop. See the `sources` prop for available quality levels.
+   */
+  defaultDesktopQuality: _propTypes.default.number,
+
+  /**
+   * The video player UI's language as an ISO language code. It currently supports English and French.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
+
+  /**
+   * Sets the `video` tag's `crossorigin` mode. Please note that content loaded without CORS approval may be insecure.
+   * @since 1.1.0
+   */
+  crossOrigin: _propTypes.default.oneOf(['anonymous', 'use-credentials']),
+
+  /**
+   * Disables the control bar during playback and reduces the amount of time until the UI hides itself.
+   * For special approved internal uses only.
+   * @since 1.2.0
+   */
+  simpleMode: _propTypes.default.bool,
+
+  /**
+   * Renders a gainsboro coloured border around the video. Used to seperate the video from the rest of the page if the video's background is the same colour as the container's.
+   * @since 1.2.0
+   */
+  videoBorder: _propTypes.default.bool,
+
+  /**
+   * A callback function that fires when a customer interacts with Video.
+   * When using `analyticsTracking`, `videoTitle` must also be defined.
+   *
+   * When invoked, your callback function returns an object containing three keys (see below).
+   * @since 1.3.0
+   *
+   * @param {Object} analyticsObject Contains video data based on customer interactions
+   * @param {string} analyticsObject.name Always 'video tracking'
+   * @param {string} analyticsObject.action Contains the latest customer action
+   * @param {string} analyticsObject.details The name of the video based on the `videoTitle` prop
+   */
+  analyticsTracking: _propTypes.default.func,
+
+  /**
+   * The title of the video being rendered. This is used for analytics purposes in conjunction with `analyticsTracking`.
+   * @since 1.3.0
+   */
+  videoTitle: _propTypes.default.string
+};
+Video.defaultProps = {
+  tracks: undefined,
+  defaultVolume: 100,
+  beginMuted: false,
+  defaultMobileQuality: 1,
+  defaultDesktopQuality: 1,
+  crossOrigin: undefined,
+  simpleMode: false,
+  videoBorder: false,
+  analyticsTracking: undefined,
+  videoTitle: undefined
+};
+var _default = Video;
+exports.default = _default;