@gcorevideo/player 2.28.17 → 2.28.19

package/dist/core.js

@@ -51319,7 +51319,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.17";
+var version$1 = "2.28.19";
 
 var packages = {
 	"node_modules/@clappr/core": {

package/dist/index.css

@@ -279,6 +279,29 @@
 }
 .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
   display: inline;
+}@charset "UTF-8";
+.gplayer-mc-clips {
+  display: flex;
+  gap: 6px;
+}
+.gplayer-mc-clips .gplayer-mc-clips-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  color: white;
+  cursor: default;
+  line-height: var(--bottom-panel);
+  position: relative;
+  max-width: 150px;
+}
+.gplayer-mc-clips .gplayer-mc-clips-text::before {
+  content: "•";
+  padding-right: 6px;
+}
+.gplayer-mc-clips .gplayer-mc-clips-text.compact {
+  max-width: 100px;
 }:root {
   --primary-background-color: #000;
   --secondary-background-color: #262626;
@@ -643,29 +666,6 @@
   .fullscreen .clappr-nerd-stats .stats-box {
     top: unset;
   }
-}@charset "UTF-8";
-.gplayer-mc-clips {
-  display: flex;
-  gap: 6px;
-}
-.gplayer-mc-clips .gplayer-mc-clips-text {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-  text-overflow: ellipsis;
-  color: white;
-  cursor: default;
-  line-height: var(--bottom-panel);
-  position: relative;
-  max-width: 150px;
-}
-.gplayer-mc-clips .gplayer-mc-clips-text::before {
-  content: "•";
-  padding-right: 6px;
-}
-.gplayer-mc-clips .gplayer-mc-clips-text.compact {
-  max-width: 100px;
 }.context-menu {
   z-index: 999;
   position: absolute;
@@ -801,40 +801,141 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 }
 .media-control-skin-1 .media-control-item.media-control-pip button svg {
   height: 20px;
-}.player-poster {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+}*,
+:focus,
+:visited {
+  outline: none !important;
+}
+
+.multicamera[data-multicamera] {
+  float: right;
+  margin-top: 4px;
+  position: relative;
+  margin-right: 20px;
+  width: 20px;
+}
+.multicamera[data-multicamera] button {
+  background-color: transparent;
+  color: #fff;
+  font-family: Roboto, "Open Sans", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  border: none;
+  font-size: 14px;
+  padding: 0;
+}
+.multicamera[data-multicamera] button svg {
+  height: 20px;
+  position: relative;
+  margin-top: 6px;
+}
+.multicamera[data-multicamera] button:hover {
+  color: #c9c9c9;
+}
+.multicamera[data-multicamera] button.changing {
+  animation: pulse 0.5s infinite alternate;
+}
+.multicamera[data-multicamera] button span.quality-arrow {
+  width: 9px;
+  height: 6px;
+  margin-top: 11px;
+  margin-left: 5px;
+}
+.multicamera[data-multicamera] > ul {
+  padding: 6px 0;
+  right: -24px;
+  width: 245px;
+  list-style-type: none;
   position: absolute;
-  height: 100%;
-  width: 100%;
-  z-index: 998;
-  top: 0;
-  left: 0;
-  background-color: #000;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
+  bottom: 48px;
+  border-radius: 4px;
+  display: none;
+  background-color: rgba(74, 74, 74, 0.9);
 }
-.player-poster.clickable {
+.multicamera[data-multicamera] > ul::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 85%;
+  margin-left: -10px;
+  width: 0;
+  height: 0;
+  border-top: 10px solid rgba(74, 74, 74, 0.9);
+  border-right: 10px solid transparent;
+  border-left: 10px solid transparent;
+}
+.multicamera[data-multicamera] li {
+  font-size: 10px;
   cursor: pointer;
 }
