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

更新webkit样式

Browse Source
This commit is contained in:
Harvey Zack committed 2019-04-18 18:26:59 +08:00
1 parent 00c8054a8b
commit 09a6c67c75
3 files changed
+5 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-backlight.js
+2 -2
View File
@@ -62,7 +62,7 @@
$box.style.top = "".concat(yIndex * height / y, "px");
$box.style.width = "".concat(100 / x, "%");
$box.style.height = "".concat(100 / y, "%");
$box.style['-webkit-transition'] = 'all .2s ease';
$box.style.webkitTransition = 'all .2s ease';
$box.style.transition = 'all .2s ease';
parent.appendChild($box);
return {
@@ -118,7 +118,7 @@
var x = left ? '-60px' : right ? '60px' : '0'; // eslint-disable-next-line no-nested-ternary
var y = top ? '-60px' : bottom ? '60px' : '0';
$box.style['-webkit-box-shadow'] = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
$box.style.webkitBoxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
$box.style.boxShadow = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ") ").concat(x, " ").concat(y, " 120px");
});
};
docs/uncompiled/artplayer-plugin-backlight.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer-plugin-backlight.js","sources":["../../packages/artplayer-plugin-backlight/src/index.js"],"sourcesContent":["function getAverageColor(img, left, top, width, height) {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, -left, -top);\n const imageData = ctx.getImageData(0, 0, width, height);\n const { data } = imageData;\n let r = 0;\n let g = 0;\n let b = 0;\n for (let i = 0, l = data.length; i < l; i += 4) {\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n }\n\n r = Math.floor(r / (data.length / 4));\n g = Math.floor(g / (data.length / 4));\n b = Math.floor(b / (data.length / 4));\n\n return { r, g, b };\n}\n\nfunction matrixCallback(callback) {\n const result = [];\n const x = 10;\n const y = 5;\n for (let xIndex = 0; xIndex < x; xIndex += 1) {\n for (let yIndex = 0; yIndex < y; yIndex += 1) {\n if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {\n result.push(callback(xIndex, yIndex, x, y));\n }\n }\n }\n return result;\n}\n\nfunction getColors($img, width, height) {\n return matrixCallback((xIndex, yIndex, x, y) => {\n return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);\n });\n}\n\nfunction creatMatrix(parent, width, height) {\n return matrixCallback((xIndex, yIndex, x, y) => {\n const $box = document.createElement('div');\n $box.style.position = 'absolute';\n $box.style.left = `${(xIndex * width) / x}px`;\n $box.style.top = `${(yIndex * height) / y}px`;\n $box.style.width = `${100 / x}%`;\n $box.style.height = `${100 / y}%`;\n $box.style['-webkit-transition'] = 'all .2s ease';\n $box.style.transition = 'all .2s ease';\n parent.appendChild($box);\n return {\n $box,\n left: xIndex === 0,\n right: xIndex === x - 1,\n top: yIndex === 0,\n bottom: yIndex === y - 1,\n };\n });\n}\n\nfunction artplayerPluginBacklight(art) {\n const { setStyles } = art.constructor.utils;\n const {\n template: { $player, $video },\n player,\n } = art;\n\n const $backlight = document.createElement('div');\n $backlight.classList.add('artplayer-backlight');\n setStyles($backlight, {\n position: 'absolute',\n zIndex: 9,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n });\n\n $player.insertBefore($backlight, $video);\n\n art.on('firstCanplay', () => {\n const { clientWidth, clientHeight } = $video;\n const matrix = creatMatrix($backlight, clientWidth, clientHeight);\n art.on('video:timeupdate', () => {\n const dataUri = player.getScreenshotDataURL();\n const $img = document.createElement('img');\n $img.onload = () => {\n const colors = getColors($img, clientWidth, clientHeight);\n colors.forEach(({ r, g, b }, index) => {\n const { $box, left, right, top, bottom } = matrix[index];\n // eslint-disable-next-line no-nested-ternary\n const x = left ? '-60px' : right ? '60px' : '0';\n // eslint-disable-next-line no-nested-ternary\n const y = top ? '-60px' : bottom ? '60px' : '0';\n $box.style['-webkit-box-shadow'] = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;\n $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;\n });\n };\n $img.src = dataUri;\n });\n });\n\n return {\n name: 'artplayerPluginBacklight',\n };\n}\n\nwindow.artplayerPluginBacklight = artplayerPluginBacklight;\nexport default artplayerPluginBacklight;\n"],"names":["getAverageColor","img","left","top","width","height","canvas","document","createElement","ctx","getContext","drawImage","imageData","getImageData","data","r","g","b","i","l","length","Math","floor","matrixCallback","callback","result","x","y","xIndex","yIndex","push","getColors","$img","creatMatrix","parent","$box","style","position","transition","appendChild","right","bottom","artplayerPluginBacklight","art","setStyles","constructor","utils","template","$player","$video","player","$backlight","classList","add","zIndex","insertBefore","on","clientWidth","clientHeight","matrix","dataUri","getScreenshotDataURL","onload","colors","forEach","index","boxShadow","src","name","window"],"mappings":";;;;;;IAAA,SAASA,eAAT,CAAyBC,GAAzB,EAA8BC,IAA9B,EAAoCC,GAApC,EAAyCC,KAAzC,EAAgDC,MAAhD,EAAwD;IACpD,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAT,CAAuB,QAAvB,CAAf;IACA,MAAMC,GAAG,GAAGH,MAAM,CAACI,UAAP,CAAkB,IAAlB,CAAZ;IACAJ,EAAAA,MALine truncated
{"version":3,"file":"artplayer-plugin-backlight.js","sources":["../../packages/artplayer-plugin-backlight/src/index.js"],"sourcesContent":["function getAverageColor(img, left, top, width, height) {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, -left, -top);\n const imageData = ctx.getImageData(0, 0, width, height);\n const { data } = imageData;\n let r = 0;\n let g = 0;\n let b = 0;\n for (let i = 0, l = data.length; i < l; i += 4) {\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n }\n\n r = Math.floor(r / (data.length / 4));\n g = Math.floor(g / (data.length / 4));\n b = Math.floor(b / (data.length / 4));\n\n return { r, g, b };\n}\n\nfunction matrixCallback(callback) {\n const result = [];\n const x = 10;\n const y = 5;\n for (let xIndex = 0; xIndex < x; xIndex += 1) {\n for (let yIndex = 0; yIndex < y; yIndex += 1) {\n if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {\n result.push(callback(xIndex, yIndex, x, y));\n }\n }\n }\n return result;\n}\n\nfunction getColors($img, width, height) {\n return matrixCallback((xIndex, yIndex, x, y) => {\n return getAverageColor($img, (xIndex * width) / x, (yIndex * height) / y, width / x, height / y);\n });\n}\n\nfunction creatMatrix(parent, width, height) {\n return matrixCallback((xIndex, yIndex, x, y) => {\n const $box = document.createElement('div');\n $box.style.position = 'absolute';\n $box.style.left = `${(xIndex * width) / x}px`;\n $box.style.top = `${(yIndex * height) / y}px`;\n $box.style.width = `${100 / x}%`;\n $box.style.height = `${100 / y}%`;\n $box.style.webkitTransition = 'all .2s ease';\n $box.style.transition = 'all .2s ease';\n parent.appendChild($box);\n return {\n $box,\n left: xIndex === 0,\n right: xIndex === x - 1,\n top: yIndex === 0,\n bottom: yIndex === y - 1,\n };\n });\n}\n\nfunction artplayerPluginBacklight(art) {\n const { setStyles } = art.constructor.utils;\n const {\n template: { $player, $video },\n player,\n } = art;\n\n const $backlight = document.createElement('div');\n $backlight.classList.add('artplayer-backlight');\n setStyles($backlight, {\n position: 'absolute',\n zIndex: 9,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n });\n\n $player.insertBefore($backlight, $video);\n\n art.on('firstCanplay', () => {\n const { clientWidth, clientHeight } = $video;\n const matrix = creatMatrix($backlight, clientWidth, clientHeight);\n art.on('video:timeupdate', () => {\n const dataUri = player.getScreenshotDataURL();\n const $img = document.createElement('img');\n $img.onload = () => {\n const colors = getColors($img, clientWidth, clientHeight);\n colors.forEach(({ r, g, b }, index) => {\n const { $box, left, right, top, bottom } = matrix[index];\n // eslint-disable-next-line no-nested-ternary\n const x = left ? '-60px' : right ? '60px' : '0';\n // eslint-disable-next-line no-nested-ternary\n const y = top ? '-60px' : bottom ? '60px' : '0';\n $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;\n $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;\n });\n };\n $img.src = dataUri;\n });\n });\n\n return {\n name: 'artplayerPluginBacklight',\n };\n}\n\nwindow.artplayerPluginBacklight = artplayerPluginBacklight;\nexport default artplayerPluginBacklight;\n"],"names":["getAverageColor","img","left","top","width","height","canvas","document","createElement","ctx","getContext","drawImage","imageData","getImageData","data","r","g","b","i","l","length","Math","floor","matrixCallback","callback","result","x","y","xIndex","yIndex","push","getColors","$img","creatMatrix","parent","$box","style","position","webkitTransition","transition","appendChild","right","bottom","artplayerPluginBacklight","art","setStyles","constructor","utils","template","$player","$video","player","$backlight","classList","add","zIndex","insertBefore","on","clientWidth","clientHeight","matrix","dataUri","getScreenshotDataURL","onload","colors","forEach","index","webkitBoxShadow","boxShadow","src","name","window"],"mappings":";;;;;;IAAA,SAASA,eAAT,CAAyBC,GAAzB,EAA8BC,IAA9B,EAAoCC,GAApC,EAAyCC,KAAzC,EAAgDC,MAAhD,EAAwD;IACpD,MAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAT,CAAuB,QAAvB,CAAf;IACA,MAAMC,GAAG,GAAGH,MAAM,CAACI,UAAP,CAAkBLine truncated
packages/artplayer-plugin-backlight/src/index.js
+2 -2
View File
@@ -50,7 +50,7 @@ function creatMatrix(parent, width, height) {
$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.webkitTransition = 'all .2s ease';
$box.style.transition = 'all .2s ease';
parent.appendChild($box);
return {
@@ -99,7 +99,7 @@ function artplayerPluginBacklight(art) {
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.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
$box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 120px`;
});
};