@gcorevideo/player 2.28.36 → 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');
 }
@@ -57001,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";
 
@@ -58301,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'

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');
 }
@@ -51567,7 +51569,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.36";
+var version$1 = "2.29.0";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -57958,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';
 /**
@@ -58013,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);
@@ -58021,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() {
@@ -58045,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) {
@@ -58131,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);
@@ -58220,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();
@@ -58243,7 +58183,7 @@ class MultiCamera extends UICorePlugin {
     }
     hideError() {
         try {
-            this.core.mediaControl.enableControlButton();
+            this.core.getPlugin('media_control')?.enableControlButton();
         }
         catch (error) {
             reportError(error);
@@ -58253,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;
             }
@@ -58282,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);
@@ -58310,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 + '"]'
                 : ''));
@@ -58334,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";
 
@@ -59764,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'

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>
 

package/docs/api/player.mediacontrol.setkeepvisible.md

@@ -0,0 +1,56 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [setKeepVisible](./player.mediacontrol.setkeepvisible.md)
+
+## MediaControl.setKeepVisible() method
+
+Set or reset the keep visibility state
+
+Keep visibility state controls whether the media control is hidden automatically after a delay, which is a default behaviour.
+
+**Signature:**
+
+```typescript
+setKeepVisible(keepVisible: boolean): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+keepVisible
+
+
+</td><td>
+
+boolean
+
+
+</td><td>
+
+The state
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+

package/docs/api/player.multicamera.md

@@ -223,20 +223,6 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[activeById(id, active)](./player.multicamera.activebyid.md)
-
-
-</td><td>
-
-
-</td><td>
-
-**_(BETA)_**
-
-
-</td></tr>
-<tr><td>
-
 [bindEvents()](./player.multicamera.bindevents.md)
 
 
@@ -262,20 +248,6 @@ Description
 **_(BETA)_**
 
 
-</td></tr>
-<tr><td>
-
-[unBindEvents()](./player.multicamera.unbindevents.md)
-
-
-</td><td>
-
-
-</td><td>
-
-**_(BETA)_**
-
-
 </td></tr>
 </tbody></table>