Embed: added ambilight ^_^

embed/min/skins/default.css

@@ -90,6 +90,10 @@ 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-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,10 @@ 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-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)
@@ -2122,6 +2128,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,29 @@ svg.icon.timeout {
 .mistvideo[data-show-submenu] .mistvideo-controls {
   bottom: 0;
 }
+.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;