update script to use mutation observer

README.md

@@ -1,11 +1,20 @@
 # Disable Youtube Autoplay
-This userscript disables youtube recommended videos from automatically playing after your video has finished. With this userscript, you aren't reliant on Youtube's cookies in order to prevent videos from playing.
+This userscript disables youtube recommended videos from automatically playing
+after your video has finished. With this userscript, you aren't reliant on
+Youtube's cookies in order to prevent videos from playing.
 
 ## Installation
-First, install Violentmonkey for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/violentmonkey/) or [Chrome](https://chrome.google.com/webstore/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag), or any other userscript manager of your choice, and then [click here to install the userscript](https://gitea.bubbletea.dev/shibao/disable-youtube-autoplay/raw/branch/master/disable-youtube-autoplay.user.js).
+First, install Violentmonkey for
+[Firefox](https://addons.mozilla.org/en-US/firefox/addon/violentmonkey/) or
+[Chrome](https://chrome.google.com/webstore/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag),
+or any other userscript manager of your choice, and then [click here to install
+the
+userscript](https://gitea.bubbletea.dev/shibao/disable-youtube-autoplay/raw/branch/stable/disable-youtube-autoplay.user.js).
 
 ## License
 This userscript is licensed under GPL v3.0 or later.
 
 ## Contribution
-Contributers are highly encouraged! Feel free to open a pull request with any potential changes, and you can contact me at [shibao@bubbletea.dev](mailto:shibao@bubbletea.dev).
+Contributers are highly encouraged! Feel free to open a pull request with any
+potential changes, and you can contact me at
+[shibao@bubbletea.dev](mailto:shibao@bubbletea.dev).

disable-youtube-autoplay.user.js

@@ -1,26 +1,61 @@
 // ==UserScript==
 // @name         Turn off Youtube Autoplay
 // @namespace    https://bubbletea.dev/
-// @version      1.0
+// @version      2.0
 // @description  Disables Youtube recommended videos from automatically playing
 // @author       shibao
 // @include      https://www.youtube.com/watch*
-// @downloadURL	 https://gitea.bubbletea.dev/bubbletea.dev/disable-youtube-autoplay/raw/branch/master/disable-youtube-autoplay.user.js
+// @downloadURL	 https://gitea.bubbletea.dev/shibao/disable-youtube-autoplay/raw/branch/stable/disable-youtube-autoplay.user.js
-// @updateURL	 https://gitea.bubbletea.dev/bubbletea.dev/disable-youtube-autoplay/raw/branch/master/disable-youtube-autoplay.user.js
+// @updateURL    https://gitea.bubbletea.dev/shibao/disable-youtube-autoplay/raw/branch/stable/disable-youtube-autoplay.user.js
 // @grant        none
 // ==/UserScript==
 
-function disableAutoplay() {
+// from https://developer.mozilla.org/en-US/docs/Web/API/Node#recurse_through_child_nodes
-  var e = document.querySelector('button.ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"]');
+function eachNode(rootNode, callback) {
-  if (e == null) {
+  if (!callback) {
-    console.error('Youtube checkbox could not be found!');
+    const nodes = []
-  } else {
+    eachNode(rootNode, function (node) {
-    var isChecked = document.querySelector('.ytp-autonav-toggle-button').getAttribute('aria-checked') == "true";
+      nodes.push(node)
-    if (isChecked) e.click();
+    })
+    return nodes
+  }
+
+  if (false === callback(rootNode)) {
+    return false
+  }
+
+  if (rootNode.hasChildNodes()) {
+    const nodes = rootNode.childNodes
+    for (let i = 0, l = nodes.length; i < l; ++i) {
+      if (false === eachNode(nodes[i], callback)) {
+        return
+      }
+    }
   }
 }
 
 (function () {
   'use strict';
-  document.onLoad = setTimeout(disableAutoplay, 1000);
+
-}) ();
+  const observer = new MutationObserver(function (mutationList) {
+    for (const mutation of mutationList) {
+      for (const addedNode of mutation.addedNodes) {
+        // recurses through all child nodes as well
+        eachNode(addedNode, function (node) {
+          if (node.nodeName == 'DIV' &&
+            node.classList.contains('ytp-autonav-toggle-button') &&
+            node.getAttribute('aria-checked') == "true") {
+            const button = node.closest("button");
+            if (button) { setTimeout(() => button.click(), 1000); }
+          }
+        });
+      }
+    };
+  });
+
+  observer.observe(document, {
+    childList: true,
+    subtree: true,
+    attributes: true
+  });
+})();