Implemented new setting to order source quality settings

docs/initialization.md

@@ -351,8 +351,8 @@ You can register the URL of the content playback URL as shown below:
 {% code title="example" %}
 ```
 let player = OvenPlayer.create("player", {
-    type : "mp4", 
-    file :  "https://path.to/your_video", 
+    type : "mp4",
+    file :  "https://path.to/your_video",
     label : "360P"
 });
 ```
@@ -368,36 +368,104 @@ OvenPlayer will play a video in the order of the protocol or resolution you ente
 ```
 let player = OvenPlayer.create("player", {sources : [
     {
-        type : "mp4", 
-        file :  "https://path.to/your_video", 
+        type : "mp4",
+        file :  "https://path.to/your_video",
         label : "360P"
     },
     {
-        type : "mpd", 
-        file :  "https://path.to/your_video.mpd", 
+        type : "mpd",
+        file :  "https://path.to/your_video.mpd",
         label: "360P DASH"
     },
     {
-        type : "hls", 
-        file :  "https://path.to/your_video.m3u8", 
+        type : "hls",
+        file :  "https://path.to/your_video.m3u8",
         label: "360P HLS"
     },
     {
-        type : "rtmp", 
-        file :  "rtmp://path.to/your_video", 
+        type : "rtmp",
+        file :  "rtmp://path.to/your_video",
         label: "360P RTMP"
     }
 ] });
 ```
 {% endcode %}
 
+### **sourcesOrder**
+
+By default, the sources shown will take the order provided by the encoder, but sometimes this can be incorrect. Using this parameter, you can change the order based on bitrate, video width, height, or with custom ordering based on the label set when encoding.
+
+* Passing a string will order by width, height, or bitrate - in ascending order.
+* Passing an object will order by an `orderBy` key like above, and `order` to sort in ascending (ASC) or descending (DESC) order.
+* Passing an array will order by Label - leaving certain levels out will exclude them from the list entirely.
+
+Some examples are shown below:
+
+**Order by Labels**
+
+{% code title="example" %}
+```
+let player = OvenPlayer.create("player", {
+    sources : [
+        {
+            type : "webrtc",
+            file :  "https://path.to/your_video",
+            label : "WebRTC"
+        },
+    ],
+    sourcesOrder : [
+        'High',
+        'Medium',
+        'Low'
+    ]
+});
+```
+{% endcode %}
+
+**Order by Bitrate, ascending**
+
+{% code title="example" %}
+```
+let player = OvenPlayer.create("player", {
+    sources : [
+        {
+            type : "webrtc",
+            file :  "https://path.to/your_video",
+            label : "WebRTC"
+        },
+    ],
+    sourcesOrder : 'bitrate'
+});
+```
+{% endcode %}
+
+**Order by Width, descending**
+
+{% code title="example" %}
+```
+let player = OvenPlayer.create("player", {
+    sources : [
+        {
+            type : "webrtc",
+            file :  "https://path.to/your_video",
+            label : "WebRTC"
+        },
+    ],
+    sourcesOrder : {
+        orderBy: 'width',
+        order: 'DESC'
+    }
+});
+```
+{% endcode %}
+
 ### **tracks**
 
 {% code title="example" %}
 ```javascript
 let player = OvenPlayer.create("player", {sources : {
-    type : "mp4", 
-    file :  "https://path.to/your_video", 
+    type : "mp4",
+    file :  "https://path.to/your_video",
     label : "360P"
 }});
 ```
@@ -412,27 +480,27 @@ You can register the URL information of the subtitle file shown with a video. Ov
 {% code title="example" %}
 ```javascript
 let player = OvenPlayer.create("player", {sources : {
-        type : "mp4", 
-        file :  "https://path.to/your_video", 
+        type : "mp4",
+        file :  "https://path.to/your_video",
         label : "360P"
     ],
     tracks : [
         {
-            kind : "captions", 
-            file :  "https://path.to/your_caption.vtt", 
+            kind : "captions",
+            file :  "https://path.to/your_caption.vtt",
             label : "KO vtt"
         },
         {
-            kind : "captions", 
-            file :  "https://path.to/your_caption.srt", 
+            kind : "captions",
+            file :  "https://path.to/your_caption.srt",
             label : "KO srt"
         },
         {
-            kind : "captions", 
-            file :  "https://path.to/your_caption.smi", 
+            kind : "captions",
+            file :  "https://path.to/your_caption.smi",
             label : "KO smi"
         }
-    ] 
+    ]
 });
 ```
 {% endcode %}
