smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-16 12:42:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ambient-mode): improve performance

Browse Source
This commit is contained in:
Su-Yong
2023-10-04 23:43:45 +09:00
parent 81b2303a6f
commit 0c948d5ea1
1 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
plugins/ambient-mode/front.ts
View File

@ -1,10 +1,9 @@
import { ConfigType } from '../../config/dynamic'; import { ConfigType } from '../../config/dynamic';
export default (_: ConfigType<'ambient-mode'>) => { export default (_: ConfigType<'ambient-mode'>) => {
const interpolationLength = 3000; const interpolationTime = 3000; // interpolation time (ms)
const framerate = 30; const framerate = 30; // frame
const interpolationFrame = (interpolationLength / 1000) * framerate; const qualityRatio = 50; // width size (pixel)
const qualityRatio = 50; // width size
let unregister: (() => void) | null = null; let unregister: (() => void) | null = null;
@ -24,7 +23,7 @@ export default (_: ConfigType<'ambient-mode'>) => {
/* effect */ /* effect */
let lastEffectWorkId: number | null = null; let lastEffectWorkId: number | null = null;
const imageData: (ImageData | undefined)[] = []; let lastImageData: ImageData | null = null;
const onSync = () => { const onSync = () => {
if (typeof lastEffectWorkId === 'number') cancelAnimationFrame(lastEffectWorkId); if (typeof lastEffectWorkId === 'number') cancelAnimationFrame(lastEffectWorkId);
@ -32,28 +31,21 @@ export default (_: ConfigType<'ambient-mode'>) => {
lastEffectWorkId = requestAnimationFrame(() => { lastEffectWorkId = requestAnimationFrame(() => {
if (!context) return; if (!context) return;
context.globalAlpha = 1 / interpolationFrame;
const width = qualityRatio; const width = qualityRatio;
let height = Math.max(Math.floor(blurCanvas.height / blurCanvas.width * width), 1); let height = Math.max(Math.floor(blurCanvas.height / blurCanvas.width * width), 1);
if (!Number.isFinite(height)) height = width; if (!Number.isFinite(height)) height = width;
context.globalAlpha = 1;
if (lastImageData) {
const frameOffset = (1 / framerate) * (1000 / interpolationTime);
context.globalAlpha = 1 - (frameOffset * 2); // because of alpha value must be < 1
context.putImageData(lastImageData, 0, 0);
context.globalAlpha = frameOffset;
}
context.drawImage(video, 0, 0, width, height); context.drawImage(video, 0, 0, width, height);
const nowImageData = context.getImageData(0, 0, width, height); const nowImageData = context.getImageData(0, 0, width, height);
if (nowImageData) { lastImageData = nowImageData;
imageData.unshift(
new ImageData(
new Uint8ClampedArray(nowImageData.data),
nowImageData.width,
nowImageData.height
),
);
}
imageData.length = framerate;
for (let i = 1; i < interpolationFrame; i += 1) {
context.putImageData(imageData[i] ?? imageData[0]!, 0, 0);
}
lastEffectWorkId = null; lastEffectWorkId = null;
}); });
@ -65,6 +57,8 @@ export default (_: ConfigType<'ambient-mode'>) => {
const newWidth = Math.floor(video.width || rect.width); const newWidth = Math.floor(video.width || rect.width);
const newHeight = Math.floor(video.height || rect.height); const newHeight = Math.floor(video.height || rect.height);
if (newWidth === 0 || newHeight === 0) return;
blurCanvas.width = qualityRatio; blurCanvas.width = qualityRatio;
blurCanvas.height = Math.floor(newHeight / newWidth * qualityRatio); blurCanvas.height = Math.floor(newHeight / newWidth * qualityRatio);
blurCanvas.style.width = `${newWidth}px`; blurCanvas.style.width = `${newWidth}px`;
@ -84,7 +78,7 @@ export default (_: ConfigType<'ambient-mode'>) => {
/* hooking */ /* hooking */
let canvasInterval: NodeJS.Timeout | null = null; let canvasInterval: NodeJS.Timeout | null = null;
canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(interpolationLength / interpolationFrame))); canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(1000 / framerate)));
applyVideoAttributes(); applyVideoAttributes();
observer.observe(songVideo, { attributes: true }); observer.observe(songVideo, { attributes: true });
resizeObserver.observe(songVideo); resizeObserver.observe(songVideo);
@ -96,7 +90,7 @@ export default (_: ConfigType<'ambient-mode'>) => {
}; };
const onPlay = () => { const onPlay = () => {
if (canvasInterval) clearInterval(canvasInterval); if (canvasInterval) clearInterval(canvasInterval);
canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(interpolationLength / interpolationFrame))); canvasInterval = setInterval(onSync, Math.max(1, Math.ceil(1000 / framerate)));
}; };
songVideo.addEventListener('pause', onPause); songVideo.addEventListener('pause', onPause);
songVideo.addEventListener('play', onPlay); songVideo.addEventListener('play', onPlay);
@ -130,6 +124,9 @@ export default (_: ConfigType<'ambient-mode'>) => {
if (isPageOpen) { if (isPageOpen) {
unregister?.(); unregister?.();
unregister = injectBlurVideo() ?? null; unregister = injectBlurVideo() ?? null;
} else {
unregister?.();
unregister = null;
} }
} }
} }