ovenplayer 0.10.13 → 0.10.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ovenplayer",
-  "version": "0.10.13",
+  "version": "0.10.17",
   "description": "OvenPlayer is Open-Source HTML5 Player. OvenPlayer supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming.",
   "main": "dist/ovenplayer.js",
   "scripts": {
@@ -45,4 +45,4 @@
     "core-js": "^3.16.3",
     "whatwg-fetch": "^3.6.2"
   }
-}
+}

package/src/js/api/Api.js

@@ -477,10 +477,8 @@ const Api = function(container){
         playerConfig = null;
 
         OvenPlayerConsole.log("API : remove() - currentProvider, providerController, playlistManager, playerConfig, api event destroed. ");
-        OvenPlayerSDK.removePlayer(that.getContainerId());
-        if(OvenPlayerSDK.getPlayerList().length  === 0){
-            OvenPlayerConsole.log("OvenPlayerSDK.playerList",  OvenPlayerSDK.getPlayerList());
-        }
+        OvenPlayerSDK.removePlayer(that);
+
     };
 
     that.getMediaElement = () => {

package/src/js/api/media/Manager.js

@@ -10,8 +10,6 @@ import {version} from 'version';
 
 const Manager = function(container, browserInfo){
     const that = {};
-    const SWFPath = '';
-    let rootId = container.getAttribute("data-parent-id");
     let $container = LA$(container);
     let videoElement = "";
 
@@ -33,111 +31,19 @@ const Manager = function(container, browserInfo){
 
         return videoElement;
     };
-    const createFlashVideo = function(isLoop, bufferTime, bufferTimeMax){
-        let movie, flashvars, allowscriptaccess, allowfullscreen, quality, name, menu, qual, bgcolor, loop, wmode ;
-        OvenPlayerConsole.log("MediaManager Flash buffer setting : ", bufferTime, bufferTimeMax);
-        movie = document.createElement('param');
-        movie.setAttribute('name', 'movie');
-        movie.setAttribute('value', SWFPath);
-
-        flashvars = document.createElement('param');
-        flashvars.setAttribute('name', 'flashvars');
-        //playerId is to use SWF for ExternalInterface.call().
-        flashvars.setAttribute('value', `playerId=${rootId}&bufferTime=${bufferTime}&bufferMaxTime=${bufferTimeMax}`);
-
-        allowscriptaccess = document.createElement('param');
-        allowscriptaccess.setAttribute('name', 'allowscriptaccess');
-        allowscriptaccess.setAttribute('value', 'always');
-
-        allowfullscreen = document.createElement('param');
-        allowfullscreen.setAttribute('name', 'allowfullscreen');
-        allowfullscreen.setAttribute('value', 'true');
-
-        quality = document.createElement('param');
-        quality.setAttribute('name', 'quality');
-        quality.setAttribute('value', 'height');
-
-        name = document.createElement('param');
-        name.setAttribute('name', 'name');
-        name.setAttribute('value', rootId+"-flash");
-
-        menu = document.createElement('param');
-        menu.setAttribute('name', 'menu');
-        menu.setAttribute('value', 'false');
-
-        qual = document.createElement('param');
-        qual.setAttribute('name', 'quality');
-        qual.setAttribute('value', 'high');
-
-        bgcolor = document.createElement('param');
-        bgcolor.setAttribute('name', 'bgcolor');
-        bgcolor.setAttribute('value', '#000000');
-
-        wmode = document.createElement('param');
-        wmode.setAttribute('name', 'wmode');
-        wmode.setAttribute('value', 'opaque');
-
-        /*let allowButton = `<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a>`;
-        message = document.createElement("div");
-        message.innerHTML = allowButton;*/
-
-        if(isLoop){
-            loop = document.createElement('param');
-            loop.setAttribute('name', 'loop');
-            loop.setAttribute('value', 'true');
-        }
-
-        videoElement = document.createElement('object');
-        videoElement.setAttribute('id', rootId+"-flash");
-        videoElement.setAttribute('name', rootId+"-flash");
-        videoElement.setAttribute('width', '100%');
-        videoElement.setAttribute('height', '100%');
-        videoElement.setAttribute('scale', 'default');
-        videoElement.setAttribute('wmode', 'opaque');
-
-        if(browserInfo.browser === "Microsoft Internet Explorer" && browserInfo.browserMajorVersion <= 9 ){
-            videoElement.setAttribute('classid', 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000');
-            videoElement.appendChild(movie);
-        }else{
-            videoElement.setAttribute('data', SWFPath);
-            videoElement.setAttribute('type', 'application/x-shockwave-flash');
-        }
-        if(isLoop){
-            videoElement.appendChild(loop);
-        }
-
-        videoElement.appendChild(wmode);
-        videoElement.appendChild(bgcolor);
-        videoElement.appendChild(qual);
-        videoElement.appendChild(allowfullscreen);
-        videoElement.appendChild(allowscriptaccess);
-        videoElement.appendChild(flashvars);
-        //videoElement.appendChild(message);
-
-        $container.append(videoElement);
-
-        return videoElement;
-    };
 
     that.createMedia = (providerName , playerConfig)  => {
-        if( providerName === PROVIDER_RTMP ){
-            if(videoElement){
-                that.empty();
-            }
-            return createFlashVideo(playerConfig.isLoop(), playerConfig.getRtmpBufferTime(), playerConfig.getRtmpBufferTimeMax());
-        }else{
-            // if(videoElement){
-            //     // that.empty();
-            //     //reuse video element.
-            //     //because playlist is auto next playing.
-            //     //Only same video element does not require User Interaction Error.
-            //     return videoElement;
-            // }else{
-            //     return createHtmlVideo(playerConfig.isLoop(), playerConfig.isAutoStart());
-            // }
-            that.empty();
-            return createHtmlVideo(playerConfig.isLoop(), playerConfig.isAutoStart());
-        }
+        // if(videoElement){
+        //     // that.empty();
+        //     //reuse video element.
+        //     //because playlist is auto next playing.
+        //     //Only same video element does not require User Interaction Error.
+        //     return videoElement;
+        // }else{
+        //     return createHtmlVideo(playerConfig.isLoop(), playerConfig.isAutoStart());
+        // }
+        that.empty();
+        return createHtmlVideo(playerConfig.isLoop(), playerConfig.isAutoStart());
     }
 
     that.createAdContainer = () => {
@@ -159,7 +65,6 @@ const Manager = function(container, browserInfo){
         $container.removeChild();
         $container = null;
         videoElement = null;
-        rootId = null;
     };
 
     return that;

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

@@ -143,8 +143,6 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
                 playerConfig
             );
 
-            that.setState(STATE_LOADING);
-
             connectionStartTime = performance.now();
             webrtcLoader.connect();
 
@@ -203,13 +201,14 @@ const WebRTC = function (element, playerConfig, adTagUrl) {
 
         if (config.webrtcConfig) {
 
-            if (config.webrtcConfig.connectionTimeout) {
+            if (typeof config.webrtcConfig.connectionTimeout === 'number'
+                    && config.webrtcConfig.connectionTimeout > 0) {
 
                 connectionTimeout = config.webrtcConfig.connectionTimeout;
             }
 
-            if (config.webrtcConfig.timeoutMaxRetry ||
-                config.webrtcConfig.timeoutMaxRetry === 0) {
+            if (typeof config.webrtcConfig.timeoutMaxRetry === 'number'
+                    && config.webrtcConfig.timeoutMaxRetry > 0) {
 
                 timeoutMaxRetry = config.webrtcConfig.timeoutMaxRetry;
             }

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

@@ -40,12 +40,12 @@ const WebRTCLoader = function (provider,
     //closed websocket by ome or client.
     let wsClosedByPlayer = false;
 
-    let recorverPacketLoss = false;
+    let recoverPacketLoss = false;
 
     if (playerConfig.getConfig().webrtcConfig &&
-        playerConfig.getConfig().webrtcConfig.recorverPacketLoss === true) {
+        playerConfig.getConfig().webrtcConfig.recoverPacketLoss === true) {
 
-        recorverPacketLoss = true;
+        recoverPacketLoss = true;
     }
 
     let generatePublicCandidate = true;
@@ -392,10 +392,11 @@ const WebRTCLoader = function (provider,
             //ConnectionState
             OvenPlayerConsole.log("[on connection state change]", peerConnection.connectionState, e);
 
+            // firefox and opera do not support onconnectionstatechange (Jan 07, 2021)
+            // double check with oniceconnectionstatechange
             if (peerConnection.connectionState === 'connected') {
 
                 if (connectedCallback) {
-
                     connectedCallback();
                 }
             }
@@ -412,6 +413,12 @@ const WebRTCLoader = function (provider,
         peerConnection.oniceconnectionstatechange = function (e) {
             OvenPlayerConsole.log("[on ice connection state change]", peerConnection.iceConnectionState, e);
 
+            if (peerConnection.iceConnectionState === 'connected') {
+
+                if (connectedCallback) {
+                    connectedCallback();
+                }
+            }
             /*
             * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceConnectionState
             * Checks to ensure that components are still connected failed for at least one component of the RTCPeerConnection. This is a less stringent test than "failed" and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the "connected" state.
@@ -432,9 +439,9 @@ const WebRTCLoader = function (provider,
 
             OvenPlayerConsole.log("stream received.");
 
-            OvenPlayerConsole.log('Recovery On Packet Loss :', recorverPacketLoss);
+            OvenPlayerConsole.log('Recovery On Packet Loss :', recoverPacketLoss);
 
-            if (recorverPacketLoss) {
+            if (recoverPacketLoss) {
                 extractLossPacketsOnNetworkStatus(mainPeerConnectionInfo);
             }
 

package/src/js/ovenplayer.js

@@ -19,13 +19,6 @@ function ovenPlayerFactory() {
 
         const playerInstance = OvenPlayerSDK.create(player.getMediaElementContainer(), options);
 
-
-        Object.assign(playerInstance, {
-            getContainerId: function () {
-                return containerElement.id;
-            }
-        });
-
         player.setApi(playerInstance);
 
         return playerInstance;

package/src/js/ovenplayer.sdk.js

@@ -84,20 +84,19 @@ function ovenPlayerFactory() {
     };
 
     /**
-     * Remove the player instance by playerId.
+     * Remove the player instance by playerInstance.
      *
-     * @param      {playerId}  id
+     * @param      {playerInstance}  playerInstance
      * @return     {null}
      */
-    OvenPlayerSDK.removePlayer = function (playerId) {
-        for (let i = 0; i < playerList.length; i++) {
+    OvenPlayerSDK.removePlayer = function (playerInstance) {
 
-            if (playerList[i].getContainerId() === playerId) {
+        for (let i = 0; i < playerList.length; i++) {
 
+            if (playerList[i] === playerInstance) {
                 playerList.splice(i, 1);
             }
         }
-
     };
 
     /**

package/src/js/utils/likeA$.js

@@ -13,6 +13,9 @@ import dom from 'utils/polyfills/dom.js';
 
 const La$ = function(selectorOrElement){
     const that = {};
+
+    let $element = null;
+
     const returnNode = function($element , selector){
         let nodeList =  $element.querySelectorAll(selector);
         if(nodeList.length > 1){
@@ -23,8 +26,6 @@ const La$ = function(selectorOrElement){
 
     };
 
-    let $element = "";
-
     if( _.isElement(selectorOrElement) || _.every(selectorOrElement, function(item){return _.isElement(item)})){
         $element = selectorOrElement;
     }else if(selectorOrElement === "document"){
@@ -158,7 +159,7 @@ const La$ = function(selectorOrElement){
     };
 
     that.offset = () =>{    //IE8+
-        var rect = $element.getBoundingClientRect();
+        const rect = $element.getBoundingClientRect();
 
         return {
             top: rect.top + document.body.scrollTop,

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

@@ -16,9 +16,7 @@ import {
 
 
 const FullScreenButton = function($container, api){
-    const $root = LA$("#"+api.getContainerId());
-
-    // console.log("#"+api.getContainerId() , LA$("#"+api.getContainerId()));
+    const $root = LA$(api.getContainerElement());
 
     let $iconExpand = "", $iconCompress = "", isFullScreen = false;
 
@@ -42,7 +40,20 @@ const FullScreenButton = function($container, api){
     api.toggleFullScreen = toggleFullScreen;
 
     function checkFullScreen(){
-        return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+
+        let fullScreen = false;
+
+        const fullScreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+
+        if (fullScreenElement) {
+
+            if ($root.get() === fullScreenElement) {
+                fullScreen = true;
+            }
+        }
+
+        return fullScreen;
+
     };
 
     function resetFullscreenButtonState(){

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

@@ -39,7 +39,7 @@ const Controls = function ($container, api) {
     let isAndroid = browser.os === "Android";
     let isIOS = browser.os === "iOS";
 
-    const $root = LA$("#" + api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let lastContentMeta = {};
 
     hasPlaylist = api.getPlaylist().length > 1;

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

@@ -11,7 +11,7 @@ import {
 } from "api/constants";
 
 const PlaylistPanel = function($container, api){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
 
     let $playlistPanel = "";
     let playlist = api.getPlaylist();

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

@@ -13,7 +13,7 @@ import {
 import {STATE_COMPLETE} from "../../../api/constants";
 
 const ProgressBar = function($container, api, isAd){
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
 
     if (api.getConfig().disableSeekUI) {
         $container.addClass('op-progressbar-container-disabled');

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

@@ -26,7 +26,7 @@ let PANEL_TITLE = {
 
 const Panels = function($container, api, data){
 
-    const $root = LA$("#"+api.getContainerId());
+    const $root = LA$(api.getContainerElement());
     let panelManager = PanelManager();
 
     let playerConfig = api.getConfig();

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){

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/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/view.js

@@ -30,7 +30,7 @@ import {
 import '../../stylesheet/ovenplayer.less';
 
 const View = function($container){
-    let viewTemplate = "", controls = "", helper = "", $playerRoot, contextPanel = "", api = "", autoHideTimer = "", playerState = STATE_IDLE;
+    let viewTemplate = "", controls = "", helper = "", $playerRoot, contextPanel = "", api = null, autoHideTimer = "", playerState = STATE_IDLE;
     let isShiftPressed = false;
     let panelManager = PanelManager();
     let screenSize = "";
@@ -311,6 +311,14 @@ const View = function($container){
     that.setApi = (playerInstance) => {
         api = playerInstance;
 
+        api.getContainerElement = () => {
+            return $playerRoot.get();
+        };
+
+        api.getContainerId = () => {
+            return $playerRoot.get().id;
+        };
+
         api.on(READY, function(data) {
 
             if(!controls){

package/src/js/view/viewTemplate.js

@@ -2,15 +2,15 @@
  * Created by hoho on 2018. 7. 20..
  */
 
-const ViewTemplate = function(uiText, id){
-    return `<div class="ovenplayer op-wrapper" tabindex="-1" aria-label="" id="${id}">` +
-        `<div class="op-ratio"></div>` +
-        `<div class="op-player op-clear">`+
-            `<div class="op-core-ui-wrapper op-clear">` +
-                `<div class="op-media-element-container op-clear" data-parent-id="${id}"></div>` +
-                `<div class="op-ui op-clear"></div>`+
+const ViewTemplate = function (uiText, id) {
+    return `<div class="ovenplayer op-wrapper" tabindex="-1" ${id ? `id = "${id}"` : ``}>` +
+            `<div class="op-ratio"></div>` +
+            `<div class="op-player op-clear">` +
+                `<div class="op-core-ui-wrapper op-clear">` +
+                `<div class="op-media-element-container op-clear"></div>` +
+                `<div class="op-ui op-clear"></div>` +
+            `</div>` +
             `</div>` +
-        `</div>` +
         `</div>`
 };
 export default ViewTemplate;

package/src/stylesheet/ovenplayer.less

@@ -1354,6 +1354,7 @@ i.op-con{
     -webkit-transition: bottom .25s cubic-bezier(0.0,0.0,0.2,1);
     transition: bottom .25s cubic-bezier(0.0,0.0,0.2,1);
     .op-caption-text {
+      color: #fff;
       font-size: 1em;
       line-height: 1.2em;
       text-shadow: 2px 2px 2px gray;