videojs-errors - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+<a name="5.1.0"></a>
+# [5.1.0](https://github.com/brightcove/videojs-errors/compare/v5.0.0...v5.1.0) (2022-06-13)
+
+### Features
+
+* improve the playback timeout error experience ([#223](https://github.com/brightcove/videojs-errors/issues/223)) ([235ff8f](https://github.com/brightcove/videojs-errors/commit/235ff8f))
+
 <a name="5.0.0"></a>
@@ -2,0 +9,0 @@ # [5.0.0](https://github.com/brightcove/videojs-errors/compare/v4.5.0...v5.0.0) (2021-12-17)

dist/videojs-errors.cjs.js

@@ -1,2 +0,2 @@
-/*! @name videojs-errors @version 5.0.0 @license Apache-2.0 */
+/*! @name videojs-errors @version 5.1.0 @license Apache-2.0 */
 'use strict';
@@ -12,3 +12,3 @@
 
-var version = "5.0.0";
+var version = "5.1.0";
 
@@ -58,3 +58,3 @@ const FlashObj = videojs__default["default"].getComponent('Flash');
       type: 'PLAYER_ERR_TIMEOUT',
-      headline: 'Could not download the video'
+      headline: 'It looks like you\'re having playback issues. Reloading the video may help.'
     },
@@ -252,10 +252,35 @@ 'PLAYER_ERR_DOMAIN_RESTRICTED': {
     content.id = 'vjs-errors-dialog';
+    const errorCode = `<div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${error.type || error.code}</div>`;
+    const isTimeoutError = error.code === -2;
     dialogContent = `<div class="vjs-errors-content-container">
-      <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
-        <div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${error.type || error.code}</div>
-        ${details}
+        <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
+        ${isTimeoutError ? '' : errorCode}
+        ${isTimeoutError ? '' : details}
       </div>`;
-    const closeable = display.closeable(!('dismiss' in error) || error.dismiss); // We should get a close button
+    const closeable = display.closeable(!('dismiss' in error) || error.dismiss);
 
-    if (closeable) {
+    if (isTimeoutError) {
+      dialogContent += `<div class="vjs-errors-timeout-button-container">
+         <button>${this.localize('Reload Video')}</button>
+         <button>${this.localize('Dismiss')}</button>
+       </div>`;
+      content.innerHTML = dialogContent;
+      display.fillWith(content);
+      display.getChild('closeButton').hide();
+      const reloadButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:first-child');
+      const dismissButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:last-child');
+      player.on(reloadButton, 'click', function () {
+        const source = player.currentSource();
+        player.reset();
+        player.src(source);
+      });
+      player.on(dismissButton, 'click', function () {
+        display.close();
+      });
+      display.one('modalclose', () => {
+        player.off(reloadButton);
+        player.off(dismissButton);
+      });
+    } else if (closeable) {
+      // We should get a close button
       dialogContent += `<div class="vjs-errors-ok-button-container">
@@ -262,0 +287,0 @@ <button class="vjs-errors-ok-button">${this.localize('OK')}</button>

dist/videojs-errors.es.js

@@ -1,6 +0,6 @@
-/*! @name videojs-errors @version 5.0.0 @license Apache-2.0 */
+/*! @name videojs-errors @version 5.1.0 @license Apache-2.0 */
 import videojs from 'video.js';
 import document from 'global/document';
 
-var version = "5.0.0";
+var version = "5.1.0";
 
@@ -50,3 +50,3 @@ const FlashObj = videojs.getComponent('Flash');
       type: 'PLAYER_ERR_TIMEOUT',
-      headline: 'Could not download the video'
+      headline: 'It looks like you\'re having playback issues. Reloading the video may help.'
     },
@@ -244,10 +244,35 @@ 'PLAYER_ERR_DOMAIN_RESTRICTED': {
     content.id = 'vjs-errors-dialog';
+    const errorCode = `<div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${error.type || error.code}</div>`;
+    const isTimeoutError = error.code === -2;
     dialogContent = `<div class="vjs-errors-content-container">
-      <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
-        <div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${error.type || error.code}</div>
-        ${details}
+        <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
+        ${isTimeoutError ? '' : errorCode}
+        ${isTimeoutError ? '' : details}
       </div>`;
-    const closeable = display.closeable(!('dismiss' in error) || error.dismiss); // We should get a close button
+    const closeable = display.closeable(!('dismiss' in error) || error.dismiss);
 
-    if (closeable) {
+    if (isTimeoutError) {
+      dialogContent += `<div class="vjs-errors-timeout-button-container">
+         <button>${this.localize('Reload Video')}</button>
+         <button>${this.localize('Dismiss')}</button>
+       </div>`;
+      content.innerHTML = dialogContent;
+      display.fillWith(content);
+      display.getChild('closeButton').hide();
+      const reloadButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:first-child');
+      const dismissButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:last-child');
+      player.on(reloadButton, 'click', function () {
+        const source = player.currentSource();
+        player.reset();
+        player.src(source);
+      });
+      player.on(dismissButton, 'click', function () {
+        display.close();
+      });
+      display.one('modalclose', () => {
+        player.off(reloadButton);
+        player.off(dismissButton);
+      });
+    } else if (closeable) {
+      // We should get a close button
       dialogContent += `<div class="vjs-errors-ok-button-container">
@@ -254,0 +279,0 @@ <button class="vjs-errors-ok-button">${this.localize('OK')}</button>

dist/videojs-errors.js

@@ -1,2 +0,2 @@
-/*! @name videojs-errors @version 5.0.0 @license Apache-2.0 */
+/*! @name videojs-errors @version 5.1.0 @license Apache-2.0 */
 (function (global, factory) {
@@ -12,3 +12,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
 
-  var version = "5.0.0";
+  var version = "5.1.0";
 
@@ -58,3 +58,3 @@ const FlashObj = videojs__default["default"].getComponent('Flash');
         type: 'PLAYER_ERR_TIMEOUT',
-        headline: 'Could not download the video'
+        headline: 'It looks like you\'re having playback issues. Reloading the video may help.'
       },
@@ -252,10 +252,35 @@ 'PLAYER_ERR_DOMAIN_RESTRICTED': {
       content.id = 'vjs-errors-dialog';
+      const errorCode = `<div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${error.type || error.code}</div>`;
+      const isTimeoutError = error.code === -2;
       dialogContent = `<div class="vjs-errors-content-container">
-      <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
-        <div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${error.type || error.code}</div>
-        ${details}
+        <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
+        ${isTimeoutError ? '' : errorCode}
+        ${isTimeoutError ? '' : details}
       </div>`;
-      const closeable = display.closeable(!('dismiss' in error) || error.dismiss); // We should get a close button
+      const closeable = display.closeable(!('dismiss' in error) || error.dismiss);
 
-      if (closeable) {
+      if (isTimeoutError) {
+        dialogContent += `<div class="vjs-errors-timeout-button-container">
+         <button>${this.localize('Reload Video')}</button>
+         <button>${this.localize('Dismiss')}</button>
+       </div>`;
+        content.innerHTML = dialogContent;
+        display.fillWith(content);
+        display.getChild('closeButton').hide();
+        const reloadButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:first-child');
+        const dismissButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:last-child');
+        player.on(reloadButton, 'click', function () {
+          const source = player.currentSource();
+          player.reset();
+          player.src(source);
+        });
+        player.on(dismissButton, 'click', function () {
+          display.close();
+        });
+        display.one('modalclose', () => {
+          player.off(reloadButton);
+          player.off(dismissButton);
+        });
+      } else if (closeable) {
+        // We should get a close button
         dialogContent += `<div class="vjs-errors-ok-button-container">
@@ -262,0 +287,0 @@ <button class="vjs-errors-ok-button">${this.localize('OK')}</button>

dist/videojs-errors.min.js

@@ -1,2 +0,2 @@
-/*! @name videojs-errors @version 5.0.0 @license Apache-2.0 */
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsErrors=o(e.videojs)}(this,(function(e){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=o(e),i="5.0.0";const r=t.default.getComponent("Flash"),n=!t.default.browser.IS_IPHONE,s=t.default.registerPlugin||t.default.plugin,d={header:"",code:"",message:"",timeout:45e3,backgroundTimeout:3e5,dismiss:n,errors:{1:{type:"MEDIA_ERR_ABORTED",headline:"The video download was cancelled"},2:{type:"MEDIA_ERR_NETWORK",headline:"The video connection was lost, please confirm you are connected to the internet"},3:{type:"MEDIA_ERR_DECODE",headline:"The video is bad or in a format that cannot be played on your browser"},4:{type:"MEDIA_ERR_SRC_NOT_SUPPORTED",headline:"This video is either unavailable or not supported in this browser"},5:{type:"MEDIA_ERR_ENCRYPTED",headline:"The video you are trying to watch is encrypted and we do not know how to decrypt it"},unknown:{type:"MEDIA_ERR_UNKNOWN",headline:"An unanticipated problem was encountered, check back soon and try again"},"-1":{type:"PLAYER_ERR_NO_SRC",headline:"No video has been loaded"},"-2":{type:"PLAYER_ERR_TIMEOUT",headline:"Could not download the video"},PLAYER_ERR_DOMAIN_RESTRICTED:{headline:"This video is restricted from playing on your current domain"},PLAYER_ERR_IP_RESTRICTED:{headline:"This video is restricted at your current IP address"},PLAYER_ERR_GEO_RESTRICTED:{headline:"This video is restricted from playing in your current geographic region"},FLASHLS_ERR_CROSS_DOMAIN:{headline:"The video could not be loaded: crossdomain access denied."}}},a=function(e,o){let n,s,l;const c=[],u=function(e){o.errors=t.default.mergeOptions(o.errors,e),Object.keys(o.errors).forEach((e=>{const t=o.errors[e];t.type||(t.type=e)}))};u();const f=function(){e.error()&&-2===e.error().code&&e.error(null),e.clearTimeout(s),e.clearTimeout(n),l&&(l=!1,e.removeClass("vjs-waiting"));const t=[1/0,-1],i=(e,o)=>-1!==e.indexOf(o);"hidden"===document.visibilityState&&(e.muted()||i(t,o.backgroundTimeout))||"visible"===document.visibilityState&&i(t,o.timeout)||(s=e.setTimeout((function(){e.error()||e.paused()||e.ended()||(l=!0,e.addClass("vjs-waiting"))}),1e3),n=e.setTimeout((function(){e.error()||e.paused()||e.ended()||e.error({code:-2,type:"PLAYER_ERR_TIMEOUT"})}),"hidden"===document.visibilityState?o.backgroundTimeout:o.timeout))},h=function(){let o;for(;c.length;)o=c.shift(),e.off(o[0],o[1]);e.clearTimeout(n),e.clearTimeout(s)},p=function(){let o=0;h(),f(),function(o,t){const i=function(){if(!e.error()){const o=e.$(".vjs-tech");if(o&&"application/x-shockwave-flash"===o.type&&!o.vjs_getProperty)return void e.error({code:-2,type:"PLAYER_ERR_TIMEOUT"});if(e.paused())return f();if(e.ended())return f()}t.call(this)};e.on(o,i),c.push([o,i])}(["timeupdate","adtimeupdate"],(function(){const t=e.currentTime();t!==o&&(o=t,f())})),e.off(document,"visibilitychange",p),e.on(document,"visibilitychange",p)},m=function(){e.currentSrc()||e.error({code:-1,type:"PLAYER_ERR_NO_SRC"})},v=function(){let i="",n=e.error();const s=document.createElement("div");let d="";if(!n)return;if(e.off(document,"visibilitychange",p),n=t.default.mergeOptions(n,o.errors[n.code||n.type||0]),n.message&&(i=`<div class="vjs-errors-details">${e.localize("Technical details")}\n        : <div class="vjs-errors-message">${e.localize(n.message)}</div>\n        </div>`),4===n.code&&r&&!r.isSupported()){i+=`<span class="vjs-errors-flashmessage">${e.localize("If you are using an older browser please try upgrading or installing Flash.")}</span>`}const a=e.getChild("errorDisplay");s.className="vjs-errors-dialog",s.id="vjs-errors-dialog",d=`<div class="vjs-errors-content-container">\n      <h2 class="vjs-errors-headline">${this.localize(n.headline)}</h2>\n        <div class="vjs-errors-code"><b>${this.localize("Error Code")}:</b> ${n.type||n.code}</div>\n        ${i}\n      </div>`;if(a.closeable(!("dismiss"in n)||n.dismiss)){d+=`<div class="vjs-errors-ok-button-container">\n          <button class="vjs-errors-ok-button">${this.localize("OK")}</button>\n        </div>`,s.innerHTML=d,a.fillWith(s),a.contentEl().firstChild.appendChild(a.getChild("closeButton").el());const o=a.el().querySelector(".vjs-errors-ok-button");e.on(o,"click",(function(){a.close()}))}else s.innerHTML=d,a.fillWith(s);(e.currentWidth()<=600||e.currentHeight()<=250)&&a.addClass("vjs-xs"),a.one("modalclose",(()=>e.error(null)))},E=function(){h(),e.removeClass("vjs-errors"),e.off("play",p),e.off(document,"visibilitychange",p),e.off("play",m),e.off("dispose",E),e.off(["aderror","error"],v)},R=function(o){E(),a(e,t.default.mergeOptions(d,o))};R.extend=e=>u(e),R.getAll=()=>t.default.mergeOptions(o.errors),R.timeout=function(t){if(void 0===t)return o.timeout;t!==o.timeout&&(o.timeout=t,e.paused()||p())},R.backgroundTimeout=function(t){if(void 0===t)return o.backgroundTimeout;t!==o.backgroundTimeout&&(o.backgroundTimeout=t,e.paused()||p())},R.disableProgress=()=>{},e.on("play",p),e.on("play",m),e.on("dispose",E),e.on(["aderror","contenterror","error"],v),e.ready((()=>{e.addClass("vjs-errors")})),e.paused()||p(),R.VERSION=i,e.errors=R},l=function(e){a(this,t.default.mergeOptions(d,e))};return["extend","getAll"].forEach((e=>{l[e]=function(){t.default.log.warn(`The errors.${e}() method is not available until the plugin has been initialized!`)}})),l.VERSION=i,s("errors",l),l}));
+/*! @name videojs-errors @version 5.1.0 @license Apache-2.0 */
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsErrors=o(e.videojs)}(this,(function(e){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=o(e),i="5.1.0";const r=t.default.getComponent("Flash"),n=!t.default.browser.IS_IPHONE,s=t.default.registerPlugin||t.default.plugin,d={header:"",code:"",message:"",timeout:45e3,backgroundTimeout:3e5,dismiss:n,errors:{1:{type:"MEDIA_ERR_ABORTED",headline:"The video download was cancelled"},2:{type:"MEDIA_ERR_NETWORK",headline:"The video connection was lost, please confirm you are connected to the internet"},3:{type:"MEDIA_ERR_DECODE",headline:"The video is bad or in a format that cannot be played on your browser"},4:{type:"MEDIA_ERR_SRC_NOT_SUPPORTED",headline:"This video is either unavailable or not supported in this browser"},5:{type:"MEDIA_ERR_ENCRYPTED",headline:"The video you are trying to watch is encrypted and we do not know how to decrypt it"},unknown:{type:"MEDIA_ERR_UNKNOWN",headline:"An unanticipated problem was encountered, check back soon and try again"},"-1":{type:"PLAYER_ERR_NO_SRC",headline:"No video has been loaded"},"-2":{type:"PLAYER_ERR_TIMEOUT",headline:"It looks like you're having playback issues. Reloading the video may help."},PLAYER_ERR_DOMAIN_RESTRICTED:{headline:"This video is restricted from playing on your current domain"},PLAYER_ERR_IP_RESTRICTED:{headline:"This video is restricted at your current IP address"},PLAYER_ERR_GEO_RESTRICTED:{headline:"This video is restricted from playing in your current geographic region"},FLASHLS_ERR_CROSS_DOMAIN:{headline:"The video could not be loaded: crossdomain access denied."}}},a=function(e,o){let n,s,l;const c=[],u=function(e){o.errors=t.default.mergeOptions(o.errors,e),Object.keys(o.errors).forEach((e=>{const t=o.errors[e];t.type||(t.type=e)}))};u();const f=function(){e.error()&&-2===e.error().code&&e.error(null),e.clearTimeout(s),e.clearTimeout(n),l&&(l=!1,e.removeClass("vjs-waiting"));const t=[1/0,-1],i=(e,o)=>-1!==e.indexOf(o);"hidden"===document.visibilityState&&(e.muted()||i(t,o.backgroundTimeout))||"visible"===document.visibilityState&&i(t,o.timeout)||(s=e.setTimeout((function(){e.error()||e.paused()||e.ended()||(l=!0,e.addClass("vjs-waiting"))}),1e3),n=e.setTimeout((function(){e.error()||e.paused()||e.ended()||e.error({code:-2,type:"PLAYER_ERR_TIMEOUT"})}),"hidden"===document.visibilityState?o.backgroundTimeout:o.timeout))},h=function(){let o;for(;c.length;)o=c.shift(),e.off(o[0],o[1]);e.clearTimeout(n),e.clearTimeout(s)},p=function(){let o=0;h(),f(),function(o,t){const i=function(){if(!e.error()){const o=e.$(".vjs-tech");if(o&&"application/x-shockwave-flash"===o.type&&!o.vjs_getProperty)return void e.error({code:-2,type:"PLAYER_ERR_TIMEOUT"});if(e.paused())return f();if(e.ended())return f()}t.call(this)};e.on(o,i),c.push([o,i])}(["timeupdate","adtimeupdate"],(function(){const t=e.currentTime();t!==o&&(o=t,f())})),e.off(document,"visibilitychange",p),e.on(document,"visibilitychange",p)},m=function(){e.currentSrc()||e.error({code:-1,type:"PLAYER_ERR_NO_SRC"})},v=function(){let i="",n=e.error();const s=document.createElement("div");let d="";if(!n)return;if(e.off(document,"visibilitychange",p),n=t.default.mergeOptions(n,o.errors[n.code||n.type||0]),n.message&&(i=`<div class="vjs-errors-details">${e.localize("Technical details")}\n        : <div class="vjs-errors-message">${e.localize(n.message)}</div>\n        </div>`),4===n.code&&r&&!r.isSupported()){i+=`<span class="vjs-errors-flashmessage">${e.localize("If you are using an older browser please try upgrading or installing Flash.")}</span>`}const a=e.getChild("errorDisplay");s.className="vjs-errors-dialog",s.id="vjs-errors-dialog";const l=`<div class="vjs-errors-code"><b>${this.localize("Error Code")}:</b> ${n.type||n.code}</div>`,c=-2===n.code;d=`<div class="vjs-errors-content-container">\n        <h2 class="vjs-errors-headline">${this.localize(n.headline)}</h2>\n        ${c?"":l}\n        ${c?"":i}\n      </div>`;const u=a.closeable(!("dismiss"in n)||n.dismiss);if(c){d+=`<div class="vjs-errors-timeout-button-container">\n         <button>${this.localize("Reload Video")}</button>\n         <button>${this.localize("Dismiss")}</button>\n       </div>`,s.innerHTML=d,a.fillWith(s),a.getChild("closeButton").hide();const o=a.el().querySelector(".vjs-errors-timeout-button-container > button:first-child"),t=a.el().querySelector(".vjs-errors-timeout-button-container > button:last-child");e.on(o,"click",(function(){const o=e.currentSource();e.reset(),e.src(o)})),e.on(t,"click",(function(){a.close()})),a.one("modalclose",(()=>{e.off(o),e.off(t)}))}else if(u){d+=`<div class="vjs-errors-ok-button-container">\n          <button class="vjs-errors-ok-button">${this.localize("OK")}</button>\n        </div>`,s.innerHTML=d,a.fillWith(s),a.contentEl().firstChild.appendChild(a.getChild("closeButton").el());const o=a.el().querySelector(".vjs-errors-ok-button");e.on(o,"click",(function(){a.close()}))}else s.innerHTML=d,a.fillWith(s);(e.currentWidth()<=600||e.currentHeight()<=250)&&a.addClass("vjs-xs"),a.one("modalclose",(()=>e.error(null)))},y=function(){h(),e.removeClass("vjs-errors"),e.off("play",p),e.off(document,"visibilitychange",p),e.off("play",m),e.off("dispose",y),e.off(["aderror","error"],v)},R=function(o){y(),a(e,t.default.mergeOptions(d,o))};R.extend=e=>u(e),R.getAll=()=>t.default.mergeOptions(o.errors),R.timeout=function(t){if(void 0===t)return o.timeout;t!==o.timeout&&(o.timeout=t,e.paused()||p())},R.backgroundTimeout=function(t){if(void 0===t)return o.backgroundTimeout;t!==o.backgroundTimeout&&(o.backgroundTimeout=t,e.paused()||p())},R.disableProgress=()=>{},e.on("play",p),e.on("play",m),e.on("dispose",y),e.on(["aderror","contenterror","error"],v),e.ready((()=>{e.addClass("vjs-errors")})),e.paused()||p(),R.VERSION=i,e.errors=R},l=function(e){a(this,t.default.mergeOptions(d,e))};return["extend","getAll"].forEach((e=>{l[e]=function(){t.default.log.warn(`The errors.${e}() method is not available until the plugin has been initialized!`)}})),l.VERSION=i,s("errors",l),l}));

package.json

 {
   "name": "videojs-errors",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "author": "Brightcove, Inc.",
@@ -5,0 +5,0 @@ "description": "A Video.js plugin for custom error reporting",

src/plugin.js

@@ -52,3 +52,3 @@ import videojs from 'video.js';
       type: 'PLAYER_ERR_TIMEOUT',
-      headline: 'Could not download the video'
+      headline: 'It looks like you\'re having playback issues. Reloading the video may help.'
     },
@@ -259,7 +259,11 @@ 'PLAYER_ERR_DOMAIN_RESTRICTED': {
     content.id = 'vjs-errors-dialog';
+
+    const errorCode = `<div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${(error.type || error.code)}</div>`;
+    const isTimeoutError = error.code === -2;
+
     dialogContent =
      `<div class="vjs-errors-content-container">
-      <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
-        <div class="vjs-errors-code"><b>${this.localize('Error Code')}:</b> ${(error.type || error.code)}</div>
-        ${details}
+        <h2 class="vjs-errors-headline">${this.localize(error.headline)}</h2>
+        ${isTimeoutError ? '' : errorCode}
+        ${isTimeoutError ? '' : details}
       </div>`;
@@ -269,5 +273,33 @@
 
-    // We should get a close button
-    if (closeable) {
+    if (isTimeoutError) {
       dialogContent +=
+       `<div class="vjs-errors-timeout-button-container">
+         <button>${this.localize('Reload Video')}</button>
+         <button>${this.localize('Dismiss')}</button>
+       </div>`;
+      content.innerHTML = dialogContent;
+      display.fillWith(content);
+
+      display.getChild('closeButton').hide();
+
+      const reloadButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:first-child');
+      const dismissButton = display.el().querySelector('.vjs-errors-timeout-button-container > button:last-child');
+
+      player.on(reloadButton, 'click', function() {
+        const source = player.currentSource();
+
+        player.reset();
+        player.src(source);
+      });
+      player.on(dismissButton, 'click', function() {
+        display.close();
+      });
+
+      display.one('modalclose', () => {
+        player.off(reloadButton);
+        player.off(dismissButton);
+      });
+    } else if (closeable) {
+      // We should get a close button
+      dialogContent +=
        `<div class="vjs-errors-ok-button-container">
@@ -274,0 +306,0 @@ <button class="vjs-errors-ok-button">${this.localize('OK')}</button>

No alert changes

Improved metrics

Total package byte prevSize

302447

increased by5.38%

Lines of code

7879

increased by7.12%

No dependency changes