@gcorevideo/player 2.28.35 → 2.29.0

package/README.md

@@ -1,4 +1,5 @@
 # Gcore video player
+
 $
 
 ## Installation
@@ -15,7 +16,7 @@ Or use a script on the CDN directly in your HTML:
 
 ## Usage
 
-See the complete example app on Vercel: [https://github.com/dmitritz/gcore-videoplayer-js-nuxt](https://github.com/dmitritz/gcore-videoplayer-js-nuxt)
+See the complete example app on Vercel: <https://github.com/dmitritz/gcore-videoplayer-js-nuxt>
 
 ### Plain HTML example
 
@@ -83,3 +84,23 @@ See the complete example app on Vercel: [https://github.com/dmitritz/gcore-video
 ## Documentation
 
 - [API reference](./docs/api/index.md)
+
+## Development
+
+### Log level
+
+Detailed logs can be useful in local development while debugging or watching tests output.
+Log level of the player core and components can be controlled by configuring a LogTracer:
+
+```ts
+import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+// ...
+Logger.enable('*') // log everything; you can use glob-like patterns, such as 'gplayer', 'plugins.*' or 'playback.*'
+setTracer(new LogTracer('AudioTracks.test'))
+```
+
+When debugging an app that use the player as a dependency,
+
+```ts
+import { LogTracer, Logger, setTracer } from '@gcorevideo/player'
+```

package/assets/{subtitles → cc}/style.scss

@@ -68,6 +68,11 @@
     position: absolute;
     bottom: calc(var(--bottom-panel) + 5px);
     width: 100%;
+    transition: transform 0.3s ease-out;
+
+    &.media-control-cc-pulled {
+      transform: translateY(var(--bottom-panel));
+    }
 
     p {
       width: auto;

package/assets/media-control/media-control.scss

@@ -186,6 +186,7 @@
   }
 
   .media-control-indicator {
+
     &[data-position],
     &[data-duration] {
       display: flex;
@@ -394,6 +395,7 @@
       }
     }
   }
+
   .seek-time {
     height: 26px;
     line-height: 26px;
@@ -472,37 +474,37 @@
         font-size: var(--gplayer-mc-font-size-dropdown);
         text-align: right;
         height: 30px;
-    
+
         a {
           display: block;
           text-decoration: none;
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-    
+
           // height: 30px;
           padding: 5px 10px;
           line-height: 20px;
           color: #fffffe; // TODO color var
-    
+
           &:hover {
             text-decoration: none;
             background-color: rgb(0 0 0 / 40%);
             color: var(--gplayer-mc-text-color);
           }
         }
-    
+
         &.current a {
           color: #f00;
         }
-    
+
         &:first-child {
           a {
             border-bottom-left-radius: 4px;
             border-bottom-right-radius: 4px;
           }
         }
-    
+
         &:last-child {
           a {
             border-top-left-radius: 4px;

package/assets/multi-camera/multicamera.ejs

@@ -1,29 +1,33 @@
-<button data-multicamera-button class='gcore-skin-button-color'>
+<button data-multicamera-button class='gcore-skin-button-color media-control-button'>
     <span class="multicamera-icon"></span>
 </button>
 
 <ul class="gcore-skin-bg-color">
-    <% for (var i = 0; i < streams.length; i++) { %>
-        <% if(!streams[i].live && multisources_mode === 'only_live') { %>
+    <% for (var i=0; i < streams.length; i++) { %>
+        <% if(!streams[i].live && multisources_mode==='only_live' ) { %>
             <% continue; %>
-        <% } %>
-        <li>
-            <div class="multicamera-item" data-multicamera-selector-live="<%= streams[i].live %>"
-                 data-multicamera-selector-select="<%= streams[i].id %>">
-                <div class="multicamera-screenshot">
-                    <% if (streams[i].screenshot) { %>
-                        <img src="<%= streams[i].screenshot %>" alt="<%= streams[i].title %>"/>
+                <% } %>
+                    <li>
+                        <div class="multicamera-item" data-multicamera-selector-live="<%= streams[i].live %>"
+                            data-multicamera-selector-select="<%= streams[i].id %>">
+                            <div class="multicamera-screenshot">
+                                <% if (streams[i].screenshot) { %>
+                                    <img src="<%= streams[i].screenshot %>" alt="<%= streams[i].title %>" />
+                                    <% } %>
+                            </div>
+                            <div class="multicamera-text gcore-skin-text-color">
+                                <% if (streams[i].title) { %>
+                                    <div class="multicamera-title gcore-skin-text-color">
+                                        <%= streams[i].title %>
+                                    </div>
+                                    <% } %>
+                                        <% if (streams[i].description) { %>
+                                            <div class="multicamera-description gcore-skin-text-color">
+                                                <%= streams[i].description %>
+                                            </div>
+                                            <% } %>
+                            </div>
+                        </div>
+                    </li>
                     <% } %>
-                </div>
-                <div class="multicamera-text gcore-skin-text-color">
-                    <% if (streams[i].title) { %>
-                        <div class="multicamera-title gcore-skin-text-color"><%= streams[i].title %></div>
-                    <% } %>
-                    <% if (streams[i].description) { %>
-                        <div class="multicamera-description gcore-skin-text-color"><%= streams[i].description %></div>
-                    <% } %>
-                </div>
-            </div>
-        </li>
-    <% } %>
-</ul>
+</ul>

package/assets/multi-camera/style.scss

@@ -5,11 +5,8 @@
 }
 
 .multicamera[data-multicamera] {
-  float: right;
-  margin-top: 4px;
   position: relative;
-  margin-right: 20px;
-  width: 20px;
+  order: 80;
 
   button {
     background-color: transparent;
@@ -20,10 +17,15 @@
     font-size: 14px;
     padding: 0;
 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 20px;
+
     svg {
       height: 20px;
       position: relative;
-      margin-top: 6px;
     }
 
     &:hover {
@@ -33,13 +35,6 @@
     &.changing {
       animation: pulse 0.5s infinite alternate;
     }
-
-    span.quality-arrow {
-      width: 9px;
-      height: 6px;
-      margin-top: 11px;
-      margin-left: 5px;
-    }
   }
 
   &>ul {
@@ -135,27 +130,5 @@
         }
       }
     }
-
-    a {
-      color: #444;
-      padding: 2px 10px;
-      display: block;
-      text-decoration: none;
-
-      &:hover {
-        background-color: #555;
-        color: white;
-
-        a {
-          color: white;
-          text-decoration: none;
-        }
-      }
-    }
-
-    &.current a {
-      color: #f00;
-    }
-
   }
 }

package/assets/style/main.scss

@@ -14,7 +14,7 @@
 }
 
 .spinner-three-bounce {
-  & > .gcore-skin-main-color {
+  &>.gcore-skin-main-color {
     box-shadow: 4px 4px 9px 1px rgb(36 61 81 / 51%);
   }
 }
@@ -47,4 +47,4 @@
     border: 0;
     padding: 0;
   }
-}
+}

package/dist/core.js

@@ -12686,6 +12686,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;
@@ -12725,22 +12728,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');
 }
@@ -12807,6 +12809,9 @@ class BasePlayback extends HTML5Video$1 {
         super._onPlaying();
         this.trigger(Events$1.PLAYBACK_MEDIACONTROL_ENABLE);
     }
+    setTextTrack(id) {
+        // noop
+    }
 }
 
 var PlaybackEvents;
@@ -12829,6 +12834,7 @@ const T$3 = '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
@@ -12961,7 +12967,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);
@@ -13005,24 +13015,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();
@@ -13332,14 +13324,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) => ({
@@ -13349,7 +13341,7 @@ class DashPlayback extends BasePlayback {
                 id: index,
                 label: getTextTrackLabel(t) || "",
                 language: t.lang,
-                mode: "hidden",
+                mode: this._currentTextTrackId === index ? "showing" : "hidden",
             },
         })) || [];
     }
@@ -50861,7 +50853,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
@@ -51481,7 +51477,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.35";
+var version$1 = "2.29.0";
 
 var packages = {
 	"node_modules/@clappr/core": {