fix(queue): mark Twitch videos as playing and able to queue them again

Author: fent

content/shared.js

@@ -7,8 +7,8 @@ chrome.runtime.sendMessage({ started: true }, {}, (response) => {
 });
 
 // Element may not be available right away when the page loads.
-window.getElement = (className, callback) => {
-  const search = () => document.getElementsByClassName(className)[0];
+window.getElement = (selector, callback) => {
+  const search = () => document.querySelector(selector);
   let maxAttempts = 10;
   let iid = setInterval(() => {
     const $el = search();

content/style.css

@@ -10,13 +10,22 @@
   overflow: visible !important;
 }
 
+/* Make the button bigger on Twitch */
+.qa-controls-bottom .veefeed-next-button {
+  margin-left: 4px;
+}
+
+.qa-controls-bottom .veefeed-next-button svg path {
+  transform: scale(1.35) translate(-5px, -5px)
+}
+
 .veefeed-next-button.veefeed-show {
   width: 3em !important;
   visibility: visible;
   transition: width 200ms;
 }
 
-/* On YouTube, its own next button will be hidden when veefeed's is shown. */
+/* Hide YouTube's own Next Video button when veefeed's is shown. */
 .veefeed-next-button + .ytp-next-button {
   transition: width 200ms, visibility 200ms step-end;
 }

content/twitch.js

@@ -1,27 +1,36 @@
 /* global chrome, getElement, setNextButton  */
 
-getElement('player', ($player) => {
-  // Since Twitch VODs don't hae a proper title at page load on the tab,
-  // or even after the video load, we get the title ourselves.
+// Wait for player to load.
+getElement('.player', ($player) => {
+  // Since Twitch VODs don't have a proper title at page load on the tab,
+  // or even after the video loads, we get the title ourselves.
   getElement('title', ($title) => {
     chrome.runtime.sendMessage({ title: $title.textContent.trim() });
   });
 
-  const $scroll = document.querySelector('#main_col .tse-scroll-content');
+  // Use the slider on the player to know when the video ends.
+  const $slider = document.querySelector('.js-player-slider');
+  let valuemax;
   const observer = new MutationObserver(() => {
-    // If the video has ended, not just paused, the player will have its
-    // `data-ended` attribute be equal to `true`.
-    if ($player.getAttribute('data-ended') === 'true') {
+    if (!valuemax || valuemax <= 0) {
+      valuemax = parseFloat($slider.getAttribute('aria-valuemax'));
+    }
+    let valuenow = parseFloat($slider.getAttribute('aria-valuenow'));
+    if (valuemax && valuenow + 1 > valuemax) {
       observer.disconnect();
+      $player.setAttribute('data-ended', 'true');
+      const $scroll = document.querySelector('main .simplebar-scroll-content');
+      const $tip =
+        document.querySelector('.qa-theatre-mode-button span.player-tip');
       chrome.runtime.sendMessage({
         ended: true,
-        scrollTop: $scroll.scrollTop,
+        scrollTop: $tip.getAttribute('data-tip') === 'Exit Theatre Mode'
+          ? 0 : $scroll.scrollTop,
       });
     }
   });
-  observer.observe($player, { attributes: true });
+  observer.observe($slider, { attributes: true });
 
-  const $playButton =
-    document.getElementsByClassName('js-control-playpause-button')[0];
+  const $playButton = document.querySelector('button.qa-pause-play-button');
   setNextButton($playButton, 'player-button');
 });

content/youtube.js

@@ -1,6 +1,6 @@
 /* global chrome, getElement, setNextButton */
 
-getElement('ytp-play-button', ($playButton) => {
+getElement('.ytp-play-button', ($playButton) => {
   const observer = new MutationObserver(() => {
     // if the video has ended, the play button will change to a
     // swirly replay arrow.

manifest.json

@@ -49,7 +49,7 @@
     },
     {
       "matches": [
-        "https://www.twitch.tv/*/v/*"
+        "https://www.twitch.tv/videos/*"
       ],
       "js": [
         "util/time.js",