Display Video.js errors instead letting the player crash

src/components/MediaPlayer/MediaPlayer.js

@@ -375,6 +375,10 @@ const MediaPlayer = ({
           ...hlsOptions,
           nativeTextTracks: IS_MOBILE && !IS_ANDROID
         },
+        // Make error display modal dismissable
+        errorDisplay: {
+          uncloseable: false,
+        },
         /* 
           Setting this option helps to override VideoJS's default 'keydown' event handler, whenever
           the focus is on a native VideoJS control icon (e.g. play toggle).

src/components/MediaPlayer/VideoJS/VideoJSPlayer.js

@@ -622,28 +622,41 @@ function VideoJSPlayer({
     // Use error event listener for inaccessible item display
     player.on('error', (e) => {
       const error = player.error();
+      let errorMessage = 'Something went wrong. Please try again later or contact support for help.';
       // Handle different error codes
-      // TODO::In the future, this can be further improved to give proper feedback to the user when playback is not working
       switch (error.code) {
         case 1:
           console.error('MEDIA_ERR_ABORTED: The fetching process for the media resource was aborted by the user agent\
              at the user’s request.');
           break;
         case 2:
+          errorMessage = 'The media could not be loaded due to a network error. Please try again later.';
           console.error('MEDIA_ERR_NETWORK: A network error caused the user agent to stop fetching the media resource,\
              after the resource was established to be usable.');
           break;
         case 3:
+          errorMessage = 'Sorry, media appear to be corrupted or has features not supported by the browser. \
+          Please try a different media or contact support for help.';
           console.error('MEDIA_ERR_DECODE: An error occurred while decoding the media resource, after\
              the resource was established to be usable.');
           break;
         case 4:
+          errorMessage = 'Sorry, media could not be loaded, either the media format is not supported or due to a \
+          network error.';
           console.error('MEDIA_ERR_SRC_NOT_SUPPORTED: The media resource indicated by the src attribute was not suitable.');
           break;
         default:
           console.error('An unknown error occurred.');
           break;
       }
+      // Show dismissable error display modal from Video.js
+      var errorDisplay = player.getChild('ErrorDisplay');
+      if (errorDisplay) {
+        errorDisplay.contentEl().innerText = errorMessage;
+        errorDisplay.removeClass('vjs-hidden');
+        player.removeClass('vjs-error');
+        player.removeClass('vjs-disabled');
+      }
       e.stopPropagation();
     });
     /*

src/styles/main.scss

@@ -81,6 +81,12 @@
   width: 4em !important;
 }
 
+.vjs-error-display.vjs-modal-dialog .vjs-modal-dialog-content {
+  font-size: 1.5em;
+  padding: .5em;
+  text-align: center;
+}
+
 /* Prevent horizontal volume panel from attempting to close for audio */
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
   transition: none !important;
@@ -91,12 +97,6 @@
   margin-top: 0.15em;
 }
 
-/* Make player height minimum to the controls height so when we hide
-video/poster area the controls are displayed correctly. */
-.video-js.vjs-audio {
-  min-height: 3.7em;
-}
-
 .video-js .vjs-progress-control:hover .vjs-play-progress:after {
   display: none;
 }