@gcorevideo/player 2.28.16 → 2.28.18

package/lib/plugins/media-control/MediaControl.js

@@ -285,8 +285,8 @@ export class MediaControl extends UICorePlugin {
         this.listenTo(this.core, Events.CORE_FULLSCREEN, this.show);
         this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
         this.listenTo(this.core, Events.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 => {
@@ -312,6 +312,9 @@ export class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_DBLCLICK, this.toggleFullscreen);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+            this.clickaway(this.core.activeContainer.$el[0]);
+        });
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
@@ -328,6 +331,9 @@ export class MediaControl extends UICorePlugin {
         });
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MOUSE_ENTER, this.show);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MOUSE_LEAVE, this.delayHide);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
     }
     /**
      * Hides the media control UI
@@ -336,12 +342,16 @@ export 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} enable`, {
+            chromeless: this.options.chromeless,
+            userDisabled: this.userDisabled,
+        });
         if (this.options.chromeless) {
             return;
         }
@@ -749,15 +759,26 @@ export class MediaControl extends UICorePlugin {
         this.setSeekPercentage(pos);
     }
     setUserKeepVisible() {
+        trace(`${T} setUserKeepVisible`, {
+            userKeepVisible: this.userKeepVisible,
+        });
         this.userKeepVisible = true;
     }
-    resetUserKeepVisible() {
+    resetUserKeepVisible = () => {
+        trace(`${T} resetUserKeepVisible`, {
+            userKeepVisible: this.userKeepVisible,
+        });
         this.userKeepVisible = false;
-    }
+    };
     isVisible() {
         return !this.$el.hasClass('media-control-hide');
     }
     show(event) {
+        trace(`${T} show`, {
+            disabled: this.disabled,
+            disableControlPanel: this.options.disableControlPanel,
+            event,
+        });
         if (this.disabled || this.options.disableControlPanel) {
             return;
         }
@@ -1196,23 +1217,6 @@ export 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);
     }
@@ -1259,6 +1263,7 @@ export class MediaControl extends UICorePlugin {
         });
         this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
     }
+    clickaway = clickaway(this.resetUserKeepVisible);
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -1299,3 +1304,23 @@ function mergeElements(a, b) {
         return acc;
     }, a);
 }
+function clickaway(callback) {
+    let handler = (event) => { };
+    return (node) => {
+        window.removeEventListener('click', handler);
+        if (!node) {
+            return;
+        }
+        handler = (event) => {
+            trace(`${T} clickaway`, {
+                node,
+                event,
+            });
+            if (!node.contains(event.target)) {
+                callback();
+                window.removeEventListener('click', handler);
+            }
+        };
+        window.addEventListener('click', handler);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.28.16",
+  "version": "2.28.18",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/clappr-nerd-stats/NerdStats.ts

@@ -35,6 +35,7 @@ import statsIcon from '../../../assets/icons/new/stats.svg'
 import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
 import { drawSummary, getPingQuality } from './utils.js'
 import { getDownloadQuality } from './utils.js'
+import { trace } from '@gcorevideo/utils'
 
 const PLAYBACK_NAMES: Record<string, string> = {
   dash: 'DASH.js',
@@ -59,7 +60,7 @@ type Metrics = PerfMetrics & {
   }
 }
 
-// const T = 'plugins.nerd_stats'
+const T = 'plugins.nerd_stats'
 
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
@@ -233,6 +234,9 @@ export class NerdStats extends UICorePlugin {
   }
 
   private toggle = () => {
+    trace(`${T} toggle`, {
+      open: this.open,
+    })
     if (this.open) {
       this.hide()
     } else {
@@ -242,7 +246,7 @@ export class NerdStats extends UICorePlugin {
 
   private show() {
     this.$el.show()
-    this.statsBoxElem.scrollTop(this.statsBoxElem.scrollTop())
+    this.statsBoxElem.scrollTop(this.statsBoxElem?.scrollTop())
     this.open = true
 
     initSpeedTest(this.speedtestMetrics)
@@ -251,11 +255,15 @@ export class NerdStats extends UICorePlugin {
       })
       .catch((e) => {
         reportError(e)
+        trace(`${T} speedtest error`, {
+          error: e,
+        })
         this.disable()
       })
   }
 
   private hide() {
+    trace(`${T} hide`)
     this.$el.hide()
     this.open = false
     stopSpeedtest()

package/src/plugins/clappr-nerd-stats/speedtest/index.ts

@@ -122,12 +122,14 @@ export const initSpeedTest = (customMetrics: SpeedtestMetrics): Promise<void> =>
         }
       }
     };
-    // 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');
@@ -181,3 +183,13 @@ function rankConnectionSpeed(dlSpeed: number): ConnectionSpeed {
   }
   return 0;
 }
+
+function getCountryCodeFromClientHeaders(clientHeaders: Record<string, string>): string {
+  if (clientHeaders && clientHeaders['country']) {
+    const m = clientHeaders['country'].match(/'code':\s*'([A-Za-z]{2})'/);
+    if (m) {
+      return m[1].toLowerCase();
+    }
+  }
+  return 'lu';
+}

package/src/plugins/media-control/MediaControl.ts

@@ -422,8 +422,8 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure)
     this.listenTo(this.core, Events.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');
 
@@ -468,6 +468,13 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_DBLCLICK,
       this.toggleFullscreen,
     )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_CLICK,
+      () => {
+        this.clickaway(this.core.activeContainer.$el[0])
+      },
+    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
@@ -524,6 +531,10 @@ export class MediaControl extends UICorePlugin {
     })
     this.listenTo(this.core.activeContainer, Events.CONTAINER_MOUSE_ENTER, this.show)
     this.listenTo(this.core.activeContainer, Events.CONTAINER_MOUSE_LEAVE, this.delayHide)
+
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
+      this.clickaway(null)
+    })
   }
 
   /**
@@ -533,13 +544,17 @@ export 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
    */
   override enable() {
+    trace(`${T} enable`, {
+      chromeless: this.options.chromeless,
+      userDisabled: this.userDisabled,
+    })
     if (this.options.chromeless) {
       return
     }
@@ -729,7 +744,6 @@ export class MediaControl extends UICorePlugin {
 
     try {
       const skinWidth = this.container.$el.width() || size.width
-
       if (skinWidth <= 370 || this.options.hideVolumeBar) {
         this.$el.addClass('w370')
       }
@@ -1032,10 +1046,16 @@ export class MediaControl extends UICorePlugin {
   }
 
   private setUserKeepVisible() {
+    trace(`${T} setUserKeepVisible`, {
+      userKeepVisible: this.userKeepVisible,
+    })
     this.userKeepVisible = true
   }
 
-  private resetUserKeepVisible() {
+  private resetUserKeepVisible = () => {
+    trace(`${T} resetUserKeepVisible`, {
+      userKeepVisible: this.userKeepVisible,
+    })
     this.userKeepVisible = false
   }
 
@@ -1044,6 +1064,11 @@ export class MediaControl extends UICorePlugin {
   }
 
   private show(event?: MouseEvent) {
+    trace(`${T} show`, {
+      disabled: this.disabled,
+      disableControlPanel: this.options.disableControlPanel,
+      event,
+    })
     if (this.disabled || this.options.disableControlPanel) {
       return
     }
@@ -1574,28 +1599,6 @@ export class MediaControl extends UICorePlugin {
     this.resetUserKeepVisible()
   }
 
-  // TODO manage by the ads plugin
-  private onStartAd() {
-    // this.advertisementPlaying = true
-    this.disable()
-  }
-
-  // TODO manage by the ads plugin
-  private onFinishAd() {
-    // this.advertisementPlaying = false
-    this.enable()
-  }
-
-  // TODO remove
-  private hideControllAds() {
-    if (
-      this.container.advertisement &&
-      this.container.advertisement.type !== 'idle'
-    ) {
-      this.hide()
-    }
-  }
-
   private static getPageX(event: MouseEvent | TouchEvent): number {
     return getPageX(event)
   }
@@ -1653,6 +1656,8 @@ export class MediaControl extends UICorePlugin {
     })
     this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY)
   }
+
+  private clickaway = clickaway(this.resetUserKeepVisible)
 }
 
 MediaControl.extend = function (properties) {
@@ -1706,3 +1711,25 @@ function mergeElements(
     return acc
   }, a)
 }
+
+function clickaway(callback: () => void) {
+  let handler = (event: MouseEvent | TouchEvent) => {}
+
+  return (node: HTMLElement | null) => {
+    window.removeEventListener('click', handler)
+    if (!node) {
+      return
+    }
+    handler = (event: MouseEvent | TouchEvent) => {
+      trace(`${T} clickaway`, {
+        node,
+        event,
+      })
+      if (!node.contains(event.target as Node)) {
+        callback()
+        window.removeEventListener('click', handler)
+      }
+    }
+    window.addEventListener('click', handler)
+  }
+}