@gcorevideo/player 2.28.23 → 2.28.25

package/assets/subtitles/style.scss

@@ -53,14 +53,15 @@
   }
 }
 
-// ::cue {
-//   visibility: hidden !important;
-//   font-size: 0 !important;
-// }
-// .ios-fullscreen::cue {
-//   visibility: visible !important;
-//   font-size: 1em !important;
-// }
+::cue {
+  visibility: hidden !important;
+  font-size: 0 !important;
+}
+
+.ios-fullscreen::cue {
+  visibility: visible !important;
+  font-size: 1em !important;
+}
 
 .container {
   .gplayer-cc-line {

package/dist/core.js

@@ -13247,6 +13247,13 @@ class DashPlayback extends BasePlayback {
             this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, tracks.map(toClapprTrack$1));
         }
     }
+    /**
+     * @override
+     */
+    _handleTextTrackChange() {
+        super._handleTextTrackChange();
+        this._dash?.setTextTrack(this.closedCaptionsTrackId);
+    }
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -51319,7 +51326,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.23";
+var version$1 = "2.28.25";
 
 var packages = {
 	"node_modules/@clappr/core": {

package/dist/index.css

@@ -122,55 +122,51 @@
 .gplayer-lite-btn::-moz-focus-inner {
   border: 0;
   padding: 0;
-}.big-mute-icon-wrapper[data-big-mute] {
-  position: absolute;
-  z-index: 9998;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: calc(100% - 50px);
-  margin: 0 auto;
-  opacity: 0.75;
-  transition: opacity 0.1s ease;
-  pointer-events: auto;
+}.media-control-skin-1 .media-control-item.media-control-gear {
+  order: 99;
 }
-.big-mute-icon-wrapper[data-big-mute].hide {
-  display: none;
+.media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
+  position: absolute;
+  right: 16px;
+  bottom: 52px;
+  width: 250px;
+  min-height: 48px;
+  z-index: 9999;
+  border-radius: 4px;
+  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
 }
-.big-mute-icon-wrapper[data-big-mute]:hover {
-  cursor: pointer;
+.media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
+  padding: 8px 0;
 }
-
-.big-mute-icon[data-big-mute-icon] {
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option {
+  margin: 0;
+  text-align: left;
+  line-height: 22px;
+  padding: 5px 14px;
+  width: 250px;
+  font-size: 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  align-self: center;
-  width: 120px;
-  height: 120px;
-  border: 2px solid white;
-  border-radius: 50%;
-  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-  opacity: 1;
-  box-shadow: 0 0 1px 0 white;
-  background: rgba(240, 243, 247, 0.9411764706);
-  z-index: 10000;
+  justify-content: flex-start;
+  gap: 8px;
 }
-.big-mute-icon[data-big-mute-icon] svg {
-  margin-left: 5px;
-  width: 80px;
-  height: 80px;
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
+  flex: 24px 0 0;
+  height: 20px;
 }
-.big-mute-icon[data-big-mute-icon] svg path {
-  fill: #1f1e1e !important;
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
+  visibility: hidden;
+  display: inline-block;
 }
-.big-mute-icon[data-big-mute-icon]:hover {
-  background: rgba(240, 243, 247, 0.8784313725);
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
+  flex: 0 1 100%;
 }
-.big-mute-icon[data-big-mute-icon]:hover svg path {
-  fill: #151515 !important;
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
+  flex: 0 0 14px;
+  height: 20px;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
+  flex: 1 0 auto;
 }*,
 :focus,
 :visited {
@@ -234,51 +230,55 @@
 }
 .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
   display: inline;
-}.media-control-skin-1 .media-control-item.media-control-gear {
-  order: 99;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
+}.big-mute-icon-wrapper[data-big-mute] {
   position: absolute;
-  right: 16px;
-  bottom: 52px;
-  width: 250px;
-  min-height: 48px;
-  z-index: 9999;
-  border-radius: 4px;
-  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
+  z-index: 9998;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 50px);
+  margin: 0 auto;
+  opacity: 0.75;
+  transition: opacity 0.1s ease;
+  pointer-events: auto;
 }
-.media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
-  padding: 8px 0;
+.big-mute-icon-wrapper[data-big-mute].hide {
+  display: none;
 }
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option {
-  margin: 0;
-  text-align: left;
-  line-height: 22px;
-  padding: 5px 14px;
-  width: 250px;
-  font-size: 12px;
+.big-mute-icon-wrapper[data-big-mute]:hover {
+  cursor: pointer;
+}
+
+.big-mute-icon[data-big-mute-icon] {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
-  flex: 24px 0 0;
-  height: 20px;
+  justify-content: center;
+  align-self: center;
+  width: 120px;
+  height: 120px;
+  border: 2px solid white;
+  border-radius: 50%;
+  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  filter: alpha(opacity=60);
+  opacity: 1;
+  box-shadow: 0 0 1px 0 white;
+  background: rgba(240, 243, 247, 0.9411764706);
+  z-index: 10000;
 }
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
-  visibility: hidden;
-  display: inline-block;
+.big-mute-icon[data-big-mute-icon] svg {
+  margin-left: 5px;
+  width: 80px;
+  height: 80px;
 }
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
-  flex: 0 1 100%;
+.big-mute-icon[data-big-mute-icon] svg path {
+  fill: #1f1e1e !important;
 }
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
-  flex: 0 0 14px;
-  height: 20px;
+.big-mute-icon[data-big-mute-icon]:hover {
+  background: rgba(240, 243, 247, 0.8784313725);
 }
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
-  flex: 1 0 auto;
+.big-mute-icon[data-big-mute-icon]:hover svg path {
+  fill: #151515 !important;
 }:root {
   --primary-background-color: #000;
   --secondary-background-color: #262626;
@@ -643,42 +643,6 @@
   .fullscreen .clappr-nerd-stats .stats-box {
     top: unset;
   }
-}.context-menu {
-  z-index: 999;
-  position: absolute;
-  top: 0;
-  left: 0;
-  text-align: center;
-}
-.context-menu .context-menu-list {
-  font-family: "Proxima Nova", sans-serif;
-  font-size: 12px;
-  line-height: 12px;
-  list-style-type: none;
-  text-align: left;
-  padding: 5px;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: rgba(0, 0, 0, 0.75);
-  border: 1px solid #666;
-  border-radius: 4px;
-}
-.context-menu .context-menu-list-item button {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  color: white;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 5px;
-  width: 100%;
-}
-.context-menu .context-menu-list-item_icon {
-  width: 20px;
-  height: 20px;
 }@charset "UTF-8";
 .gplayer-mc-clips {
   display: flex;
@@ -759,6 +723,42 @@
 .dvr-controls .live-button:hover {
   opacity: 1;
   text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
+}.context-menu {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center;
+}
+.context-menu .context-menu-list {
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 12px;
+  line-height: 12px;
+  list-style-type: none;
+  text-align: left;
+  padding: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: rgba(0, 0, 0, 0.75);
+  border: 1px solid #666;
+  border-radius: 4px;
+}
+.context-menu .context-menu-list-item button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  color: white;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 5px;
+  width: 100%;
+}
+.context-menu .context-menu-list-item_icon {
+  width: 20px;
+  height: 20px;
 }div.player-error-screen, [data-player] div.player-error-screen {
   color: #CCCACA;
   position: absolute;
@@ -1680,27 +1680,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
   display: inline-block;
   margin-right: 5px;
   cursor: pointer;
-}.container-with-poster-clickable .mc-skip-time {
-  height: 0;
-}
-
-.mc-skip-time {
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 50px);
-  z-index: 9998;
-  background-color: transparent;
-  font-family: Roboto, "Open Sans", Arial, sans-serif;
-}
-.mc-skip-time .skip-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-.mc-skip-time .skip-container .skip-item {
-  flex: 1 0 0px;
-  height: 100%;
 }.seek-time {
   position: absolute;
   white-space: nowrap;
@@ -1772,6 +1751,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
   40% {
     transform: scale(1);
   }
+}.container-with-poster-clickable .mc-skip-time {
+  height: 0;
+}
+
+.mc-skip-time {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 50px);
+  z-index: 9998;
+  background-color: transparent;
+  font-family: Roboto, "Open Sans", Arial, sans-serif;
+}
+.mc-skip-time .skip-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.mc-skip-time .skip-container .skip-item {
+  flex: 1 0 0px;
+  height: 100%;
 }.media-control-skin-1 .media-control-cc button.media-control-button {
   display: flex;
   justify-content: center;
@@ -1809,6 +1809,16 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
   order: 85;
 }
 
