feat(queue): hide twitch recommended videos if queued video is next

Author: fent

content/shared.js

@@ -8,10 +8,9 @@ chrome.runtime.sendMessage({ started: true }, {}, (response) => {
 
 // Element may not be available right away when the page loads.
 window.getElement = (selector, callback) => {
-  const search = () => document.querySelector(selector);
   let maxAttempts = 10;
   let iid = setInterval(() => {
-    const $el = search();
+    const $el = document.querySelector(selector);
     if ($el || --maxAttempts === 0) {
       clearInterval(iid);
     }
@@ -21,12 +20,13 @@ window.getElement = (selector, callback) => {
   }, 1000);
 };
 
+// Adds a Next Video button next to the Play/Pause button of the video player.
 window.setNextButton = ($playButton, buttonClass) => {
   // Prepend all class names with app name to avoid collisions.
   let $thumbnail, $length, $title;
-  const $nextButton = m('a.veefeed-next-button.' + buttonClass, {
+  const $nextButton = m('a._veefeed-next-button.' + buttonClass, {
     onclick: (e) => {
-      if ($nextButton.classList.contains('veefeed-show')) {
+      if ($nextButton.classList.contains('_veefeed-show')) {
         window.location = $nextButton.href;
       }
       e.preventDefault();
@@ -41,14 +41,14 @@ window.setNextButton = ($playButton, buttonClass) => {
     }, m('path', {
       d: 'M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z',
     })),
-    m('div.veefeed-next-video', [
-      m('div.veefeed-left-side', [
+    m('div._veefeed-next-video', [
+      m('div._veefeed-left-side', [
         $thumbnail = m('img'),
-        $length = m('span.veefeed-length'),
+        $length = m('span._veefeed-length'),
       ]),
-      m('div.veefeed-right-side', [
-        m('div.veefeed-title-head', 'NEXT'),
-        $title = m('div.veefeed-title'),
+      m('div._veefeed-right-side', [
+        m('div._veefeed-title-head', 'NEXT'),
+        $title = m('div._veefeed-title'),
       ]),
     ]),
   ]);
@@ -59,13 +59,14 @@ window.setNextButton = ($playButton, buttonClass) => {
   const onQueueUpdate = (video) => {
     if (video) {
       $nextButton.href = video.url;
-      $nextButton.classList.add('veefeed-show');
+      $nextButton.classList.add('_veefeed-show');
       $thumbnail.src = video.thumbnail;
       $length.textContent = formatVideoLength(video.length);
       $title.textContent = video.title;
     } else {
-      $nextButton.classList.remove('veefeed-show');
+      $nextButton.classList.remove('_veefeed-show');
     }
+    queuedVideo = video;
   };
 
   chrome.runtime.onMessage.addListener((message) => {
@@ -78,3 +79,14 @@ window.setNextButton = ($playButton, buttonClass) => {
 
   return $nextButton;
 };
+
+// Called when the video has ended.
+// Lets the background page know, in case there is a queued video.
+window.videoEnded = (msg) => {
+  document.body.classList.add('_veefeed-ended');
+  document.body.classList.toggle('_veefeed-queued-video', !!queuedVideo);
+  chrome.runtime.sendMessage({
+    ended: true,
+    ...msg,
+  });
+};

content/style.css

@@ -1,6 +1,6 @@
 /* Since the original website's button classes are used to help style
  * the next button, some of these properties need to be set as `!important` */
-.veefeed-next-button {
+._veefeed-next-button {
   position: relative;
   width: 0 !important;
   visibility: hidden;
@@ -11,31 +11,31 @@
 }
 
 /* Make the button bigger on Twitch */
-.qa-controls-bottom .veefeed-next-button {
+.qa-controls-bottom ._veefeed-next-button {
   margin-left: 4px;
 }
 
-.qa-controls-bottom .veefeed-next-button svg path {
+.qa-controls-bottom ._veefeed-next-button svg path {
   transform: scale(1.35) translate(-5px, -5px)
 }
 
-.veefeed-next-button.veefeed-show {
+._veefeed-next-button._veefeed-show {
   width: 3em !important;
   visibility: visible;
   transition: width 200ms;
 }
 
 /* Hide YouTube's own Next Video button when veefeed's is shown. */
-.veefeed-next-button + .ytp-next-button {
+._veefeed-next-button + .ytp-next-button {
   transition: width 200ms, visibility 200ms step-end;
 }
 
-.veefeed-next-button.veefeed-show + .ytp-next-button {
+._veefeed-next-button._veefeed-show + .ytp-next-button {
   width: 0;
   visibility: none;
 }
 
-.veefeed-next-button svg {
+._veefeed-next-button svg {
   position: absolute;
   top: 0;
   left: 0;
@@ -44,7 +44,7 @@
   fill: #fff;
 }
 
-.veefeed-next-video {
+._veefeed-next-video {
   position: absolute;
   left: -3em;
   bottom: calc(4em + 5px);
@@ -61,21 +61,21 @@
   color: rgba(238, 238, 238);
 }
 
-.qa-controls-bottom .veefeed-next-video {
+.qa-controls-bottom ._veefeed-next-video {
   bottom: calc(4em + 30px);
 }
 
-.veefeed-next-video .veefeed-left-side {
+._veefeed-next-video ._veefeed-left-side {
   position: relative;
 }
 
-.veefeed-next-video .veefeed-left-side img {
+._veefeed-next-video ._veefeed-left-side img {
   width: 160px;
   min-width: 160px;
   height: 90px;
 }
 
-.veefeed-next-video .veefeed-left-side .veefeed-length {
+._veefeed-next-video ._veefeed-left-side ._veefeed-length {
   position: absolute;
   bottom: 3px;
   right: 3px;
@@ -86,27 +86,31 @@
   vertical-align: top;
 }
 
-.veefeed-next-video .veefeed-right-side {
+._veefeed-next-video ._veefeed-right-side {
   padding: 4px 9px;
 }
 
-.veefeed-next-video .veefeed-right-side .veefeed-title-head {
+._veefeed-next-video ._veefeed-right-side ._veefeed-title-head {
   color: rgba(170, 170, 170) !important;
 }
 
-.veefeed-next-video .veefeed-right-side .veefeed-title {
+._veefeed-next-video ._veefeed-right-side ._veefeed-title {
   color: rgba(238, 238, 238) !important;
 }
 
-.player[data-ended="true"] .veefeed-next-button path,
-.ytp-play-button[title="Replay"] + .veefeed-next-button path {
+body._veefeed-ended ._veefeed-next-button path,
+.ytp-play-button[title="Replay"] + ._veefeed-next-button path {
   stroke: #6294df;
   fill: #6294df;
 }
 
-.veefeed-next-button:hover .veefeed-next-video,
-.player[data-ended="true"] .veefeed-next-video,
-.ytp-play-button[title="Replay"] + .veefeed-next-button .veefeed-next-video {
+._veefeed-next-button:hover ._veefeed-next-video,
+body._veefeed-ended ._veefeed-next-video,
+.ytp-play-button[title="Replay"] + ._veefeed-next-button ._veefeed-next-video {
   display: flex;
   border: 1px solid #6294df;
 }
+
+body._veefeed-queued-video .recommendations-overlay {
+  display: none;
+}

content/twitch.js

@@ -1,7 +1,7 @@
-/* global chrome, getElement, setNextButton  */
+/* global chrome, getElement, setNextButton, videoEnded  */
 
 // Wait for player to load.
-getElement('.player', ($player) => {
+getElement('.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) => {
@@ -18,12 +18,10 @@ getElement('.player', ($player) => {
     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,
+      videoEnded({
         scrollTop: $tip.getAttribute('data-tip') === 'Exit Theatre Mode'
           ? 0 : $scroll.scrollTop,
       });

content/youtube.js

@@ -1,15 +1,12 @@
-/* global chrome, getElement, setNextButton */
+/* global chrome, getElement, setNextButton, videoEnded */
 
 getElement('.ytp-play-button', ($playButton) => {
   const observer = new MutationObserver(() => {
     // if the video has ended, the play button will change to a
     // swirly replay arrow.
     if ($playButton.getAttribute('title') === 'Replay') {
       observer.disconnect();
-      chrome.runtime.sendMessage({
-        ended: true,
-        scrollTop: document.body.scrollTop,
-      });
+      videoEnded({ scrollTop: document.body.scrollTop });
     }
   });
   observer.observe($playButton, { attributes: true });