add artplayerPluginBacklight

packages/artplayer-plugin-backlight/.npmignore

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

packages/artplayer-plugin-backlight/.npmrc

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

packages/artplayer-plugin-backlight/README.md

@@ -0,0 +1,49 @@
+# artplayer-plugin-gif
+
+Backlight plugin for ArtPlayer
+
+## Demo
+
+[Checkout the demo](https://artplayer.org/backlight/) from Github Pages
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-plugin-backlight
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-plugin-backlight
+```
+
+```js
+import artplayerPluginBacklight from 'artplayer-plugin-backlight';
+```
+
+Or umd builds are also available
+
+```html
+<script src="artplayer-plugin-backlight.js"></script>
+```
+
+Will expose the global variable to `window.artplayerPluginBacklight`.
+
+## Usage
+
+This will add a button called "GIF" in the bottom control bar.
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+    plugins: [artplayerPluginBacklight],
+});
+```
+
+## License
+
+MIT © [Harvey Zack](https://sleepy.im/)

packages/artplayer-plugin-backlight/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "artplayer-plugin-backlight",
+  "version": "3.1.5",
+  "description": "Backlight plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-backlight.js",
+  "style": "dist/artplayer-plugin-backlight.css",
+  "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"
+}

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

@@ -0,0 +1,118 @@
+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;
+    const y = 5;
+    for (let xIndex = 0; xIndex < x; xIndex += 1) {
+        for (let yIndex = 0; yIndex < y; yIndex += 1) {
+            if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {
+                result.push(callback(xIndex, yIndex, x, y));
+            }
+        }
+    }
+    return result;
+}
+
+function getColors($img, width, height) {
+    return matrixCallback((xIndex, yIndex, x, y) => {
+        return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);
+    });
+}
+
+function creatMatrix(parent, width, height) {
+    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.width = `${100 / x}%`;
+        $box.style.height = `${100 / y}%`;
+        $box.style['-webkit-transition'] = 'all .2s ease';
+        $box.style.transition = 'all .2s ease';
+        parent.appendChild($box);
+        return {
+            $box,
+            left: xIndex === 0,
+            right: xIndex === x - 1,
+            top: yIndex === 0,
+            bottom: yIndex === y - 1,
+        };
+    });
+}
+
+function artplayerPluginBacklight(art) {
+    const { setStyles } = art.constructor.utils;
+    const {
+        template: { $player, $video },
+        player,
+    } = art;
+
+    const $backlight = document.createElement('div');
+    $backlight.classList.add('artplayer-backlight');
+    setStyles($backlight, {
+        position: 'absolute',
+        zIndex: 9,
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+    });
+
+    $player.insertBefore($backlight, $video);
+
+    art.on('firstCanplay', () => {
+        const { clientWidth, clientHeight } = $video;
+        const matrix = creatMatrix($backlight, clientWidth, clientHeight);
+        art.on('video:timeupdate', () => {
+            const dataUri = player.getScreenshotDataURL();
+            const $img = document.createElement('img');
+            $img.onload = () => {
+                const width = $img.naturalWidth;
+                const height = $img.naturalHeight;
+                const colors = getColors($img, width, height);
+                colors.forEach(({ r, g, b }, index) => {
+                    const { $box, left, right, top, bottom } = matrix[index];
+                    // eslint-disable-next-line no-nested-ternary
+                    const x = left ? '-60px' : right ? '60px' : '0';
+                    // eslint-disable-next-line no-nested-ternary
+                    const y = top ? '-60px' : bottom ? '60px' : '0';
+                    $box.style['-webkit-box-shadow'] = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
+                    $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
+                });
+            };
+            $img.src = dataUri;
+        });
+    });
+
+    return {
+        name: 'artplayerPluginBacklight',
+    };
+}
+
+window.artplayerPluginBacklight = artplayerPluginBacklight;
+export default artplayerPluginBacklight;

packages/artplayer/src/controls/screenshot.js

@@ -14,7 +14,7 @@ export default function screenshot(controlOption) {
             const $screenshot = append($control, icons.screenshot);
             tooltip($screenshot, i18n.get('Screenshot'));
             proxy($screenshot, 'click', () => {
-                player.screenshot();
+                player.downloadScreenshot();
             });
         },
     });

packages/artplayer/src/player/screenshotMix.js

@@ -7,24 +7,28 @@ export default function screenshotMix(art, player) {
         template: { $video },
     } = art;
 
-    function captureFrame() {
-        const canvas = document.createElement('canvas');
-        canvas.width = $video.videoWidth;
-        canvas.height = $video.videoHeight;
-        canvas.getContext('2d').drawImage($video, 0, 0);
-        const dataUri = canvas.toDataURL('image/png');
-        downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
-        return dataUri;
-    }
-
-    Object.defineProperty(player, 'screenshot', {
+    Object.defineProperty(player, 'getScreenshotDataURL', {
         value: () => {
             try {
-                const dataUri = captureFrame();
-                art.emit('screenshot', dataUri);
+                const canvas = document.createElement('canvas');
+                canvas.width = $video.videoWidth;
+                canvas.height = $video.videoHeight;
+                canvas.getContext('2d').drawImage($video, 0, 0);
+                return canvas.toDataURL('image/png');;
             } catch (error) {
                 notice.show(error);
                 console.warn(error);
+                return null;
+            }
+        },
+    });
+
+    Object.defineProperty(player, 'downloadScreenshot', {
+        value: () => {
+            const dataUri = player.getScreenshotDataURL();
+            if (dataUri) {
+                downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
+                art.emit('screenshot', dataUri);
             }
         },
     });

packages/artplayer/src/style/artplayer.scss

@@ -1,5 +1,6 @@
 .artplayer-video-player {
     position: relative;
+    z-index: 10;
     width: 100%;
     height: 100%;
     outline: 0;