@gcorevideo/player 2.20.22 → 2.21.3

package/assets/media-control/width370.scss

@@ -1,11 +1,9 @@
 .media-control-skin-1[data-media-control-skin-1].w370 {
   .media-control-subtitles {
-    .subtitles[data-subtitles] {
-      width: 28px;
+    width: 28px;
 
-      svg {
-        height: 17px;
-      }
+    svg {
+      height: 17px;
     }
   }
 
@@ -18,29 +16,6 @@
       max-height: 300px;
       transform: none;
 
-      .share-container-main {
-        // .share-container-header--linktext,
-        // .share-container-header--socialtext,
-        // .share-container-header--embedtext,
-        // .share-container-header--embed {
-        //  display: none;
-        // }
-
-        //.share-container-header--socialicon {
-        //  margin-top: -84px;
-        //}
-        //
-        //.share-container-header--link {
-        //  width: 100%;
-        //  border-left: none;
-        //  border-right: none;
-        //  margin-top: 52px;
-        //  height: 32px;
-        //  font-size: 12px;
-        //  padding: 10px;
-        //}
-      }
-
       .share-container-header {
         border: none;
 
@@ -54,39 +29,42 @@
   .media-control-quality,
   .media-control-audio-tracks {
     display: block;
+  }
 
-    .level_selector[data-level-selector],
-    .audio_selector[data-track-selector] {
-      margin-top: 3px;
-      margin-right: 10px;
+  .level-selector[data-level-selector],
+  .media-control-audio-tracks[data-track-selector] {
+    margin-top: 3px;
+    margin-right: 10px;
 
-      ul {
-        bottom: 30px;
-        width: 50px;
+    ul {
+      bottom: 30px;
+      width: 50px;
 
-        li {
-          height: 23px;
-          font-size: 14px;
+      li {
+        height: 23px;
+        font-size: 14px;
 
-          a {
-            height: 23px;
-            padding: 2px 5px;
-          }
+        a {
+          height: 23px;
+          padding: 2px 5px;
         }
       }
+    }
 
-      button[data-level-selector-button],
-      button[data-track-selector-button] {
-        .quality-text, .audio-text {
-          font-size: 13px;
-        }
+    button[data-level-selector-button],
+    button[data-track-selector-button] {
 
-        span.quality-arrow, span.audio-arrow {
-          width: 7px;
-          height: 5px;
-          margin-left: 4px;
-          margin-top: 11px;
-        }
+      .quality-text,
+      .audio-text {
+        font-size: 13px;
+      }
+
+      span.quality-arrow,
+      span.audio-arrow {
+        width: 7px;
+        height: 5px;
+        margin-left: 4px;
+        margin-top: 11px;
       }
     }
   }
@@ -104,54 +82,12 @@
           margin: 0;
         }
       }
-
-      // ul {
-      //  width: 150px;
-      //  bottom: 32px;
-      //  padding: 0;
-
-      //  li {
-      //    .multicamera-item {
-      //      .multicamera-poster {
-      //        width: 40px;
-      //        height: 30px;
-      //        img {
-      //          width: 40px;
-      //          height: 30px;
-      //        }
-      //      }
-      //      .multicamera-text {
-      //        width: 70px;
-      //        .multicamera-title {
-      //          width: 70px;
-      //          height: 15px;
-      //          font-size: 12px;
-      //        }
-      //      }
-      //    }
-      //  }
-      //  &::after {
-      //    display: none;
-      //  }
-      // }
-
     }
   }
 
   .media-control-layer[data-controls] {
-    height: 32px;
-
-    .media-control-bottomgear {
-      .button-gear {
-        height: 33px;
-        margin-right: 10px;
-        padding-right: 0;
-
-        svg {
-          height: 17px;
-        }
-      }
-    }
+    padding-left: 10px;
+    padding-right: 12px;
 
     .media-control-indicator {
       line-height: 32px;
@@ -201,18 +137,7 @@
     button.media-control-button {
       height: 32px;
 
-      &[data-playpause] {
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-
-      &[data-playstop] {
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-
       &[data-fullscreen] {
-        margin-right: 12px;
         height: 33px;
       }
 
@@ -222,6 +147,7 @@
     }
 
     .media-clip-container {
+
       .media-clip-text,
       .media-clip-point {
         line-height: 33px;
@@ -260,4 +186,4 @@
       }
     }
   }
-}
+}

package/assets/picture-in-picture/button.ejs

@@ -1,3 +1,3 @@
 <button class="gplayer-lite-btn gcore-skin-button-color">
-    <span><%= pipIcon %></span>
+    <%= pipIcon %>
 </button>

package/assets/picture-in-picture/button.scss

@@ -1,11 +1,12 @@
 .media-control-pip {
+  order: 95;
+  display: flex;
+
   button {
-    float: right;
-    height: 40px;
-    margin-right: 20px;
+    height: 20px;
 
     svg {
       height: 20px;
     }
   }
-}
+}

package/assets/subtitles/combobox.ejs

@@ -3,14 +3,12 @@
 </button>
 
 <ul class='gcore-skin-bg-color'>
-    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="off">off</a></li>
-    <% for (const track of tracks) { %>
-        <% if (track.kind === 'subtitles' || track.kind === 'captions') { %>
-            <li>
-                <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= track.language %>">
-                    <%= track.label %>
-                </a>
-            </li>
-        <% } %>
+    <% for (const t of tracks) { %>
+        <li>
+            <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= t.id %>">
+                <%= t.name %>
+            </a>
+        </li>
     <% } %>
+    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="-1">Off</a></li>
 </ul>

package/assets/subtitles/style.scss

@@ -1,19 +1,18 @@
-*, :focus, :visited {
+*,
+:focus,
+:visited {
   outline: none !important;
 }
 
-.subtitles[data-subtitles] {
-  float: right;
+.media-control-subtitles[data-subtitles] {
   position: relative;
-  width: 50px;
+  order: 85;
 
   button {
     background-color: transparent;
     color: #fff;
-    font-family: Roboto, "Open Sans", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     border: none;
-    font-size: 14px;
     cursor: pointer;
 
     .subtitle-text {
@@ -31,7 +30,7 @@
     }
   }
 
-  & > ul {
+  ul {
     width: 80px;
     list-style-type: none;
     position: absolute;
@@ -39,16 +38,10 @@
     border: 1px solid black;
     display: none;
     background-color: #e6e6e6;
+    padding: 8px 0;
   }
 
   li {
-    font-size: 10px;
-
-    &[data-title] {
-      background-color: #c3c2c2;
-      padding: 5px;
-    }
-
     a {
       color: #444;
       padding: 2px 10px;
@@ -96,4 +89,4 @@
 .ios-fullscreen::cue {
   visibility: visible !important;
   font-size: 1em !important;
-}
+}

package/dist/core.js

@@ -12540,9 +12540,11 @@ var PlaybackErrorCode;
 /**
  * This class adds common behaviors to all playback modules.
  * @internal
- * TODO use custom HTML5Video playback with this layer applied
  */
 class BasePlayback extends HTML5Video$1 {
+    get isHTML5Video() {
+        return true;
+    }
     createError(errorData, options) {
         const i18n = this.i18n ||
             // @ts-ignore
@@ -12586,13 +12588,13 @@ var PlaybackEvents;
     PlaybackEvents["PLAYBACK_RATE_CHANGED"] = "playback:rate-changed";
 })(PlaybackEvents || (PlaybackEvents = {}));
 
-// Copyright 2014 Globo.com Player authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
+// This code is derived on works by Globo.com.
+// This code is distributed under the terms of the Apache License 2.0.
+// Original code's license can be found on
+// https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
 const T$3 = 'playback.dash';
-// @ts-expect-error
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12752,6 +12754,7 @@ class DashPlayback extends BasePlayback {
                 const newLevel = this.getLevel(evt.newQuality);
                 this.onLevelSwitch(newLevel);
             });
+            this.checkAudioTracks();
         });
         this._dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_RENDERED, (evt) => {
             const currentLevel = this.getLevel(evt.newQuality);
@@ -12772,6 +12775,11 @@ class DashPlayback extends BasePlayback {
         this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, (e) => {
             this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate);
         });
+        this._dash.on(DASHJS.MediaPlayer.events.TRACK_CHANGE_RENDERED, (e) => {
+            if (e.mediaType === 'audio') {
+                this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack$1(e.newMediaInfo));
+            }
+        });
     }
     render() {
         this._ready();
@@ -13039,6 +13047,36 @@ class DashPlayback extends BasePlayback {
     setPlaybackRate(rate) {
         this._dash?.setPlaybackRate(rate);
     }
+    get audioTracks() {
+        assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
+        const tracks = this._dash.getTracksFor('audio');
+        trace(`${T$3} get audioTracks`, { tracks });
+        return tracks.map(toClapprTrack$1);
+    }
+    // @ts-expect-error
+    get currentAudioTrack() {
+        trace(`${T$3} get currentAudioTrack`);
+        assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
+        const t = this._dash.getCurrentTrackFor('audio');
+        if (!t) {
+            return null;
+        }
+        return toClapprTrack$1(t);
+    }
+    switchAudioTrack(id) {
+        assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
+        const tracks = this._dash.getTracksFor('audio');
+        const track = tracks.find((t) => t.id === id);
+        assert.ok(track, 'Invalid audio track ID');
+        this._dash.setCurrentTrack(track);
+    }
+    checkAudioTracks() {
+        // @ts-ignore
+        const tracks = this._dash.getTracksFor('audio');
+        if (tracks.length) {
+            this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, tracks.map(toClapprTrack$1));
+        }
+    }
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -13050,6 +13088,14 @@ DashPlayback.canPlay = function (resource, mimeType) {
     const ctor = ms || mms || wms;
     return typeof ctor === 'function';
 };
+function toClapprTrack$1(t) {
+    return {
+        id: t.id,
+        kind: t.roles && t.roles?.length > 0 ? t.roles[0] : 'main', // TODO
+        label: t.labels.map((l) => l.text).join(' '), // TODO
+        language: t.lang,
+    };
+}
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -41711,7 +41757,6 @@ const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
 const T$2 = 'playback.hls';
-// @ts-expect-error
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -41756,7 +41801,7 @@ class HlsPlayback extends BasePlayback {
     set currentLevel(id) {
         this._currentLevel = id;
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_START);
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         if (this.options.playback.hlsUseNextLevel) {
             this._hls.nextLevel = this._currentLevel;
         }
@@ -41765,11 +41810,11 @@ class HlsPlayback extends BasePlayback {
         }
     }
     get latency() {
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         return this._hls.latency;
     }
     get currentProgramDateTime() {
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         assert.ok(this._hls.playingDate, 'Hls.js playingDate is not defined');
         return this._hls.playingDate;
     }
@@ -41954,7 +41999,7 @@ class HlsPlayback extends BasePlayback {
             return;
         }
         this._hls.once(Hls.Events.MEDIA_ATTACHED, () => {
-            assert.ok(this._hls, 'Hls.js instance is not available');
+            assert.ok(this._hls, 'HLS.js is not initialized');
             this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
         });
         const onPlaying = () => {
@@ -41979,13 +42024,15 @@ class HlsPlayback extends BasePlayback {
         // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
         this._hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, () => this._onSubtitleLoaded());
         this._hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => (this._ccTracksUpdated = true));
+        this._hls.on(Events.AUDIO_TRACKS_UPDATED, (evt, data) => this._onAudioTracksUpdated(evt, data));
+        this._hls.on(Events.AUDIO_TRACK_SWITCHED, (evt, data) => this._onAudioTrackSwitched(evt, data));
         this.bindCustomListeners();
     }
     bindCustomListeners() {
         this.customListeners.forEach((item) => {
             const requestedEventName = item.eventName;
             const typeOfListener = item.once ? 'once' : 'on';
-            assert.ok(this._hls, 'Hls.js instance is not available');
+            assert.ok(this._hls, 'HLS.js is not initialized');
             requestedEventName &&
                 this._hls[`${typeOfListener}`](requestedEventName, item.callback);
         });
@@ -41993,7 +42040,7 @@ class HlsPlayback extends BasePlayback {
     unbindCustomListeners() {
         this.customListeners.forEach((item) => {
             const requestedEventName = item.eventName;
-            assert.ok(this._hls, 'Hls.js instance is not available');
+            assert.ok(this._hls, 'HLS.js is not initialized');
             requestedEventName && this._hls.off(requestedEventName, item.callback);
         });
     }
@@ -42017,7 +42064,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_READY, this.name);
     }
     _recover(evt, data, error) {
-        assert(this._hls, 'Hls.js instance is not available');
+        assert(this._hls, 'HLS.js is not initialized');
         if (!this._recoveredDecodingError) {
             this._recoveredDecodingError = true;
             this._hls.recoverMediaError();
@@ -42180,10 +42227,6 @@ class HlsPlayback extends BasePlayback {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
-                        // TODO check
-                        // if (data.error instanceof MediaError && data.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
-                        //   error.code = PlaybackErrorCode.MediaSourceUnavailable
-                        // }
                         this._recover(evt, data, error);
                         break;
                     default:
@@ -42325,7 +42368,7 @@ class HlsPlayback extends BasePlayback {
         }
     }
     _fillLevels() {
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         this._levels = this._hls.levels.map((level, index) => {
             return {
                 level: index, // or level.id?
@@ -42526,6 +42569,34 @@ class HlsPlayback extends BasePlayback {
         }));
         this.stop();
     }
+    get audioTracks() {
+        assert.ok(this._hls, 'HLS.js is not initialized');
+        return this._hls.audioTracks.map(toClapprTrack);
+    }
+    // @ts-expect-error
+    get currentAudioTrack() {
+        assert.ok(this._hls, 'HLS.js is not initialized');
+        const idx = this._hls.audioTrack;
+        const track = this._hls.audioTracks[idx]; // TODO or find by .id == idx?
+        if (track) {
+            return toClapprTrack(track);
+        }
+        return null;
+    }
+    switchAudioTrack(id) {
+        assert.ok(this._hls, 'HLS.js is not initialized');
+        this._hls.audioTrack = Number(id); // TODO or find index by .id == id?
+    }
+    _onAudioTracksUpdated(_, data) {
+        trace(`${T$2} onAudioTracksUpdated`);
+        this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
+    }
+    _onAudioTrackSwitched(_, data) {
+        trace(`${T$2} onAudioTrackSwitched`);
+        // @ts-ignore
+        const track = this._hls.audioTracks[data.id];
+        this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
+    }
 }
 HlsPlayback.canPlay = function (resource, mimeType) {
     if (!isHlsSource(resource, mimeType)) {
@@ -42533,6 +42604,14 @@ HlsPlayback.canPlay = function (resource, mimeType) {
     }
     return Hls.isSupported();
 };
+function toClapprTrack(t) {
+    return {
+        id: String(t.id),
+        language: t.lang ?? '',
+        kind: t.type === 'main' ? 'main' : 'description', // TODO check
+        label: t.name,
+    };
+}
 
 const T$1 = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
@@ -42553,10 +42632,6 @@ class HTML5Video extends BasePlayback {
         if (i18n &&
             !errorData.UI &&
             errorData.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
-            // errorData.UI = {
-            //   title: i18n.t('no_broadcast'),
-            //   message: errorData.message,
-            // }
             errorData.code = PlaybackErrorCode.MediaSourceUnavailable;
         }
         return super.createError(errorData, { ...options, useCodePrefix: false });
@@ -42612,6 +42687,59 @@ class HTML5Video extends BasePlayback {
             this.stallTimerId = null;
         }
     }
+    get audioTracks() {
+        const tracks = this.el.audioTracks;
+        const supported = !!tracks;
+        trace(`${T$1} get audioTracks`, { supported });
+        const retval = [];
+        if (supported) {
+            for (let i = 0; i < tracks.length; i++) {
+                const track = tracks[i];
+                retval.push({
+                    id: track.id,
+                    label: track.label,
+                    language: track.language,
+                    kind: track.kind, // TODO check
+                });
+            }
+        }
+        return retval;
+    }
+    // @ts-expect-error
+    get currentAudioTrack() {
+        const tracks = this.el.audioTracks;
+        const supported = !!tracks;
+        trace(`${T$1} get currentAudioTrack`, {
+            supported,
+        });
+        if (supported) {
+            for (let i = 0; i < tracks.length; i++) {
+                const track = tracks[i];
+                if (track.enabled) {
+                    return {
+                        id: track.id,
+                        label: track.label,
+                        language: track.language,
+                        kind: track.kind,
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    switchAudioTrack(id) {
+        const tracks = this.el.audioTracks;
+        const supported = !!tracks;
+        trace(`${T$1} switchAudioTrack`, {
+            supported,
+        });
+        if (supported) {
+            for (let i = 0; i < tracks.length; i++) {
+                const track = tracks[i];
+                track.enabled = track.id === id;
+            }
+        }
+    }
 }
 
 // TODO consider allowing the variation of the order of playback modules
@@ -43085,7 +43213,7 @@ class Player {
     }
 }
 
-var version$1 = "2.20.22";
+var version$1 = "2.21.3";
 
 var packages = {
 	"node_modules/@clappr/core": {