diff --git a/src/components/MediaPlayer/MediaPlayer.js b/src/components/MediaPlayer/MediaPlayer.js index 8f9cf327..8d1a286d 100644 --- a/src/components/MediaPlayer/MediaPlayer.js +++ b/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). diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 45477406..ccc3a593 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -622,28 +622,40 @@ 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 = 'Media is corrupt 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 = 'Media could not be loaded. Network error or media format is not supported.'; 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(); }); /* diff --git a/src/styles/main.scss b/src/styles/main.scss index 769c28c5..c51ef101 100644 --- a/src/styles/main.scss +++ b/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; }