@gcorevideo/player 2.28.16 → 2.28.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.28.16",
+  "version": "2.28.17",
   "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,14 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_DBLCLICK,
       this.toggleFullscreen,
     )
+    const clk = clickaway(() => {
+      this.resetUserKeepVisible()
+    }, this.core.activeContainer.$el[0])
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_CLICK,
+      clk,
+    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
@@ -530,16 +538,21 @@ export class MediaControl extends UICorePlugin {
    * Hides the media control UI
    */
   override disable() {
+    trace(`${T} disable`)
     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 +742,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 +1044,16 @@ export class MediaControl extends UICorePlugin {
   }
 
   private setUserKeepVisible() {
+    trace(`${T} setUserKeepVisible`, {
+      userKeepVisible: this.userKeepVisible,
+    })
     this.userKeepVisible = true
   }
 
   private resetUserKeepVisible() {
+    trace(`${T} resetUserKeepVisible`, {
+      userKeepVisible: this.userKeepVisible,
+    })
     this.userKeepVisible = false
   }
 
@@ -1044,6 +1062,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 +1597,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)
   }
@@ -1706,3 +1707,15 @@ function mergeElements(
     return acc
   }, a)
 }
+
+function clickaway(callback: () => void, element: Node) {
+  const handler = (event: MouseEvent | TouchEvent) => {
+    if (!element.contains(event.target as Node)) {
+      callback()
+      window.removeEventListener('click', handler)
+    }
+  }
+  return () => {
+    window.addEventListener('click', handler)
+  }
+}