+::cue {
+  visibility: hidden !important;
+  font-size: 0 !important;
+}
+
+.ios-fullscreen::cue {
+  visibility: visible !important;
+  font-size: 1em !important;
+}
+
 .container .gplayer-cc-line {
   position: absolute;
   bottom: calc(var(--bottom-panel) + 5px);

package/dist/index.embed.js

@@ -13186,6 +13186,13 @@ class DashPlayback extends BasePlayback {
             this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, tracks.map(toClapprTrack$1));
         }
     }
+    /**
+     * @override
+     */
+    _handleTextTrackChange() {
+        super._handleTextTrackChange();
+        this._dash?.setTextTrack(this.closedCaptionsTrackId);
+    }
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -58395,7 +58402,7 @@ class SourceController extends CorePlugin {
     }
 }
 
-insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n  vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n  color: white;\n}\n.media-control-skin-1 .media-control-cc ul li {\n  text-align: center;\n}\n.media-control-skin-1 .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc ul li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc {\n  position: relative;\n  order: 85;\n}\n\n.container .gplayer-cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .gplayer-cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}");
+insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n  vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n  color: white;\n}\n.media-control-skin-1 .media-control-cc ul li {\n  text-align: center;\n}\n.media-control-skin-1 .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc ul li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc {\n  position: relative;\n  order: 85;\n}\n\n::cue {\n  visibility: hidden !important;\n  font-size: 0 !important;\n}\n\n.ios-fullscreen::cue {\n  visibility: visible !important;\n  font-size: 1em !important;\n}\n\n.container .gplayer-cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .gplayer-cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}");
 
 const subtitlesOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -58491,6 +58498,12 @@ class ClosedCaptions extends UICorePlugin {
         return (this.core.options.cc?.language ??
             this.core.options.subtitles?.language);
     }
