Merge branch 'master' into FEC-13371

# Conflicts:
#	karma.conf.js
#	package.json
#	src/engines/html5/media-source/adapters/native-adapter.ts
#	src/player.ts

.github/workflows/run_canary.yaml

@@ -6,6 +6,13 @@ on:
   push:
     branches:
       - master
+
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'branch name'     
+        required: false
+        default: 'master'
 
 jobs:
   canary:

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 0.84.1 (2023-12-07)
+
+
+### Bug Fixes
+
+* **ADA-82:** Caption Texts are Not Showing when Moving Cursor in Time Bar ([#738](https://github.com/kaltura/playkit-js/issues/738)) ([005b774](https://github.com/kaltura/playkit-js/commit/005b774)), closes [#147](https://github.com/kaltura/playkit-js/issues/147)
+
+
+
+## 0.84.0 (2023-11-26)
+
+
+### Features
+
+* **FEC-13462:** handle the playback rate after medialoaded event ([#733](https://github.com/kaltura/playkit-js/issues/733)) ([16a4ffa](https://github.com/kaltura/playkit-js/commit/16a4ffa))
+
+
+
 ### 0.83.1 (2023-10-31)
 
 

flow-typed/types/playback-config.js

@@ -17,5 +17,6 @@ declare type PKPlaybackConfigObject = {
   preferNative: PKPreferNativeConfigObject,
   inBrowserFullscreen: boolean,
   playAdsWithMSE: boolean,
-  screenLockOrientionMode: string
+  screenLockOrientionMode: string,
+  playbackRate: number
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/playkit-js",
-  "version": "0.83.1",
+  "version": "0.84.1",
   "keywords": [
     "kaltura",
     "player",

src/engines/html5/media-source/adapters/native-adapter.ts

@@ -126,6 +126,10 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
 
   private _segmentDuration: number = 0;
 
+  _startTimeOfDvrWindowInterval: IntervalID;
+
+  _startTimeOfDvrWindow: number = 0;
+
   /**
    * A counter to track the number of attempts to recover from media error
    * @type {number}
@@ -235,6 +239,9 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
     }
     if (Utils.Object.hasPropertyPath(config, 'abr')) {
       const abr = config.abr;
+      if (abr.defaultBandwidthEstimate) {
+        adapterConfig.abrEwmaDefaultEstimate = abr.defaultBandwidthEstimate;
+      }
       if (abr.restrictions) {
         Utils.Object.createPropertyPath(adapterConfig, 'abr.restrictions', abr.restrictions);
       }
@@ -255,6 +262,7 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
     this._config = Utils.Object.mergeDeep({}, defaultConfig, this._config);
     this._progressiveSources = config.progressiveSources;
     this._liveEdge = 0;
+    this._setStarTimeOfDvrWindowInterval();
   }
 
   /**
@@ -458,7 +466,42 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
     requestFilterPromise = requestFilterPromise || Promise.resolve(pkRequest);
     requestFilterPromise
       .then(updatedRequest => {
-        this._videoElement.src = updatedRequest.url;
+        if (this._config.useSourceTag) {
+          const source = document.createElement('source');
+          const mimetype = this._sourceObj?.mimetype.toLowerCase() || '';
+
+          source.setAttribute('src', updatedRequest.url);
+          source.setAttribute('type', mimetype);
+
+          if (this._config.useMediaOptionAttribute) {
+            let options = {};
+            // https://webostv.developer.lge.com/develop/guides/mediaoption-parameter
+            if (this._config.mediaOptionAttribute) {
+              /**
+               * Undocumented option.
+               * Usage example:
+               * var video = document.querySelector('video');
+               * video.addEventListener("umsmediainfo", function(e) {
+               *     console.log(JSON.parse(e.detail));
+               * });
+               * {
+               *   useUMSMediaInfo: true
+               * }
+               **/
+              options = this._config.mediaOptionAttribute;
+            }
+            if (this._config.abrEwmaDefaultEstimate) {
+              const bps = {start: this._config.abrEwmaDefaultEstimate};
+              Utils.Object.createPropertyPath(options, 'option.adaptiveStreaming.bps', bps);
+            }
+            NativeAdapter._logger.debug('Setting mediaOption -', options);
+            const mediaOption = encodeURI(JSON.stringify(options));
+            source.setAttribute('type', mimetype + ';mediaOption=' + mediaOption);
+          }
+          this._videoElement.appendChild(source);
+        } else {
+          this._videoElement.src = updatedRequest.url;
+        }
       })
       .catch(error => {
         this._trigger(Html5EventType.ERROR, new Error(Error.Severity.CRITICAL, Error.Category.NETWORK, Error.Code.REQUEST_FILTER_ERROR, error));
@@ -592,6 +635,8 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
   public destroy(): Promise<void> {
     NativeAdapter._logger.debug('destroy');
     return new Promise((resolve, reject) => {
+      //must be called before super config cause it requires config which is reset in super destroy
+      this._maybeRemoveSourceTag();
       super.destroy().then(
         () => {
           this._drmHandler && this._drmHandler.destroy();
@@ -606,6 +651,7 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
           this._startTimeAttach = NaN;
           this._videoDimensions = undefined;
           this._clearHeartbeatTimeout();
+          clearInterval(this._startTimeOfDvrWindowInterval);
           if (this._liveDurationChangeInterval) {
             clearInterval(this._liveDurationChangeInterval);
             this._liveDurationChangeInterval = undefined;
@@ -617,6 +663,23 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
     });
   }
 
+  /**
+   * remove source tag
+   * @function _maybeRemoveSourceTag
+   * @returns {void}
+   * @private
+   */
+  _maybeRemoveSourceTag(): void {
+    if (this._config.useSourceTag && this._videoElement) {
+      const source = this._videoElement.firstChild;
+      if (source) {
+        Utils.Dom.setAttribute(source, 'src', '');
+        Utils.Dom.removeAttribute(source, 'src');
+        Utils.Dom.removeChild(this._videoElement, source);
+      }
+    }
+  }
+
   /**
    * Get the parsed tracks
    * @function _getParsedTracks
@@ -1278,14 +1341,36 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
    * @returns {Number} - start time of DVR window.
    * @public
    */
-  public getStartTimeOfDvrWindow(): number {
+  private _getStartTimeOfDvrWindow(): number {
     if (this.isLive() && this._videoElement.seekable.length) {
       return this._videoElement.seekable.start(0);
     } else {
       return 0;
     }
   }
 
+  public getStartTimeOfDvrWindow(): number {
+    return this._startTimeOfDvrWindow;
+  }
+
+  _setStarTimeOfDvrWindowInterval() {
+    const intervalTime = 1000;
+    this._startTimeOfDvrWindowInterval = setInterval(() => {
+      //get Segment duration
+      const duration = this._segmentDuration;
+      if (
+        !this._waitingEventTriggered && //not in wait
+        this._getStartTimeOfDvrWindow() && //value is not Zero
+        duration && //Duration exist
+        Math.abs(this._getStartTimeOfDvrWindow() - this._startTimeOfDvrWindow) <= duration * 2 //Gap is less than twice the duration
+      ) {
+        this._startTimeOfDvrWindow += intervalTime / 1000;
+      } else {
+        this._startTimeOfDvrWindow = this._getStartTimeOfDvrWindow();
+      }
+    }, intervalTime);
+  }
+
   public getDrmInfo(): PKDrmDataObject | null {
     return this._drmHandler ? this._drmHandler!.getDrmInfo() : null;
   }

src/player.ts

@@ -1836,6 +1836,8 @@ export default class Player extends FakeEventTarget {
     this._readyPromise = new Promise<void>((resolve, reject) => {
       this._eventManager.listenOnce(this, CustomEventType.TRACKS_CHANGED, () => {
         this.dispatchEvent(new FakeEvent(CustomEventType.MEDIA_LOADED));
+        // handle playback rate after media loaded, to avoid race condition, so it won't be overwritten
+        this._handlePlaybackRate();
         resolve();
       });
       this._eventManager.listen(this, Html5EventType.ERROR, (event: FakeEvent) => {
@@ -1848,6 +1850,19 @@ export default class Player extends FakeEventTarget {
     });
   }
 
+  /**
+   * Handles the playback rate.
+   * @private
+   * @returns {void}
+   */
+  _handlePlaybackRate(): void {
+    if (typeof this._playbackAttributesState.rate === 'number') {
+      this.playbackRate = this._playbackAttributesState.rate;
+    } else if (typeof this._config.playback.playbackRate === 'number') {
+      this.playbackRate = this._config.playback.playbackRate;
+    }
+  }
+
   /**
    * Selects an engine to play a source according to a given stream priority.
    * @return {boolean} - Whether a proper engine was found to play the given sources
@@ -1930,12 +1945,6 @@ export default class Player extends FakeEventTarget {
           this._isOnLiveEdge = this.duration && this.currentTime ? this.currentTime >= this.duration - LIVE_EDGE_THRESHOLD && !this.paused : false;
         }
       });
-      this._eventManager.listen(this._engine, Html5EventType.SEEKED, () => {
-        const browser = this._env.browser.name;
-        if (browser === 'Edge') {
-          this._removeTextCuePatch();
-        }
-      });
       this._eventManager.listen(this._engine, CustomEventType.MEDIA_RECOVERED, (event: FakeEvent) => this.dispatchEvent(event));
       this._eventManager.listen(this._engine, CustomEventType.IMAGE_TRACK_CHANGED, (event: FakeEvent) => this.dispatchEvent(event));
       this._eventManager.listen(this._engine, CustomEventType.TEXT_TRACK_ADDED, (event: FakeEvent) => this.dispatchEvent(event));
@@ -2045,24 +2054,6 @@ export default class Player extends FakeEventTarget {
     this._updateTextDisplay(this._activeTextCues);
   }
 
-  /**
-   * Handles the cue text removal issue, when seeking to a time without captions in IE \ edge the previous captions
-   * are not removed
-   * @returns {void}
-   * @private
-   */
-  private _removeTextCuePatch(): void {
-    const filteredActiveTextCues = this._activeTextCues.filter(textCue => {
-      const cueEndTime = textCue.endTime;
-      const cueStartTime = textCue.startTime;
-      const currTime = this.currentTime;
-      if (currTime! < cueEndTime && currTime! > cueStartTime) {
-        return textCue;
-      }
-    });
-    this._updateTextDisplay(filteredActiveTextCues);
-  }
-
   /**
    * Handles the playback options, from current state or config.
    * @returns {void}