Merge branch 'development' into LTS_development

embed/min/skins/default.css

@@ -90,6 +90,11 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo[data-show-submenu] .mistvideo-submenu{right:5px}
 .mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
 .mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
+.mistvideo-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
+.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
+.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}
+.mistvideo-videocontainer{position:relative;overflow:hidden}
 .mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
 .mistvideo-error[data-passive] .message{max-width:none}
 .mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}

embed/min/skins/dev.css

@@ -90,6 +90,11 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo[data-show-submenu] .mistvideo-submenu{right:5px}
 .mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
 .mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
+.mistvideo-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
+.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
+.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}
+.mistvideo-videocontainer{position:relative;overflow:hidden}
 .mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
 .mistvideo-error[data-passive] .message{max-width:none}
 .mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}

embed/skins.js

@@ -55,7 +55,13 @@ MistSkins["default"] = {
         ],
       }
     },
-    videocontainer: {type: "video"},
+    videocontainer: {
+      type: "container",
+      children: [
+        {type: "videobackground", alwaysDisplay: false, delay: 5 },
+        {type: "video"}
+      ]
+    },
     controls: {
       if: function(){
         return !!(this.player && this.player.api && this.player.api.play)
@@ -77,7 +83,16 @@ MistSkins["default"] = {
               classes: ["mistvideo-pointer"]
             },
             {type: "currentTime"},
-            {type: "totalTime"},
+            {
+              if: function(){
+                //show the total time if the player size is larger than 300px
+                if (("size" in this) && (this.size.width > 300) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
+                  return true;
+                }
+                return false;
+              },
+              then: {type: "totalTime"}
+            },
             {
               type: "container",
               classes: ["mistvideo-align-right"],
@@ -104,8 +119,8 @@ MistSkins["default"] = {
                 },
                 {
                   if: function(){
-                    //show the fullscreen and loop buttons here if the player size is larger than 200px
+                    //show the fullscreen and loop buttons here if the player size is larger than 300px
-                    if (("size" in this) && (this.size.width > 200) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
+                    if (("size" in this) && (this.size.width > 300) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
                       return true;
                     }
                     return false;
@@ -170,7 +185,7 @@ MistSkins["default"] = {
         {
           if: function(){
             //only show the fullscreen and loop buttons here if the player size is less than 200px
-            if (("size" in this) && (this.size.width <= 200)) {
+            if (("size" in this) && (this.size.width <= 300)) {
               return true;
             }
             return false;
@@ -605,7 +620,7 @@ MistSkins["default"] = {
         MistUtil.class.add(this.container,"hasControls");
         
         var container = this.UI.buildStructure(this.skin.structure.controls);
-        if (MistUtil.isTouchDevice()) {
+        if (MistUtil.isTouchDevice() && (this.size.width > 300)) {
           container.style.zoom = 1.5;
         }
         return container;
@@ -1166,6 +1181,7 @@ MistSkins["default"] = {
       container.set = function(){
         var v = MistVideo.player.api.currentTime;
         text.nodeValue = formatTime(v);
+        container.setAttribute("title",text.nodeValue);
       };
       container.set();
       
@@ -2122,6 +2138,64 @@ MistSkins["default"] = {
       button.appendChild(document.createTextNode(options.label));
       
       return button;
+   },
+   videobackground: function(options) {
+      /* options.alwaysDisplay : if true, always draw the video on the canvas */
+      /* options.delay         : delay of the draw timeout in seconds */
+      if (!options) { options = {}; }
+      if (!options.delay) { options.delay = 5; }
+
+      var ele = document.createElement("div");
+      var MistVideo = this;
+      
+      var canvasses = [];
+      for (var n = 0; n < 2; n++) {
+        var c = document.createElement("canvas");
+        c._context = c.getContext("2d");
+        ele.appendChild(c);
+        canvasses.push(c);
+      }
+      
+      var index = 0;
+      var drawing = false;
+      function draw() {
+        //only draw if the element is visible, don't waste cpu
+        if (options.alwaysDisplay || (MistVideo.video.videoWidth/MistVideo.video.videoHeight != ele.clientWidth / ele.clientHeight)) {
+
+          canvasses[index].removeAttribute("data-front"); //put last one behind again
+          //console.log(new Date().toLocaleTimeString(),"draw");
+
+          index++;
+          if (index >= canvasses.length) { index = 0; }
+
+          var c = canvasses[index];
+          var ctx = c._context;
+
+          c.width = MistVideo.video.videoWidth;
+          c.height = MistVideo.video.videoHeight;
+          ctx.drawImage(MistVideo.video,0,0);
+          c.setAttribute("data-front","");
+        }
+        
+        if (!MistVideo.player.api.paused) {
+          MistVideo.timers.start(function(){
+            draw();
+          },options.delay * 1e3);
+        }
+        else {
+          drawing = false;
+        }
+
+      }
+      MistUtil.event.addListener(MistVideo.video,"playing",function(){
+        if (!drawing) {
+          draw();
+          drawing = true;
+        }
+      });
+
+
+      return ele;
     }
     
   },

embed/skins/default.css

@@ -126,6 +126,34 @@ svg.icon.timeout {
 .mistvideo[data-show-submenu] .mistvideo-controls {
   bottom: 0;
 }
+.mistvideo-currentTime {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mistvideo-videobackground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  filter: blur(1cm);
+}
+.mistvideo-videobackground * {
+  position: absolute;
+  filter: opacity(0);
+  transition: filter 0s 2s;
+  width: 100%;
+  height: 100%;
+}
+.mistvideo-videobackground [data-front] {
+  z-index: 1;
+  filter: opacity(1);
+  transition: filter 2s; /* the length/delay is intentionally less than the timer delay (5s): when it overlaps (even slightly), the transition is not shown which is fugly. */
+}
+.mistvideo-videocontainer { /* hide blur overflow from the videobackground */
+  position: relative;
+  overflow: hidden;
+}
 .mistvideo-error[data-passive] {
   bottom: auto;
   left: auto;

embed/wrappers/webrtc.js

@@ -383,7 +383,7 @@ p.prototype.build = function (MistVideo,callback) {
     };
     this.pause = function(){
       if (!this.isConnected) { throw "Not connected, cannot pause." }
-      this.signaling.send({type: "pause"});
+      this.signaling.send({type: "hold"});
     };
     this.setTrack = function(obj){
       if (!this.isConnected) { throw "Not connected, cannot set track." }