ovenplayer 0.10.39 → 0.10.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ovenplayer",
-  "version": "0.10.39",
+  "version": "0.10.41",
   "description": "OvenPlayer is Open-Source HTML5 Player. OvenPlayer supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming.",
   "main": "dist/ovenplayer.js",
   "scripts": {

package/src/js/api/Configurator.js

@@ -1,4 +1,5 @@
 import _ from "utils/underscore";
+import deepMerge from "utils/deepMerge";
 
 import {
     CONTENT_TIME_MODE_CHANGED, SYSTEM_TEXT
@@ -82,12 +83,13 @@ const Configurator = function (options, provider) {
                 let currentSystemText = _.findWhere(SYSTEM_TEXT, { "lang": userCustumSystemText[i].lang });
                 if (currentSystemText) {
                     //validate & update
-                    Object.assign(currentSystemText, userCustumSystemText[i]);
+                    deepMerge(currentSystemText, userCustumSystemText[i]);
                 } else {
                     //create
                     currentSystemText = _.findWhere(SYSTEM_TEXT, { "lang": "en" });
                     currentSystemText.lang = userCustumSystemText[i].lang;
-                    SYSTEM_TEXT.push(Object.assign(userCustumSystemText[i], currentSystemText));
+                    const newMerged = deepMerge({}, currentSystemText, userCustumSystemText[i]);
+                    SYSTEM_TEXT.push(newMerged);
                 }
             }
         }

package/src/js/api/constants.js

@@ -135,6 +135,9 @@ export const SYSTEM_TEXT = [
         "low_latency_p2p": "Sub-Second Latency P2P",
       },
       "playlist": "Playlist",
+      "quality": {
+        "auto": "Auto"
+      },
       "setting": {
         "title": "Settings",
         "speed": "Speed",
@@ -295,6 +298,9 @@ export const SYSTEM_TEXT = [
         "low_latency_p2p": "초저지연 P2P",
       },
       "playlist": "플레이리스트",
+      "quality": {
+        "auto": "자동"
+      },
       "setting": {
         "title": "설정",
         "speed": "재생 속도",
@@ -455,6 +461,9 @@ export const SYSTEM_TEXT = [
         "low_latency_p2p": "Transmisja z niskim opóźnieniem P2P",
       },
       "playlist": "Playlista",
+      "quality": {
+        "auto": "Auto"
+      },
       "setting": {
         "title": "Ustawienia",
         "speed": "Prędkość",

package/src/js/api/provider/html5/Listener.js

@@ -28,7 +28,7 @@ import {
     PROVIDER_DASH,
     PROVIDER_HLS
 } from "api/constants";
-import {extractVideoElement, errorTrigger} from "api/provider/utils";
+import { extractVideoElement, errorTrigger } from "api/provider/utils";
 
 /**
  * @brief   Trigger on various video events.
@@ -37,18 +37,18 @@ import {extractVideoElement, errorTrigger} from "api/provider/utils";
  * */
 
 
-const Listener = function(element, provider, videoEndedCallback, playerConfig){
+const Listener = function (element, provider, videoEndedCallback, playerConfig) {
     const lowLevelEvents = {};
 
-    OvenPlayerConsole.log("EventListener loaded.",element ,provider );
+    OvenPlayerConsole.log("EventListener loaded.", element, provider);
     const that = {};
 
     let stalled = -1;
-    let elVideo =  element;
+    let elVideo = element;
     const between = function (num, min, max) {
         return Math.max(Math.min(num, max), min);
     };
-    const compareStalledTime = function(stalled, position){
+    const compareStalledTime = function (stalled, position) {
         //Original Code is stalled !== position
         //Because Dashjs is very meticulous. Then always diffrence stalled and position.
         //That is why when I use toFixed(2).
@@ -77,12 +77,12 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
         // IE doesn't set paused property to true. So force set it.
         elVideo.pause();
 
-        if(provider.getState() !== STATE_IDLE && provider.getState() !== STATE_COMPLETE && provider.getState() !== STATE_ERROR) {
-            if(videoEndedCallback){
-                videoEndedCallback(function(){
+        if (provider.getState() !== STATE_IDLE && provider.getState() !== STATE_COMPLETE && provider.getState() !== STATE_ERROR) {
+            if (videoEndedCallback) {
+                videoEndedCallback(function () {
                     provider.setState(STATE_COMPLETE);
                 });
-            }else{
+            } else {
                 provider.setState(STATE_COMPLETE);
             }
         }
@@ -107,8 +107,8 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
         let sourceIndex = provider.getCurrentSource();
         let type = sourceIndex > -1 ? sources[sourceIndex].type : "";
         var metadata = {
-            duration: provider.isLive() ?  Infinity : elVideo.duration,
-            type :type
+            duration: provider.isLive() ? Infinity : elVideo.duration,
+            type: type
         };
 
         provider.setMetaLoaded();
@@ -119,16 +119,16 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
 
     lowLevelEvents.pause = () => {
         //Fires when the audio/video has been paused
-        if(provider.getState() === STATE_COMPLETE || provider.getState() === STATE_ERROR){
+        if (provider.getState() === STATE_COMPLETE || provider.getState() === STATE_ERROR) {
             return false;
         }
-        if(elVideo.ended){
+        if (elVideo.ended) {
             return false;
         }
-        if(elVideo.error){
+        if (elVideo.error) {
             return false;
         }
-        if(elVideo.currentTime === elVideo.duration){
+        if (elVideo.currentTime === elVideo.duration) {
             return false;
         }
         OvenPlayerConsole.log("EventListener : on pause");
@@ -157,7 +157,7 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
     lowLevelEvents.playing = () => {
         //Fires when the audio/video is playing after having been paused or stopped for buffering
         OvenPlayerConsole.log("EventListener : on playing");
-        if(stalled < 0){
+        if (stalled < 0) {
             provider.setState(STATE_PLAYING);
         }
     };
@@ -165,20 +165,20 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
     lowLevelEvents.progress = () => {
         //Fires when the browser is downloading the audio/video
         let timeRanges = elVideo.buffered;
-        if(!timeRanges ){
+        if (!timeRanges) {
             return false;
         }
 
         let duration = elVideo.duration, position = elVideo.currentTime;
-        let buffered = between( (timeRanges.length> 0 ? timeRanges.end(timeRanges.length - 1) : 0 ) / duration, 0, 1);
+        let buffered = between((timeRanges.length > 0 ? timeRanges.end(timeRanges.length - 1) : 0) / duration, 0, 1);
 
-        provider.setBuffer(buffered*100);
+        provider.setBuffer(buffered * 100);
         provider.trigger(CONTENT_BUFFER, {
-            bufferPercent: buffered*100,
-            position:  position,
+            bufferPercent: buffered * 100,
+            position: position,
             duration: duration
         });
-        OvenPlayerConsole.log("EventListener : on progress", buffered*100);
+        OvenPlayerConsole.log("EventListener : on progress", buffered * 100);
     };
 
 
@@ -213,12 +213,12 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
         }
 
         //Sometimes dash live gave to me crazy duration. (9007199254740991...) why???
-        if(duration > 9000000000000000){    //9007199254740991
+        if (duration > 9000000000000000) {    //9007199254740991
             duration = Infinity;
         }
 
-        if(!provider.isSeeking() && !elVideo.paused && (provider.getState() === STATE_STALLED || provider.getState() === STATE_LOADING || provider.getState() === STATE_AD_PLAYING) &&
-            !compareStalledTime(stalled, position) ){
+        if (!provider.isSeeking() && !elVideo.paused && (provider.getState() === STATE_STALLED || provider.getState() === STATE_LOADING || provider.getState() === STATE_AD_PLAYING) &&
+            !compareStalledTime(stalled, position)) {
             stalled = -1;
             provider.setState(STATE_PLAYING);
         }
@@ -252,12 +252,12 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
     lowLevelEvents.seeking = () => {
         provider.setSeeking(true);
         OvenPlayerConsole.log("EventListener : on seeking", elVideo.currentTime);
-        provider.trigger(CONTENT_SEEK,{
-            position : elVideo.currentTime
+        provider.trigger(CONTENT_SEEK, {
+            position: elVideo.currentTime
         });
     };
     lowLevelEvents.seeked = () => {
-        if(!provider.isSeeking()){
+        if (!provider.isSeeking()) {
             return;
         }
         OvenPlayerConsole.log("EventListener : on seeked");
@@ -273,11 +273,10 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
     lowLevelEvents.waiting = () => {
         //Fires when the video stops because it needs to buffer the next frame
         OvenPlayerConsole.log("EventListener : on waiting", provider.getState());
-        if(provider.isSeeking()){
+        if (provider.isSeeking()) {
             provider.setState(STATE_LOADING);
-        }else if(provider.getState() === STATE_PLAYING){
+        } else if (provider.getState() === STATE_PLAYING) {
             stalled = elVideo.currentTime;
-            provider.setState(STATE_STALLED);
         }
     };
 
@@ -297,7 +296,7 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
             2: PLAYER_UNKNWON_NETWORK_ERROR,
             3: PLAYER_UNKNWON_DECODE_ERROR,
             4: PLAYER_FILE_ERROR
-        }[code]||0);
+        }[code] || 0);
 
         OvenPlayerConsole.log("EventListener : on error", convertedErroCode);
         errorTrigger(ERRORS.codes[convertedErroCode], provider);
@@ -308,7 +307,7 @@ const Listener = function(element, provider, videoEndedCallback, playerConfig){
         elVideo.addEventListener(eventName, lowLevelEvents[eventName]);
     });
 
-    that.destroy = () =>{
+    that.destroy = () => {
         OvenPlayerConsole.log("EventListener : destroy()");
 
         Object.keys(lowLevelEvents).forEach(eventName => {

package/src/js/api/provider/html5/providers/WebRTC.js

@@ -20,6 +20,7 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
     let webrtcLoader = null;
     let superDestroy_func = null;
     let superPlay_func = null;
+    let superStop_func = null;
 
     let sourceFile = null;
 
@@ -255,6 +256,7 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
 
     superDestroy_func = that.super('destroy');
     superPlay_func = that.super('play');
+    superStop_func = that.super('stop');
 
     OvenPlayerConsole.log("WEBRTC PROVIDER LOADED.");
 
@@ -277,14 +279,19 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
 
     that.play = () => {
 
-        if (timeoutMaxRetry > 0 && !connected) {
-
+        if (!webrtcLoader || (timeoutMaxRetry > 0 && !connected)) {
             loadWebRTCLoader();
         }
 
         superPlay_func();
     };
 
+    that.stop = () => {
+        clearTimeout(connectionCheckTimer);
+        destroyWebRtcLoader();
+        superStop_func();
+    };
+
     return that;
 };
 

package/src/js/utils/deepMerge.js

@@ -0,0 +1,42 @@
+/**
+ * Performs a deep merge of the `source` object's properties into the `target` object.
+ * For nested objects, the function recurses; otherwise it directly overwrites values.
+ *
+ * @param {Object} target - The object to which properties are merged.
+ * @param {Object} source - The object containing properties to be copied.
+ * @returns {Object} The modified `target` object reference.
+ *
+ * @example
+ * const objA = {
+ *   a: 1,
+ *   b: { x: 10, y: 20 }
+ * };
+ * const objB = {
+ *   b: { y: 999, z: 50 },
+ *   c: 3
+ * };
+ *
+ * deepMerge(objA, objB);
+ *  Result: objA = {
+ *    a: 1,
+ *    b: { x: 10, y: 999, z: 50 },
+ *    c: 3
+ *  }
+ */
+export default function deepMerge(target, source) {
+  for (let key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (
+        typeof source[key] === "object" &&
+        source[key] !== null &&
+        typeof target[key] === "object" &&
+        target[key] !== null
+      ) {
+        deepMerge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+  return target;
+}

package/src/js/view/components/controls/progressBar.js

@@ -231,28 +231,6 @@ const ProgressBar = function ($container, api, isAd, metadata) {
 
         let time = (durationForCalc || 0) * percentage;
 
-        if (hlsLive && !nativeHlsLive) {
-
-            // if latency control is on. temporarily disable latency control
-            const config = api.getConfig();
-            if (config.hlsConfig) {
-
-                if (typeof config.hlsConfig.liveSyncDuration === 'number') {
-                    api.getMseInstance().config.liveSyncDuration = undefined;
-                }
-
-                if (typeof config.hlsConfig.liveMaxLatencyDuration === 'number') {
-                    api.getMseInstance().config.liveMaxLatencyDuration = undefined;
-                }
-
-                if (typeof config.hlsConfig.maxLiveSyncPlaybackRate === 'number') {
-                    api.getMseInstance().config.maxLiveSyncPlaybackRate = 1;
-                }
-            }
-
-            time = (durationForCalc - api.getDvrWindow()) + api.getDvrWindow() * percentage;
-        }
-
         if (hlsLive && nativeHlsLive) {
             const dvrWindow = getNativeHlsDvrWindow();
             time = (durationForCalc - dvrWindow) + dvrWindow * percentage;

package/src/js/view/components/controls/settingPanel/main.js

@@ -106,16 +106,17 @@ const Panels = function ($container, api, data) {
 
         } else if (panelType === "quality") {
             let qualityLevels = api.getQualityLevels();
+            let isQualityCheck = api.isAutoQuality();
             panel.body.push({
-                title: "AUTO",
-                isCheck: api.isAutoQuality(),
+                title: playerConfig.systemText.ui.quality.auto,
+                isCheck: isQualityCheck,
                 value: "AUTO",
                 panelType: panelType
             });
             for (let i = 0; i < qualityLevels.length; i++) {
                 let body = {
                     title: qualityLevels[i].label,
-                    isCheck: api.getCurrentQuality() === i,
+                    isCheck: !isQualityCheck && api.getCurrentQuality() === i,
                     value: i,
                     panelType: panelType
                 };

package/src/js/view/components/controls/settingPanel/qualityPanel.js

@@ -31,7 +31,7 @@ const QualityPanel = function($container, api, data){
                     if( $panel.find(".op-setting-item-checked").hasClass("op-show")){
                         $panel.find(".op-setting-item-checked").removeClass("op-show");
                     }
-                    if(newQuality === parseInt($panel.attr("op-data-value"))){
+                    if(!data.isAuto && newQuality === parseInt($panel.attr("op-data-value"))){
                         $panel.find(".op-setting-item-checked").addClass("op-show");
                     }
                     if(data.isAuto && $panel.attr("op-data-value") === "AUTO"){

package/src/js/view/components/controls/timeDisplay.js

@@ -19,6 +19,8 @@ const TimeDisplay = function ($container, api, data) {
   let hlsLive = false;
   let nativeHlsLive = false;
 
+  let currVodPosition = 0;
+
   function convertHumanizeTime(time) {
     return naturalHms(time);
   }
@@ -29,6 +31,7 @@ const TimeDisplay = function ($container, api, data) {
   }
 
   const onRendered = function ($current, template) {
+    currVodPosition = 0;
     let isTimecode = api.isTimecodeMode();
     $position = $current.find(".op-time-current");
     $duration = $current.find(".op-time-duration");
@@ -48,19 +51,25 @@ const TimeDisplay = function ($container, api, data) {
       if (isTimecode) {
         $duration.text(convertHumanizeTime(data.duration));
       } else {
+        $position.text(0);
         $duration.text(Math.round(data.duration * api.getFramerate()) + " (" + api.getFramerate() + "fps)");
       }
 
       api.on(CONTENT_TIME_MODE_CHANGED, function (isTimecodeMode) {
         isTimecode = isTimecodeMode;
         if (isTimecode) {
+          $position.text(convertHumanizeTime(currVodPosition));
           $duration.text(convertHumanizeTime(data.duration));
         } else {
+          $position.text(Math.round(currVodPosition * api.getFramerate()));
           $duration.text(Math.round(data.duration * api.getFramerate()) + " (" + api.getFramerate() + "fps)");
         }
       }, template);
 
       api.on(CONTENT_TIME, function (data) {
+
+        currVodPosition = data.position;
+
         if (isTimecode) {
           $position.text(convertHumanizeTime(data.position));
         } else {
@@ -71,7 +80,7 @@ const TimeDisplay = function ($container, api, data) {
       if (hlsLive && !nativeHlsLive) {
         api.on(CONTENT_TIME, function (data) {
           if (!api.getConfig().legacyUI) {
-            if (data.duration - data.position > 3) {
+            if (api.getMseInstance().liveSyncPosition - data.position > api.getMseInstance().targetLatency) {
               $liveBadge.addClass('op-live-badge-delayed');
             } else {
               $liveBadge.removeClass('op-live-badge-delayed');
@@ -105,29 +114,11 @@ const TimeDisplay = function ($container, api, data) {
 
       event.preventDefault();
 
-      api.seek(Number.MAX_SAFE_INTEGER);
-
-      //When playback get back to the latest, turn the latency control back on.
-      const config = api.getConfig();
-      if (config.hlsConfig) {
-
-        const hlsConfig = config.hlsConfig;
-        if (typeof hlsConfig.liveSyncDuration === 'number') {
-          api.getMseInstance().config.liveSyncDuration
-            = hlsConfig.liveSyncDuration;
-        }
-
-        if (typeof hlsConfig.liveMaxLatencyDuration === 'number') {
-          api.getMseInstance().config.liveMaxLatencyDuration
-            = hlsConfig.liveMaxLatencyDuration;
-        }
-
-        if (typeof hlsConfig.maxLiveSyncPlaybackRate === 'number') {
-          api.getMseInstance().config.maxLiveSyncPlaybackRate =
-            hlsConfig.maxLiveSyncPlaybackRate;
-        }
+      if (hlsLive && !nativeHlsLive) {
+        const syncPosition = api.getMseInstance().liveSyncPosition;
+        api.seek(syncPosition);
       }
-    },
+    }
   };
 
   return OvenTemplate($container, "TimeDisplay", api.getConfig(), data, events, onRendered, onDestroyed);