From cfc54a4bb8da0e4dc975a759d39b0ec4b3673c38 Mon Sep 17 00:00:00 2001 From: dwithana Date: Fri, 2 Aug 2024 16:48:54 -0400 Subject: [PATCH 1/3] Display Video.js errors instead letting the player crash --- src/components/MediaPlayer/MediaPlayer.js | 4 ++++ .../MediaPlayer/VideoJS/VideoJSPlayer.js | 15 ++++++++++++++- src/styles/main.scss | 12 ++++++------ 3 files changed, 24 insertions(+), 7 deletions(-) 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..125d2f0a 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/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(); }); /* 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; } From 26ba68e27f0eed7e2a6ac75d429425788c48b76c Mon Sep 17 00:00:00 2001 From: Dananji Withana Date: Mon, 19 Aug 2024 13:57:07 -0400 Subject: [PATCH 2/3] Update src/components/MediaPlayer/VideoJS/VideoJSPlayer.js Co-authored-by: Chris Colvard --- src/components/MediaPlayer/VideoJS/VideoJSPlayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 125d2f0a..2ab31800 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -635,7 +635,7 @@ function VideoJSPlayer({ 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. \ + 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.'); From 6b0cb968d838d188e1d75eaaa7ca4d6d5b0e055f Mon Sep 17 00:00:00 2001 From: Dananji Withana Date: Mon, 19 Aug 2024 13:57:29 -0400 Subject: [PATCH 3/3] Update src/components/MediaPlayer/VideoJS/VideoJSPlayer.js Co-authored-by: Chris Colvard --- src/components/MediaPlayer/VideoJS/VideoJSPlayer.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 2ab31800..ccc3a593 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -641,8 +641,7 @@ function VideoJSPlayer({ 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.'; + 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: