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

fix: Ambient Mode intialization improvement (#1857)

Browse Source
This commit is contained in:
FrostyBiscuit
2024-03-17 03:52:46 +01:00
committed by GitHub
parent 70ed6f8e6c
commit 9b2c1a320b
2 changed files with 9 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/plugins/ambient-mode/index.ts
View File

@ -179,19 +179,14 @@ export default createPlugin({
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (mutation.type === 'attributes') { if (mutation.type === 'attributes' || mutation.type === 'childList') {
applyImageAttribute(); applyImageAttribute();
} }
}); });
}); });
const resizeObserver = new ResizeObserver(() => {
applyImageAttribute();
});
applyImageAttribute(); applyImageAttribute();
observer.observe(songImage, { attributes: true }); observer.observe(songImage, { attributes: true, subtree: true });
resizeObserver.observe(songImage);
window.addEventListener('resize', applyImageAttribute);
/* injecting */ /* injecting */
songImage.prepend(blurImage); songImage.prepend(blurImage);
@ -199,7 +194,6 @@ export default createPlugin({
/* cleanup */ /* cleanup */
return () => { return () => {
observer.disconnect(); observer.disconnect();
resizeObserver.disconnect();
window.removeEventListener('resize', applyImageAttribute); window.removeEventListener('resize', applyImageAttribute);
if (blurImage.isConnected) blurImage.remove(); if (blurImage.isConnected) blurImage.remove();
@ -284,14 +278,11 @@ export default createPlugin({
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (mutation.type === 'attributes') { if (mutation.type === 'attributes' || mutation.type === 'childList') {
applyVideoAttributes(); applyVideoAttributes();
} }
}); });
}); });
const resizeObserver = new ResizeObserver(() => {
applyVideoAttributes();
});
/* hooking */ /* hooking */
let canvasInterval: NodeJS.Timeout | null = null; let canvasInterval: NodeJS.Timeout | null = null;
@ -300,9 +291,7 @@ export default createPlugin({
Math.max(1, Math.ceil(1000 / this.buffer)), Math.max(1, Math.ceil(1000 / this.buffer)),
); );
applyVideoAttributes(); applyVideoAttributes();
observer.observe(songVideo, { attributes: true }); observer.observe(songVideo, { attributes: true, subtree: true });
resizeObserver.observe(songVideo);
window.addEventListener('resize', applyVideoAttributes);
const onPause = () => { const onPause = () => {
if (canvasInterval) clearInterval(canvasInterval); if (canvasInterval) clearInterval(canvasInterval);
@ -329,8 +318,6 @@ export default createPlugin({
songVideo.removeEventListener('play', onPlay); songVideo.removeEventListener('play', onPlay);
observer.disconnect(); observer.disconnect();
resizeObserver.disconnect();
window.removeEventListener('resize', applyVideoAttributes);
if (blurCanvas.isConnected) blurCanvas.remove(); if (blurCanvas.isConnected) blurCanvas.remove();
}; };
@ -354,7 +341,7 @@ export default createPlugin({
const observer = new MutationObserver((mutationsList) => { const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) { for (const mutation of mutationsList) {
if (mutation.type === 'attributes') { if (mutation.type === 'attributes' || mutation.type === 'childList') {
const isPageOpen = const isPageOpen =
ytmusicAppLayout?.hasAttribute('player-page-open'); ytmusicAppLayout?.hasAttribute('player-page-open');
if (isPageOpen) { if (isPageOpen) {
@ -369,7 +356,7 @@ export default createPlugin({
}); });
if (playerPage) { if (playerPage) {
observer.observe(playerPage, { attributes: true }); observer.observe(playerPage, { attributes: true, subtree: true });
} }
}, },
onConfigChange(newConfig) { onConfigChange(newConfig) {

5
src/plugins/ambient-mode/style.css
View File

@ -25,11 +25,12 @@
height: 100%; height: 100%;
} }
#song-video .html5-video-container > video { #song-video .html5-video-container {
top: 0 !important; height: 100%;
} }
#player:not([video-mode]):not(.video-mode) { #player:not([video-mode]):not(.video-mode) {
width: 100%;
margin: 0 auto !important; margin: 0 auto !important;
overflow: visible; overflow: visible;
} }