diff --git a/content.js b/content.js index f4f970c..cf96904 100644 --- a/content.js +++ b/content.js @@ -12,7 +12,6 @@ const PHOTOS = [ const CANVAS_SELECTOR = ".VibeWidgetAnimation_root__7fpeP > canvas:nth-child(1)"; const ROOT_SELECTOR = ".VibeWidgetAnimation_root__7fpeP"; -const PLAY_INDICATOR_SELECTOR = ".VibeResetButton_root__ju8pE"; let container = null; let currentEl = null; @@ -87,38 +86,38 @@ function showVideo(width, height) { video.play().catch(() => {}); } -function syncFromIndicator(indicator, width, height) { - if (indicator.getAttribute("aria-hidden") === "true") { - if (PHOTOS.length > 0) { - showPhoto(width, height); - } else { - currentEl?.pause?.(); - } - } else { - showVideo(width, height); - } -} +function watchForPlayer(width, height) { + const PLAY_BTN_SELECTOR = ".VibePlayerControls_playButton__vnoer"; -function watchForPlayIndicator(width, height) { - const bind = (indicator) => { - syncFromIndicator(indicator, width, height); - new MutationObserver(() => syncFromIndicator(indicator, width, height)).observe(indicator, { + const isPlaying = (btn) => btn.getAttribute("aria-label") === "Pause"; + + const sync = (btn) => { + if (isPlaying(btn)) { + showVideo(width, height); + } else if (PHOTOS.length > 0) { + showPhoto(width, height); + } + }; + + const bind = (btn) => { + sync(btn); + new MutationObserver(() => sync(btn)).observe(btn, { attributes: true, - attributeFilter: ["aria-hidden"], + attributeFilter: ["aria-label"], }); }; - const indicator = document.querySelector(PLAY_INDICATOR_SELECTOR); - if (indicator) { - bind(indicator); + const btn = document.querySelector(PLAY_BTN_SELECTOR); + if (btn) { + bind(btn); return; } const waitObserver = new MutationObserver(() => { - const indicator = document.querySelector(PLAY_INDICATOR_SELECTOR); - if (indicator) { + const el = document.querySelector(PLAY_BTN_SELECTOR); + if (el) { waitObserver.disconnect(); - bind(indicator); + bind(el); } }); waitObserver.observe(document.body, { childList: true, subtree: true }); @@ -146,7 +145,7 @@ function replaceAnimation(canvas) { document.head.appendChild(style); showVideo(w, h); - watchForPlayIndicator(w, h); + watchForPlayer(w, h); } const observer = new MutationObserver(() => {