@gcorevideo/player 2.28.16 → 2.28.17

package/dist/index.embed.js

@@ -49802,7 +49802,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$7 = 'playback.hls';
+const T$8 = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -50126,7 +50126,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$7} _recover failed to recover`, {
+            trace(`${T$8} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50212,7 +50212,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$7} _onHLSJSError`, {
+        trace(`${T$8} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -50260,7 +50260,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$7} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$8} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -50273,7 +50273,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$7} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$8} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -50303,7 +50303,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$7} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$8} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50780,7 +50780,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$6 = 'gplayer';
+const T$7 = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -51130,7 +51130,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$6} onReady`, {
+            trace(`${T$7} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -51562,7 +51562,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$5 = 'plugins.media_control';
+const T$6 = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @public
@@ -51798,8 +51798,8 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_FULLSCREEN, this.show);
         this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.configure);
         this.listenTo(this.core, Events$1.CORE_RESIZE, this.playerResize);
-        this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
-        this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
+        // this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
+        // this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
         // const has360 = this.core?.getPlugin('video_360');
         // if (Browser.isiOS && has360) {
         //   this.container?.el.addEventListener('click', e => {
@@ -51825,6 +51825,10 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DBLCLICK, this.toggleFullscreen);
+        const clk = clickaway(() => {
+            this.resetUserKeepVisible();
+        }, this.core.activeContainer.$el[0]);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, clk);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_SETTINGSUPDATE, this.updateSettings);
@@ -51849,12 +51853,16 @@ class MediaControl extends UICorePlugin {
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
-        this.$el.hide(); // TODO why?
+        this.$el.hide();
     }
     /**
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
+        trace(`${T$6} enable`, {
+            chromeless: this.options.chromeless,
+            userDisabled: this.userDisabled,
+        });
         if (this.options.chromeless) {
             return;
         }
@@ -52008,7 +52016,7 @@ class MediaControl extends UICorePlugin {
         this.$el.removeClass('w370');
         this.$el.removeClass('w270');
         this.verticalVolume = false;
-        trace(`${T$5} playerResize`, {
+        trace(`${T$6} playerResize`, {
             width: this.container.$el.width(),
             height: this.container.$el.height(),
             hideVolumeBar: this.options.hideVolumeBar});
@@ -52186,7 +52194,7 @@ class MediaControl extends UICorePlugin {
         else {
             this.hideVolumeId = setTimeout(() => {
                 this.hideVolumeId = null;
-                trace(`${T$5} hideVolumeBar`, {
+                trace(`${T$6} hideVolumeBar`, {
                     volumeBarContainer: !!this.$volumeBarContainer,
                 });
                 this.$volumeBarContainer?.addClass('volume-bar-hide');
@@ -52258,15 +52266,24 @@ class MediaControl extends UICorePlugin {
         this.setSeekPercentage(pos);
     }
     setUserKeepVisible() {
+        trace(`${T$6} setUserKeepVisible`, {
+            userKeepVisible: this.userKeepVisible,
+        });
         this.userKeepVisible = true;
     }
     resetUserKeepVisible() {
+        trace(`${T$6} resetUserKeepVisible`, {
+            userKeepVisible: this.userKeepVisible,
+        });
         this.userKeepVisible = false;
     }
     isVisible() {
         return !this.$el.hasClass('media-control-hide');
     }
     show(event) {
+        trace(`${T$6} show`, {
+            disabled: this.disabled,
+            disableControlPanel: this.options.disableControlPanel});
         if (this.disabled || this.options.disableControlPanel) {
             return;
         }
@@ -52293,7 +52310,7 @@ class MediaControl extends UICorePlugin {
         this.updateCursorStyle(showing);
     }
     hide(delay = 0) {
-        trace(`${T$5} hide`, {
+        trace(`${T$6} hide`, {
             visible: this.isVisible(),
             disabled: this.disabled,
             hideMediaControl: this.options.hideMediaControl,
@@ -52704,23 +52721,6 @@ class MediaControl extends UICorePlugin {
         }
         this.resetUserKeepVisible();
     }
-    // TODO manage by the ads plugin
-    onStartAd() {
-        // this.advertisementPlaying = true
-        this.disable();
-    }
-    // TODO manage by the ads plugin
-    onFinishAd() {
-        // this.advertisementPlaying = false
-        this.enable();
-    }
-    // TODO remove
-    hideControllAds() {
-        if (this.container.advertisement &&
-            this.container.advertisement.type !== 'idle') {
-            this.hide();
-        }
-    }
     static getPageX(event) {
         return getPageX(event);
     }
@@ -52804,6 +52804,17 @@ function mergeElements(a, b) {
         return acc;
     }, a);
 }
+function clickaway(callback, element) {
+    const handler = (event) => {
+        if (!element.contains(event.target)) {
+            callback();
+            window.removeEventListener('click', handler);
+        }
+    };
+    return () => {
+        window.addEventListener('click', handler);
+    };
+}
 
 const VERSION$6 = '2.22.4';
 // const T = 'plugins.audiotracks'
@@ -53002,7 +53013,7 @@ const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"
 
 insertStyle(".big-mute-icon-wrapper[data-big-mute] {\n  position: absolute;\n  z-index: 9998;\n  background-color: transparent;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: calc(100% - 50px);\n  margin: 0 auto;\n  opacity: 0.75;\n  transition: opacity 0.1s ease;\n  pointer-events: auto;\n}\n.big-mute-icon-wrapper[data-big-mute].hide {\n  display: none;\n}\n.big-mute-icon-wrapper[data-big-mute]:hover {\n  cursor: pointer;\n}\n\n.big-mute-icon[data-big-mute-icon] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n  background: rgba(240, 243, 247, 0.9411764706);\n  z-index: 10000;\n}\n.big-mute-icon[data-big-mute-icon] svg {\n  margin-left: 5px;\n  width: 80px;\n  height: 80px;\n}\n.big-mute-icon[data-big-mute-icon] svg path {\n  fill: #1f1e1e !important;\n}\n.big-mute-icon[data-big-mute-icon]:hover {\n  background: rgba(240, 243, 247, 0.8784313725);\n}\n.big-mute-icon[data-big-mute-icon]:hover svg path {\n  fill: #151515 !important;\n}");
 
-const T$4 = 'plugins.big_mute_button';
+const T$5 = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * `PLUGIN` that displays a big mute button over the video when it's being played muted.
@@ -53065,7 +53076,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$4} onPlay`, {
+        trace(`${T$5} onPlay`, {
             autoPlay: this.autoPlay});
         if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
@@ -55623,11 +55634,13 @@ const initSpeedTest = (customMetrics) => {
                 }
             }
         };
-        // getElementById('dlText').textContent = DEFAULT_DOWNLOAD_SPEED;
-        await fetch('https://iam.gcdn.co/info/json')
+        const myinfoUrl = 'https://gcore.com/.well-known/cdn-debug/json';
+        // await fetch('https://iam.gcdn.co/info/json')
+        await fetch(myinfoUrl)
             .then(r => r.json())
             .then(data => {
-            const country = data['Server Country code'].toLowerCase();
+            // const country = data['Server Country code'].toLowerCase();
+            const country = getCountryCodeFromClientHeaders(data.client_headers);
             const server = serversList.find(s => s.country === country) || serversList[0];
             if (!server) {
                 throw new Error('Failed to select a server');
@@ -55673,6 +55686,15 @@ function rankConnectionSpeed(dlSpeed) {
     }
     return 0;
 }
+function getCountryCodeFromClientHeaders(clientHeaders) {
+    if (clientHeaders && clientHeaders['country']) {
+        const m = clientHeaders['country'].match(/'code':\s*'([A-Za-z]{2})'/);
+        if (m) {
+            return m[1].toLowerCase();
+        }
+    }
+    return 'lu';
+}
 
 insertStyle(":root {\n  --primary-background-color: #000;\n  --secondary-background-color: #262626;\n  --primary-text-color: #fff;\n  --secondary-text-color: #fff4f2;\n  --hover-text-color: #f9b090;\n  --speedtest-red: #df564d;\n  --speedtest-orange: #df934d;\n  --speedtest-yellow: #dfd04d;\n  --speedtest-light-green: #c2df4d;\n  --speedtest-green: #73df4d;\n}\n\n.clappr-nerd-stats {\n  cursor: default;\n}\n.clappr-nerd-stats .stats-box {\n  position: absolute;\n  display: inline-block;\n  bottom: 52px;\n  right: 0;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  padding: 0 10px 12px;\n  margin: 0;\n  line-height: 20px;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--primary-background-color);\n  color: #fff;\n  z-index: 20000;\n  overflow: auto;\n  max-width: 100%;\n}\n.clappr-nerd-stats .stats-box-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 32px;\n  background: var(--primary-background-color);\n}\n.clappr-nerd-stats .stats-box-top .close-button {\n  position: absolute;\n  right: 12px;\n  top: 10px;\n  display: block;\n  width: 12px;\n  height: 12px;\n}\n.clappr-nerd-stats .stats-box-top .close-button svg path {\n  fill: var(--primary-text-color);\n}\n.clappr-nerd-stats .stats-box-top .close-button:hover svg path {\n  fill: var(--hover-text-color);\n}\n.clappr-nerd-stats .stats-box-main {\n  overflow: hidden;\n  margin-top: 44px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.clappr-nerd-stats .stats-box-main ul {\n  flex: 0 1 1fr;\n  min-width: 200px;\n}\n.clappr-nerd-stats .stats-box.wide {\n  width: 820px;\n}\n.clappr-nerd-stats .stats-box ul, .clappr-nerd-stats .stats-box li {\n  list-style-type: none;\n}\n.clappr-nerd-stats .stats-box ul div, .clappr-nerd-stats .stats-box li div {\n  padding-left: 2px;\n  padding-right: 2px;\n  background: var(--primary-background-color);\n  gap: 10px;\n}\n.clappr-nerd-stats .stats-box ul {\n  padding: 5px;\n  width: 200px;\n  flex: 0 1 50%;\n}\n.clappr-nerd-stats .stats-box ul li {\n  position: relative;\n  padding: 0 5px;\n  text-align: left;\n}\n.clappr-nerd-stats .stats-box ul li.canvas-wrapper {\n  padding: 0;\n}\n.clappr-nerd-stats .stats-box ul li.canvas-wrapper canvas {\n  width: 100%;\n}\n.clappr-nerd-stats .stats-box ul li:nth-child(2n) {\n  background: var(--secondary-background-color);\n}\n.clappr-nerd-stats .stats-box ul li:nth-child(2n) div {\n  background: var(--secondary-background-color);\n}\n.clappr-nerd-stats .stats-box ul li.title {\n  text-align: center;\n  font-weight: bold;\n  padding-bottom: 4px;\n  font-size: 14px;\n}\n.clappr-nerd-stats .stats-box ul li div {\n  margin: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.desktop .clappr-nerd-stats .stats-box.narrow {\n  width: 250px;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow ul {\n  width: 100%;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary {\n  padding: 0 5px;\n  height: auto;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block {\n  width: 100%;\n  flex-direction: column;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock {\n  width: 100%;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock-content {\n  width: 100%;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-header {\n  padding-top: 12px;\n  height: 38px;\n  text-align: center;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-quality-header {\n  text-align: center;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer {\n  height: 80px;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer-about-link {\n  bottom: 0;\n  left: 0;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer .speedtest-footer-refresh {\n  inset: 50% auto auto 50%;\n  transform: translate(-50%, -50%);\n}\n\n.speed-test-button {\n  margin: 10px 0 0;\n  color: #000;\n}\n\n.speed-test {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n}\n.speed-test .speed-test-header {\n  width: 100%;\n  height: 32px;\n}\n.speed-test .speed-test-header .close-speed-test {\n  float: right;\n  margin-right: 5px;\n  line-height: 32px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.speed-test .speed-test-header .close-speed-test:hover {\n  color: var(--hover-text-color);\n}\n\n.settings-button {\n  float: right;\n  margin: 0 12px 0 0;\n  height: 40px;\n  width: 24px;\n  border: none;\n  padding: 0;\n}\n\n.speedtest-summary {\n  width: 100%;\n  border-top: 1px solid var(--secondary-background-color) !important;\n  border-bottom: 1px solid var(--secondary-background-color) !important;\n  display: flex !important;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n}\n.speedtest-summary .speedtest-summary-header {\n  width: 100%;\n  padding-top: 4px;\n  text-align: left;\n  height: 32px;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n.speedtest-summary .speedtest-summary-block {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.speedtest-summary .speedtest-summary-block .speedtest-summary-subblock {\n  width: 50%;\n  margin-top: 4px;\n  margin-bottom: 12px;\n}\n.speedtest-summary .speedtest-summary-block .speedtest-summary-subblock-content {\n  padding: 2px;\n  width: 248px;\n  max-width: 100%;\n}\n\n.speedtest-quality {\n  width: 100%;\n  height: 36px;\n  display: flex !important;\n  flex-direction: column !important;\n  justify-content: space-between !important;\n}\n.speedtest-quality .speedtest-quality-header {\n  font-size: 12px;\n  height: 20px;\n  border-left: 2px solid var(--secondary-background-color) !important;\n  background-color: var(--secondary-background-color);\n  text-align: left;\n}\n.speedtest-quality-content {\n  width: 100%;\n  margin-top: 8px;\n  height: 8px;\n  display: flex !important;\n  flex-direction: row !important;\n  align-items: stretch !important;\n  justify-content: space-between;\n}\n.speedtest-quality-content-item {\n  width: 18.8%;\n  background-color: #fff;\n}\n.speedtest-quality-content-item.speedtest-quality-value-1 {\n  background-color: var(--speedtest-red);\n}\n.speedtest-quality-content-item.speedtest-quality-value-2 {\n  background-color: var(--speedtest-orange);\n}\n.speedtest-quality-content-item.speedtest-quality-value-3 {\n  background-color: var(--speedtest-yellow);\n}\n.speedtest-quality-content-item.speedtest-quality-value-4 {\n  background-color: var(--speedtest-light-green);\n}\n.speedtest-quality-content-item.speedtest-quality-value-5 {\n  background-color: var(--speedtest-green);\n}\n\n.speedtest-footer {\n  position: relative;\n  float: left;\n  width: 100%;\n  height: 30px;\n  line-height: 16px;\n}\n.speedtest-footer-about-link {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: var(--secondary-text-color);\n  text-decoration: underline !important;\n}\n.speedtest-footer-about-link:hover {\n  color: var(--hover-text-color);\n}\n.speedtest-footer .speedtest-footer-refresh {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  color: var(--secondary-text-color);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.speedtest-footer .speedtest-footer-refresh svg path {\n  fill: var(--secondary-text-color);\n}\n.speedtest-footer .speedtest-footer-refresh:hover {\n  color: var(--hover-text-color);\n}\n.speedtest-footer .speedtest-footer-refresh:hover svg path {\n  fill: var(--hover-text-color);\n}\n\n.mobile .clappr-nerd-stats .stats-box {\n  position: fixed;\n  height: auto;\n  width: auto;\n  inset: 0;\n  min-width: 100vw;\n  padding-bottom: 4px;\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.mobile .clappr-nerd-stats .stats-box-top {\n  position: fixed;\n}\n.mobile .clappr-nerd-stats .stats-box-main ul {\n  flex: 0 1 50%;\n}\n\n@media only screen and (orientation: portrait) {\n  .mobile .speedtest-summary {\n    padding: 0 5px;\n    height: auto;\n  }\n  .mobile .speedtest-summary-block {\n    width: 100%;\n    flex-direction: column;\n  }\n  .mobile .speedtest-summary-block .speedtest-summary-subblock {\n    width: 100%;\n  }\n  .mobile .speedtest-summary-block .speedtest-summary-subblock-content {\n    width: 100%;\n  }\n  .mobile .speedtest-summary-header {\n    padding-top: 12px;\n    height: 38px;\n    text-align: center;\n  }\n  .mobile .speedtest-quality-header {\n    text-align: center;\n  }\n  .mobile .speedtest-footer .speedtest-footer-refresh {\n    inset: 50% auto auto 50%;\n    transform: translate(-50%, -50%);\n  }\n}\n@media only screen and (orientation: landscape) {\n  .mobile .clappr-nerd-stats .stats-box-main ul {\n    flex-basis: 1fr;\n  }\n}\n@media only screen and (min-width: 1100px) {\n  .fullscreen .clappr-nerd-stats .stats-box {\n    top: unset;\n  }\n}");
 
@@ -55754,7 +55776,7 @@ const PLAYBACK_NAMES = {
     hls: 'HLS.js',
     html5_video: 'Native',
 };
-// const T = 'plugins.nerd_stats'
+const T$4 = 'plugins.nerd_stats';
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @public
@@ -55891,6 +55913,9 @@ class NerdStats extends UICorePlugin {
         return super.destroy();
     }
     toggle = () => {
+        trace(`${T$4} toggle`, {
+            open: this.open,
+        });
         if (this.open) {
             this.hide();
         }
@@ -55900,7 +55925,7 @@ class NerdStats extends UICorePlugin {
     };
     show() {
         this.$el.show();
-        this.statsBoxElem.scrollTop(this.statsBoxElem.scrollTop());
+        this.statsBoxElem.scrollTop(this.statsBoxElem?.scrollTop());
         this.open = true;
         initSpeedTest(this.speedtestMetrics)
             .then(() => {