@gcorevideo/player 2.28.17 → 2.28.18

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

@@ -312,10 +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);
-        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_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);
@@ -332,12 +331,14 @@ 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
      */
     disable() {
-        trace(`${T} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -763,12 +764,12 @@ export class MediaControl extends UICorePlugin {
         });
         this.userKeepVisible = true;
     }
-    resetUserKeepVisible() {
+    resetUserKeepVisible = () => {
         trace(`${T} resetUserKeepVisible`, {
             userKeepVisible: this.userKeepVisible,
         });
         this.userKeepVisible = false;
-    }
+    };
     isVisible() {
         return !this.$el.hasClass('media-control-hide');
     }
@@ -1262,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);
@@ -1302,14 +1304,23 @@ function mergeElements(a, b) {
         return acc;
     }, a);
 }
-function clickaway(callback, element) {
-    const handler = (event) => {
-        if (!element.contains(event.target)) {
-            callback();
-            window.removeEventListener('click', handler);
+function clickaway(callback) {
+    let handler = (event) => { };
+    return (node) => {
+        window.removeEventListener('click', handler);
+        if (!node) {
+            return;
         }
-    };
-    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.17",
+  "version": "2.28.18",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

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

@@ -468,13 +468,12 @@ 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.clickaway(this.core.activeContainer.$el[0])
+      },
     )
     this.listenTo(
       this.core.activeContainer,
@@ -532,13 +531,16 @@ 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
    */
   override disable() {
-    trace(`${T} disable`)
     this.userDisabled = true // TODO distinguish between user and system (e.g., unplayable) disabled?
     this.hide()
     this.unbindKeyEvents()
@@ -1050,7 +1052,7 @@ export class MediaControl extends UICorePlugin {
     this.userKeepVisible = true
   }
 
-  private resetUserKeepVisible() {
+  private resetUserKeepVisible = () => {
     trace(`${T} resetUserKeepVisible`, {
       userKeepVisible: this.userKeepVisible,
     })
@@ -1654,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) {
@@ -1708,14 +1712,24 @@ function mergeElements(
   }, a)
 }
 
-function clickaway(callback: () => void, element: Node) {
-  const handler = (event: MouseEvent | TouchEvent) => {
-    if (!element.contains(event.target as Node)) {
-      callback()
-      window.removeEventListener('click', handler)
+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)
+      }
     }
-  }
-  return () => {
     window.addEventListener('click', handler)
   }
 }