@gcorevideo/player 2.28.35 → 2.29.0

package/dist/index.embed.js

@@ -12554,6 +12554,9 @@ var PlayerEvent;
     PlayerEvent["VolumeUpdate"] = "volumeupdate";
 })(PlayerEvent || (PlayerEvent = {}));
 
+const MIME_TYPES_HLS = ['application/x-mpegurl', 'application/vnd.apple.mpegurl'];
+const MIME_TYPE_HLS = MIME_TYPES_HLS[0];
+const MIME_TYPE_DASH = 'application/dash+xml';
 // TODO rewrite using the Playback classes and canPlay static methods
 function buildMediaSourcesList(sources, priorityTransport = 'dash') {
     const playbacks = Loader.registeredPlaybacks;
@@ -12592,22 +12595,21 @@ function wrapSource(s) {
 }
 function guessMimeType(s) {
     if (s.endsWith('.mpd')) {
-        return 'application/dash+xml';
+        return MIME_TYPE_DASH;
     }
     if (s.endsWith('.m3u8')) {
-        // return 'application/vnd.apple.mpegurl'
-        return 'application/x-mpegurl';
+        return MIME_TYPE_HLS;
     }
 }
 function isDashSource(source, mimeType) {
     if (mimeType) {
-        return mimeType === 'application/dash+xml'; // TODO consider video/mp4
+        return mimeType === MIME_TYPE_DASH; // TODO consider video/mp4
     }
     return source.endsWith('.mpd');
 }
 function isHlsSource(source, mimeType) {
     if (mimeType) {
-        return ['application/vnd.apple.mpegurl', 'application/x-mpegurl'].includes(mimeType.toLowerCase());
+        return MIME_TYPES_HLS.includes(mimeType.toLowerCase());
     }
     return source.endsWith('.m3u8');
 }
@@ -12674,6 +12676,9 @@ class BasePlayback extends HTML5Video$1 {
         super._onPlaying();
         this.trigger(Events$1.PLAYBACK_MEDIACONTROL_ENABLE);
     }
+    setTextTrack(id) {
+        // noop
+    }
 }
 
 var PlaybackEvents;
@@ -12696,6 +12701,7 @@ const T$8 = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = [];
     _currentLevel = AUTO$1;
+    _currentTextTrackId = -1;
     // true when the actual duration is longer than hlsjs's live sync point
     // when this is false playableRegionDuration will be the actual duration
     // when this is true playableRegionDuration will exclude the time after the sync point
@@ -12828,7 +12834,11 @@ class DashPlayback extends BasePlayback {
                 streaming: {
                     text: {
                         defaultEnabled: false,
-                        dispatchForManualRendering: true,
+                        // NOTE: dispatchForManualRendering is not correctly implemented in DASH.js;
+                        // it does not work when there are multiple text tracks.
+                        // CUE_ENTER and CUE_EXIT events might be dispatched additionally
+                        // for a track, other than the currently active one.
+                        // dispatchForManualRendering: true, // TODO only when useNativeSubtitles is not true?
                     },
                 },
             }, this.options.dash);
@@ -12872,24 +12882,6 @@ class DashPlayback extends BasePlayback {
         this._dash.on(_.events.PLAYBACK_RATE_CHANGED, (e) => {
             this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate);
         });