@@ -475,8 +543,8 @@ For more information, see [Support and Compatibility](https://developers.google.
 let player = OvenPlayer.create("player", {
     adTagUrl : "https://pubads.g.doubleclick.net/gampad/ads?...",
     sources : {
-        type : "mp4", 
-        file :  "https://path.to/your_video", 
+        type : "mp4",
+        file :  "https://path.to/your_video",
         label : "360P"
     ]
 });
@@ -517,17 +585,17 @@ let player = OvenPlayer.create("player", {
             adTagUrl : "https://pubads.g.doubleclick.net/gampad/ads?...",
             image : "https://path.to/your_video_thumbnail.jpeg",
             duration : 7343,
-            sources: [    
+            sources: [
                 {
-                    type : "mp4", 
-                    file :  "https://path.to/your_video", 
+                    type : "mp4",
+                    file :  "https://path.to/your_video",
                     label : "360P"
                 }
             ],
             tracks: [
                 {
-                    kind : "captions", 
-                    file :  "https://path.to/your_caption.vtt", 
+                    kind : "captions",
+                    file :  "https://path.to/your_caption.vtt",
                     label : "KO vtt"
                 }
             ]
@@ -537,22 +605,22 @@ let player = OvenPlayer.create("player", {
             adTagUrl : "https://pubads.g.doubleclick.net/gampad/ads?...",
             image : "https://path.to/your_video_thumbnail2.jpeg",
             duration : 8333,
-            sources: [    
+            sources: [
                 {
-                    type : "mp4", 
-                    file :  "https://path.to/your_video2", 
+                    type : "mp4",
+                    file :  "https://path.to/your_video2",
                     label : "360P"
                 },
                 {
-                    type : "mpd", 
-                    file :  "https://path.to/your_video.mpd", 
+                    type : "mpd",
+                    file :  "https://path.to/your_video.mpd",
                     label: "360P DASH"
                 }
             ],
             tracks: [
                 {
-                    kind : "captions", 
-                    file :  "https://path.to/your_caption2.vtt", 
+                    kind : "captions",
+                    file :  "https://path.to/your_caption2.vtt",
                     label : "KO vtt"
                 }
             ]
@@ -604,7 +672,7 @@ You can set a list of STUN or TURN servers.
 let player = OvenPlayer.create("player", {
     sources : [
         {
-            type : "webrtc", 
+            type : "webrtc",
             file : "ws://source"
         }
     ],
@@ -649,7 +717,7 @@ You can ice transport policy, which can limit the transport policies of the ICE
 let player = OvenPlayer.create("player", {
     sources : [
         {
-            type : "webrtc", 
+            type : "webrtc",
             file : "ws://source"
         }
     ],

src/js/api/Api.js

@@ -11,6 +11,7 @@ import {READY, ERRORS, ERROR, CONTENT_COMPLETE, CONTENT_META, INIT_UNKNWON_ERROR
 import {ApiRtmpExpansion} from 'api/ApiExpansions';
 import {analUserAgent} from "utils/browser";
 import {pickCurrentSource} from "api/provider/utils";
+import {sortQualityLevels} from 'api/provider/utils';
 import {version} from "../version";
 import {CONTENT_SOURCE_CHANGED} from "./constants";
 
@@ -388,8 +389,10 @@ const Api = function(container){
     that.getQualityLevels = () =>{
         if(!currentProvider){return null;}
 
-        OvenPlayerConsole.log("API : getQualityLevels() ", currentProvider.getQualityLevels());
-        return currentProvider.getQualityLevels();
+        let qualityLevels = sortQualityLevels(currentProvider.getQualityLevels(), playerConfig.getConfig());
+
+        OvenPlayerConsole.log("API : getQualityLevels() ", qualityLevels);
+        return qualityLevels;
     };
     that.getCurrentQuality = () =>{
         if(!currentProvider){return null;}

src/js/api/provider/utils.js

@@ -57,4 +57,55 @@ export const pickCurrentSource = (sources, playerConfig) => {
     }
 
     return sourceIndex;
-}
+}
+
+export const sortQualityLevels = (qualityLevels, playerConfig) => {
+
+    let orderConfig = playerConfig?.sourcesOrder;
+    let newOrder = [];
+
+    if (orderConfig) {
+        if (_.isArray(orderConfig)) {
+            let foundCount = 0;
+
+            for (var i = 0; i < orderConfig.length; i++) {
+                let value = _.find(qualityLevels, function(quality){
+                    return quality.label === orderConfig[i];
+                });
+
+                if (value) {
+                    newOrder.push({
+                        ...value,
+                        sortedIndex: foundCount
+                    });
+                    foundCount++;
+                }
+            }
+        } else if (_.isObject(orderConfig) || _.isString(orderConfig)) {
+            let permittedKeys = ['bitrate', 'width', 'height'];
+            let orderBy = orderConfig?.orderBy || (orderConfig == false ? orderConfig : 'bitrate');
+            let order = (orderConfig?.order || 'desc').toLowerCase();
+
+            if (permittedKeys.includes(orderBy)) {
+                newOrder = _.sortBy(qualityLevels, orderBy);
+
+                if (order === 'desc') {
+                    newOrder.reverse();
+                }
+
+                for (var i = 0; i < newOrder.length; i++) {
+                    newOrder[i] = {
+                        ...newOrder[i],
+                        sortedIndex: i,
+                    }
+                }
+            }
+        }
+    }
+
+    if (newOrder.length > 0) {
+        qualityLevels = newOrder;
+    }
+
+    return qualityLevels;
+}

src/js/view/components/controls/settingButton.js

@@ -1,6 +1,7 @@
 /**
  * Created by hoho on 2019. 5. 17..
  */
+import _ from "utils/underscore";
 import OvenTemplate from "view/engine/OvenTemplate";
 import Panels from "view/components/controls/settingPanel/main";
 import PanelManager from "view/global/PanelManager";
@@ -40,7 +41,7 @@ const SettingButton = function ($container, api) {
         let currentSource = sources && sources.length > 0 ? sources[api.getCurrentSource()] : null;
 
         let qualityLevels = api.getQualityLevels();
-        let currentQuality = qualityLevels && qualityLevels.length > 0 ? qualityLevels[api.getCurrentQuality()] : null;
+        let currentQuality = qualityLevels && qualityLevels.length > 0 ? _.find(qualityLevels, { index: api.getCurrentQuality() }) : null;
 
         let captions = api.getCaptionList();
         let currentCaption = api.getCurrentCaption();

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

@@ -84,8 +84,8 @@ const Panels = function($container, api, data){
             for (let i = 0; i < qualityLevels.length; i ++) {
                 let body = {
                     title : qualityLevels[i].label,
-                    isCheck : api.getCurrentQuality() === i,
-                    value : i,
+                    isCheck : api.getCurrentQuality() === qualityLevels[i].index,
+                    value : qualityLevels[i].index,
                     panelType : panelType
                 };
                 panel.body.push(body);
@@ -151,7 +151,7 @@ const Panels = function($container, api, data){
 
                     if($panel.attr("op-panel-type") === "quality"){
                         let qualityList = api.getQualityLevels();
-                        let newQualityObject = qualityList[newQuality];
+                        let newQualityObject = _.find(qualityList, { index: newQuality });
                         $panel.find(".op-setting-item-value").text(newQualityObject.width+"x"+newQualityObject.height+", "+ sizeHumanizer(newQualityObject.bitrate, true, "bps"));
                     }
 

src/js/view/components/controls/settingPanel/mainTemplate.js

@@ -26,4 +26,4 @@ export const settingItemTemplate = (data, useCheck) => {
         (data.hasNext?'<span class="op-setting-item-nexticon">&gt;</span><span class="op-setting-item-value">'+data.description+'</span>' : '' )+
         '</div>'
     );
-};
+};

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

@@ -65,4 +65,4 @@ const QualityPanel = function($container, api, data){
 
 };
 
-export default QualityPanel;
+export default QualityPanel;