@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/Video/Video.js

@@ -11,8 +11,9 @@ import ControlBar from './ControlBar/ControlBar';
 import videoText from './videoText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]); // TODO: replace with the actual spinner component from UDS
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 
+// TODO: replace with the actual spinner component from UDS
 const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Video__VideoPlayerContainer",
   componentId: "components-web__sc-12ltnuw-0"
@@ -79,7 +80,6 @@ const VideoOverlayElementContainer = /*#__PURE__*/styled.div.withConfig({
   width: '100%',
   height: '100%'
 });
-
 const Video = props => {
   const refVideoPlayer = useRef({});
   const refVideoPlayerContainer = useRef({});
@@ -113,8 +113,8 @@ const Video = props => {
     keyboardVolumeIncrement: 0.1,
     // from 0 to 1
     compactModeThreshold: 700 // in px
-
   };
+
   const [videoPlayerState, setVideoPlayerState] = useState({
     loadedSources: null,
     loadedTracks: null,
@@ -139,7 +139,6 @@ const Video = props => {
     videoPlayerWidth: 0,
     percentageWatched: 'watched 0%'
   });
-
   const generateSources = videoQuality => {
     return sources.map(source => {
       if (source.qualityRank === videoQuality) {
@@ -149,11 +148,9 @@ const Video = props => {
           key: source.source
         });
       }
-
       return undefined;
     });
   };
-
   const generateTracks = () => {
     return tracks.map(track => {
       return /*#__PURE__*/React.createElement('track', {
@@ -166,96 +163,91 @@ const Video = props => {
       });
     });
   };
-
   const refreshMedia = () => {
     const {
       defaultMobileQuality
     } = props;
     const {
       videoUnplayed
-    } = videoPlayerState; // Handle mobile check
+    } = videoPlayerState;
 
+    // Handle mobile check
     const isMobile = navigator && navigator.userAgent.indexOf('Mobi') >= 0;
-
     if (videoUnplayed && isMobile) {
-      setVideoPlayerState(prevState => ({ ...prevState,
+      setVideoPlayerState(prevState => ({
+        ...prevState,
         isMobile,
         videoQuality: isMobile ? defaultMobileQuality : defaultDesktopQuality
       }));
-    } // Load media
-
+    }
 
-    setVideoPlayerState(prevState => ({ ...prevState,
+    // 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,
+          return {
+            ...prevState,
             percentageWatched: 'watched 0%'
           };
         }
-
         return false;
       });
     }
-
     if (percentValue < 50) {
       return setVideoPlayerState(prevState => {
         if (prevState !== 'watched 25%') {
-          return { ...prevState,
+          return {
+            ...prevState,
             percentageWatched: 'watched 25%'
           };
         }
-
         return false;
       });
     }
-
     if (percentValue < 75) {
       return setVideoPlayerState(prevState => {
         if (prevState !== 'watched 50%') {
-          return { ...prevState,
+          return {
+            ...prevState,
             percentageWatched: 'watched 50%'
           };
         }
-
         return false;
       });
     }
-
     if (percentValue < 100) {
       return setVideoPlayerState(prevState => {
         if (prevState !== 'watched 75%') {
-          return { ...prevState,
+          return {
+            ...prevState,
             percentageWatched: 'watched 75%'
           };
         }
-
         return false;
       });
     }
-
     if (percentValue === 100) {
       return setVideoPlayerState(prevState => {
         if (prevState !== 'watched 100%') {
-          return { ...prevState,
+          return {
+            ...prevState,
             percentageWatched: 'watched 100%'
           };
         }
-
         return false;
       });
     }
-
     return false;
-  }; // required for analytics
-
+  };
 
+  // required for analytics
   const calculatePercentageWatched = () => {
     const {
       videoCurrentTime,
@@ -270,7 +262,6 @@ const Video = props => {
     percentValue = Math.round(percentValue);
     const previousValue = percentageWatched;
     percentageBucket(percentValue);
-
     if (previousValue !== percentageWatched) {
       const analyticsObject = {
         name: 'video tracking',
@@ -280,20 +271,18 @@ const Video = props => {
       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,
+        setVideoPlayerState(prevState => ({
+          ...prevState,
           intervalId
         }));
       }
@@ -305,7 +294,6 @@ const Video = props => {
       clearInterval(intervalId);
     }
   };
-
   const updateAnalyticsData = () => {
     const {
       videoTitle,
@@ -320,40 +308,38 @@ const Video = props => {
       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
+    } = videoPlayerState;
 
-    setVideoPlayerState(prevState => ({ ...prevState,
+    // 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,
+    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,
+      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
@@ -362,25 +348,26 @@ const Video = props => {
     const {
       videoQualityChanged,
       videoIsPlaying
-    } = videoPlayerState; // Prevents an IE 11 bug where the video will not continue playing after a quality switch
+    } = 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,
+    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,
+      setVideoPlayerState(prevState => ({
+        ...prevState,
         videoIsPlaying: false,
         videoIsBuffering: true,
         mouseInactive: true
@@ -388,22 +375,20 @@ const Video = props => {
       setPlaying(false);
     }
   };
-
   const playAfterBuffer = () => {
     const {
       videoIsBuffering,
       videoCurrentTime,
       videoQualityChanged
     } = videoPlayerState;
-
     if (videoIsBuffering && videoCurrentTime !== -1 && !videoQualityChanged) {
       setPlaying(true);
-      setVideoPlayerState(prevState => ({ ...prevState,
+      setVideoPlayerState(prevState => ({
+        ...prevState,
         videoIsBuffering: false
       }));
     }
   };
-
   const resetInactivityTimer = () => {
     clearInactivityTimer();
     const {
@@ -411,20 +396,20 @@ const Video = props => {
       videoIsPlaying,
       mouseOnControlBar
     } = videoPlayerState;
-
     if (!videoQualityChanged && videoIsPlaying) {
       inactivityTimer = setTimeout(() => {
         if (!mouseOnControlBar) {
-          setVideoPlayerState(prevState => ({ ...prevState,
+          setVideoPlayerState(prevState => ({
+            ...prevState,
             mouseInactive: true
           }));
         }
       }, playerOptions.mouseTimeout);
     }
   };
-
   const setAsPlaying = () => {
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       videoIsPlaying: true,
       videoIsBuffering: false,
       videoEnded: false,
@@ -434,147 +419,134 @@ const Video = props => {
     const {
       analyticsTracking
     } = props;
-
     if (analyticsTracking) {
       updateAnalyticsData();
     }
-
     resetInactivityTimer();
   };
-
   const setAsPaused = () => {
     clearInactivityTimer();
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       videoIsPlaying: false
     }));
     const {
       analyticsTracking
     } = props;
-
     if (analyticsTracking) {
       updateAnalyticsData();
     }
   };
-
   const returnFromEndState = () => {
     resetInactivityTimer();
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       videoEnded: false
     }));
   };
-
   const setAsEnded = () => {
-    setVideoPlayerState(prevState => ({ ...prevState,
+    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,
+      setVideoPlayerState(prevState => ({
+        ...prevState,
         videoBufferEnd: buffered.length === 0 ? 0 : buffered.end(buffered.length - 1)
       }));
     } else if (videoCurrentTime !== -1 && !videoQualityChanged && !videoPlayer) {
-      setVideoPlayerState(prevState => ({ ...prevState,
+      setVideoPlayerState(prevState => ({
+        ...prevState,
         videoIsPlaying: false,
         videoIsBuffering: true
       }));
     }
   };
-
   const updateVolumeState = () => {
     resetInactivityTimer();
     const videoPlayer = refVideoPlayer.current;
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       videoCurrentVolume: videoPlayer.volume,
       videoIsMuted: videoPlayer.muted
     }));
   };
-
   const getPlayerWidth = () => {
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       videoPlayerWidth: refVideoPlayerContainer.current.offsetWidth
     }));
   };
-
   const setMouseOnControlBar = isOver => {
-    setVideoPlayerState(prevState => ({ ...prevState,
+    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,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       selectedTextTrack: trackNumber
     }));
   };
-
   const beginVideo = () => {
     setTextTracks(-1);
     setPlaying(true);
     refVideoPlayerContainer.current.focus();
   };
-
   const closeSubMenus = () => {
-    setVideoPlayerState(prevState => ({ ...prevState,
+    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,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       captionsMenuOpen: isOpen
     }));
   };
-
   const toggleFullscreen = () => {
     if (fscreen.fullscreenEnabled) {
       if (fscreen.fullscreenElement === null) {
@@ -582,18 +554,18 @@ const Video = props => {
       } else {
         fscreen.exitFullscreen();
       }
-
       setVideoPlayerState(prevState => {
-        return { ...prevState,
+        return {
+          ...prevState,
           videoIsFullscreen: !prevState.videoIsFullscreen
         };
       });
     }
   };
-
   const setVideoQuality = async newVideoQuality => {
     await setPlaying(false);
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       videoLength: 0,
       videoBufferEnd: 0,
       videoQuality: newVideoQuality,
@@ -605,192 +577,188 @@ const Video = props => {
     resetInactivityTimer();
     setSeek(videoPlayerState.videoCurrentTime);
   };
-
   const setQualityMenuOpen = isOpen => {
-    setVideoPlayerState(prevState => ({ ...prevState,
+    setVideoPlayerState(prevState => ({
+      ...prevState,
       qualityMenuOpen: isOpen
     }));
   };
-
   const handleClick = event => {
-    resetInactivityTimer(); // This allows playing videos within components that act like
-    // links, e.g. `PreviewCard`, `StoryCard`, etc.
+    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 ****
+    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
-
+    }
 
+    // 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 ****
+      }
+
+      // **** 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
-
+  };
 
+  // Prepares video and caption files
   useEffect(() => {
-    refreshMedia(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Initial Setup after loading sources
+    refreshMedia();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
+  // Initial Setup after loading sources
   useEffect(() => {
     const {
       loadedSources,
       loadedTracks
     } = videoPlayerState;
-
     if (loadedSources && loadedTracks) {
       const {
         beginMuted,
         analyticsTracking,
         videoTitle
       } = props;
-      const videoPlayer = refVideoPlayer.current; // Initializes Settings
+      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)
+      getPlayerWidth();
 
-      videoPlayer.onloadedmetadata = qualitySwitchSeek; // Reports the video's duration when the video player is ready to play
+      // Reports when the video has completed loading metadata (used for seeking after quality switch)
+      videoPlayer.onloadedmetadata = qualitySwitchSeek;
 
-      videoPlayer.oncanplay = initializeVideoDuration; // Reports the video's width on resize
+      // Reports the video's duration when the video player is ready to play
+      videoPlayer.oncanplay = initializeVideoDuration;
 
-      window.addEventListener('resize', getPlayerWidth); // Reports the current video timestamp
+      // Reports the video's width on resize
+      window.addEventListener('resize', getPlayerWidth);
 
-      videoPlayer.ontimeupdate = updateVideoTimestamp; // Reports when the video has paused due to buffering
+      // Reports the current video timestamp
+      videoPlayer.ontimeupdate = updateVideoTimestamp;
 
-      videoPlayer.onwaiting = setAsBuffering; // Reports the video's latest buffering progress if video player is properly initialized
+      // Reports when the video has paused due to buffering
+      videoPlayer.onwaiting = setAsBuffering;
 
-      videoPlayer.onprogress = updateBufferProgress; // Reports when the video has recovered from buffering
+      // Reports the video's latest buffering progress if video player is properly initialized
+      videoPlayer.onprogress = updateBufferProgress;
 
-      videoPlayer.oncanplaythrough = playAfterBuffer; // Reports when the video has ended
+      // Reports when the video has recovered from buffering
+      videoPlayer.oncanplaythrough = playAfterBuffer;
 
-      videoPlayer.onended = setAsEnded; // Reports when the video is playing and disables the buffer spinner (even if buffering is still needed)
+      // Reports when the video has ended
+      videoPlayer.onended = setAsEnded;
 
-      videoPlayer.onplay = setAsPlaying; // Reports when the video has been paused
+      // Reports when the video is playing and disables the buffer spinner (even if buffering is still needed)
+      videoPlayer.onplay = setAsPlaying;
 
-      videoPlayer.onpause = setAsPaused; // Reports when the video has been seeked
+      // Reports when the video has been paused
+      videoPlayer.onpause = setAsPaused;
 
-      videoPlayer.onseeked = returnFromEndState; // Reports when the video's volume has been changed, or if the video has been muted
+      // Reports when the video has been seeked
+      videoPlayer.onseeked = returnFromEndState;
 
-      videoPlayer.onvolumechange = updateVolumeState; // Video Analytics
+      // 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.');
       }
-
       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]);
@@ -822,7 +790,8 @@ const Video = props => {
     as,
     ...safeRest
   } = rest;
-  return /*#__PURE__*/_jsxs(VideoPlayerContainer, { ...safeRest,
+  return /*#__PURE__*/_jsxs(VideoPlayerContainer, {
+    ...safeRest,
     ref: refVideoPlayerContainer,
     videoBorder: videoBorder,
     borderColor: borderColor,
@@ -918,95 +887,76 @@ const Video = props => {
     })]
   });
 };
-
-Video.propTypes = { ...selectedSystemPropTypes,
-
+Video.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * An array of objects that defines each video file. See the "Basic Usage" section for more information.
    */
   sources: PropTypes.arrayOf(PropTypes.shape({
     /** A path to a video file */
     source: PropTypes.string.isRequired,
-
     /** The video's MIME type (example: `video/mp4`) */
     mediaType: PropTypes.string.isRequired,
-
     /** The label to be given to this file in the quality selector (example: `1080p`) */
     qualityName: PropTypes.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.number.isRequired,
-
     /** A boolean that defines its source as a fallback for another source with the same `qualityRank` */
     isFallback: PropTypes.bool
   })).isRequired,
-
   /**
    * A path of the image that will be displayed on the video's splash screen.
    */
   posterSrc: PropTypes.string.isRequired,
-
   /**
    * An array of objects that defines each caption file. See the "Basic Usage" section for more information.
    */
   tracks: PropTypes.arrayOf(PropTypes.shape({
     /** A path to the track file */
     source: PropTypes.string.isRequired,
-
     /** The name of the track file as it will appear in the "Captions" dialogue */
     label: PropTypes.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.string.isRequired,
-
     /** The language of the track file represented as a ISO 639-1 language code */
     language: PropTypes.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.number,
-
   /**
    * Defines if the video should start muted.
    */
   beginMuted: PropTypes.bool,
-
   /**
    * The default quality level if the user is on mobile. See the `sources` prop for available quality levels.
    */
   defaultMobileQuality: PropTypes.number,
-
   /**
    * The default quality level if the user is on desktop. See the `sources` prop for available quality levels.
    */
   defaultDesktopQuality: PropTypes.number,
-
   /**
    * The video player UI's language as an ISO language code. It currently supports English and French.
    */
   copy: PropTypes.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.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.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.bool,
-
   /**
    * A callback function that fires when a customer interacts with Video.
    * When using `analyticsTracking`, `videoTitle` must also be defined.
@@ -1020,7 +970,6 @@ Video.propTypes = { ...selectedSystemPropTypes,
    * @param {string} analyticsObject.details The name of the video based on the `videoTitle` prop
    */
   analyticsTracking: PropTypes.func,
-
   /**
    * The title of the video being rendered. This is used for analytics purposes in conjunction with `analyticsTracking`.
    * @since 1.3.0