+    isPreselectedLanguage(language) {
+        if (!this.preselectedLanguage) {
+            return false;
+        }
+        return language.startsWith(this.preselectedLanguage);
+    }
     /**
      * @internal
      */
@@ -58517,7 +58530,11 @@ class ClosedCaptions extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
             this.clickaway(null);
         });
-        this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
+        // this.listenTo(
+        //   this.core.activeContainer,
+        //   'container:advertisement:start',
+        //   this.onStartAd,
+        // )
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
@@ -58537,6 +58554,7 @@ class ClosedCaptions extends UICorePlugin {
                 video.classList.remove('ios-fullscreen');
             }
         });
+        this.isPreselectedApplied = false;
     }
     onSubtitleAvailable() {
         trace(`${T} onSubtitleAvailable`, {
@@ -58545,17 +58563,23 @@ class ClosedCaptions extends UICorePlugin {
         this.applyTracks();
         this.mount();
     }
-    onSubtitleChanged({ id: _ }) {
+    onSubtitleChanged({ id: changedId }) {
         // ignoring the subtitle selected by the playback engine or user agent
         const id = this.track?.id ?? -1;
         if (id === -1) {
             this.clearSubtitleText();
         }
+        this.activateTrack(id);
+    }
+    activateTrack(id) {
         for (const track of this.tracks) {
-            // Native subtitles are always hidden
-            track.track.mode = 'hidden';
             if (track.id === id) {
-                // track.track.mode = 'showing'
+                if (this.useNativeSubtitles) {
+                    track.track.mode = 'showing';
+                }
+                else {
+                    track.track.mode = 'hidden';
+                }
                 this.setSubtitleText(this.getSubtitleText(track.track));
                 track.track.oncuechange = (e) => {
                     try {
@@ -58573,7 +58597,7 @@ class ClosedCaptions extends UICorePlugin {
             }
             else {
                 track.track.oncuechange = null;
-                // track.track.mode = 'hidden'
+                track.track.mode = 'disabled';
             }
         }
     }
@@ -58586,16 +58610,24 @@ class ClosedCaptions extends UICorePlugin {
         catch (error) {
         }
     }
-    onStartAd() {
-        if (this.active && this.core.activeContainer) {
-            this.hide();
-            this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
-        }
-    }
-    onFinishAd() {
-        this.show();
-        this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
-    }
+    // private onStartAd() {
+    //   if (this.active && this.core.activeContainer) {
+    //     this.hide()
+    //     this.listenTo(
+    //       this.core.activeContainer,
+    //       'container:advertisement:finish',
+    //       this.onFinishAd,
+    //     )
+    //   }
+    // }
+    // private onFinishAd() {
+    //   this.show()
+    //   this.stopListening(
+    //     this.core.activeContainer,
+    //     'container:advertisement:finish',
+    //     this.onFinishAd,
+    //   )
+    // }
     onContainerResize() {
         const shouldShow = this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
@@ -58639,7 +58671,7 @@ class ClosedCaptions extends UICorePlugin {
             isFullscreen(this.core.activeContainer.el) &&
             this.track &&
             this.track.track.mode &&
-            Browser.isiOS) {
+            (Browser.isiOS || this.useNativeSubtitles)) {
             this.$line.hide();
             this.track.track.mode = 'showing';
         }
@@ -58686,13 +58718,16 @@ class ClosedCaptions extends UICorePlugin {
     selectItem(item) {
         this.clearSubtitleText();
         this.track = item;
+        const trackId = item?.id ?? -1;
+        this.core.activePlayback.closedCaptionsTrackId = trackId;
         this.updateSelection();
+        this.activateTrack(trackId);
     }
     onItemSelect(event) {
         // event.target does not exist for some reason in tests
         const id = (event.target ?? event.currentTarget).dataset?.item ??
             '-1';
-        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead?
         this.selectItem(this.findById(Number(id)));
         this.hideMenu();
         return false;
@@ -58703,7 +58738,7 @@ class ClosedCaptions extends UICorePlugin {
             // if the language is undefined, then let the engine decide
             // to hide the subtitles forcefully, set the language to 'none'
             setTimeout(() => {
-                this.selectItem(this.tracks.find((t) => t.track.language === this.preselectedLanguage) ?? null);
+                this.selectItem(this.tracks.find((t) => this.isPreselectedLanguage(t.track.language)) ?? null);
             }, 0);
         }
     }
@@ -58739,10 +58774,10 @@ class ClosedCaptions extends UICorePlugin {
         return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
-        this.track ? this.track.id : -1;
+        const trackId = this.track ? this.track.id : -1;
         // TODO find out if this is needed
-        // this.core.activePlayback.closedCaptionsTrackId = trackId
-        this.core.activePlayback.closedCaptionsTrackId = -1;
+        this.core.activePlayback.closedCaptionsTrackId = trackId;
+        // this.core.activePlayback.closedCaptionsTrackId = -1
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -58804,6 +58839,14 @@ class ClosedCaptions extends UICorePlugin {
             mediaControl.slot('cc', this.$el);
         }
     }
+    get useNativeSubtitles() {
+        if (this.core.activePlayback?.name === 'dash') {
+            return true;
+        }
+        const mode = this.core.options.cc?.mode ?? this.core.options.subtitles?.mode ?? 'custom';
+        // TODO or Safari? or iOS?
+        return mode === 'native';
+    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }