build all packages

docs/uncompiled/artplayer-plugin-backlight.js

@@ -4,34 +4,6 @@
     (global = global || self, global['artplayer-plugin-backlight'] = factory());
 }(this, function () { 'use strict';
 
-    function getAverageColor(img, left, top, width, height) {
-      var canvas = document.createElement('canvas');
-      var ctx = canvas.getContext('2d');
-      canvas.width = width;
-      canvas.height = height;
-      ctx.drawImage(img, -left, -top);
-      var imageData = ctx.getImageData(0, 0, width, height);
-      var data = imageData.data;
-      var r = 0;
-      var g = 0;
-      var b = 0;
-
-      for (var i = 0, l = data.length; i < l; i += 4) {
-        r += data[i];
-        g += data[i + 1];
-        b += data[i + 2];
-      }
-
-      r = Math.floor(r / (data.length / 4));
-      g = Math.floor(g / (data.length / 4));
-      b = Math.floor(b / (data.length / 4));
-      return {
-        r: r,
-        g: g,
-        b: b
-      };
-    }
-
     function matrixCallback(callback) {
       var result = [];
       var x = 10;
@@ -48,20 +20,52 @@
       return result;
     }
 
-    function getColors($img, width, height) {
+    function getColors($video, width, height) {
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage($video, 0, 0);
       return matrixCallback(function (xIndex, yIndex, x, y) {
-        return getAverageColor($img, xIndex * width / x, yIndex * height / y, width / x, height / y);
+        var itemW = width / x;
+        var itemH = height / y;
+        var itemX = xIndex * itemW;
+        var itemY = yIndex * itemH;
+
+        var _ctx$getImageData = ctx.getImageData(itemX, itemY, itemW, itemH),
+            data = _ctx$getImageData.data;
+
+        var r = 0;
+        var g = 0;
+        var b = 0;
+
+        for (var i = 0, l = data.length; i < l; i += 4) {
+          r += data[i];
+          g += data[i + 1];
+          b += data[i + 2];
+        }
+
+        r = Math.floor(r / (data.length / 4));
+        g = Math.floor(g / (data.length / 4));
+        b = Math.floor(b / (data.length / 4));
+        return {
+          r: r,
+          g: g,
+          b: b
+        };
       });
     }
 
-    function creatMatrix(parent, width, height) {
+    function creatMatrix(parent) {
       return matrixCallback(function (xIndex, yIndex, x, y) {
         var $box = document.createElement('div');
         $box.style.position = 'absolute';
-        $box.style.left = "".concat(xIndex * width / x, "px");
-        $box.style.top = "".concat(yIndex * height / y, "px");
+        $box.style.left = "".concat(xIndex * 100 / x, "%");
+        $box.style.top = "".concat(yIndex * 100 / y, "%");
         $box.style.width = "".concat(100 / x, "%");
         $box.style.height = "".concat(100 / y, "%");
+        $box.style.webkitBorderRadius = '50%';
+        $box.style.borderRadius = '50%';
         $box.style.webkitTransition = 'all .2s ease';
         $box.style.transition = 'all .2s ease';
         parent.appendChild($box);
@@ -93,17 +97,15 @@
         width: '100%',
         height: '100%'
       });
+      var matrix = creatMatrix($backlight);
       $player.insertBefore($backlight, $video);
-      art.on('firstCanplay', function () {
-        var clientWidth = $video.clientWidth,
-            clientHeight = $video.clientHeight;
-        var matrix = creatMatrix($backlight, clientWidth, clientHeight);
-        art.on('video:timeupdate', function () {
-          var dataUri = player.getScreenshotDataURL();
-          var $img = document.createElement('img');
 
-          $img.onload = function () {
-            var colors = getColors($img, clientWidth, clientHeight);
+      (function loop() {
+        window.requestAnimationFrame(function () {
+          if (player.playing) {
+            var clientWidth = $video.clientWidth,
+                clientHeight = $video.clientHeight;
+            var colors = getColors($video, clientWidth, clientHeight);
             colors.forEach(function (_ref, index) {
               var r = _ref.r,
                   g = _ref.g,
@@ -115,17 +117,20 @@
                   top = _matrix$index.top,
                   bottom = _matrix$index.bottom; // eslint-disable-next-line no-nested-ternary
 
-              var x = left ? '-60px' : right ? '60px' : '0'; // eslint-disable-next-line no-nested-ternary
+              var x = left ? '-64px' : right ? '64px' : '0'; // eslint-disable-next-line no-nested-ternary
 
-              var y = top ? '-60px' : bottom ? '60px' : '0';
-              $box.style.webkitBoxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
-              $box.style.boxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
+              var y = top ? '-64px' : bottom ? '64px' : '0';
+              $box.style.webkitBoxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 128px");
+              $box.style.boxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 128px");
             });
-          };
+          }
 
-          $img.src = dataUri;
+          if (!art.isDestroy) {
+            loop();
+          }
         });
-      });
+      })();
+
       return {
         name: 'artplayerPluginBacklight'
       };