ovenplayer 0.10.2 → 0.10.3-3.alpha-2

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

@@ -7,7 +7,7 @@ import LA$ from 'utils/likeA$';
 
 
 const CaptionPanel = function($container, api, data){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     data.setFront = function(isFront){

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

@@ -9,117 +9,133 @@ import sizeHumanizer from "utils/sizeHumanizer";
 import SpeedPanel from "view/components/controls/settingPanel/speedPanel";
 import SourcePanel from "view/components/controls/settingPanel/sourcePanel";
 import QualityPanel from "view/components/controls/settingPanel/qualityPanel";
+import AudioTrackPanel from "view/components/controls/settingPanel/audioTrackPanel";
 import CaptionPanel from "view/components/controls/settingPanel/captionPanel";
 import TimeDisplayPanel from "view/components/controls/settingPanel/timeDisplayPanel";
 import {
     CONTENT_LEVEL_CHANGED, PROVIDER_RTMP
 } from "api/constants";
+import {AUDIO_TRACK_CHANGED} from "../../../../api/constants";
 
 let PANEL_TITLE = {
-    "speed" : "Speed",
-    "speedUnit" : "x",
-    "source" : "Source",
-    "quality" : "Quality",
-    "caption" : "Caption",
-    "display" : "Display"
+    "speed": "Speed",
+    "speedUnit": "x",
+    "source": "Source",
+    "quality": "Quality",
+    "audioTrack": "Audio",
+    "caption": "Caption",
+    "display": "Display"
 };
 
-const Panels = function($container, api, data){
+const Panels = function ($container, api, data) {
 
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     let playerConfig = api.getConfig();
 
-    if(playerConfig && playerConfig.systemText){
+    if (playerConfig && playerConfig.systemText) {
         Object.keys(PANEL_TITLE).forEach(title => {
             PANEL_TITLE[title] = playerConfig.systemText.ui.setting[title];
         });
     }
 
-    function extractSubPanelData(api, panelType){
+    function extractSubPanelData(api, panelType) {
         let panel = {
-            id : "panel-"+new Date().getTime() ,
-            title : "",
-            body : [],
-            useCheck : true,
-            panelType : panelType,
-            height : $root.height() - $root.find(".op-bottom-panel").height()
+            id: "panel-" + new Date().getTime(),
+            title: "",
+            body: [],
+            useCheck: true,
+            panelType: panelType,
+            height: $root.height() - $root.find(".op-bottom-panel").height()
         };
         panel.title = PANEL_TITLE[panelType];
-        if(panelType === "speed"){
+        if (panelType === "speed") {
             let playBackRates = api.getConfig().playbackRates;
             let currentPlaybackRate = api.getPlaybackRate();
-            for (let i = 0; i < playBackRates.length; i ++) {
+            for (let i = 0; i < playBackRates.length; i++) {
                 let body = {
-                    title : playBackRates[i]+PANEL_TITLE.speedUnit, //(playBackRates[i] === 1? "Normal" : playBackRates[i]),
-                    isCheck : currentPlaybackRate === playBackRates[i],
-                    value : playBackRates[i],
-                    description : playBackRates[i],
-                    panelType : panelType
+                    title: playBackRates[i] + PANEL_TITLE.speedUnit, //(playBackRates[i] === 1? "Normal" : playBackRates[i]),
+                    isCheck: currentPlaybackRate === playBackRates[i],
+                    value: playBackRates[i],
+                    description: playBackRates[i],
+                    panelType: panelType
                 };
                 panel.body.push(body);
             }
 
-        }else if(panelType === "source"){
+        } else if (panelType === "source") {
             let sources = api.getSources();
-            for (let i = 0; i < sources.length; i ++) {
+            for (let i = 0; i < sources.length; i++) {
                 let body = {
-                    title : sources[i].label,
-                    isCheck : api.getCurrentSource() === i,
-                    value : i,
-                    panelType : panelType
+                    title: sources[i].label,
+                    isCheck: api.getCurrentSource() === i,
+                    value: i,
+                    panelType: panelType
                 };
                 panel.body.push(body);
             }
 
-        }else if(panelType === "quality"){
+        } else if (panelType === "quality") {
             let qualityLevels = api.getQualityLevels();
             panel.body.push({
-                title : "AUTO",
-                isCheck : api.isAutoQuality(),
-                value : "AUTO",
-                panelType : panelType
+                title: "AUTO",
+                isCheck: api.isAutoQuality(),
+                value: "AUTO",
+                panelType: panelType
             });
-            for (let i = 0; i < qualityLevels.length; i ++) {
+            for (let i = 0; i < qualityLevels.length; i++) {
                 let body = {
-                    title : qualityLevels[i].label,
-                    isCheck : api.getCurrentQuality() === i,
-                    value : i,
-                    panelType : panelType
+                    title: qualityLevels[i].label,
+                    isCheck: api.getCurrentQuality() === i,
+                    value: i,
+                    panelType: panelType
                 };
                 panel.body.push(body);
             }
 
-        }else if(panelType === "caption"){
+        } else if (panelType === "audioTrack") {
+            let audioTracks = api.getAudioTracks();
+
+            for (let i = 0; i < audioTracks.length; i++) {
+                let body = {
+                    title: audioTracks[i].label,
+                    isCheck: audioTracks[i].index === api.getCurrentAudioTrack(),
+                    value: audioTracks[i].index,
+                    panelType: panelType
+                };
+                panel.body.push(body);
+            }
+
+        } else if (panelType === "caption") {
             let captions = api.getCaptionList();
             panel.body.push({
-                title : "OFF",
-                isCheck : api.getCurrentCaption() === -1,
-                value : -1,
-                panelType : panelType
+                title: "OFF",
+                isCheck: api.getCurrentCaption() === -1,
+                value: -1,
+                panelType: panelType
             });
-            for (let i = 0; i < captions.length; i ++) {
+            for (let i = 0; i < captions.length; i++) {
                 let body = {
-                    title : captions[i].label,
-                    isCheck : api.getCurrentCaption() === i,
-                    value : i,
-                    panelType : panelType
+                    title: captions[i].label,
+                    isCheck: api.getCurrentCaption() === i,
+                    value: i,
+                    panelType: panelType
                 };
                 panel.body.push(body);
             }
 
-        }else if(panelType === "display"){
+        } else if (panelType === "display") {
             let displayModes = [
                 "Play time",
                 "Framecode"
             ];
-            for (let i = 0; i < displayModes.length; i ++) {
+            for (let i = 0; i < displayModes.length; i++) {
                 let body = {
-                    title : displayModes[i],
-                    isCheck : api.isTimecodeMode() ? (displayModes[i] === "Play time") : (displayModes[i] === "Framecode"),
-                    value : displayModes[i],
-                    panelType : panelType
+                    title: displayModes[i],
+                    isCheck: api.isTimecodeMode() ? (displayModes[i] === "Play time") : (displayModes[i] === "Framecode"),
+                    value: displayModes[i],
+                    panelType: panelType
                 };
                 panel.body.push(body);
             }
@@ -128,74 +144,88 @@ const Panels = function($container, api, data){
         return panel;
     };
 
-    data.setFront = function(isFront){
-        if(isFront){
-            $root.find("#"+data.id).removeClass("background");
-        }else{
-            $root.find("#"+data.id).addClass("background");
+    data.setFront = function (isFront) {
+        if (isFront) {
+            $root.find("#" + data.id).removeClass("background");
+        } else {
+            $root.find("#" + data.id).addClass("background");
         }
     };
-    function setPanelMaxHeight(){
-        if($root.find(".op-setting-panel")){
-            $root.find(".op-setting-panel").css("max-height",  $root.height() - $root.find(".op-bottom-panel").height() + "px");
+
+    function setPanelMaxHeight() {
+        if ($root.find(".op-setting-panel")) {
+            $root.find(".op-setting-panel").css("max-height", $root.height() - $root.find(".op-bottom-panel").height() + "px");
         }
     };
-    const onRendered = function($current, template){
+    const onRendered = function ($current, template) {
         setPanelMaxHeight();
 
-        api.on(CONTENT_LEVEL_CHANGED, function(data){
+        api.on(CONTENT_LEVEL_CHANGED, function (data) {
             let newQuality = data.currentQuality;
-            if(data.type === "render" && $root.find("#"+template.data.id).find(".op-setting-item")){
-                _.forEach( $root.find("#"+template.data.id).find(".op-setting-item").get() ||[], function(panel){
+            if (data.type === "render" && $root.find("#" + template.data.id).find(".op-setting-item")) {
+                _.forEach($root.find("#" + template.data.id).find(".op-setting-item").get() || [], function (panel) {
                     let $panel = LA$(panel);
 
-                    if($panel.attr("op-panel-type") === "quality"){
+                    if ($panel.attr("op-panel-type") === "quality") {
                         let qualityList = api.getQualityLevels();
                         let newQualityObject = qualityList[newQuality];
-                        $panel.find(".op-setting-item-value").text(newQualityObject.width+"x"+newQualityObject.height+", "+ sizeHumanizer(newQualityObject.bitrate, true, "bps"));
+                        $panel.find(".op-setting-item-value").text(newQualityObject.width + "x" + newQualityObject.height + ", " + sizeHumanizer(newQualityObject.bitrate, true, "bps"));
                     }
 
                 });
             }
 
         }, template);
+
+        api.on(AUDIO_TRACK_CHANGED, function (data) {
+            _.forEach($root.find("#" + template.data.id).find(".op-setting-item").get() || [], function (panel) {
+
+                let $panel = LA$(panel);
+
+                if($panel.attr("op-panel-type") === "audioTrack"){
+                    $panel.find(".op-setting-item-value").text(api.getAudioTracks()[data.currentAudioTrack].label);
+                }
+            });
+        }, template);
     };
-    const onDestroyed = function(template){
+    const onDestroyed = function (template) {
         api.off(CONTENT_LEVEL_CHANGED, null, template);
+        api.off(AUDIO_TRACK_CHANGED, null, template);
     };
     const events = {
         "click .op-setting-item": function (event, $current, template) {
             event.preventDefault();
             //if this panel is background it disabled click.
-            if($root.find("#"+data.id).hasClass("background")){
+            if ($root.find("#" + data.id).hasClass("background")) {
                 return false;
             }
             let panelType = LA$(event.currentTarget).attr("op-panel-type");
             let panel = null;
-            if(panelType === "speed"){
+            if (panelType === "speed") {
                 panel = SpeedPanel($container, api, extractSubPanelData(api, panelType));
-            }else if(panelType === "source"){
+            } else if (panelType === "source") {
                 panel = SourcePanel($container, api, extractSubPanelData(api, panelType));
-            }else if(panelType === "quality"){
+            } else if (panelType === "quality") {
                 panel = QualityPanel($container, api, extractSubPanelData(api, panelType));
-            }else if(panelType === "caption"){
+            } else if (panelType === "audioTrack") {
+                panel = AudioTrackPanel($container, api, extractSubPanelData(api, panelType));
+            } else if (panelType === "caption") {
                 panel = CaptionPanel($container, api, extractSubPanelData(api, panelType));
-            }else if(panelType === "display"){
+            } else if (panelType === "display") {
                 panel = TimeDisplayPanel($container, api, extractSubPanelData(api, panelType));
             }
 
             panelManager.add(panel);
         },
-        "click .op-setting-title" : function(event, $current, template){
+        "click .op-setting-title": function (event, $current, template) {
             event.preventDefault();
-            if($root.find("#"+data.id).hasClass("background")){
+            if ($root.find("#" + data.id).hasClass("background")) {
                 return false;
             }
             panelManager.removeLastItem();
         }
     };
-
-    return OvenTemplate($container, "Panels", api.getConfig(), data, events, onRendered, onDestroyed );
+    return OvenTemplate($container, "Panels", api.getConfig(), data, events, onRendered, onDestroyed);
 
 };
 

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

@@ -10,7 +10,7 @@ import {
 } from "api/constants";
 
 const QualityPanel = function($container, api, data){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     data.setFront = function(isFront){
@@ -49,7 +49,7 @@ const QualityPanel = function($container, api, data){
             event.preventDefault();
             let value = LA$(event.currentTarget).attr("op-data-value");
             if(value === "AUTO"){
-                api.setAutoQuality(true);
+                api.setAutoQuality(!api.isAutoQuality());
             }else{
                 api.setCurrentQuality(parseInt(value));
             }

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

@@ -7,7 +7,7 @@ import LA$ from 'utils/likeA$';
 
 
 const SourcePanel = function($container, api, data){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     data.setFront = function(isFront){

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

@@ -7,7 +7,7 @@ import LA$ from 'utils/likeA$';
 
 
 const SpeedPanel = function($container, api, data){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     data.setFront = function(isFront){

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

@@ -7,7 +7,7 @@ import LA$ from 'utils/likeA$';
 
 
 const TimeDisplayPanel = function($container, api, data){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     data.setFront = function(isFront){

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

@@ -2,61 +2,133 @@
  * Created by hoho on 2018. 7. 25..
  */
 import OvenTemplate from "view/engine/OvenTemplate";
-import {naturalHms} from "utils/strings";
+import { naturalHms } from "utils/strings";
 import {
     CONTENT_TIME,
-    CONTENT_TIME_MODE_CHANGED
+    CONTENT_TIME_MODE_CHANGED,
+    PROVIDER_HLS,
+    PROVIDER_HTML5
 } from "api/constants";
 
-const TimeDisplay = function($container, api, data){
+const TimeDisplay = function ($container, api, data) {
 
-    let $position = "", $duration = "";
+    let $position = "", $duration = "", $liveBadge = "", $liveText = "";
 
-    function convertHumanizeTime(time){
+    const mediaElement = api.getMediaElement();
+
+    let hlsLive = false;
+    let nativeHlsLive = false;
+
+    function convertHumanizeTime(time) {
         return naturalHms(time);
-    };
+    }
 
-    const onRendered = function($current, template){
+
+    function getNativeHlsDvrWindow() {
+        return mediaElement.seekable.end(mediaElement.seekable.length - 1) - mediaElement.seekable.start(0);
+    }
+
+    const onRendered = function ($current, template) {
         let isTimecode = api.isTimecodeMode();
         $position = $current.find(".op-time-current");
         $duration = $current.find(".op-time-duration");
+        $liveBadge = $current.find(".op-live-badge");
+        $liveText = $current.find(".op-live-text");
+
+        if (data && data.type === PROVIDER_HLS && data.duration === Infinity) {
+            hlsLive = true;
 
-        if(data.duration !== Infinity){
+            if (api.getProviderName() === PROVIDER_HTML5) {
+                nativeHlsLive = true;
+            }
+        }
+
+        if (data.duration !== Infinity) {
 
-            if(isTimecode){
+            if (isTimecode) {
                 $duration.text(convertHumanizeTime(data.duration));
-            }else{
-                $duration.text( Math.round (data.duration * api.getFramerate()) + " ("+api.getFramerate()+"fps)");
+            } else {
+                $duration.text(Math.round(data.duration * api.getFramerate()) + " (" + api.getFramerate() + "fps)");
             }
 
-            api.on(CONTENT_TIME_MODE_CHANGED, function(isTimecodeMode){
+            api.on(CONTENT_TIME_MODE_CHANGED, function (isTimecodeMode) {
                 isTimecode = isTimecodeMode;
-                if(isTimecode){
+                if (isTimecode) {
                     $duration.text(convertHumanizeTime(data.duration));
-                }else{
-                    $duration.text( Math.round (data.duration * api.getFramerate()) + " ("+api.getFramerate()+"fps)");
+                } else {
+                    $duration.text(Math.round(data.duration * api.getFramerate()) + " (" + api.getFramerate() + "fps)");
                 }
-            },template);
+            }, template);
 
-            api.on(CONTENT_TIME, function(data) {
-                if(isTimecode){
+            api.on(CONTENT_TIME, function (data) {
+                if (isTimecode) {
                     $position.text(convertHumanizeTime(data.position));
-                }else{
-                    $position.text( Math.round (data.position * api.getFramerate()));
+                } else {
+                    $position.text(Math.round(data.position * api.getFramerate()));
                 }
-            },template);
+            }, template);
+        } else {
+            if (hlsLive && !nativeHlsLive) {
+                api.on(CONTENT_TIME, function (data) {
+
+                    if (data.duration - data.position > 3) {
+                        $liveBadge.addClass('op-live-badge-delayed');
+                    } else {
+                        $liveBadge.removeClass('op-live-badge-delayed');
+                    }
+
+                }, template);
+            } else if (hlsLive && nativeHlsLive) {
+
+                api.on(CONTENT_TIME, function (data) {
+                    const dvrWindow = getNativeHlsDvrWindow();
+                    if (dvrWindow - data.position > 3) {
+                        $liveBadge.addClass('op-live-badge-delayed');
+                    } else {
+                        $liveBadge.removeClass('op-live-badge-delayed');
+                    }
+
+                }, template);
+            }
         }
 
     };
-    const onDestroyed = function(template){
+
+    const onDestroyed = function (template) {
         api.off(CONTENT_TIME_MODE_CHANGED, null, template);
         api.off(CONTENT_TIME, null, template);
     };
     const events = {
+        "click .op-live-text": function (event, $current, template) {
+
+            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;
+                }
+            }
+        },
     };
 
-    return OvenTemplate($container, "TimeDisplay", api.getConfig(), data, events, onRendered, onDestroyed );
+    return OvenTemplate($container, "TimeDisplay", api.getConfig(), data, events, onRendered, onDestroyed);
 };
 
 

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

@@ -10,7 +10,7 @@ export default (uiText, data) => {
                                     `<span class="op-live-badge-lowlatency">${uiText.controls.low_latency_p2p}</span>` : `<span class="op-live-badge-lowlatency">${uiText.controls.low_latency_live}</span>`
                             )
                         :
-                        `<span>${uiText.controls.live}</span>`) +
+                        `<span class="op-live-text" title="Skip ahead to live.">${uiText.controls.live}</span>`) +
                     `</span>`
                 )
                 :(`<span class="op-time-current">00:00</span><span class="op-time-separator"> / </span><span class="op-time-duration">00:00</span>`)

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

@@ -93,12 +93,11 @@ const VolumeButton = function($container, api){
 
         $sliderHandle.css("left", maxRange+ "px");
 
+        setVolumeUI(api.getVolume());
+
         api.on(READY, function() {
             setVolumeUI(api.getVolume());
         }, template);
-        api.on(PLAYER_PLAY, function (data) {
-            setVolumeUI(data.volume);
-        }, template);
         api.on(CONTENT_VOLUME, function(data) {
 
             setVolumeUI(data.volume);

package/src/js/view/components/helpers/captionViewer.js

@@ -14,7 +14,7 @@ import LA$ from 'utils/likeA$';
 
 
 const CaptionViewer = function($container, api, playerState){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
 
     const onRendered = function($container, $current, template){
         let isDisable = false;

package/src/js/view/components/helpers/contextPanel.js

@@ -5,7 +5,7 @@ import OvenTemplate from 'view/engine/OvenTemplate';
 import LA$ from 'utils/likeA$';
 
 const ContextPanel = function($container, api, position){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
 
     const onRendered = function($current, template){
         const panelWidth = $current.width();

package/src/js/view/components/helpers/contextPanelTemplate.js

@@ -3,7 +3,7 @@ export default (uiText) => {
     return (
         `<div class="op-context-panel animated fadeIn">` +
             `<div class="op-context-item" tabindex="1">` +
-                `<span class="op-context-item-text">${uiText.context}</span>` +
+                `<span class="op-context-item-text">${uiText.context} ${version}</span>` +
             `</div>`+
         `</div>`
     );

package/src/js/view/components/helpers/main.js

@@ -29,6 +29,7 @@ import {
     PLAYER_STATE,
     ALL_PLAYLIST_ENDED,
     CONTENT_LEVEL_CHANGED,
+    CONTENT_SOURCE_CHANGED,
     NETWORK_UNSTABLED,
     UI_ICONS
 } from "api/constants";
@@ -76,9 +77,22 @@ const Helpers = function($container, api){
             messageBox = MessageBox($current, api, message, description, withTimer, iconClass, clickCallback, dontClose);
         }
         function createThumbnail(){
+
+            const mediaElement = api.getMediaElement();
+
+            if (mediaElement) {
+                mediaElement.poster = ''
+            }
+
+            if (api.getConfig().image) {
+                mediaElement.poster = api.getConfig().image;
+            }
+
+
             if(thumbnail){
                 thumbnail.destroy();
             }
+
             thumbnail = Thumbnail($current, api, api.getConfig());
         }
         function createWaterMark() {
@@ -188,6 +202,13 @@ const Helpers = function($container, api){
             }
         }, template);
 
+        api.on(CONTENT_SOURCE_CHANGED, function () {
+
+            if(hasThumbnail){
+                createThumbnail();  //shows when playlist changed.
+            }
+        });
+
         //show spinner cuz dashjs spends long time for level change.
         api.on(CONTENT_LEVEL_CHANGED, function(data){
             if(data.currentQuality < 0 ){

package/src/js/view/components/helpers/thumbnailTemplate.js

@@ -1,6 +1,5 @@
 export default (uiText, data) => {
     return (`<div class="op-thumbnail-container"><div class="op-thumbnail-wrapper">`+
-        `${data.image ? `<img src="${data.image}">`:``}` +
         `${data.title ? `<div class="op-thumbnail-header">${data.title}</div>`:``}` +
     `</div></div>`);
 };

package/src/js/view/engine/Templates.js

@@ -25,6 +25,7 @@ import PanelsTemplate from 'view/components/controls/settingPanel/mainTemplate';
 import SpeedPanelTemplate from 'view/components/controls/settingPanel/mainTemplate';
 import SourcePanelTemplate from 'view/components/controls/settingPanel/mainTemplate';
 import QualityPanelTemplate from 'view/components/controls/settingPanel/mainTemplate';
+import AudioTrackPanelTemplate from 'view/components/controls/settingPanel/mainTemplate';
 import CaptionPanelTemplate from 'view/components/controls/settingPanel/mainTemplate';
 import TimeDisplayPanelTemplate from 'view/components/controls/settingPanel/mainTemplate';
 import PlaylistPanelTemplate from 'view/components/controls/playlistPanelTemplate';
@@ -53,6 +54,7 @@ const Templates = {
     SpeedPanelTemplate,
     SourcePanelTemplate,
     QualityPanelTemplate,
+    AudioTrackPanelTemplate,
     CaptionPanelTemplate,
     TimeDisplayPanelTemplate,
     PlaylistPanelTemplate