-.player-poster:hover .play-wrapper {
-  opacity: 1;
+.multicamera[data-multicamera] li .multicamera-item {
+  display: flex;
+  padding: 10px 0;
+  justify-content: center;
+  position: relative;
 }
-.player-poster .play-wrapper {
-  width: 100%;
-  height: 25%;
-  margin: 0 auto;
-  opacity: 0.75;
-  transition: opacity 0.1s ease;
+.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
+  opacity: 0.5;
 }
-.player-poster .play-wrapper svg {
-  height: 100%;
-  display: inline;
+.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
+  opacity: 0.5;
 }
-.player-poster .play-wrapper svg path {
-  fill: #fff;
+.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
+  background-color: rgba(0, 0, 0, 0);
+}
+.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
+  pointer-events: none;
+}
+.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
+  width: 80px;
+  height: 60px;
+}
+.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
+  width: 80px;
+  height: 60px;
+}
+.multicamera[data-multicamera] li .multicamera-item .multicamera-text {
+  width: 120px;
+  text-align: left;
+  margin-left: 15px;
+}
+.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
+.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
+  width: 120px;
+  height: 20px;
+  font-family: Roboto, "Open Sans", Arial, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: left;
+  color: #fff;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
+  opacity: 0.6;
+}
+.multicamera[data-multicamera] li a {
+  color: #444;
+  padding: 2px 10px;
+  display: block;
+  text-decoration: none;
+}
+.multicamera[data-multicamera] li a:hover {
+  background-color: #555;
+  color: white;
+}
+.multicamera[data-multicamera] li a:hover a {
+  color: white;
+  text-decoration: none;
+}
+.multicamera[data-multicamera] li.current a {
+  color: #f00;
 }[data-player] {
   --bottom-panel: 40px;
 }
@@ -1456,147 +1557,40 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
   100% {
     color: #B80000;
   }
-}*,
-:focus,
-:visited {
-  outline: none !important;
-}
-
-.multicamera[data-multicamera] {
-  float: right;
-  margin-top: 4px;
-  position: relative;
-  margin-right: 20px;
-  width: 20px;
-}
-.multicamera[data-multicamera] button {
-  background-color: transparent;
-  color: #fff;
-  font-family: Roboto, "Open Sans", Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  border: none;
-  font-size: 14px;
-  padding: 0;
-}
-.multicamera[data-multicamera] button svg {
-  height: 20px;
-  position: relative;
-  margin-top: 6px;
-}
-.multicamera[data-multicamera] button:hover {
-  color: #c9c9c9;
-}
-.multicamera[data-multicamera] button.changing {
-  animation: pulse 0.5s infinite alternate;
-}
-.multicamera[data-multicamera] button span.quality-arrow {
-  width: 9px;
-  height: 6px;
-  margin-top: 11px;
-  margin-left: 5px;
-}
-.multicamera[data-multicamera] > ul {
-  padding: 6px 0;
-  right: -24px;
-  width: 245px;
-  list-style-type: none;
-  position: absolute;
-  bottom: 48px;
-  border-radius: 4px;
-  display: none;
-  background-color: rgba(74, 74, 74, 0.9);
-}
-.multicamera[data-multicamera] > ul::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 85%;
-  margin-left: -10px;
-  width: 0;
-  height: 0;
-  border-top: 10px solid rgba(74, 74, 74, 0.9);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent;
-}
-.multicamera[data-multicamera] li {
-  font-size: 10px;
-  cursor: pointer;
-}
-.multicamera[data-multicamera] li .multicamera-item {
+}.player-poster {
   display: flex;
-  padding: 10px 0;
   justify-content: center;
-  position: relative;
-}
-.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
-  opacity: 0.5;
-}
-.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
-  opacity: 0.5;
-}
-.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
-  background-color: rgba(0, 0, 0, 0);
-}
-.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
-  pointer-events: none;
-}
-.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
-  width: 80px;
-  height: 60px;
-}
-.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
-  width: 80px;
-  height: 60px;
-}
-.multicamera[data-multicamera] li .multicamera-item .multicamera-text {
-  width: 120px;
-  text-align: left;
-  margin-left: 15px;
-}
-.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
-.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
-  width: 120px;
-  height: 20px;
-  font-family: Roboto, "Open Sans", Arial, sans-serif;
-  font-size: 14px;
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: 1.43;
-  letter-spacing: normal;
-  text-align: left;
-  color: #fff;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
-  opacity: 0.6;
+  align-items: center;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
 }
