@flashphoner/websdk 2.0.235 → 2.0.237

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.235
+Web SDK - 2.0.237
 
 [Download builds](https://docs.flashphoner.com/display/WEBSDK2EN/Web+SDK+release+notes)
 

package/examples/demo/dependencies/js/utils.js

@@ -317,25 +317,6 @@ function detectFlash() {
     }
 }
 
-$(function () {
-    function reposition() {
-        var modal = $(this),
-            dialog = modal.find('.modal-dialog');
-        modal.css('display', 'block');
-
-        // Dividing by two centers the modal exactly, but dividing by three
-        // or four works better for larger screens.
-        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
-    }
-
-    // Reposition when a modal is shown
-    $('.modal').on('show.bs.modal', reposition);
-    // Reposition when the window is resized
-    $(window).on('resize', function () {
-        $('.modal:visible').each(reposition);
-    });
-});
-
 /**
  * Generate simple uuid
  *
@@ -473,3 +454,81 @@ function canWebkitFullScreen(video) {
     }
     return canFullscreen;
 }
+
+// Helper function to set item text
+const setText = function (id, text) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.innerHTML = text;
+    }
+}
+
+// Helper functions to set/get an item value
+const setValue = function (id, value) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.value = value;
+    }
+}
+
+const getValue = function (id) {
+    let item = document.getElementById(id);
+    if (item) {
+        return item.value;
+    }
+    return null;
+}
+
+// Helper functions to display/hide an item
+const showItem = function(id) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.style.display = "block";
+    }
+}
+
+const hideItem = function(id) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.style.display = "none";
+    }
+}
+
+// Helper functions to disable/enable an item
+const disableItem = function(id) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.disabled = true;
+    }
+}
+
+const enableItem = function(id) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.disabled = false;
+    }
+}
+
+// Set an event handler
+const setHandler = function (id, event, handler, previous = null) {
+    let item = document.getElementById(id);
+    if (item) {
+        if (previous) {
+            item.removeEventListener(event, previous)
+        }
+        item.addEventListener(event, handler);
+    }
+}
+
+// Find a closest item
+const closest = function (id, selector) {
+    let currentElement = document.getElementById(id);
+    let returnElement = null;
+
+    while (currentElement && currentElement.parentNode && !returnElement) {
+        currentElement = currentElement.parentNode;
+        returnElement = currentElement.querySelector(selector);
+    }
+
+    return returnElement;
+}

package/examples/demo/streaming/hls-player/hls-player.html

@@ -5,16 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
     <link rel="stylesheet" href="hls-player.css">
-    <link rel="stylesheet" href="video-js.css">
+<!--    <link rel="stylesheet" href="video-js.css"> -->
     <title>HLS VideoJS Player Minimal</title>
     <script type="text/javascript" src="../../../../flashphoner.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
+<!--    <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
+    <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script> -->
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
     <script type="text/javascript" src="hls-player.js"></script>
-    <script type="text/javascript" src="video.js"></script>
+<!--    <script type="text/javascript" src="video.js"></script> -->
 </head>
 <body onload="loadPlayerPage()">
+<div class="row form-group" id="videojsInputForm">
+    <label style="text-align: right" class="col-sm-4 control-label">VideoJS version</label>
+    <div class="col-sm-4">
+        <select class="form-control" id="videojsInput">
+        </select>
+    </div>
+    <div class="col-sm-10 text-center" style="margin-top: 20px">
+        <button id="videojsBtn" type="button" class="btn btn-default">Run</button>
+    </div>
+    <div class="col-sm-10 text-center" style="margin-top: 20px">
+        <div id="videojsError" class="text-danger"></div>
+    </div>
+</div>
 <div id="playerPage" class="container">
 </div>
 </body>

package/examples/demo/streaming/hls-player/hls-player.js

@@ -1,26 +1,133 @@
-var Browser = Flashphoner.Browser;
-var player = null;
+const Browser = Flashphoner.Browser;
+const VIDEOJS_VERSION_TYPE = {
+    VIDEOJS7: "videojs7",
+    VIDEOJS8: "videojs8"
+};
+let player = null;
+let videojsVersion = getUrlParam("version");
 
-function loadPlayerPage() {
-    $("#playerPage").load("player-page.html", initPage );
+const loadPlayerPage = function() {
+    if (videojsVersion) {
+        hideItem("videojsInputForm");
+        loadVideoJS("videojs" + videojsVersion);
+    } else {
+        let videojsInput = document.getElementById("videojsInput");
+        for (videojsType in VIDEOJS_VERSION_TYPE) {
+            let option = document.createElement("option");
+            let videojsFolder = "";
+            switch (videojsType) {
+                case 'VIDEOJS7':
+                    videojsFolder = VIDEOJS_VERSION_TYPE.VIDEOJS7;
+                    break;
+                case 'VIDEOJS8':
+                    videojsFolder = VIDEOJS_VERSION_TYPE.VIDEOJS8;
+                    break;
+            }
+            option.text = videojsFolder;
+            option.value = videojsFolder;
+            videojsInput.appendChild(option);
+        }
+
+        setHandler("videojsBtn", "click", onVideojsBtnClick);
+    }
+}
+
+const onVideojsBtnClick = function () {
+    loadVideoJS(getValue("videojsInput"));
+}
+
+const loadVideoJS = function (version) {
+    if (version) {
+        let playerPage = document.getElementById("playerPage");
+        loadFile(version + "/video.js", "text/javascript").then( data  => {
+            console.log("HLS library loaded successfully", data);
+            loadFile(version + "/video-js.css", "stylesheet").then ( data => {
+                console.log("HLS library stylesheet loaded successfully", data);
+                hideItem("videojsInputForm");
+                loadPage("player-page.html", "playerPage", initPage );
+            }).catch( err => {
+                playerPage.innerHTML = "Can't load VideoJS library stylesheet";
+                playerPage.setAttribute("class", "text-danger");
+                console.error(err);
+            })
+        }).catch( err => {
+            setText("videojsError", "Can't load VideoJS library");
+            console.error(err);
+        });
+    }
+}
+
+const loadFile = function(url, type) {
+    return new Promise((resolve, reject) => {
+        try {
+            let tag = null;
+            if (type === "text/javascript") {
+                tag = document.createElement("script");
+                tag.type = type;
+                tag.async = true;
+                tag.src = url;
+            } else if (type === "stylesheet") {
+                tag = document.createElement("link");
+                tag.rel = type;
+                tag.href = url;
+            }
+
+            if (tag) {
+                tag.addEventListener("load", (ev) => {
+                    resolve({status: true});
+                });
+
+                tag.addEventListener("error", (ev) => {
+                    reject({
+                        status: false,
+                        message: `Failed to load the file ${url}`
+                    });
+                });
+
+                document.head.appendChild(tag);
+            } else {
+                reject({
+                    status: false,
+                    message: `Undefined file type ${type}`
+                });
+            }
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
+
+const loadPage = function(page, containerId, onLoad) {
+    fetch(page).then(function (response) {
+        if (response.ok) {
+            return response.text();
+        }
+        throw response;
+    }).then(function (text) {
+        let container = document.getElementById(containerId);
+        container.innerHTML = text;
+        onLoad();
+    });
 }
 
-function initPage() {
-    $("#header").text("HLS VideoJS Player Minimal");
-    $("#urlServer").val(getHLSUrl());
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
-    var remoteVideo = document.getElementById('remoteVideo');
+const initPage = function() {
+    setText("header", "HLS VideoJS Player Minimal");
+    setValue("urlServer", getHLSUrl());
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick);
+    let remoteVideo = document.getElementById('remoteVideo');
     remoteVideo.className = "video-js vjs-default-skin";
     player = initVideoJsPlayer(remoteVideo);
 }
 
-function playBtnClick() {
+const playBtnClick = function() {
     if (validateForm()) {
-        var streamName = $('#playStream').val();
+        let streamName = getValue('playStream');
         streamName = encodeURIComponent(streamName);
-        var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
-        var key = $('#key').val();
-        var token = $("#token").val();
+        let videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
+        let key = getValue('key');
+        let token = getValue("token");
         if (key.length > 0 && token.length > 0) {
             videoSrc += "?" + key + "=" + token;
         }
@@ -29,7 +136,7 @@ function playBtnClick() {
             player.play();
         });
         player.on('error', function() {
-            var error = player.error();
+            let error = player.error();
             // Stop on error
             stopBtnClick();
             if (error && error.code == error.MEDIA_ERR_DECODE) {
@@ -46,7 +153,7 @@ function playBtnClick() {
 }
 
 
-function stopBtnClick() {
+const stopBtnClick = function() {
     if (player != null) {
         console.log("Stop VideoJS player");
         //player.pause();
@@ -56,30 +163,34 @@ function stopBtnClick() {
 }
 
 
-function onStarted() {
-    $("#urlServer").prop('disabled', true);
-    $("#playStream").prop('disabled', true);
-    $("#key").prop('disabled', true);
-    $("#token").prop('disabled', true);
-    $("#player").prop('disabled', true);
-    $("#applyBtn").prop('disabled', false).text("Stop").off('click').click(stopBtnClick);
+const onStarted = function() {
+    disableItem("urlServer");
+    disableItem("playStream");
+    disableItem("key");
+    disableItem("token");
+    disableItem("player");
+    enableItem("applyBtn");
+    setText("applyBtn", "Stop");
+    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
 }
 
 
-function onStopped() {
-    $("#urlServer").prop('disabled', false);
-    $("#playStream").prop('disabled', false);
-    $("#key").prop('disabled', false);
-    $("#token").prop('disabled', false);
-    $("#player").prop('disabled', false);
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
+const onStopped = function() {
+    enableItem("urlServer");
+    enableItem("playStream");
+    enableItem("key");
+    enableItem("token");
+    enableItem("player");
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
     }
 }
 
 
-function createRemoteVideo(parent) {
+const createRemoteVideo = function(parent) {
     remoteVideo = document.createElement("video");
     remoteVideo.id = "remoteVideo";
     remoteVideo.width=852;
@@ -95,41 +206,53 @@ function createRemoteVideo(parent) {
 }
 
 
-function validateForm() {
-    var valid = true;
-    if (!$("#urlServer").val().length) {
-        highlightInput($("#urlServer"));
-        valid = false;
-    } else {
-        removeHighlight($("#urlServer"));
+const validateForm = function() {
+    let valid = validateInput("urlServer");
+    if (valid) {
+        valid = validateInput("playStream");
     }
-    if (!$("#playStream").val().length) {
-        highlightInput($("#playStream"));
+    return valid;
+}
+
+const validateInput = function(id) {
+    let value = getValue(id);
+    let valid = true;
+    if (!value || !value.length) {
+        highlightInput(id);
         valid = false;
     } else {
-        removeHighlight($("#playStream"));
+        removeHighlight(id);
     }
-
     return valid;
-    
 }
 
-
-function highlightInput(input) {
-    input.closest('.form-group').addClass("has-error");
+const highlightInput = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.add("has-error");
+        }
+    }
 }
 
 
-function removeHighlight(input) {
-    input.closest('.form-group').removeClass("has-error");
+const removeHighlight = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.remove("has-error");
+        }
+    }
 }
 
-function initVideoJsPlayer(video) {
-    var videoJsPlayer = videojs(video);
+const initVideoJsPlayer = function(video) {
+    let videoJsPlayer = videojs(video);
     console.log("Using VideoJs " + videojs.VERSION);
     if (Browser.isSafariWebRTC() && Browser.isiOS()) {
         // iOS hack when using standard controls to leave fullscreen mode
-        var videoTag = getActualVideoTag();
+        let videoTag = getActualVideoTag();
         if(videoTag) {
             setWebkitFullscreenHandlers(videoTag);
         }
@@ -137,10 +260,10 @@ function initVideoJsPlayer(video) {
     return videoJsPlayer;
 }
 
-function getActualVideoTag() {
-    var videos = document.querySelectorAll("video");
+const getActualVideoTag = function() {
+    let videos = document.querySelectorAll("video");
     if (videos && videos.length > 0) {
         return videos[0];
     }
     return null;
-}
+}

package/examples/demo/streaming/hls-player/player-page.html

@@ -6,11 +6,13 @@
             <h2 id="notifyFlash" class="text-danger"></h2>
             <fieldset id="fieldset" class="scheduler-border fp-streamingControls">
                 <div class="row" style="margin-top: 20px">
-                    <label class="control-label col-sm-1 fp-buttonVerticalAlign text-right" for="urlServer">WCS
-                        URL</label>
+                    <div id="urlForm" class="form-group">
+                        <label class="control-label col-sm-1 fp-buttonVerticalAlign text-right" for="urlServer">WCS
+                            URL</label>
 
-                    <div class="col-sm-12">
-                        <input type="text" class="form-control" id="urlServer" placeholder="WCS Server URL"/>
+                        <div class="col-sm-12">
+                            <input type="text" class="form-control" id="urlServer" placeholder="WCS Server URL"/>
+                        </div>
                     </div>
                 </div>
 

package/examples/demo/streaming/hls-player/{video.js → videojs7/video.js}

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 7.21.3 <http://videojs.com/>
+ * Video.js 7.21.5 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/main/LICENSE>
@@ -16,7 +16,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojs = factory());
 }(this, (function () { 'use strict';
 
-  var version$5 = "7.21.3";
+  var version$5 = "7.21.5";
 
   /**
    * An Object that contains lifecycle hooks as keys which point to an array
@@ -8632,7 +8632,7 @@
     _proto.addCue = function addCue(originalCue) {
       var cue = originalCue;
 
-      if (window.vttjs && !(originalCue instanceof window.vttjs.VTTCue)) {
+      if (cue.constructor && cue.constructor.name !== 'VTTCue') {
         cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);
 
         for (var prop in originalCue) {
@@ -9683,6 +9683,7 @@
 
     switch (cue.positionAlign) {
       case "start":
+      case "line-left":
         textPos = cue.position;
         break;
 
@@ -9691,6 +9692,7 @@
         break;
 
       case "end":
+      case "line-right":
         textPos = cue.position - cue.size;
         break;
     } // Horizontal box orientation; textPos is the distance from the left edge of the
@@ -26968,7 +26970,8 @@
       }
 
       this.playCallbacks_.push(callback);
-      var isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc())); // treat calls to play_ somewhat like the `one` event function
+      var isSrcReady = Boolean(!this.changingSrc_ && (this.src() || this.currentSrc()));
+      var isSafariOrIOS = Boolean(IS_ANY_SAFARI || IS_IOS); // treat calls to play_ somewhat like the `one` event function
 
       if (this.waitToPlay_) {
         this.off(['ready', 'loadstart'], this.waitToPlay_);
@@ -26985,7 +26988,7 @@
         this.one(['ready', 'loadstart'], this.waitToPlay_); // if we are in Safari, there is a high chance that loadstart will trigger after the gesture timeperiod
         // in that case, we need to prime the video element by calling load so it'll be ready in time
 
-        if (!isSrcReady && (IS_ANY_SAFARI || IS_IOS)) {
+        if (!isSrcReady && isSafariOrIOS) {
           this.load();
         }
 
@@ -26993,7 +26996,14 @@
       } // If the player/tech is ready and we have a source, we can attempt playback.
 
 
-      var val = this.techGet_('play'); // play was terminated if the returned value is null
+      var val = this.techGet_('play'); // For native playback, reset the progress bar if we get a play call from a replay.
+
+      var isNativeReplay = isSafariOrIOS && this.hasClass('vjs-ended');
+
+      if (isNativeReplay) {
+        this.resetProgressBar_();
+      } // play was terminated if the returned value is null
+
 
       if (val === null) {
         this.runPlayTerminatedQueue_();