|
1 | | -// modules are defined as an array |
2 | | -// [ module function, map of requires ] |
3 | | -// |
4 | | -// map of requires is short require name -> numeric require |
5 | | -// |
6 | | -// anything defined in a previous bundle is accessed via the |
7 | | -// orig method which is the require for previous bundles |
8 | | - |
9 | | -(function (modules, entry, mainEntry, parcelRequireName, globalName) { |
10 | | - /* eslint-disable no-undef */ |
11 | | - var globalObject = |
12 | | - typeof globalThis !== 'undefined' |
13 | | - ? globalThis |
14 | | - : typeof self !== 'undefined' |
15 | | - ? self |
16 | | - : typeof window !== 'undefined' |
17 | | - ? window |
18 | | - : typeof global !== 'undefined' |
19 | | - ? global |
20 | | - : {}; |
21 | | - /* eslint-enable no-undef */ |
22 | | - |
23 | | - // Save the require from previous bundle to this closure if any |
24 | | - var previousRequire = |
25 | | - typeof globalObject[parcelRequireName] === 'function' && |
26 | | - globalObject[parcelRequireName]; |
27 | | - |
28 | | - var cache = previousRequire.cache || {}; |
29 | | - // Do not use `require` to prevent Webpack from trying to bundle this call |
30 | | - var nodeRequire = |
31 | | - typeof module !== 'undefined' && |
32 | | - typeof module.require === 'function' && |
33 | | - module.require.bind(module); |
34 | | - |
35 | | - function newRequire(name, jumped) { |
36 | | - if (!cache[name]) { |
37 | | - if (!modules[name]) { |
38 | | - // if we cannot find the module within our internal map or |
39 | | - // cache jump to the current global require ie. the last bundle |
40 | | - // that was added to the page. |
41 | | - var currentRequire = |
42 | | - typeof globalObject[parcelRequireName] === 'function' && |
43 | | - globalObject[parcelRequireName]; |
44 | | - if (!jumped && currentRequire) { |
45 | | - return currentRequire(name, true); |
| 1 | +var artplayerPluginAmbilight = (function() { |
| 2 | + "use strict"; |
| 3 | + function artplayerPluginAmbilight2(option = {}) { |
| 4 | + return (art) => { |
| 5 | + const { $video } = art.template; |
| 6 | + const { createElement, addClass, setStyles } = art.constructor.utils; |
| 7 | + const { blur = "50px", opacity = 0.5, frequency = 10, duration = 0.3 } = option; |
| 8 | + const $ambilight = createElement("div"); |
| 9 | + const gridItems = createGridItems($ambilight); |
| 10 | + setupAmbilight($ambilight, $video); |
| 11 | + setupGridItems(gridItems, blur, opacity, duration); |
| 12 | + const updateColors = createColorUpdater($video, gridItems, frequency); |
| 13 | + let animationFrameId = null; |
| 14 | + function start() { |
| 15 | + if (!animationFrameId) { |
| 16 | + updateColors(); |
46 | 17 | } |
47 | | - |
48 | | - // If there are other bundles on this page the require from the |
49 | | - // previous one is saved to 'previousRequire'. Repeat this as |
50 | | - // many times as there are bundles until the module is found or |
51 | | - // we exhaust the require chain. |
52 | | - if (previousRequire) { |
53 | | - return previousRequire(name, true); |
54 | | - } |
55 | | - |
56 | | - // Try the node require function if it exists. |
57 | | - if (nodeRequire && typeof name === 'string') { |
58 | | - return nodeRequire(name); |
59 | | - } |
60 | | - |
61 | | - var err = new Error("Cannot find module '" + name + "'"); |
62 | | - err.code = 'MODULE_NOT_FOUND'; |
63 | | - throw err; |
64 | 18 | } |
65 | | - |
66 | | - localRequire.resolve = resolve; |
67 | | - localRequire.cache = {}; |
68 | | - |
69 | | - var module = (cache[name] = new newRequire.Module(name)); |
70 | | - |
71 | | - modules[name][0].call( |
72 | | - module.exports, |
73 | | - localRequire, |
74 | | - module, |
75 | | - module.exports, |
76 | | - this |
77 | | - ); |
78 | | - } |
79 | | - |
80 | | - return cache[name].exports; |
81 | | - |
82 | | - function localRequire(x) { |
83 | | - var res = localRequire.resolve(x); |
84 | | - return res === false ? {} : newRequire(res); |
85 | | - } |
86 | | - |
87 | | - function resolve(x) { |
88 | | - var id = modules[name][1][x]; |
89 | | - return id != null ? id : x; |
90 | | - } |
91 | | - } |
92 | | - |
93 | | - function Module(moduleName) { |
94 | | - this.id = moduleName; |
95 | | - this.bundle = newRequire; |
96 | | - this.exports = {}; |
97 | | - } |
98 | | - |
99 | | - newRequire.isParcelRequire = true; |
100 | | - newRequire.Module = Module; |
101 | | - newRequire.modules = modules; |
102 | | - newRequire.cache = cache; |
103 | | - newRequire.parent = previousRequire; |
104 | | - newRequire.register = function (id, exports) { |
105 | | - modules[id] = [ |
106 | | - function (require, module) { |
107 | | - module.exports = exports; |
108 | | - }, |
109 | | - {}, |
110 | | - ]; |
111 | | - }; |
112 | | - |
113 | | - Object.defineProperty(newRequire, 'root', { |
114 | | - get: function () { |
115 | | - return globalObject[parcelRequireName]; |
116 | | - }, |
117 | | - }); |
118 | | - |
119 | | - globalObject[parcelRequireName] = newRequire; |
120 | | - |
121 | | - for (var i = 0; i < entry.length; i++) { |
122 | | - newRequire(entry[i]); |
123 | | - } |
124 | | - |
125 | | - if (mainEntry) { |
126 | | - // Expose entry point to Node, AMD or browser globals |
127 | | - // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js |
128 | | - var mainExports = newRequire(mainEntry); |
129 | | - |
130 | | - // CommonJS |
131 | | - if (typeof exports === 'object' && typeof module !== 'undefined') { |
132 | | - module.exports = mainExports; |
133 | | - |
134 | | - // RequireJS |
135 | | - } else if (typeof define === 'function' && define.amd) { |
136 | | - define(function () { |
137 | | - return mainExports; |
138 | | - }); |
139 | | - |
140 | | - // <script> |
141 | | - } else if (globalName) { |
142 | | - this[globalName] = mainExports; |
143 | | - } |
144 | | - } |
145 | | -})({"ica5N":[function(require,module,exports) { |
146 | | -var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); |
147 | | -parcelHelpers.defineInteropFlag(exports); |
148 | | -parcelHelpers.export(exports, "default", ()=>artplayerPluginAmbilight); |
149 | | -function artplayerPluginAmbilight(option = {}) { |
150 | | - return (art)=>{ |
151 | | - const { $video } = art.template; |
152 | | - const { createElement, addClass, setStyles } = art.constructor.utils; |
153 | | - const { blur = "50px", opacity = 0.5, frequency = 10, duration = 0.3 } = option; |
154 | | - const $ambilight = createElement("div"); |
155 | | - const gridItems = createGridItems($ambilight); |
156 | | - setupAmbilight($ambilight, $video); |
157 | | - setupGridItems(gridItems, blur, opacity, duration); |
158 | | - const updateColors = createColorUpdater($video, gridItems, frequency); |
159 | | - let animationFrameId = null; |
160 | | - function start() { |
161 | | - if (!animationFrameId) updateColors(); |
| 19 | + function stop() { |
| 20 | + if (animationFrameId) { |
| 21 | + cancelAnimationFrame(animationFrameId); |
| 22 | + animationFrameId = null; |
162 | 23 | } |
163 | | - function stop() { |
164 | | - if (animationFrameId) { |
165 | | - cancelAnimationFrame(animationFrameId); |
166 | | - animationFrameId = null; |
167 | | - } |
| 24 | + } |
| 25 | + art.on("ready", start); |
| 26 | + art.on("destroy", stop); |
| 27 | + return { |
| 28 | + name: "artplayerPluginAmbilight", |
| 29 | + start, |
| 30 | + stop |
| 31 | + }; |
| 32 | + function createGridItems($ambilight2) { |
| 33 | + $ambilight2.innerHTML = Array.from({ length: 9 }).fill("<div></div>").join(""); |
| 34 | + return Array.from($ambilight2.children); |
| 35 | + } |
| 36 | + function setupAmbilight($ambilight2, $video2) { |
| 37 | + addClass($ambilight2, "artplayer-plugin-ambilight"); |
| 38 | + $video2.parentNode.insertBefore($ambilight2, $video2); |
| 39 | + setStyles($ambilight2, { |
| 40 | + position: "absolute", |
| 41 | + top: 0, |
| 42 | + left: 0, |
| 43 | + zIndex: 9, |
| 44 | + inset: 0, |
| 45 | + display: "grid", |
| 46 | + gridTemplateColumns: "1fr 1fr 1fr", |
| 47 | + gridTemplateRows: "1fr 1fr 1fr" |
| 48 | + }); |
| 49 | + } |
| 50 | + function setupGridItems(gridItems2, blur2, opacity2, duration2) { |
| 51 | + gridItems2.forEach(($item) => { |
| 52 | + setStyles($item, { |
| 53 | + opacity: opacity2, |
| 54 | + filter: `blur(${blur2})`, |
| 55 | + transition: `background-color ${duration2}s ease` |
| 56 | + }); |
| 57 | + }); |
| 58 | + } |
| 59 | + function createColorUpdater($video2, gridItems2, frequency2) { |
| 60 | + const canvas = createElement("canvas"); |
| 61 | + const ctx = canvas.getContext("2d"); |
| 62 | + canvas.width = 3; |
| 63 | + canvas.height = 3; |
| 64 | + function getAverageColor(x, y, w, h) { |
| 65 | + ctx.drawImage($video2, x, y, w, h, 0, 0, 1, 1); |
| 66 | + const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data; |
| 67 | + return `rgb(${r}, ${g}, ${b})`; |
168 | 68 | } |
169 | | - art.on("ready", start); |
170 | | - art.on("destroy", stop); |
171 | | - return { |
172 | | - name: "artplayerPluginAmbilight", |
173 | | - start, |
174 | | - stop |
| 69 | + let lastUpdateTime = 0; |
| 70 | + return function updateColors2() { |
| 71 | + const now = performance.now(); |
| 72 | + if (now - lastUpdateTime < 1e3 / frequency2 || !art.playing) { |
| 73 | + animationFrameId = requestAnimationFrame(updateColors2); |
| 74 | + return; |
| 75 | + } |
| 76 | + lastUpdateTime = now; |
| 77 | + const w = $video2.videoWidth / 3; |
| 78 | + const h = $video2.videoHeight / 3; |
| 79 | + const colors = [ |
| 80 | + [0, 0], |
| 81 | + [w, 0], |
| 82 | + [2 * w, 0], |
| 83 | + [0, h], |
| 84 | + [w, h], |
| 85 | + [2 * w, h], |
| 86 | + [0, 2 * h], |
| 87 | + [w, 2 * h], |
| 88 | + [2 * w, 2 * h] |
| 89 | + ].map(([x, y]) => getAverageColor(x, y, w, h)); |
| 90 | + gridItems2.forEach(($item, index) => { |
| 91 | + $item.style.backgroundColor = colors[index]; |
| 92 | + }); |
| 93 | + animationFrameId = requestAnimationFrame(updateColors2); |
175 | 94 | }; |
176 | | - function createGridItems($ambilight) { |
177 | | - $ambilight.innerHTML = Array(9).fill("<div></div>").join(""); |
178 | | - return Array.from($ambilight.children); |
179 | | - } |
180 | | - function setupAmbilight($ambilight, $video) { |
181 | | - addClass($ambilight, "artplayer-plugin-ambilight"); |
182 | | - $video.parentNode.insertBefore($ambilight, $video); |
183 | | - setStyles($ambilight, { |
184 | | - position: "absolute", |
185 | | - top: 0, |
186 | | - left: 0, |
187 | | - zIndex: 9, |
188 | | - inset: 0, |
189 | | - display: "grid", |
190 | | - gridTemplateColumns: "1fr 1fr 1fr", |
191 | | - gridTemplateRows: "1fr 1fr 1fr" |
192 | | - }); |
193 | | - } |
194 | | - function setupGridItems(gridItems, blur, opacity, duration) { |
195 | | - gridItems.forEach(($item)=>{ |
196 | | - setStyles($item, { |
197 | | - opacity, |
198 | | - filter: `blur(${blur})`, |
199 | | - transition: `background-color ${duration}s ease` |
200 | | - }); |
201 | | - }); |
202 | | - } |
203 | | - function createColorUpdater($video, gridItems, frequency) { |
204 | | - const canvas = createElement("canvas"); |
205 | | - const ctx = canvas.getContext("2d"); |
206 | | - canvas.width = 3; |
207 | | - canvas.height = 3; |
208 | | - function getAverageColor(x, y, w, h) { |
209 | | - ctx.drawImage($video, x, y, w, h, 0, 0, 1, 1); |
210 | | - const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data; |
211 | | - return `rgb(${r}, ${g}, ${b})`; |
212 | | - } |
213 | | - let lastUpdateTime = 0; |
214 | | - return function updateColors() { |
215 | | - const now = performance.now(); |
216 | | - if (now - lastUpdateTime < 1000 / frequency || !art.playing) { |
217 | | - animationFrameId = requestAnimationFrame(updateColors); |
218 | | - return; |
219 | | - } |
220 | | - lastUpdateTime = now; |
221 | | - const w = $video.videoWidth / 3; |
222 | | - const h = $video.videoHeight / 3; |
223 | | - const colors = [ |
224 | | - [ |
225 | | - 0, |
226 | | - 0 |
227 | | - ], |
228 | | - [ |
229 | | - w, |
230 | | - 0 |
231 | | - ], |
232 | | - [ |
233 | | - 2 * w, |
234 | | - 0 |
235 | | - ], |
236 | | - [ |
237 | | - 0, |
238 | | - h |
239 | | - ], |
240 | | - [ |
241 | | - w, |
242 | | - h |
243 | | - ], |
244 | | - [ |
245 | | - 2 * w, |
246 | | - h |
247 | | - ], |
248 | | - [ |
249 | | - 0, |
250 | | - 2 * h |
251 | | - ], |
252 | | - [ |
253 | | - w, |
254 | | - 2 * h |
255 | | - ], |
256 | | - [ |
257 | | - 2 * w, |
258 | | - 2 * h |
259 | | - ] |
260 | | - ].map(([x, y])=>getAverageColor(x, y, w, h)); |
261 | | - gridItems.forEach(($item, index)=>{ |
262 | | - $item.style.backgroundColor = colors[index]; |
263 | | - }); |
264 | | - animationFrameId = requestAnimationFrame(updateColors); |
265 | | - }; |
266 | | - } |
267 | | - }; |
268 | | -} |
269 | | -if (typeof window !== "undefined") window["artplayerPluginAmbilight"] = artplayerPluginAmbilight; |
270 | | - |
271 | | -},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) { |
272 | | -exports.interopDefault = function(a) { |
273 | | - return a && a.__esModule ? a : { |
274 | | - default: a |
| 95 | + } |
275 | 96 | }; |
276 | | -}; |
277 | | -exports.defineInteropFlag = function(a) { |
278 | | - Object.defineProperty(a, "__esModule", { |
279 | | - value: true |
280 | | - }); |
281 | | -}; |
282 | | -exports.exportAll = function(source, dest) { |
283 | | - Object.keys(source).forEach(function(key) { |
284 | | - if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return; |
285 | | - Object.defineProperty(dest, key, { |
286 | | - enumerable: true, |
287 | | - get: function() { |
288 | | - return source[key]; |
289 | | - } |
290 | | - }); |
291 | | - }); |
292 | | - return dest; |
293 | | -}; |
294 | | -exports.export = function(dest, destName, get) { |
295 | | - Object.defineProperty(dest, destName, { |
296 | | - enumerable: true, |
297 | | - get: get |
298 | | - }); |
299 | | -}; |
300 | | - |
301 | | -},{}]},["ica5N"], "ica5N", "parcelRequire4dc0") |
302 | | - |
303 | | -//# sourceMappingURL=index.js.map |
| 97 | + } |
| 98 | + return artplayerPluginAmbilight2; |
| 99 | +})(); |
0 commit comments