-.multicamera[data-multicamera] li a {
-  color: #444;
-  padding: 2px 10px;
-  display: block;
-  text-decoration: none;
+.player-poster.clickable {
+  cursor: pointer;
 }
-.multicamera[data-multicamera] li a:hover {
-  background-color: #555;
-  color: white;
+.player-poster:hover .play-wrapper {
+  opacity: 1;
 }
-.multicamera[data-multicamera] li a:hover a {
-  color: white;
-  text-decoration: none;
+.player-poster .play-wrapper {
+  width: 100%;
+  height: 25%;
+  margin: 0 auto;
+  opacity: 0.75;
+  transition: opacity 0.1s ease;
 }
-.multicamera[data-multicamera] li.current a {
-  color: #f00;
-}.quality-levels li.disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.player-poster .play-wrapper svg {
+  height: 100%;
+  display: inline;
 }
-.quality-levels li.current {
-  background-color: #000;
+.player-poster .play-wrapper svg path {
+  fill: #fff;
 }.seek-time {
   position: absolute;
   white-space: nowrap;
@@ -1630,6 +1624,12 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 .seek-time .seek-time__duration::before {
   content: "|";
   margin-right: 7px;
+}.quality-levels li.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.quality-levels li.current {
+  background-color: #000;
 }.share_plugin[data-share] {
   pointer-events: auto;
   z-index: 5;

package/dist/index.embed.js

@@ -51825,10 +51825,9 @@ 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_CLICK, () => {
+            this.clickaway(this.core.activeContainer.$el[0]);
+        });
         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);
@@ -51845,6 +51844,9 @@ class MediaControl extends UICorePlugin {
         });
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_ENTER, this.show);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_LEAVE, this.delayHide);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
     }
     /**
      * Hides the media control UI
@@ -52194,9 +52196,6 @@ class MediaControl extends UICorePlugin {
         else {
             this.hideVolumeId = setTimeout(() => {
                 this.hideVolumeId = null;
-                trace(`${T$6} hideVolumeBar`, {
-                    volumeBarContainer: !!this.$volumeBarContainer,
-                });
                 this.$volumeBarContainer?.addClass('volume-bar-hide');
             }, timeout);
         }
@@ -52265,25 +52264,17 @@ class MediaControl extends UICorePlugin {
         this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
         this.setSeekPercentage(pos);
     }
-    setUserKeepVisible() {
-        trace(`${T$6} setUserKeepVisible`, {
-            userKeepVisible: this.userKeepVisible,
-        });
+    setUserKeepVisible(e) {
         this.userKeepVisible = true;
+        this.clickaway(this.core.activeContainer.$el[0]);
     }
-    resetUserKeepVisible() {
-        trace(`${T$6} resetUserKeepVisible`, {
-            userKeepVisible: this.userKeepVisible,
-        });
+    resetUserKeepVisible = (e) => {
         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;
         }
@@ -52310,15 +52301,6 @@ class MediaControl extends UICorePlugin {
         this.updateCursorStyle(showing);
     }
     hide(delay = 0) {
-        trace(`${T$6} hide`, {
-            visible: this.isVisible(),
-            disabled: this.disabled,
-            hideMediaControl: this.options.hideMediaControl,
-            userKeepVisible: this.userKeepVisible,
-            keepVisible: this.keepVisible,
-            draggingSeekBar: this.draggingSeekBar,
-            draggingVolumeBar: this.draggingVolumeBar,
-        });
         if (!this.isVisible()) {
             return;
         }
@@ -52761,9 +52743,12 @@ class MediaControl extends UICorePlugin {
             this.$el.removeClass('dvr');
         }
     }
-    delayHide(e) {
+    delayHide() {
         this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
     }
+    // 2 seconds delay is needed since on mobile devices mouse(touch)move events are not dispatched immediately
+    // as opposed to the click event
+    clickaway = clickaway(() => setTimeout(this.resetUserKeepVisible, 0));
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -52804,14 +52789,19 @@ 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) => {
+            if (!node.contains(event.target)) {
+                window.removeEventListener('click', handler);
+                callback();
+            }
+        };
         window.addEventListener('click', handler);
     };
 }

package/dist/index.js

@@ -51409,7 +51409,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.17";
+var version$1 = "2.28.19";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -52009,10 +52009,9 @@ 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_CLICK, () => {
+            this.clickaway(this.core.activeContainer.$el[0]);
+        });
         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);
@@ -52029,12 +52028,14 @@ class MediaControl extends UICorePlugin {
         });
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_ENTER, this.show);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_LEAVE, this.delayHide);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
     }
     /**
      * Hides the media control UI
      */
     disable() {
-        trace(`${T$b} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -52383,9 +52384,6 @@ class MediaControl extends UICorePlugin {
         else {
             this.hideVolumeId = setTimeout(() => {
                 this.hideVolumeId = null;
-                trace(`${T$b} hideVolumeBar`, {
-                    volumeBarContainer: !!this.$volumeBarContainer,
-                });
                 this.$volumeBarContainer?.addClass('volume-bar-hide');
             }, timeout);
         }
@@ -52454,27 +52452,17 @@ class MediaControl extends UICorePlugin {
         this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
         this.setSeekPercentage(pos);
     }
-    setUserKeepVisible() {
-        trace(`${T$b} setUserKeepVisible`, {
-            userKeepVisible: this.userKeepVisible,
-        });
+    setUserKeepVisible(e) {
         this.userKeepVisible = true;
+        this.clickaway(this.core.activeContainer.$el[0]);
     }
-    resetUserKeepVisible() {
-        trace(`${T$b} resetUserKeepVisible`, {
-            userKeepVisible: this.userKeepVisible,
-        });
+    resetUserKeepVisible = (e) => {
         this.userKeepVisible = false;
-    }
+    };
     isVisible() {
         return !this.$el.hasClass('media-control-hide');
     }
     show(event) {
-        trace(`${T$b} show`, {
-            disabled: this.disabled,
-            disableControlPanel: this.options.disableControlPanel,
-            event,
-        });
         if (this.disabled || this.options.disableControlPanel) {
             return;
         }
@@ -52501,16 +52489,6 @@ class MediaControl extends UICorePlugin {
         this.updateCursorStyle(showing);
     }
     hide(delay = 0) {
-        trace(`${T$b} hide`, {
-            delay,
-            visible: this.isVisible(),
-            disabled: this.disabled,
-            hideMediaControl: this.options.hideMediaControl,
-            userKeepVisible: this.userKeepVisible,
-            keepVisible: this.keepVisible,
-            draggingSeekBar: this.draggingSeekBar,
-            draggingVolumeBar: this.draggingVolumeBar,
-        });
         if (!this.isVisible()) {
             return;
         }
@@ -52953,12 +52931,12 @@ class MediaControl extends UICorePlugin {
             this.$el.removeClass('dvr');
         }
     }
-    delayHide(e) {
-        trace(`${T$b} delayHide`, {
-            e,
-        });
+    delayHide() {
         this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
     }
+    // 2 seconds delay is needed since on mobile devices mouse(touch)move events are not dispatched immediately
+    // as opposed to the click event
+    clickaway = clickaway(() => setTimeout(this.resetUserKeepVisible, 0));
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -52999,14 +52977,19 @@ 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) => {
+            if (!node.contains(event.target)) {
+                window.removeEventListener('click', handler);
+                callback();
+            }
+        };
         window.addEventListener('click', handler);
     };
 }

package/lib/plugins/media-control/MediaControl.d.ts

@@ -366,5 +366,6 @@ export declare class MediaControl extends UICorePlugin {
     private getElementLocation;
     private onDvrStateChanged;
     private delayHide;
+    private clickaway;
 }
 //# sourceMappingURL=MediaControl.d.ts.map