diff --git a/src/content/mutationObserver.js b/src/content/mutationObserver.js index bf47260..f0814c3 100644 --- a/src/content/mutationObserver.js +++ b/src/content/mutationObserver.js @@ -1,19 +1,35 @@ -async function find(root, selector) { +async function find(target, selector) { return new Promise(resolve => { const observer = new MutationObserver((_, observer) => { tryResolve(observer) }) - const config = { childList: true } - observer.observe(root, config) + const config = { childList: true, attributes: true } + observer.observe(target, config) tryResolve(observer) function tryResolve(observer) { - const node = root.querySelector(selector) + const node = target.querySelector(selector) if (node) { observer.disconnect() resolve(node) } } }) -} \ No newline at end of file +} + +function observe(target, selector, callback) { + const observer = new MutationObserver(onMutation) + const config = { childList: true } + observer.observe(target, config) + + function onMutation(mutations) { + mutations.forEach(({ addedNodes }) => { + addedNodes.forEach(node => { + if (node.matches?.(selector)) { + callback(node) + } + }) + }) + } +} diff --git a/src/content/top/top.js b/src/content/top/top.js index 96fd861..e6d3b70 100644 --- a/src/content/top/top.js +++ b/src/content/top/top.js @@ -2,10 +2,7 @@ const HIDDEN_CLASS = "x-hidden" addEventListener("load", async () => { const cssRoot = document.querySelector(":root") - const root = document.querySelector("#content #page-manager"); - const videoContainer = await find(root, "ytd-watch-flexy"); - const chatContainer = videoContainer.querySelector("#secondary #secondary-inner"); - const chat = await find(chatContainer, "#chat"); + const root = document.querySelector("#content #page-manager") options.enabled(enabled => { document.body.classList.toggle("overlay", enabled) @@ -13,9 +10,6 @@ addEventListener("load", async () => { options.position(position => { document.body.classList.toggle("left", position === "left") }) - options.toggleButton(toggleButton => { - chat.querySelector("#show-hide-button").classList.toggle(HIDDEN_CLASS, !toggleButton) - }) options.opacity(opacity => { cssRoot.style.setProperty("--opacity", opacity) }) @@ -25,4 +19,13 @@ addEventListener("load", async () => { options.bottomMargin(bottomMargin => { cssRoot.style.setProperty("--bottom-margin", bottomMargin + "%") }) + + const videoContainer = await find(root, "ytd-watch-flexy") + const chatContainer = videoContainer.querySelector("#secondary #secondary-inner") + + observe(chatContainer, "#chat", chat => { + options.toggleButton(toggleButton => { + chat.querySelector("#show-hide-button").classList.toggle(HIDDEN_CLASS, !toggleButton) + }) + }) }) \ No newline at end of file