x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 19:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

Update index.js

Browse Source
This commit is contained in:
Harvey Zack authored and GitHub committed 2019-04-18 21:48:24 +08:00
1 parent 662531b35f
commit b787a3bb99
1 file changed
+12 -17
Download Patch File Download Diff File Expand all files Collapse all files
packages/artplayer-plugin-backlight/src/index.js
+12 -17
View File
@@ -12,12 +12,12 @@ function matrixCallback(callback) {
return result;
}
function getColors($img, width, height) {
function getColors($video, width, height) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage($img, 0, 0);
ctx.drawImage($video, 0, 0);
return matrixCallback((xIndex, yIndex, x, y) => {
const itemW = width / x;
const itemH = height / y;
@@ -87,24 +87,19 @@ function artplayerPluginBacklight(art) {
art.on('firstCanplay', () => {
const { clientWidth, clientHeight } = $video;
const matrix = creatMatrix($backlight, clientWidth, clientHeight);
const $img = document.createElement('img');
(function loop() {
window.requestAnimationFrame(() => {
if (player.playing) {
const dataUri = player.getScreenshotDataURL();
$img.onload = () => {
const colors = getColors($img, 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`;
});
};
$img.src = dataUri;
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`;
});
};
loop();
});