fix: enabled icon & viewport check

drodil · Jan 13, 2025 · 75d2bbf · 75d2bbf
1 parent 15d91e5
commit 75d2bbf
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/src/vap_bs.js b/src/vap_bs.js
@@ -163,7 +163,8 @@ env.tabs.onActivated.addListener(async function (info) {
     return;
   }
 
-  changeIcon(!isEnabledForTab(tab));
+  sendMessage(tab, { action: "check" });
+
   if (!isEnabledForTab(tab) || previous_tab === info.tabId) {
     return;
   }
@@ -186,10 +187,9 @@ env.tabs.onActivated.addListener(async function (info) {
 
 // Tab update listener
 env.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {
+  sendMessage(tab, { action: "check" });
+
   if (!isEnabledForTab(tab)) {
-    if (tab.active) {
-      changeIcon(true);
-    }
     return;
   }
 
@@ -254,6 +254,11 @@ env.runtime.onMessage.addListener(async function (
   sender,
   sendResponse
 ) {
+  if ("hasVideos" in request && sender.tab.active) {
+    debugLog(`Tab has videos: ${request.hasVideos}`);
+    changeIcon(!(request.hasVideos && isEnabledForTab(sender.tab)));
+  }
+
   if (!isEnabledForTab(sender.tab) || env.runtime.lastError) {
     return true;
   }
@@ -318,7 +323,6 @@ env.commands.onCommand.addListener(async (command) => {
       disabledTabs.push(tab.id);
     }
     await save_settings();
-    changeIcon(!isEnabledForTab);
   } else if (command === "toggle-play") {
     debugLog(
       `Toggle play command received, toggling play for all tabs in current window`

diff --git a/src/video_auto_pause.js b/src/video_auto_pause.js
@@ -145,12 +145,14 @@ if (window.autoPauseInjected !== true) {
     }
     debugLog(`Received message: ${JSON.stringify(request)}`);
 
+    const videoElements = document.getElementsByTagName("video");
+    sendMessage({ hasVideos: videoElements.length >= 1 });
+
     if (document.fullscreenElement && options.disableOnFullscreen) {
       debugLog(`Document is in fullscreen mode, ignoring all commands`);
       return true;
     }
 
-    const videoElements = document.getElementsByTagName("video");
     const iframeElements = document.getElementsByTagName("iframe");
 
     for (let i = 0; i < iframeElements.length; i++) {
@@ -213,38 +215,43 @@ if (window.autoPauseInjected !== true) {
 
   // Intersection observer for the video elements in page
   // can be used to determine when video goes out of viewport
-  const intersection_observer = new IntersectionObserver(
-    function (entries) {
-      if (!options.scrollpause) {
-        return;
-      }
-      if (entries[0].isIntersecting === true) {
-        debugLog(`Video not anymore in viewport`);
-        sendMessage({ visible: true });
-      } else {
-        debugLog(`Video in viewport`);
-        sendMessage({ visible: false });
-      }
-    },
-    { threshold: [0] }
-  );
+  document.addEventListener("DOMContentLoaded", () => {
+    const intersection_observer = new IntersectionObserver(
+      function (entries) {
+        if (!options.scrollpause) {
+          return;
+        }
+        if (entries[0].isIntersecting === true) {
+          debugLog(`Video not anymore in viewport`);
+          sendMessage({ visible: true });
+        } else {
+          debugLog(`Video in viewport`);
+          sendMessage({ visible: false });
+        }
+      },
+      { threshold: [0] }
+    );
 
-  // Start observing video elements
-  let videoElements = document.getElementsByTagName("video");
-  for (let i = 0; i < videoElements.length; i++) {
-    intersection_observer.observe(videoElements[i]);
-    videoElements[i].addEventListener("pause", async (_e) => {
-      if (!automaticallyPaused && options.manualPause) {
-        debugLog(`Manually paused video`);
-        manuallyPaused = true;
-        automaticallyPaused = false;
-      }
-    });
-    videoElements[i].addEventListener("play", (_e) => {
-      if (options.manualPause) {
-        debugLog(`Manually resumed video`);
-        manuallyPaused = false;
-      }
-    });
-  }
+    // Start observing video elements
+    let videoElements = document.getElementsByTagName("video");
+    sendMessage({ hasVideos: videoElements.length >= 1 });
+
+    for (let i = 0; i < videoElements.length; i++) {
+      intersection_observer.observe(videoElements[i]);
+      videoElements[i].addEventListener("pause", async (_e) => {
+        console.log(automaticallyPaused, options.manualPause);
+        if (!automaticallyPaused && options.manualPause) {
+          debugLog(`Manually paused video`);
+          manuallyPaused = true;
+          automaticallyPaused = false;
+        }
+      });
+      videoElements[i].addEventListener("play", (_e) => {
+        if (options.manualPause) {
+          debugLog(`Manually resumed video`);
+          manuallyPaused = false;
+        }
+      });
+    }
+  });
 }