Extensions: Supports YouTube Shorts

5 files changed, 43 insertions, 4 deletions

diff --git a/Extensions/combined/ryd.content-script.js b/Extensions/combined/ryd.content-script.js
index 880d25c..8b34ed6 100644
--- a/Extensions/combined/ryd.content-script.js
+++ b/Extensions/combined/ryd.content-script.js
@@ -9,6 +9,7 @@ import {
 //---   Import State Functions   ---//
 import {
   isMobile,
+  isShorts,
   isVideoDisliked,
   isVideoLiked,
   getState,
@@ -35,7 +36,7 @@ let jsInitChecktimer = null;
 
 function setEventListeners(evt) {
   function checkForJS_Finish() {
-    if (getButtons()?.offsetParent && isVideoLoaded()) {
+    if (isShorts() || getButtons()?.offsetParent && isVideoLoaded()) {
       clearInterval(jsInitChecktimer);
       jsInitChecktimer = null;
       addLikeDislikeEventListener();
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index 790cfef..cbdaa26 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,5 +1,5 @@
 import { getButtons } from "./buttons";
-import { likesDisabledState } from "./state";
+import { isMobile, likesDisabledState } from "./state";
 import { cLog } from "./utils";
 
 function createRateBar(likes, dislikes) {
diff --git a/Extensions/combined/src/buttons.js b/Extensions/combined/src/buttons.js
index 18c707a..d8267bc 100644
--- a/Extensions/combined/src/buttons.js
+++ b/Extensions/combined/src/buttons.js
@@ -1,6 +1,19 @@
-import { isMobile } from "./state";
+import { isMobile, isShorts } from "./state";
+import { isInViewport } from "./utils";
 
 function getButtons() {
+  //---   If Watching Youtube Shorts:   ---//
+  if(isShorts()) {
+    let elements=document.querySelectorAll("#like-button > ytd-like-button-renderer")
+    for(let element of elements) {
+      //Youtube Shorts can have multiple like/dislike buttons when scrolling through videos
+      //However, only one of them should be visible (no matter how you zoom)
+      if(isInViewport(element)) {
+        return element;
+      }
+    }
+  }
+  //---   If Watching On Mobile:   ---//
   if (isMobile()) {
     return document.querySelector(".slim-video-action-bar-actions");
   }
diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index e2aaabb..47cf477 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -27,6 +27,10 @@ function isMobile() {
   return location.hostname == "m.youtube.com";
 }
 
+function isShorts() {
+  return location.pathname.startsWith("/shorts")
+}
+
 function isVideoLiked() {
   if (isMobile()) {
     return (
@@ -85,6 +89,11 @@ function setDislikes(dislikesCount) {
 }
 
 function getLikeCountFromButton() {
+  if(isShorts()) {
+    //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results.
+    //It should be possible to fix this function, but it's not critical to showing the dislike count.
+    return 0;
+  }
   let likesStr = getLikeButton()
     .querySelector("button")
     .getAttribute("aria-label")
@@ -156,6 +165,7 @@ function initializeDisableVoteSubmission() {
 
 export {
   isMobile,
+  isShorts,
   isVideoDisliked,
   isVideoLiked,
   getState,
diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js
index e1c6dbe..452861d 100644
--- a/Extensions/combined/src/utils.js
+++ b/Extensions/combined/src/utils.js
@@ -45,10 +45,25 @@ function getVideoId(url) {
   if (pathname.startsWith("/clip")) {
     return document.querySelector("meta[itemprop='videoId']").content;
   } else {
+    if (pathname.startsWith("/shorts")) {
+      return pathname.substr(8);
+    }
     return urlObject.searchParams.get("v");
   }
 }
 
+function isInViewport(element) {
+  const rect = element.getBoundingClientRect();
+  const height = innerHeight || document.documentElement.clientHeight;
+  const width = innerWidth || document.documentElement.clientWidth;
+  return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= height &&
+      rect.right <= width
+  );
+}
+
 function isVideoLoaded() {
   const videoId = getVideoId(window.location.href);
   return (
@@ -67,4 +82,4 @@ function cLog(message, writer) {
   }
 }
 
-export { numberFormat, getBrowser, getVideoId, isVideoLoaded, cLog }
\ No newline at end of file
+export { numberFormat, getBrowser, getVideoId, isInViewport, isVideoLoaded, cLog }