@gcorevideo/player 2.28.35 → 2.29.0

package/dist/index.js

@@ -12778,6 +12778,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;
@@ -12817,22 +12820,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');
 }
@@ -12899,6 +12901,9 @@ class BasePlayback extends HTML5Video$1 {
         super._onPlaying();
         this.trigger(Events$1.PLAYBACK_MEDIACONTROL_ENABLE);
     }
+    setTextTrack(id) {
+        // noop
+    }
 }
 
 var PlaybackEvents;
@@ -12921,6 +12926,7 @@ const T$e = '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
@@ -13053,7 +13059,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);
@@ -13097,24 +13107,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();
@@ -13424,14 +13416,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) => ({
@@ -13441,7 +13433,7 @@ class DashPlayback extends BasePlayback {
                 id: index,
                 label: getTextTrackLabel(t) || "",
                 language: t.lang,
-                mode: "hidden",
+                mode: this._currentTextTrackId === index ? "showing" : "hidden",
             },
         })) || [];
     }
@@ -50953,7 +50945,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
@@ -51573,7 +51569,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.35";
+var version$1 = "2.29.0";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -57964,14 +57960,10 @@ class Logo extends UIContainerPlugin {
     }
 }
 
-const pluginHtml$3 = "<button data-multicamera-button class='gcore-skin-button-color'>\n    <span class=\"multicamera-icon\"></span>\n</button>\n\n<ul class=\"gcore-skin-bg-color\">\n    <% for (var i = 0; i < streams.length; i++) { %>\n        <% if(!streams[i].live && multisources_mode === 'only_live') { %>\n            <% continue; %>\n        <% } %>\n        <li>\n            <div class=\"multicamera-item\" data-multicamera-selector-live=\"<%= streams[i].live %>\"\n                 data-multicamera-selector-select=\"<%= streams[i].id %>\">\n                <div class=\"multicamera-screenshot\">\n                    <% if (streams[i].screenshot) { %>\n                        <img src=\"<%= streams[i].screenshot %>\" alt=\"<%= streams[i].title %>\"/>\n                    <% } %>\n                </div>\n                <div class=\"multicamera-text gcore-skin-text-color\">\n                    <% if (streams[i].title) { %>\n                        <div class=\"multicamera-title gcore-skin-text-color\"><%= streams[i].title %></div>\n                    <% } %>\n                    <% if (streams[i].description) { %>\n                        <div class=\"multicamera-description gcore-skin-text-color\"><%= streams[i].description %></div>\n                    <% } %>\n                </div>\n            </div>\n        </li>\n    <% } %>\n</ul>\n";
+const pluginHtml$3 = "<button data-multicamera-button class='gcore-skin-button-color media-control-button'>\n    <span class=\"multicamera-icon\"></span>\n</button>\n\n<ul class=\"gcore-skin-bg-color\">\n    <% for (var i=0; i < streams.length; i++) { %>\n        <% if(!streams[i].live && multisources_mode==='only_live' ) { %>\n            <% continue; %>\n                <% } %>\n                    <li>\n                        <div class=\"multicamera-item\" data-multicamera-selector-live=\"<%= streams[i].live %>\"\n                            data-multicamera-selector-select=\"<%= streams[i].id %>\">\n                            <div class=\"multicamera-screenshot\">\n                                <% if (streams[i].screenshot) { %>\n                                    <img src=\"<%= streams[i].screenshot %>\" alt=\"<%= streams[i].title %>\" />\n                                    <% } %>\n                            </div>\n                            <div class=\"multicamera-text gcore-skin-text-color\">\n                                <% if (streams[i].title) { %>\n                                    <div class=\"multicamera-title gcore-skin-text-color\">\n                                        <%= streams[i].title %>\n                                    </div>\n                                    <% } %>\n                                        <% if (streams[i].description) { %>\n                                            <div class=\"multicamera-description gcore-skin-text-color\">\n                                                <%= streams[i].description %>\n                                            </div>\n                                            <% } %>\n                            </div>\n                        </div>\n                    </li>\n                    <% } %>\n</ul>";
 
 const streamsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n    <path fill=\"#FFF\" fill-rule=\"nonzero\" d=\"M24 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-1a.5.5 0 0 1-.5-.5v-10A2.5 2.5 0 0 0 18.5 3h-14a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 0 1 5.5 0h17A1.5 1.5 0 0 1 24 1.5M12.724 12.447l-5 2.5a.505.505 0 0 1-.487-.021A.503.503 0 0 1 7 14.5v-5c0-.173.09-.334.237-.426a.505.505 0 0 1 .487-.021l5 2.5a.5.5 0 0 1 0 .894M18.5 4h-17C.673 4 0 4.673 0 5.5v13c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-13c0-.827-.673-1.5-1.5-1.5\"/>\n</svg>\n";
 
