build all packages

packages/artplayer-plugin-backlight/dist/artplayer-plugin-backlight.js

@@ -0,0 +1,8 @@
+/*!
+ * artplayer-plugin-backlight.js v3.1.5
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2019 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self)["artplayer-plugin-backlight"]=e()}(this,function(){"use strict";function c(t){for(var e=[],n=0;n<10;n+=1)for(var o=0;o<5;o+=1)0!==n&&9!==n&&0!==o&&4!==o||e.push(t(n,o,10,5));return e}function t(o){var t=o.constructor.utils.setStyles,e=o.template,n=e.$player,a=e.$video,r=o.player,i=document.createElement("div");i.classList.add("artplayer-backlight"),t(i,{position:"absolute",zIndex:9,left:0,top:0,right:0,bottom:0,width:"100%",height:"100%"});var h=function(r){return c(function(t,e,n,o){var a=document.createElement("div");return a.style.position="absolute",a.style.left="".concat(100*t/n,"%"),a.style.top="".concat(100*e/o,"%"),a.style.width="".concat(100/n,"%"),a.style.height="".concat(100/o,"%"),a.style.webkitBorderRadius="50%",a.style.borderRadius="50%",a.style.webkitTransition="all .2s ease",a.style.transition="all .2s ease",r.appendChild(a),{$box:a,left:0===t,right:t===n-1,top:0===e,bottom:e===o-1}})}(i);return n.insertBefore(i,a),function n(){window.requestAnimationFrame(function(){if(r.playing){var t=a.clientWidth,e=a.clientHeight;(function(t,p,g){var e=document.createElement("canvas"),y=e.getContext("2d");return e.width=p,e.height=g,y.drawImage(t,0,0),c(function(t,e,n,o){for(var a=p/n,r=g/o,i=t*a,c=e*r,l=y.getImageData(i,c,a,r).data,s=0,u=0,d=0,f=0,h=l.length;f<h;f+=4)s+=l[f],u+=l[f+1],d+=l[f+2];return{r:s=Math.floor(s/(l.length/4)),g:u=Math.floor(u/(l.length/4)),b:d=Math.floor(d/(l.length/4))}})})(a,t,e).forEach(function(t,e){var n=t.r,o=t.g,a=t.b,r=h[e],i=r.$box,c=r.left,l=r.right,s=r.top,u=r.bottom,d=c?"-64px":l?"64px":"0",f=s?"-64px":u?"64px":"0";i.style.webkitBoxShadow="rgb(".concat(n,", ").concat(o,", ").concat(a,") ").concat(d," ").concat(f," 128px"),i.style.boxShadow="rgb(".concat(n,", ").concat(o,", ").concat(a,") ").concat(d," ").concat(f," 128px")})}o.isDestroy||n()})}(),{name:"artplayerPluginBacklight"}}return window.artplayerPluginBacklight=t});

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

@@ -39,12 +39,12 @@ function getColors($video, width, height) {
     });
 }
 
-function creatMatrix(parent, width, height) {
+function creatMatrix(parent) {
     return matrixCallback((xIndex, yIndex, x, y) => {
         const $box = document.createElement('div');
         $box.style.position = 'absolute';
-        $box.style.left = `${(xIndex * width) / x}px`;
-        $box.style.top = `${(yIndex * height) / y}px`;
+        $box.style.left = `${xIndex * 100 / x}%`;
+        $box.style.top = `${yIndex * 100 / y}%`;
         $box.style.width = `${100 / x}%`;
         $box.style.height = `${100 / y}%`;
         $box.style.webkitBorderRadius = '50%';
@@ -82,29 +82,30 @@ function artplayerPluginBacklight(art) {
         height: '100%',
     });
 
+    const matrix = creatMatrix($backlight);
     $player.insertBefore($backlight, $video);
 
-    art.on('firstCanplay', () => {
-        const { clientWidth, clientHeight } = $video;
-        const matrix = creatMatrix($backlight, clientWidth, clientHeight);
-        (function loop() {
-            window.requestAnimationFrame(() => {
-                if (player.playing) {
-                    const colors = getColors($video, clientWidth, clientHeight);
-                    colors.forEach(({ r, g, b }, index) => {
-                        const { $box, left, right, top, bottom } = matrix[index];
-                        // eslint-disable-next-line no-nested-ternary
-                        const x = left ? '-64px' : right ? '64px' : '0';
-                        // eslint-disable-next-line no-nested-ternary
-                        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`;
-                    });    
-                };
+    (function loop() {
+        window.requestAnimationFrame(() => {
+            if (player.playing) {
+                const { clientWidth, clientHeight } = $video;
+                const colors = getColors($video, clientWidth, clientHeight);
+                colors.forEach(({ r, g, b }, index) => {
+                    const { $box, left, right, top, bottom } = matrix[index];
+                    // eslint-disable-next-line no-nested-ternary
+                    const x = left ? '-64px' : right ? '64px' : '0';
+                    // eslint-disable-next-line no-nested-ternary
+                    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`;
+                });    
+            };
+
+            if (!art.isDestroy) {
                 loop();
-            });
-        })();
-    });
+            }
+        });
+    })();
 
     return {
         name: 'artplayerPluginBacklight',
@@ -112,4 +113,4 @@ function artplayerPluginBacklight(art) {
 }
 
 window.artplayerPluginBacklight = artplayerPluginBacklight;
-export default artplayerPluginBacklight;
+export default artplayerPluginBacklight;