add artplayer-plugin-blur

packages/artplayer-plugin-blur/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs

packages/artplayer-plugin-blur/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/artplayer-plugin-blur/README.md

@@ -0,0 +1,62 @@
+# artplayer-plugin-blur
+
+Blur plugin for ArtPlayer
+
+## Demo
+
+[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-blur.js&example=blur) from Github Pages
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-plugin-blur
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-plugin-blur
+```
+
+```js
+import artplayerPluginBlur from 'artplayer-plugin-blur';
+```
+
+Or umd builds are also available
+
+```html
+<script src="artplayer-plugin-blur.js"></script>
+```
+
+Will expose the global variable to `window.artplayerPluginBlur`.
+
+## Usage
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+    layers: [
+        {
+            style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: '200px',
+                height: '200px',
+                margin: '-100px 0 0 -100px',
+            },
+            mounted($layer) {
+                art.plugins.artplayerPluginBlur.attach($layer);
+            },
+        },
+    ],
+    plugins: [artplayerPluginBlur],
+});
+```
+
+## License
+
+MIT © [Harvey Zack](https://sleepy.im/)

packages/artplayer-plugin-blur/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "artplayer-plugin-blur",
+  "version": "3.1.8",
+  "expose": "artplayerPluginBlur",
+  "description": "Blur plugin for ArtPlayer",
+  "main": "dist/artplayer-tool-blur.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+  },
+  "keywords": [
+    "video",
+    "player"
+  ],
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
+  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
+  "dependencies": {
+    "blur-image-url": "^1.0.0"
+  }
+}

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

@@ -0,0 +1,45 @@
+import blurImageUrl from '../node_modules/blur-image-url';
+
+function artplayerPluginBlur(art) {
+    const { errorHandle, clamp } = art.constructor.utils;
+    const { player } = art;
+    return {
+        name: 'artplayerPluginBlur',
+        attach($ref, radius = 15) {
+            errorHandle($ref instanceof Element, 'The attach element is not a dom element');
+            $ref.style.backgroundRepeat = 'no-repeat';
+            $ref.style.transition = 'all .2s ease';
+
+            function show() {
+                const { left, top } = $ref.getBoundingClientRect();
+                $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 => {
+                        $ref.style.backgroundImage = `url(${img})`;
+                        $ref.style.visibility = 'visible';
+                        $ref.style.opacity = '1';
+                        $ref.style.pointerEvents = 'all';
+                    });
+                });
+            }
+
+            function hide() {
+                $ref.style.visibility = 'hidden';
+                $ref.style.opacity = '0';
+                $ref.style.pointerEvents = 'none';
+                $ref.style.backgroundImage = 'none';
+            }
+
+            hide();
+            art.on('video:pause', show);
+            art.on('video:ended', show);
+            art.on('video:seeked', show);
+            art.on('video:playing', hide);
+            art.on('video:timeupdate', hide);
+        },
+    };
+}
+
+export default artplayerPluginBlur;