ovenplayer 0.10.2 → 0.10.3-3.alpha-2

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

@@ -3,17 +3,18 @@
  */
 import OvenTemplate from "view/engine/OvenTemplate";
 import PanelManager from "view/global/PanelManager";
-import {naturalHms} from "utils/strings"
+import { naturalHms } from "utils/strings"
 import LA$ from "utils/likeA$";
 import {
     CONTENT_TIME,
     CONTENT_BUFFER,
-    AD_TIME
+    AD_TIME,
+    PROVIDER_HLS,
+    PROVIDER_HTML5
 } from "api/constants";
-import {STATE_COMPLETE} from "../../../api/constants";
 
-const ProgressBar = function($container, api, isAd){
-    const $root = LA$("#"+api.getContainerId());
+const ProgressBar = function ($container, api, isAd, metadata) {
+    const $root = LA$(api.getContainerElement());
 
     if (api.getConfig().disableSeekUI) {
         $container.addClass('op-progressbar-container-disabled');
@@ -41,16 +42,29 @@ const ProgressBar = function($container, api, isAd){
 
     let isMobile = api.getBrowser().mobile;
 
+    const mediaElement = api.getMediaElement();
+
+    let hlsLive = false;
+    let nativeHlsLive = false;
+
+    if (metadata && metadata.type === PROVIDER_HLS && metadata.duration === Infinity) {
+        hlsLive = true;
+
+        if (api.getProviderName() === PROVIDER_HTML5) {
+            nativeHlsLive = true;
+        }
+    }
+
     function positionElements(percentage) {
 
         let progressBarWidth = $progressBar.width();
         let position = progressBarWidth * percentage;
 
-        $progressPlay.css("width", position+ "px");
-        $progressHover.css("left", position+ "px");
+        $progressPlay.css("width", position + "px");
+        $progressHover.css("left", position + "px");
 
         let knobPostion = (progressBarWidth - knobWidth) * percentage;
-        $knobContainer.css("left", knobPostion+ "px");
+        $knobContainer.css("left", knobPostion + "px");
 
         currentPlayingPosition = position;
         currentPlayingPercentage = percentage;
@@ -60,7 +74,7 @@ const ProgressBar = function($container, api, isAd){
 
         let progressBarWidth = $progressBar.width();
         let hoverPosition = progressBarWidth * percentage;
-        $progressHover.css("width", (percentage === 0 ? percentage : (hoverPosition - currentPlayingPosition))+ "px");
+        $progressHover.css("width", (percentage === 0 ? percentage : (hoverPosition - currentPlayingPosition)) + "px");
 
     }
 
@@ -69,7 +83,7 @@ const ProgressBar = function($container, api, isAd){
         let progressBarWidth = $progressBar.width();
         let loadPosition = progressBarWidth * percentage;
 
-        $progressLoad.css("width", loadPosition+ "px");
+        $progressLoad.css("width", loadPosition + "px");
         currentLoadedPercentage = percentage;
     }
 
@@ -78,11 +92,11 @@ const ProgressBar = function($container, api, isAd){
         let progressBarWidth = $progressBar.width();
         let progressBarOffsetX = $progressBar.offset().left;
 
-        let pointerOffsetX =  event.pageX;
+        let pointerOffsetX = event.pageX;
 
         if (event.touches) {
 
-            pointerOffsetX =  (event.pageX || event.touches[0].clientX) ;
+            pointerOffsetX = (event.pageX || event.touches[0].clientX);
         }
 
         let percentage = (pointerOffsetX - progressBarOffsetX) / progressBarWidth;
@@ -98,53 +112,73 @@ const ProgressBar = function($container, api, isAd){
         return percentage;
     }
 
+    function getNativeHlsDvrWindow() {
+        return mediaElement.seekable.end(mediaElement.seekable.length - 1) - mediaElement.seekable.start(0);
+    }
+
     function drawTimeIndicator(percentage, event) {
-       if(panelManager.size() > 0 || percentage === -1){
-           $time.hide();
-           $preview.hide();
-           return ;
-       } else {
-           $time.show();
-           $preview.show();
-       }
-
-        //const duration = isAd ? adDuration : api.getDuration();
-        let duration = api.getDuration();
-        let second = duration * percentage;
-
-        if(api.isTimecodeMode()){
-            $time.text(naturalHms(second));
-        }else{
-            $time.text(Math.round (second * api.getFramerate()));
+        if (panelManager.size() > 0 || percentage === -1) {
+            $time.hide();
+            $preview.hide();
+            return;
+        } else {
+            $time.show();
+            $preview.show();
         }
 
+        if (hlsLive && !nativeHlsLive) {
 
+            let duration = api.getDvrWindow();
+            let second = duration * (1 - percentage);
+            if (api.isTimecodeMode()) {
+                $time.text('- ' + naturalHms(second));
+            } else {
+                $time.text('- ' + Math.round(second * api.getFramerate()));
+            }
+        } else if (hlsLive && nativeHlsLive) {
+
+            let duration = getNativeHlsDvrWindow();
+            let second = duration * (1 - percentage);
+            if (api.isTimecodeMode()) {
+                $time.text('- ' + naturalHms(second));
+            } else {
+                $time.text('- ' + Math.round(second * api.getFramerate()));
+            }
+        } else {
+
+            let duration = api.getDuration();
+            let second = duration * percentage;
+
+            if (api.isTimecodeMode()) {
+                $time.text(naturalHms(second));
+            } else {
+                $time.text(Math.round(second * api.getFramerate()));
+            }
+        }
 
         let timeElemWidth = $time.width();
         let progressBarWidth = $progressBar.width();
         let position = progressBarWidth * percentage;
 
-        let positionOfPixel =  event.pageX - $progressBar.offset().left;
+        let positionOfPixel = event.pageX - $progressBar.offset().left;
 
         if (event.touches) {
-            positionOfPixel =  (event.pageX || event.touches[0].clientX)  - $progressBar.offset().left;
+            positionOfPixel = (event.pageX || event.touches[0].clientX) - $progressBar.offset().left;
         }
 
 
-
-        const calculateMagnetic = function(elementWidth){
-            if(positionOfPixel < elementWidth / 2){
+        const calculateMagnetic = function (elementWidth) {
+            if (positionOfPixel < elementWidth / 2) {
                 return 0;
-            }else if(progressBarWidth-positionOfPixel  < elementWidth / 2){
+            } else if (progressBarWidth - positionOfPixel < elementWidth / 2) {
                 return progressBarWidth - elementWidth;
-            }else{
+            } else {
                 return position - elementWidth / 2;
             }
         };
 
         let magneticPosition = calculateMagnetic(timeElemWidth);
-        $time.css("left", magneticPosition+ "px");
-
+        $time.css("left", magneticPosition + "px");
 
         if (api.getSources()[api.getCurrentSource()].gridThumbnail) {
 
@@ -167,23 +201,23 @@ const ProgressBar = function($container, api, isAd){
             let columnNumber = (thumbnailNumber % (columnCount * rowCount)) % columnCount;
 
             let left = -1 * columnNumber * width * scale;
-            let top =  -1 * rowNumber * height * scale;
+            let top = -1 * rowNumber * height * scale;
 
-            OvenPlayerConsole.log('Grid Thumbnail:', thumbnailNumber + ': ' + imageNumber +'('+ rowNumber +', ' + columnNumber + ')');
+            OvenPlayerConsole.log('Grid Thumbnail:', thumbnailNumber + ': ' + imageNumber + '(' + rowNumber + ', ' + columnNumber + ')');
 
             let thumbnails = api.getSources()[api.getCurrentSource()].gridThumbnail;
             let thumbnail = thumbnails[imageNumber];
 
             if (lastGridThumbnail !== thumbnail) {
 
-                $preview.css('background-image', 'url(' + thumbnail +')');
+                $preview.css('background-image', 'url(' + thumbnail + ')');
                 lastGridThumbnail = thumbnail;
             }
 
             $preview.css('background-position', 'left ' + left + 'px top ' + top + 'px');
 
             let previewMagneticPosition = calculateMagnetic(width * scale);
-            $preview.css("left", previewMagneticPosition+ "px");
+            $preview.css("left", previewMagneticPosition + "px");
         } else {
 
             $preview.hide();
@@ -192,7 +226,34 @@ const ProgressBar = function($container, api, isAd){
 
     function seek(percentage) {
 
-        let time = (durationForCalc||0) * percentage;
+        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;
+        }
 
         let sectionStart = api.getSources()[api.getCurrentSource()].sectionStart;
 
@@ -204,7 +265,7 @@ const ProgressBar = function($container, api, isAd){
     }
 
 
-    const onRendered = function($current, template){
+    const onRendered = function ($current, template) {
 
         $progressBar = $current;
         $progressLoad = $current.find(".op-load-progress");
@@ -216,44 +277,57 @@ const ProgressBar = function($container, api, isAd){
         $time = $current.find(".op-progressbar-time");
         $preview = $current.find(".op-progressbar-preview");
 
-        if(isAd){
-            api.on(AD_TIME, function(data) {
-                if(data && data.duration && data.position){
+        if (isAd) {
+            api.on(AD_TIME, function (data) {
+                if (data && data.duration && data.position) {
                     positionElements(data.position / data.duration);
                     adDuration = data.duration;
                 }
-            },template);
-        }else{
+            }, template);
+        } else {
+
+            api.on(CONTENT_TIME, function (data) {
+                if (data && data.duration && data.position) {
 
-            api.on(CONTENT_TIME, function(data) {
-                if(data && data.duration && data.position){
                     durationForCalc = data.duration;
-                    positionElements(data.position / data.duration);
+                    let percentage = data.position / data.duration;
+
+                    if (hlsLive && !nativeHlsLive) {
+                        percentage = (api.getDvrWindow() - (data.duration - data.position)) / api.getDvrWindow();
+                    }
+
+                    if (hlsLive && nativeHlsLive) {
+                        const dvrWindow = getNativeHlsDvrWindow();
+                        durationForCalc = dvrWindow;
+                        const position = Math.min(dvrWindow, data.position);
+                        percentage = (dvrWindow - (dvrWindow - position)) / dvrWindow;
+                    }
+
+                    positionElements(percentage);
                 }
-            },template);
+            }, template);
 
-            api.on(CONTENT_BUFFER, function(data) {
-                if(data && data.bufferPercent){
+            api.on(CONTENT_BUFFER, function (data) {
+                if (data && data.bufferPercent) {
                     drawLoadProgress(data.bufferPercent / 100);
                 }
-            },template);
+            }, template);
         }
 
 
-
     };
-    const onDestroyed = function(template){
-        if(isAd){
+    const onDestroyed = function (template) {
+        if (isAd) {
             api.off(AD_TIME, null, template);
-        }else{
+        } else {
             api.off(CONTENT_TIME, null, template);
             api.off(CONTENT_BUFFER, null, template);
         }
     };
     let events = {
-        "touchstart .op-progressbar" : function(event){
+        "touchstart .op-progressbar": function (event) {
 
-            if(isAd){
+            if (isAd) {
                 return false;
             }
             mouseDown = true;
@@ -267,12 +341,12 @@ const ProgressBar = function($container, api, isAd){
             drawHoverProgress(0);
             seek(percentage);
         },
-        "touchmove .op-progressbar" : function(event){
+        "touchmove .op-progressbar": function (event) {
 
             if (mouseDown) {
                 const percentage = calculatePercentage(event);
 
-                 if (percentage === -1) {
+                if (percentage === -1) {
                     return false;
                 }
 
@@ -282,9 +356,9 @@ const ProgressBar = function($container, api, isAd){
                 drawTimeIndicator(percentage, event);
             }
         },
-        "touchend .op-progressbar" : function(event){
+        "touchend .op-progressbar": function (event) {
 
-            if(mouseDown){
+            if (mouseDown) {
                 mouseDown = false;
             }
 
@@ -293,23 +367,24 @@ const ProgressBar = function($container, api, isAd){
             $preview.hide();
 
         },
-        "mouseenter .op-progressbar" : function(event, $current, template){
+        "mouseenter .op-progressbar": function (event, $current, template) {
 
             event.preventDefault();
 
-            if(!isMobile){
-                if(!isAd){
+            if (!isMobile) {
+                if (!isAd) {
                     mouseInside = true;
                     $time.show();
                 }
                 $root.addClass("op-progressbar-hover");
             }
         },
-        "mouseleave .op-progressbar" : function(event, $current, template){
+        "mouseleave .op-progressbar": function (event, $current, template) {
 
             event.preventDefault();
 
             mouseInside = false;
+            mouseDown = false;
 
             if (!mouseInside) {
                 $root.removeClass("op-progressbar-hover");
@@ -318,11 +393,11 @@ const ProgressBar = function($container, api, isAd){
             }
             drawHoverProgress(0);
         },
-        "mousedown .op-progressbar" : function(event, $current, template){
+        "mousedown .op-progressbar": function (event, $current, template) {
 
             event.preventDefault();
 
-            if(isAd || isMobile){
+            if (isAd || isMobile) {
                 return false;
             }
 
@@ -337,7 +412,7 @@ const ProgressBar = function($container, api, isAd){
             drawHoverProgress(0);
             seek(percentage);
         },
-        "mousemove .op-progressbar" : function(event, $current, template){
+        "mousemove .op-progressbar": function (event, $current, template) {
 
             event.preventDefault();
 
@@ -359,11 +434,11 @@ const ProgressBar = function($container, api, isAd){
                 drawTimeIndicator(percentage, event);
             }
         },
-        "mouseup .op-progressbar" : function(event, $current, template){
+        "mouseup .op-progressbar": function (event, $current, template) {
 
             event.preventDefault();
 
-            if(mouseDown && !isMobile){
+            if (mouseDown && !isMobile) {
                 mouseDown = false;
                 $root.removeClass("op-progressbar-hover");
             }
@@ -375,7 +450,7 @@ const ProgressBar = function($container, api, isAd){
         events = {}
     }
 
-    return OvenTemplate($container, "ProgressBar", api.getConfig(), null, events, onRendered, onDestroyed );
+    return OvenTemplate($container, "ProgressBar", api.getConfig(), null, events, onRendered, onDestroyed);
 };
 
 export default ProgressBar;

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

@@ -9,28 +9,29 @@ import {
 } 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 SettingButton = function ($container, api) {
     let panelManager = PanelManager();
 
-     function generateMainData(api){
+    function generateMainData(api) {
         let panel = {
-            id : "panel-"+new Date().getTime(),
-            title : "Settings",
-            body : [],
-            isRoot : true,
-            panelType : ""
+            id: "panel-" + new Date().getTime(),
+            title: "Settings",
+            body: [],
+            isRoot: true,
+            panelType: ""
         };
 
         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];
             });
@@ -42,29 +43,32 @@ const SettingButton = function ($container, api) {
         let qualityLevels = api.getQualityLevels();
         let currentQuality = qualityLevels && qualityLevels.length > 0 ? qualityLevels[api.getCurrentQuality()] : null;
 
+        let audioTracks = api.getAudioTracks();
+        let currentAudioTrack = audioTracks && audioTracks.length > 0 ? audioTracks[api.getCurrentAudioTrack()] : null;
+
         let captions = api.getCaptionList();
         let currentCaption = api.getCurrentCaption();
 
         let framerate = api.getFramerate();
 
-        if(api.getDuration() !== Infinity && currentSource && currentSource.type !== PROVIDER_RTMP){
+        if (currentSource) {
             let body = {
-                title : PANEL_TITLE.speed,
-                value :  api.getPlaybackRate() + PANEL_TITLE.speedUnit,
-                description :  api.getPlaybackRate() + PANEL_TITLE.speedUnit,
-                panelType : "speed",
-                hasNext : true
+                title: PANEL_TITLE.speed,
+                value: api.getPlaybackRate() + PANEL_TITLE.speedUnit,
+                description: api.getPlaybackRate() + PANEL_TITLE.speedUnit,
+                panelType: "speed",
+                hasNext: true
             };
             panel.body.push(body);
         }
-        if (sources && sources.length > 0) {
+        if (sources && sources.length > 1) {
 
             let body = {
-                title : PANEL_TITLE.source,
-                value : currentSource ? currentSource.label : "Default",
-                description : currentSource ? currentSource.label : "Default",
-                panelType : "source",
-                hasNext : true
+                title: PANEL_TITLE.source,
+                value: currentSource ? currentSource.label : "Default",
+                description: currentSource ? currentSource.label : "Default",
+                panelType: "source",
+                hasNext: true
             };
 
             panel.body.push(body);
@@ -72,34 +76,48 @@ const SettingButton = function ($container, api) {
         if (qualityLevels && qualityLevels.length > 0) {
 
             let body = {
-                title : PANEL_TITLE.quality,
-                value : currentQuality ? currentQuality.label : "Default",
-                description : currentQuality ? currentQuality.label : "Default",
-                panelType : "quality",
-                hasNext : true
+                title: PANEL_TITLE.quality,
+                value: currentQuality ? currentQuality.label : "Default",
+                description: currentQuality ? currentQuality.label : "Default",
+                panelType: "quality",
+                hasNext: true
+            };
+
+            panel.body.push(body);
+        }
+
+        if (audioTracks && audioTracks.length > 0) {
+
+            let body = {
+                title: PANEL_TITLE.audioTrack,
+                value: currentAudioTrack ? currentAudioTrack.label : "Default",
+                description: currentAudioTrack ? currentAudioTrack.label : "Default",
+                panelType: "audioTrack",
+                hasNext: true
             };
 
             panel.body.push(body);
         }
+
         if (captions && captions.length > 0) {
 
             let body = {
-                title : PANEL_TITLE.caption,
-                value : captions[currentCaption] ? captions[currentCaption].label : "OFF",
-                description : captions[currentCaption] ? captions[currentCaption].label : "OFF",
-                panelType : "caption",
-                hasNext : true
+                title: PANEL_TITLE.caption,
+                value: captions[currentCaption] ? captions[currentCaption].label : "OFF",
+                description: captions[currentCaption] ? captions[currentCaption].label : "OFF",
+                panelType: "caption",
+                hasNext: true
             };
 
             panel.body.push(body);
         }
-        if(framerate > 0){
+        if (framerate > 0) {
             let body = {
-                title : PANEL_TITLE.display,
-                value : api.isTimecodeMode() ? "Play time" : "Framecode",
-                description : api.isTimecodeMode() ? "Play time" : "Framecode",
-                panelType : "display",
-                hasNext : true
+                title: PANEL_TITLE.display,
+                value: api.isTimecodeMode() ? "Play time" : "Framecode",
+                description: api.isTimecodeMode() ? "Play time" : "Framecode",
+                panelType: "display",
+                hasNext: true
             };
 
             panel.body.push(body);
@@ -108,26 +126,25 @@ const SettingButton = function ($container, api) {
         return panel;
     };
 
-    const onRendered = function($current, template){
+    const onRendered = function ($current, template) {
     };
-    const onDestroyed = function(template){
+    const onDestroyed = function (template) {
     };
     const events = {
-        "click .op-setting-button" : function(event, $current, template){
+        "click .op-setting-button": function (event, $current, template) {
             event.preventDefault();
             let $parent = $current.closest(".op-controls-container");
-            if(panelManager.size() > 0){
+            if (panelManager.size() > 0) {
                 panelManager.clear();
-            }else{
+            } else {
                 let panelData = generateMainData(api);
                 panelManager.add(Panels($parent, api, panelData));
             }
         },
     };
 
-    return OvenTemplate($container, "SettingButton", api.getConfig(), null, events, onRendered, onDestroyed );
+    return OvenTemplate($container, "SettingButton", api.getConfig(), null, events, onRendered, onDestroyed);
 };
 
 
-
 export default SettingButton;

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

@@ -0,0 +1,57 @@
+/**
+ * Created by hoho on 2018. 7. 26..
+ */
+import OvenTemplate from 'view/engine/OvenTemplate';
+import PanelManager from "view/global/PanelManager";
+import LA$ from 'utils/likeA$';
+import {
+    AUDIO_TRACK_CHANGED
+} from "api/constants";
+import _ from "utils/underscore";
+
+const AudioTrackPanel = function ($container, api, data) {
+    const $root = LA$(api.getContainerElement());
+    let panelManager = PanelManager();
+
+    data.setFront = function (isFront) {
+        if (isFront) {
+            $root.find("#" + data.id).removeClass("background");
+        } else {
+            $root.find("#" + data.id).addClass("background");
+        }
+    };
+    const onRendered = function ($current, 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.find(".op-setting-item-checked").hasClass("op-show")) {
+                    $panel.find(".op-setting-item-checked").removeClass("op-show");
+                }
+                if (data.currentAudioTrack === parseInt($panel.attr("op-data-value"))) {
+                    $panel.find(".op-setting-item-checked").addClass("op-show");
+                }
+            });
+        }, template);
+    };
+    const onDestroyed = function (template) {
+        api.off(AUDIO_TRACK_CHANGED, null, template);
+    };
+    const events = {
+        "click .op-setting-item": function (event, $current, template) {
+            event.preventDefault();
+            let value = LA$(event.currentTarget).attr("op-data-value");
+            api.setCurrentAudioTrack(parseInt(value));
+            panelManager.clear();
+        },
+        "click .op-setting-title": function (event, $current, template) {
+            event.preventDefault();
+            panelManager.removeLastItem();
+        }
+    };
+
+    return OvenTemplate($container, "AudioTrackPanel", api.getConfig(), data, events, onRendered, onDestroyed);
+
+};
+
+export default AudioTrackPanel;