-        this._dash.on(_.events.TRACK_CHANGE_RENDERED, (e) => {
-            if (e.mediaType === 'audio') {
-                this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack$1(e.newMediaInfo));
-            }
-        });
-        this._dash.on(_.events.CUE_ENTER, (e) => {
-            this.oncueenter?.({
-                end: e.end,
-                id: e.id,
-                start: e.start,
-                text: e.text,
-            });
-        });
-        this._dash.on(_.events.CUE_EXIT, (e) => {
-            this.oncueexit?.({
-                id: e.id,
-            });
-        });
     }
     render() {
         this._ready();
@@ -13199,14 +13191,14 @@ class DashPlayback extends BasePlayback {
         this._dash?.setTextTrack(this.closedCaptionsTrackId);
     }
     setTextTrack(id) {
+        this._currentTextTrackId = id;
         this._dash?.setTextTrack(id);
     }
     /**
      * @override
      */
     get closedCaptionsTracks() {
-        const tt = this.getTextTracks();
-        return tt;
+        return this.getTextTracks();
     }
     getTextTracks() {
         return this._dash?.getTracksFor('text').map((t, index) => ({
@@ -13216,7 +13208,7 @@ class DashPlayback extends BasePlayback {
                 id: index,
                 label: getTextTrackLabel(t) || "",
                 language: t.lang,
-                mode: "hidden",
+                mode: this._currentTextTrackId === index ? "showing" : "hidden",
             },
         })) || [];
     }
@@ -50727,7 +50719,11 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
     }
     setTextTrack(id) {
+        if (id === this._hls.subtitleTrack) {
+            return;
+        }
         this._hls.subtitleTrack = id;
+        this.cues = [];
     }
     /**
      * @override
@@ -57007,7 +57003,7 @@ class ErrorScreen extends UICorePlugin {
 
 insertStyle(".player-logo[data-logo] {\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n\n.clappr-logo {\n  position: absolute;\n}");
 
-insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n  float: right;\n  margin-top: 4px;\n  position: relative;\n  margin-right: 20px;\n  width: 20px;\n}\n.multicamera[data-multicamera] button {\n  background-color: transparent;\n  color: #fff;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  font-size: 14px;\n  padding: 0;\n}\n.multicamera[data-multicamera] button svg {\n  height: 20px;\n  position: relative;\n  margin-top: 6px;\n}\n.multicamera[data-multicamera] button:hover {\n  color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] button span.quality-arrow {\n  width: 9px;\n  height: 6px;\n  margin-top: 11px;\n  margin-left: 5px;\n}\n.multicamera[data-multicamera] > ul {\n  padding: 6px 0;\n  right: -24px;\n  width: 245px;\n  list-style-type: none;\n  position: absolute;\n  bottom: 48px;\n  border-radius: 4px;\n  display: none;\n  background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 85%;\n  margin-left: -10px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid rgba(74, 74, 74, 0.9);\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n  font-size: 10px;\n  cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n  display: flex;\n  padding: 10px 0;\n  justify-content: center;\n  position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n  background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n  pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n  width: 120px;\n  text-align: left;\n  margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  width: 120px;\n  height: 20px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.43;\n  letter-spacing: normal;\n  text-align: left;\n  color: #fff;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  opacity: 0.6;\n}\n.multicamera[data-multicamera] li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li a:hover {\n  background-color: #555;\n  color: white;\n}\n.multicamera[data-multicamera] li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li.current a {\n  color: #f00;\n}");
+insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n  position: relative;\n  order: 80;\n}\n.multicamera[data-multicamera] button {\n  background-color: transparent;\n  color: #fff;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  font-size: 14px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 20px;\n}\n.multicamera[data-multicamera] button svg {\n  height: 20px;\n  position: relative;\n}\n.multicamera[data-multicamera] button:hover {\n  color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] > ul {\n  padding: 6px 0;\n  right: -24px;\n  width: 245px;\n  list-style-type: none;\n  position: absolute;\n  bottom: 48px;\n  border-radius: 4px;\n  display: none;\n  background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 85%;\n  margin-left: -10px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid rgba(74, 74, 74, 0.9);\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n  font-size: 10px;\n  cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n  display: flex;\n  padding: 10px 0;\n  justify-content: center;\n  position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n  background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n  pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n  width: 120px;\n  text-align: left;\n  margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  width: 120px;\n  height: 20px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.43;\n  letter-spacing: normal;\n  text-align: left;\n  color: #fff;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  opacity: 0.6;\n}");
 
 const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M21.05 3.00001C21.302 3.00001 21.5435 3.10003 21.7217 3.27833C21.9 3.45646 22 3.69802 22 3.95003V10.6H20.1V4.90003H4.90001V18.2H10.6V20.1H3.95001C3.69802 20.1 3.45647 20 3.27832 19.8217C3.10002 19.6436 3 19.402 3 19.15V3.95001C3 3.69802 3.10002 3.45647 3.27832 3.27832C3.45644 3.10002 3.69801 3 3.95001 3L21.05 3.00001ZM21.05 12.5C21.302 12.5 21.5435 12.6 21.7217 12.7783C21.9 12.9565 22 13.198 22 13.45V19.15C22 19.402 21.9 19.6436 21.7217 19.8217C21.5436 20 21.302 20.1 21.05 20.1H13.45C13.198 20.1 12.9564 20 12.7783 19.8217C12.6 19.6436 12.5 19.402 12.5 19.15V13.45C12.5 13.198 12.6 12.9565 12.7783 12.7783C12.9564 12.6 13.198 12.5 13.45 12.5H21.05ZM7.47178 6.12823L9.60928 8.26572L11.5501 6.32492V11.5499H6.32509L8.26589 9.60911L6.12839 7.47161L7.47178 6.12823Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -58307,45 +58303,6 @@ function noSync(cb) {
  * `PLUGIN` that is managing the automatic failover between media sources.
  * @public
  * @remarks
- * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
- * on how sources ordering and selection works. Below is a simplified diagram:
- *
- * ```markdown
- * sources_list:
- *       - a.mpd  |    +--------------------+
- *       - b.m3u8 |--->|         init       |
- *       - ...    |    |--------------------|
- *                     | current_source = 0 |
- *                     +--------------------+
- *                            |
- *                            |  source = a.mpd
- *                            |  playback = dash.js
- *                            v
- *                      +------------------+
- *                  +-->|   load source    |
- *                  |   +---------|--------+
- *                  |             v
- *                  |   +------------------+
- *                  |   |       play       |
- *                  |   +---------|--------+
- *                  |             |
- *                  |             v
- *                  |   +-----------------------+
- *                  |   |  on playback_error    |
- *                  |   |-----------------------|
- *                  |   | current_source =      |
- *                  |   |  (current_source + 1) |
- *                  |   |  % len sources_list   |
- *                  |   |                       |
- *                  |   | delay 1..3s           |
- *                  |   +---------------|-------+
- *                  |                   |
- *                  |   source=b.m3u8   |
- *                  |   playback=hls.js |
- *                  +-------------------+
- *
- * ```
- *
  * @example
  * ```ts
  * import { SourceController } from '@gcorevideo/player'
@@ -58549,7 +58506,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::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}");
+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  transition: transform 0.3s ease-out;\n}\n.container .gplayer-cc-line.media-control-cc-pulled {\n  transform: translateY(var(--bottom-panel));\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";
 
@@ -58661,8 +58618,12 @@ class ClosedCaptions extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mount);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_SHOW, () => {
+            this.$line?.removeClass('media-control-cc-pulled');
+        });
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, () => {
             this.hideMenu();
+            this.$line?.addClass('media-control-cc-pulled');
         });
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -58720,23 +58681,27 @@ class ClosedCaptions extends UICorePlugin {
         this.activateTrack(id);
     }
     activateTrack(id) {
-        if (this.core.activePlayback && ['dash', 'hls'].includes(this.core.activePlayback.name)) {
-            this.core.activePlayback.setTextTrack(id);
+        const isManaged = this.core.activePlayback?.name === 'hls';
+        this.core.activePlayback.setTextTrack(id);
+        if (isManaged) {
             return;
         }
-        for (const track of this.currentTracks) {
-            if (track.id === id) {
+        if (!this.core.activePlayback?.el.textTracks) {
+            return;
+        }
+        for (const [index, track] of Array.from(this.core.activePlayback?.el.textTracks ?? []).entries()) {
+            if (index === id) {
                 if (this.useNativeSubtitles) {
-                    track.track.mode = 'showing';
+                    track.mode = 'showing';
                 }
                 else {
-                    track.track.mode = 'hidden';
+                    track.mode = 'hidden';
                 }
-                this.setSubtitleText(this.getSubtitleText(track.track));
-                track.track.oncuechange = (e) => {
+                this.setSubtitleText(this.getSubtitleText(track));
+                track.oncuechange = () => {
                     try {
-                        if (track.track.activeCues?.length) {
-                            const html = track.track.activeCues[0].getCueAsHTML();
+                        if (track.activeCues?.length) {
+                            const html = track.activeCues[0].getCueAsHTML();
                             this.setSubtitleText(html);
                         }
                         else {
@@ -58748,8 +58713,8 @@ class ClosedCaptions extends UICorePlugin {
                 };
             }
             else {
-                track.track.oncuechange = () => { };
-                track.track.mode = 'disabled';
+                track.oncuechange = () => { };
+                track.mode = 'disabled';
             }
         }
     }
@@ -58790,8 +58755,10 @@ class ClosedCaptions extends UICorePlugin {
         this.$el.find('#gplayer-cc-menu').hide();
         this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
         this.$line.hide();
-        for (const track of this.currentTracks) {
-            track.track.mode = 'hidden';
+        for (const track of this.core.activePlayback.el.textTracks) {
+            if (track.mode === 'showing') {
+                track.mode = 'hidden';
+            }
         }
     }
     /**
@@ -58803,7 +58770,6 @@ class ClosedCaptions extends UICorePlugin {
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.currentTrack &&
-            // this.currentTrack.track.mode &&
             (Browser.isiOS || this.useNativeSubtitles)) {
             this.$line.hide();
             this.currentTrack.track.mode = 'showing';
@@ -58845,6 +58811,10 @@ class ClosedCaptions extends UICorePlugin {
         this.resizeFont();
         this.clampPopup();
         this.core.activeContainer.$el.append(this.$line);
+        const mc = this.core.getPlugin('media_control');
+        if (!mc?.isVisible()) {
+            this.$line?.addClass('media-control-cc-pulled');
+        }
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -58950,7 +58920,7 @@ class ClosedCaptions extends UICorePlugin {
         this.setSubtitleText('');
     }
     updateSelection() {
-        if (!this.currentTrack) {
+        if (this.core.activePlayback.closedCaptionsTrackId === -1) {
             this.hide();
         }
         else {