Update index.js

packages/artplayer-plugin-backlight/src/index.js

@@ -1,27 +1,3 @@
-function getAverageColor(img, left, top, width, height) {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = height;
-    ctx.drawImage(img, -left, -top);
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const { data } = imageData;
-    let r = 0;
-    let g = 0;
-    let b = 0;
-    for (let 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, g, b };
-}
-
 function matrixCallback(callback) {
     const result = [];
     const x = 10;
@@ -37,8 +13,29 @@ function matrixCallback(callback) {
 }
 
 function getColors($img, width, height) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage($img, 0, 0);
     return matrixCallback((xIndex, yIndex, x, y) => {
-        return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);
+        const itemW = width / x;
+        const itemH = height / y;
+        const itemX = xIndex * itemW;
+        const itemY = yIndex * itemH;
+        const { data } = ctx.getImageData(itemX, itemY, itemW, itemH);
+        let r = 0;
+        let g = 0;
+        let b = 0;
+        for (let 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, g, b };
     });
 }
 
@@ -50,6 +47,8 @@ function creatMatrix(parent, width, height) {
         $box.style.top = `${(yIndex * height) / y}px`;
         $box.style.width = `${100 / x}%`;
         $box.style.height = `${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);
@@ -88,23 +87,28 @@ function artplayerPluginBacklight(art) {
     art.on('firstCanplay', () => {
         const { clientWidth, clientHeight } = $video;
         const matrix = creatMatrix($backlight, clientWidth, clientHeight);
-        art.on('video:timeupdate', () => {
+        const $img = document.createElement('img');
-            const dataUri = player.getScreenshotDataURL();
+        (function loop() {
-            const $img = document.createElement('img');
+            window.requestAnimationFrame(() => {
-            $img.onload = () => {
+                if (player.playing) {
-                const colors = getColors($img, clientWidth, clientHeight);
+                    const dataUri = player.getScreenshotDataURL();
-                colors.forEach(({ r, g, b }, index) => {
+                    $img.onload = () => {
-                    const { $box, left, right, top, bottom } = matrix[index];
+                        const colors = getColors($img, clientWidth, clientHeight);
-                    // eslint-disable-next-line no-nested-ternary
+                        colors.forEach(({ r, g, b }, index) => {
-                    const x = left ? '-60px' : right ? '60px' : '0';
+                            const { $box, left, right, top, bottom } = matrix[index];
-                    // eslint-disable-next-line no-nested-ternary
+                            // eslint-disable-next-line no-nested-ternary
-                    const y = top ? '-60px' : bottom ? '60px' : '0';
+                            const x = left ? '-64px' : right ? '64px' : '0';
-                    $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
+                            // eslint-disable-next-line no-nested-ternary
-                    $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
+                            const y = top ? '-64px' : bottom ? '64px' : '0';
-                });
+                            $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
-            };
+                            $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
-            $img.src = dataUri;
+                        });
-        });
+                    };
+                    $img.src = dataUri;      
+                };
+                loop();
+            });
+        })();
     });
 
     return {