-const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 230.73 173.61\"><defs><style>.cls-1{fill:#fff;}</style></defs><path class=\"cls-1\" d=\"M71.82,16.09c11.43,0,22.87-.05,34.31,0,12,.06,19.45,7.45,19.7,19.52.23,11.31.23,11.31,11.81,11.31q24.36,0,48.73,0c12.74,0,20.21,7.3,20.27,19.88q.11,24.12,0,48.23c-.06,12.66-7.12,19.65-19.75,19.77-2,0-4,0-6,0-7.78,0-7.84.05-6,7.79a59.23,59.23,0,0,0,1.95,6.67c1.44,3.95.33,7.18-2.66,9.82-3.28,2.89-6.93,2.88-10.59.76-9.31-5.4-16.95-12.73-23.55-21.11-2.29-2.93-4.66-4.2-8.35-4-5.12.28-10.28.19-15.41,0-10.39-.37-17.64-7.65-18.09-18a62.93,62.93,0,0,0-.09-6.45c-.3-2.07,1.6-5.54-1.49-6-3.62-.48-7.92-2.08-11.07,1.89-6.09,7.7-12.82,14.76-21,20.24a42,42,0,0,1-5.09,3.08,8.16,8.16,0,0,1-9.29-1.12,8.25,8.25,0,0,1-3-8.86c1-4,2-8,3-12,.59-2.51-.34-3.66-3.07-3.59-4.14.12-8.3.14-12.43-.11-9.61-.59-16.86-7.76-17-17.42-.24-17.57-.21-35.14,0-52.71.12-10.07,8-17.46,18.43-17.58C48,16,59.88,16.09,71.82,16.09ZM56.66,120.5c2.53-.3,3.87-1.89,5.38-3.08A99.31,99.31,0,0,0,79.83,98.8a8.72,8.72,0,0,1,8-3.83c6.12.18,12.25.12,18.38,0,7.31-.12,10.6-3.39,10.64-10.72q.11-24.33,0-48.68c0-7-3.5-10.51-10.36-10.53q-35-.11-70,0c-6.34,0-9.92,3.51-9.95,9.83q-.15,25.08,0,50.18c0,6.37,3.42,9.72,9.86,9.89,5.62.14,11.26.1,16.89.06,4.37,0,6.2,2,6.25,6.4C59.55,107.88,58.17,114.1,56.66,120.5ZM167.78,152c-1.93-6.72-3.37-12.44-3.41-18.4,0-6.33,1.17-7.71,7.37-7.77,5-.05,9.94.06,14.9,0,7.6-.13,10.79-3.35,10.81-11q.08-23.85,0-47.69c0-7.61-3.38-11-10.86-11.08-18.88-.07-37.76,0-56.64-.08-3.21,0-4.29.89-4.2,4.21.24,8.27.18,16.56,0,24.83-.13,8.6-4.46,16.11-11.88,17.55-6.73,1.3-7.44,4.81-6.78,10.16.14,1.14,0,2.32,0,3.48.3,6.1,3.53,9.44,9.69,9.63,5.79.18,11.6.34,17.38,0,4.81-.31,7.94,1.3,10.83,5.22A79.08,79.08,0,0,0,167.78,152Z\"/><path class=\"cls-1\" d=\"M73.07,56c-6.4,0-12.15-.06-17.9,0-3.28,0-5.76-1-5.68-4.63s2.66-4.59,5.88-4.45c1.49.06,3-.12,4.47,0,4.79.46,8.51.12,7.44-6.47-.43-2.67,1.82-4.32,4.42-4.26s4.81,1.75,4.35,4.4c-1.18,6.75,2.76,6.72,7.44,6.34a43.43,43.43,0,0,1,6.45.09,4,4,0,0,1,4,4.17c0,2.59-1.46,4.88-4.17,4.48-7-1-7.55,5.72-11.08,8.81-1.54,1.35.36,2.28,1.27,3.06,2.13,1.83,4.38,3.53,6.52,5.36s2.74,4.28.8,6.54c-1.74,2-4,2-6.27.53-.28-.18-.52-.41-.79-.6-3.22-2.29-5.94-6.88-9.46-6.66s-6.61,4-9.91,6.17a19.94,19.94,0,0,1-2.55,1.52c-2.51,1.19-5,1.29-6.46-1.44-1.42-2.57-.6-4.82,1.91-6.34A88.31,88.31,0,0,0,68.17,62.07C69.84,60.52,71.73,59.09,73.07,56Z\"/><path class=\"cls-1\" d=\"M153,104.27a43.76,43.76,0,0,1-4.91,0c-3.27-.4-5.24.75-6.27,4-.9,2.88-2.84,5.23-6.28,3.82-3.66-1.5-3.21-4.49-1.94-7.52,4.68-11.12,9.36-22.22,13.94-33.37,1-2.36,2.28-4.1,5-4.08s3.89,2,4.85,4.25c4.66,11.11,9.4,22.2,14.14,33.28,1.3,3,1.69,6-2,7.46-3.4,1.35-5.49-.73-6.29-3.74C161.49,102,156.3,105.12,153,104.27Zm-.84-20.39a64.73,64.73,0,0,1-2.78,6.37c-2.25,3.89-1.16,4.85,3.14,4.89s4.82-1.35,2.93-4.73C154.36,88.42,154.15,86,152.18,83.88Z\"/></svg>";
-
-const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n  <defs>\n    <clipPath id=\"clip-Icon\">\n      <rect width=\"50\" height=\"50\"/>\n    </clipPath>\n  </defs>\n  <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n    <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n      <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n      <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n      <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n      <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n    </g>\n  </g>\n</svg>\n";
-
 const VERSION$4 = '0.0.1';
 const T$6 = 'plugins.multicamera';
 /**
@@ -58019,6 +58011,8 @@ class MultiCamera extends UICorePlugin {
         // Don't mutate the options, TODO check if some plugin observes the options.multicamera
         this.multicamera = this.options.multisources.map((item) => ({ ...item }));
         this.noActiveStreams = this.multicamera.every((item) => !item.live);
+        // TODO filter out non-live
+        this.core.options.sources = expandMediaSource(this.multicamera[0]);
     }
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.bindPlaybackEvents);
@@ -58027,15 +58021,10 @@ class MultiCamera extends UICorePlugin {
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
     }
     unBindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events$1.CORE_READY);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_HIDE);
-        // @ts-ignore
+        this.stopListening(this.core, Events$1.CORE_READY, this.bindPlaybackEvents);
+        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
+        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
         this.stopListening(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
     }
     onPlay() {
@@ -58051,80 +58040,53 @@ class MultiCamera extends UICorePlugin {
         this.bindPlaybackEvents();
     }
     shouldRender() {
-        if (!this.core.activeContainer || this.noActiveStreams) {
-            return false;
-        }
-        if (!this.core.activePlayback) {
+        if (this.noActiveStreams) {
             return false;
         }
         return this.multicamera.length >= 2;
     }
     render() {
-        if (this.shouldRender()) {
-            let numActiveSources = 0;
-            // const currentSource = this.core.options.source
-            const currentSource = this.core.activePlayback?.sourceMedia;
-            for (const item of this.multicamera) {
-                if (item.live) {
-                    numActiveSources++;
-                }
-                if (!this.currentCamera && item.source === currentSource) {
-                    this.currentCamera = item;
-                }
-            }
-            // const mediaControl = this.core.getPlugin('media_control')
-            if (this.currentTime &&
-                // TODO check the last active playback type instead
-                // !mediaControl.$el.hasClass('live') &&
-                this.core.getPlaybackType() !== Playback.LIVE) {
-                if (this.currentTime < this.core.activePlayback.getDuration()) {
-                    this.core.activePlayback.seek(this.currentTime);
-                }
-                this.currentTime = 0;
-                // if (mediaControl.$el.hasClass('dvr')) {
-                //   this.core.activeContainer.dvrInUse = true;
-                // }
-            }
-            // TODO current source
-            this.$el.html(this.template({
-                streams: this.multicamera,
-                multisources_mode: this.options.multisourcesMode,
-            }));
-            if ((numActiveSources <= 1 &&
-                this.options.multisourcesMode !== 'show_all') ||
-                this.options.multisourcesMode === 'one_first') {
-                this.$el.hide();
-            }
-            else {
-                this.$el.show();
+        if (!this.core.activeContainer || !this.core.activePlayback) {
+            return this;
+        }
+        if (!this.shouldRender()) {
+            return this;
+        }
+        let numActiveSources = 0;
+        const currentSource = this.core.activePlayback?.sourceMedia;
+        for (const item of this.multicamera) {
+            if (item.live) {
+                numActiveSources++;
             }
-            if (this.core.mediaControl.$multiCameraSelector &&
-                this.core.mediaControl.$multiCameraSelector.length > 0) {
-                this.core.mediaControl.$multiCameraSelector.append(this.el);
+            if (!this.currentCamera && item.source === currentSource) {
+                this.currentCamera = item;
             }
-            else {
-                this.core.mediaControl.$('.media-control-right-panel').append(this.el);
-            }
-            if (Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$multiCameraSelector') &&
-                this.core.mediaControl.$multiCameraSelector.find('span.multicamera-icon').length > 0) {
-                if (~window.location.href.indexOf('whitenights.gcdn.co')) {
-                    this.core.mediaControl.$multiCameraSelector
-                        .find('span.multicamera-icon')
-                        .append(streamsWhiteNightsIcon);
-                }
-                else if (~window.location.href.indexOf('momentosolutions.gcdn.co')) {
-                    this.core.mediaControl.$multiCameraSelector
-                        .find('span.multicamera-icon')
-                        .append(streamsMomentoIcon);
-                }
-                else {
-                    this.core.mediaControl.$multiCameraSelector
-                        .find('span.multicamera-icon')
-                        .append(streamsIcon);
-                }
+        }
+        if (this.currentTime &&
+            this.core.getPlaybackType() !== Playback.LIVE) {
+            if (this.currentTime < this.core.activePlayback.getDuration()) {
+                this.core.activePlayback.seek(this.currentTime);
             }
-            this.highlightCurrentLevel();
+            this.currentTime = 0;
         }
+        this.$el.html(this.template({
+            streams: this.multicamera,
+            multisources_mode: this.options.multisourcesMode,
+        }));
+        if ((numActiveSources < 2 &&
+            this.options.multisourcesMode !== 'show_all') ||
+            this.options.multisourcesMode === 'one_first') {
+            this.$el.hide();
+        }
+        else {
+            this.$el.show();
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.slot('multicamera', this.$el);
+        this.$el
+            .find('span.multicamera-icon')
+            .html(streamsIcon);
+        this.highlightCurrentLevel();
         return this;
     }
     onCameraSelect(event) {
@@ -58137,33 +58099,6 @@ class MultiCamera extends UICorePlugin {
         event.stopPropagation();
         return false;
     }
-    activeById(id, active) {
-        this.setLiveStatus(id, active);
-        if (!this.currentCamera && !this.noActiveStreams) {
-            return;
-        }
-        if (this.noActiveStreams && !active) {
-            return;
-        }
-        if (this.currentCamera) {
-            if (this.options.multisourcesMode === 'only_live') {
-                this.behaviorLive(id, active);
-            }
-            if (this.options.multisourcesMode === 'one_first') {
-                this.behaviorOne(id, active);
-            }
-            if (this.options.multisourcesMode === 'show_all') {
-                this.behaviorAll(id, active);
-            }
-        }
-        else {
-            if (this.noActiveStreams && active) {
-                this.changeById(id);
-                this.noActiveStreams = false;
-            }
-        }
-        this.render();
-    }
     setLiveStatus(id, active) {
         try {
             const index = this.findIndexById(id);
@@ -58226,7 +58161,6 @@ class MultiCamera extends UICorePlugin {
         this.currentCamera = null;
         this.noActiveStreams = true;
         this.core.trigger('core:multicamera:no_active_translation');
-        // this.changeById(this.multicamera[nextIndex].id);
     }
     showError() {
         this.core.activePlayback.pause();
@@ -58249,7 +58183,7 @@ class MultiCamera extends UICorePlugin {
     }
     hideError() {
         try {
-            this.core.mediaControl.enableControlButton();
+            this.core.getPlugin('media_control')?.enableControlButton();
         }
         catch (error) {
             reportError(error);
@@ -58259,14 +58193,9 @@ class MultiCamera extends UICorePlugin {
         trace(`${T$6} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
-            // TODO figure out what this does
+            // TODO figure out if it's needed
             playbackOptions.recycleVideo = Browser.isMobile;
-            this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$6} changeById`, {
-                id,
-                currentCamera: this.currentCamera,
-                multicamera: this.multicamera,
-            });
+            this.currentCamera = this.findElementById(id);
             if (!this.currentCamera) {
                 return;
             }
@@ -58288,26 +58217,16 @@ class MultiCamera extends UICorePlugin {
             this.core.configure({
                 playback: playbackOptions,
                 source: this.currentCamera.source, // TODO ensure that the preferred transport is used
-                video360: {
-                    // TODO
-                    projection: this.currentCamera.projection,
-                },
                 fullscreenDisable,
                 autoPlay: this.playing,
                 disableCanAutoPlay: true,
             });
-            this.core.activeContainer.mediaControlDisabled = false;
+            this.core.activeContainer?.enableMediaControl();
         });
         this.toggleContextMenu();
     }
-    getCamerasList() {
-        return this.multicamera;
-    }
-    getCurrentCamera() {
-        return this.currentCamera;
-    }
     findElementById(id) {
-        return this.multicamera.find((element) => element.id === id);
+        return this.multicamera.find((element) => element.id === id) ?? null;
     }
     findIndexById(id) {
         return this.multicamera.findIndex((element) => element.id === id);
@@ -58316,19 +58235,13 @@ class MultiCamera extends UICorePlugin {
         this.toggleContextMenu();
     }
     hideSelectLevelMenu() {
-        this.$('.multicamera ul').hide();
+        this.$('ul').hide();
     }
     toggleContextMenu() {
-        this.$('.multicamera ul').toggle();
+        this.$('ul').toggle();
     }
-    // private buttonElement(): ZeptoResult {
-    //   return this.$('.multicamera button');
-    // }
-    // private buttonElementText(): ZeptoResult {
-    //   return this.$('.multicamera button .quality-text');
-    // }
     levelElement(id) {
-        return this.$('.multicamera ul li > div' +
+        return this.$('ul .multicamera-item' +
             (id !== undefined
                 ? '[data-multicamera-selector-select="' + id + '"]'
                 : ''));
@@ -58340,6 +58253,22 @@ class MultiCamera extends UICorePlugin {
             this.levelElement(this.currentCamera.id).addClass('multicamera-active');
     }
 }
+function expandMediaSource(source) {
+    const result = [{
+            source: source.source,
+            mimeType: guessMimeType(source.source),
+        }];
+    if (source.source_dash) {
+        result.push({
+            source: source.source_dash,
+            mimeType: MIME_TYPE_DASH,
+        });
+    }
+    if (source.hls_mpegts_url) {
+        result.push(source.hls_mpegts_url);
+    }
+    return result;
+}
 
 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";
 
@@ -59770,45 +59699,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'
@@ -60134,8 +60024,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) {
@@ -60193,23 +60087,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 {
@@ -60222,8 +60120,8 @@ class ClosedCaptions extends UICorePlugin {
                 };
             }
             else {
-                track.track.oncuechange = () => { };
-                track.track.mode = 'disabled';
+                track.oncuechange = () => { };
+                track.mode = 'disabled';
             }
         }
     }
@@ -60266,8 +60164,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';
+            }
         }
     }
     /**
@@ -60279,7 +60179,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';
@@ -60321,6 +60220,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;
@@ -60426,7 +60329,7 @@ class ClosedCaptions extends UICorePlugin {
         this.setSubtitleText('');
     }
     updateSelection() {
-        if (!this.currentTrack) {
+        if (this.core.activePlayback.closedCaptionsTrackId === -1) {
             this.hide();
         }
         else {

package/docs/api/player.md

@@ -909,6 +909,28 @@ Identifies a location for mounting custom media control elements.
 
 
 
+</td></tr>
+<tr><td>
+
+[MulticCameraSourceInfo](./player.multiccamerasourceinfo.md)
+
+
+</td><td>
+
+**_(BETA)_** Extended media source description
+
+
+</td></tr>
+<tr><td>
+
+[MultisourcesMode](./player.multisourcesmode.md)
+
+
+</td><td>
+
+**_(BETA)_**
+
+
 </td></tr>
 <tr><td>
 
@@ -1163,15 +1185,6 @@ Preferred streaming media delivery protocol
 
 
 
-</td></tr>
-<tr><td>
-
-[VTTCueInfo](./player.vttcueinfo.md)
-
-
-</td><td>
-
-
 </td></tr>
 <tr><td>