优化模糊插件

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

@@ -3,6 +3,7 @@ import blurImageUrl from 'blur-image-url';
 function artplayerPluginBlur(art) {
     const { errorHandle, clamp } = art.constructor.utils;
     const { player } = art;
+    let blurUrlCache = '';
     return {
         name: 'artplayerPluginBlur',
         attach($ref, radius = 15) {
@@ -11,25 +12,28 @@ function artplayerPluginBlur(art) {
             $ref.style.transition = 'all .2s ease';
 
             function hide() {
+                window.URL.revokeObjectURL(blurUrlCache);
+                $ref.classList.remove('artplayer-blur-show');
                 $ref.style.visibility = 'hidden';
                 $ref.style.opacity = '0';
-                $ref.style.pointerEvents = 'none';
                 $ref.style.backgroundImage = 'none';
             }
 
             function show() {
                 const { left, top } = $ref.getBoundingClientRect();
-                const time = player.currentTime;
                 $ref.style.backgroundImage = 'none';
                 $ref.style.backgroundSize = `${player.width}px ${player.height}px`;
                 $ref.style.backgroundPosition = `${player.left - left}px ${player.top - top}px`;
-                player.getScreenshotBlobUrl().then(url => {
-                    blurImageUrl(url, clamp(radius, 0, 50)).then(img => {
-                        if (time === player.currentTime) {
-                            $ref.style.backgroundImage = `url(${img})`;
+                const time = player.currentTime;
+                player.getScreenshotBlobUrl().then(screenshotBlobUrl => {
+                    blurImageUrl(screenshotBlobUrl, clamp(radius, 0, 50)).then(blurUrl => {
+                        window.URL.revokeObjectURL(screenshotBlobUrl);
+                        if (!player.playing && time === player.currentTime) {
+                            blurUrlCache = blurUrl;
+                            $ref.classList.add('artplayer-blur-show');
                             $ref.style.visibility = 'visible';
                             $ref.style.opacity = '1';
-                            $ref.style.pointerEvents = 'auto';
+                            $ref.style.backgroundImage = `url(${blurUrl})`;
                         } else {
                             hide();
                         }
@@ -39,7 +43,6 @@ function artplayerPluginBlur(art) {
 
             hide();
             art.on('video:pause', show);
-            art.on('video:ended', show);
             art.on('video:seeked', show);
             art.on('video:playing', hide);
             art.on('video:seeking', hide);