@gcorevideo/player 2.24.10 → 2.24.13

package/README.md

@@ -1,4 +1,5 @@
 # Gcore video player
+$
 
 ## Installation
 

package/assets/dvr-controls/dvr_controls.scss

@@ -1,104 +1,67 @@
-$disabled-opacity: 0.3;
-$control-height: 32px;
-$circle-radius: 3.5px;
-$bottom-panel: 40px;
+.dvr-controls {
+  --disabled-opacity: 0.3;
+  --circle-radius: 5px;
 
-.dvr-controls[data-dvr] {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   color: var(--player-dvr-color);
-  line-height: 32px;
   font-size: 10px;
-  font-weight: bold;
-  margin-left: 6px;
+  font-weight: 500;
+  height: var(--bottom-panel);
+  line-height: var(--bottom-panel);
+  margin-left: 0;
 
-  .live-info {
-    cursor: default;
+  .live-info,
+  .live-button {
+    font-size: 14px;
+    font-weight: 500;
+    margin-left: 20px;
+    letter-spacing: 0.8px;
     text-transform: uppercase;
 
-    &:before {
+    &::before {
+      margin-right: 8px;
       content: "";
       display: inline-block;
       position: relative;
-      width: $circle-radius*2;
-      height: $circle-radius*2;
-      border-radius: $circle-radius;
-      margin-right: $circle-radius;
-      background-color: var(--player-live-color);
-    }
-
-    &.disabled {
-      opacity: $disabled-opacity;
-
-      &:before {
-        background-color: var(--player-dvr-color);
-      }
+      width: calc(var(--circle-radius)*2);
+      height: calc(var(--circle-radius)*2);
+      border-radius: var(--circle-radius);
+      background-color: var(--player-dvr-color);
     }
   }
 
-  .live-button {
-    cursor: pointer;
-    outline: none;
-    display: none;
-    border: 0;
-    color: var(--player-dvr-color);
-    background-color: transparent;
-    height: 32px;
-    padding: 0;
-    opacity: 0.7;
-    text-transform: uppercase;
-    transition: all 0.1s ease;
+  &.disabled {
+    opacity: var(--disabled-opacity);
 
     &:before {
-      content: "";
-      display: inline-block;
-      position: relative;
-      width: $circle-radius*2;
-      height: $circle-radius*2;
-      border-radius: $circle-radius;
-      margin-right: $circle-radius;
       background-color: var(--player-dvr-color);
     }
-
-    &:hover {
-      opacity: 1;
-      text-shadow: rgba(255, 255, 255, .75) 0 0 5px;
-    }
   }
+}
 
-  height: $bottom-panel;
-  line-height: $bottom-panel;
-  margin-left: 0;
-
-  .live-info {
-    font-size: 14px;
-    letter-spacing: 0.8px;
-    font-weight: 500;
-    color: #fffffe;
-    margin-left: 21px;
+.live-info {
+  text-transform: uppercase;
+  color: #fffffe;
 
-    &::before {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      margin-right: 8px;
-      background-color: #ed4f4a;
-    }
+  &::before {
+    background-color: var(--player-live-color); // TODO
+    background-color: #ed4f4a;
   }
+}
 
-  .live-button {
-    height: $bottom-panel;
-    opacity: 1;
-    font-size: 14px;
-    letter-spacing: 0.8px;
-    font-weight: 500;
-    margin-left: 20px;
+.live-button {
+  cursor: pointer;
+  outline: none;
+  border: 0;
+  color: var(--player-dvr-color);
+  background-color: transparent;
+  padding: 0;
+  opacity: 0.7;
+  transition: all 0.1s ease;
 
-    &::before {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      margin-right: 8px;
-      background-color: #cacaca;
-    }
+  &:hover {
+    opacity: 1;
+    text-shadow: rgba(255, 255, 255, .75) 0 0 5px;
   }
 }

package/assets/dvr-controls/index.ejs

@@ -1,2 +1,8 @@
-<div class="live-info" id="media-control-live"><%= i18n.t('live') %></div>
-<button type="button" class="live-button" aria-label="<%= i18n.t('back_to_live') %>" id="media-control-back-to-live"><%= i18n.t('back_to_live') %></button>
+<div class="live-info" id="gplayer-mc-live"><%= i18n.t('live') %></div>
+<button type="button"
+    class="live-button"
+    aria-label="<%= i18n.t('back_to_live') %>"
+    id="gplayer-mc-back-to-live"
+>
+    <%= i18n.t('back_to_live') %>
+</button>

package/assets/media-control/width370.scss

@@ -99,7 +99,7 @@
       }
     }
 
-    .dvr-controls[data-dvr] {
+    .dvr-controls {
       height: 32px;
 
       .live-button {

package/dist/core.js

@@ -12785,10 +12785,9 @@ class DashPlayback extends BasePlayback {
         return super.render();
     }
     _ready() {
-        this._isReadyState = true;
-        this.trigger(Events$1.PLAYBACK_READY, this.name);
+        !this._dash && this._setup();
+        super._ready();
     }
-    // override
     _setupSrc() {
         // this playback manages the src on the video element itself
     }
@@ -12972,9 +12971,7 @@ class DashPlayback extends BasePlayback {
     }
     play() {
         trace(`${T$3} play`, { dash: !!this._dash });
-        if (!this._dash) {
-            this._setup();
-        }
+        !this._dash && this._setup();
         super.play();
         this._startTimeUpdateTimer();
     }
@@ -12990,20 +12987,22 @@ class DashPlayback extends BasePlayback {
     stop() {
         if (this._dash) {
             this._stopTimeUpdateTimer();
-            this._dash.reset();
+            this.destroyInstance();
             super.stop();
-            this._dash = null;
         }
     }
-    destroy() {
-        this._stopTimeUpdateTimer();
+    destroyInstance() {
         if (this._dash) {
             this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError);
             this._dash.off(DASHJS.MediaPlayer.events.PLAYBACK_ERROR, this._onPlaybackError);
             this._dash.off(DASHJS.MediaPlayer.events.MANIFEST_LOADED, this.getDuration);
             this._dash.reset();
+            this._dash = null;
         }
-        this._dash = null;
+    }
+    destroy() {
+        this._stopTimeUpdateTimer();
+        this.destroyInstance();
         return super.destroy();
     }
     _updatePlaybackType() {
@@ -13072,6 +13071,13 @@ class DashPlayback extends BasePlayback {
         assert.ok(track, 'Invalid audio track ID');
         this._dash.setCurrentTrack(track);
     }
+    load(srcUrl) {
+        this._stopTimeUpdateTimer();
+        this.options.src = srcUrl;
+        // TODO destroy the instance first?
+        this.destroyInstance();
+        this._setup();
+    }
     checkAudioTracks() {
         // @ts-ignore
         const tracks = this._dash.getTracksFor('audio');
@@ -41768,7 +41774,6 @@ class HlsPlayback extends BasePlayback {
     _extrapolatedWindowNumSegments = 0; // TODO
     highDefinition = false;
     _hls = null;
-    _isReadyState = false;
     _lastDuration = null;
     _lastTimeUpdate = null;
     _levels = null;
@@ -41785,9 +41790,15 @@ class HlsPlayback extends BasePlayback {
     _recoveredDecodingError = false;
     _segmentTargetDuration = null;
     _timeUpdateTimer = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'hls';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
@@ -41797,9 +41808,6 @@ class HlsPlayback extends BasePlayback {
     get currentLevel() {
         return this._currentLevel ?? AUTO;
     }
-    get isReady() {
-        return this._isReadyState;
-    }
     set currentLevel(id) {
         this._currentLevel = id;
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_START);
@@ -41986,6 +41994,7 @@ class HlsPlayback extends BasePlayback {
         const config = $.extend(true, {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
+            autoStartLoad: false,
         }, this.options.playback.hlsjsConfig);
         trace(`${T$2} _createHLSInstance`, { config });
         this._hls = new Hls(config);
@@ -42004,6 +42013,7 @@ class HlsPlayback extends BasePlayback {
             assert.ok(this._hls, 'HLS.js is not initialized');
             this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
         });
+        // TODO drop?
         const onPlaying = () => {
             if (this._hls) {
                 this._hls.config.maxBufferLength =
@@ -42014,8 +42024,13 @@ class HlsPlayback extends BasePlayback {
             this.el.removeEventListener('playing', onPlaying);
         };
         this.el.addEventListener('playing', onPlaying);
-        this._hls.on(Hls.Events.MANIFEST_PARSED, () => (this._manifestParsed = true));
-        this._hls.on(Hls.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data));
+        this._hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            this._manifestParsed = true;
+            this._hls.startLoad(-1);
+        });
+        this._hls.on(Hls.Events.LEVEL_LOADED, (evt, data) => {
+            this._updatePlaybackType(evt, data);
+        });
         this._hls.on(Hls.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
         this._hls.on(Hls.Events.LEVEL_SWITCHING, (evt, data) => this._onLevelSwitch(evt, data));
         this._hls.on(Hls.Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitched(evt, data));
@@ -42058,12 +42073,8 @@ class HlsPlayback extends BasePlayback {
         return super.render();
     }
     _ready() {
-        if (this._isReadyState) {
-            return;
-        }
         !this._hls && this._setup();
-        this._isReadyState = true;
-        this.trigger(Events$1.PLAYBACK_READY, this.name);
+        super._ready();
     }
     _recover(evt, data, error) {
         assert(this._hls, 'HLS.js is not initialized');
@@ -43217,7 +43228,7 @@ class Player {
     }
 }
 
-var version$1 = "2.24.10";
+var version$1 = "2.24.13";
 
 var packages = {
 	"node_modules/@clappr/core": {