yotube dislike - WIP

Author: hoang.tran12

scripts/_test.js

@@ -153,9 +153,6 @@ export default {
     // onDocumentStart: () => {
     //   window.stop();
     // },
-    onClick() {
-      console.log(UfsGlobal.DOM.getMousePos());
-    },
     _onClick: () => {
       function formatSize(size, fixed = 0) {
         size = Number(size);
@@ -243,7 +240,7 @@ export default {
       analyzeWebpage();
     },
     // render video in document.title
-    _onClick: () => {
+    onClick: () => {
       let video = document.querySelector("video");
 
       if (!video) {

scripts/background-scripts/background_script.js

@@ -405,6 +405,8 @@ function main() {
   });
 
   chrome.runtime.onInstalled.addListener(async function (reason) {
+    // reasons: browser_update / chrome_update / update / install
+
     if (utils.hasUserId()) {
       await trackEvent("ufs-RE-INSTALLED");
     }

scripts/youtube_viewDislikes.js

@@ -11,42 +11,99 @@ export default {
   whiteList: ["*://*.youtube.com/*"],
 
   pageScript: {
-    onClick: async function () {
-      // Source code extracted from https://chrome.google.com/webstore/detail/return-youtube-dislike/gebbhagfogifgggkldgodflihgfeippi
+    onDocumentStart: () => {
+      // youtube watch
+      document.querySelector("dislike-button-view-model");
 
-      function getVideoId(url) {
-        const urlObject = new URL(url);
-        const pathname = urlObject.pathname;
-        if (pathname.startsWith("/clip")) {
-          return document.querySelector("meta[itemprop='videoId']").content;
-        } else {
-          if (pathname.startsWith("/shorts")) {
-            return pathname.slice(8);
-          }
-          return urlObject.searchParams.get("v");
-        }
-      }
+      // youtube shorts
+      document.querySelector("ytd-toggle-button-renderer#dislike-button");
+    },
 
-      const apiUrl = "https://returnyoutubedislikeapi.com";
+    onClick: async function () {
       let videoId = getVideoId(location.href);
-      let response = await fetch(
-        `${apiUrl}/votes?videoId=${videoId}&likeCount=`,
-        {
-          method: "GET",
-          headers: {
-            Accept: "application/json",
-          },
-        }
-      )
-        .then((response) => {
-          if (!response.ok) alert("Error: " + response.error);
-          return response;
-        })
-        .then((response) => response.json())
-        .catch((e) => alert("ERROR: " + e));
-
-      console.log(response);
-      alert("Youtube Dislikes:\n" + JSON.stringify(response, null, 4));
+      getDislikeData(videoId).then((response) => {
+        console.log(response);
+        alert("Youtube Dislikes:\n" + JSON.stringify(response, null, 4));
+      });
     },
   },
 };
+
+// Source code extracted from https://chrome.google.com/webstore/detail/return-youtube-dislike/gebbhagfogifgggkldgodflihgfeippi
+async function getDislikeData(videoId) {
+  const apiUrl = "https://returnyoutubedislikeapi.com";
+  try {
+    const response = await fetch(
+      `${apiUrl}/votes?videoId=${videoId}&likeCount=`,
+      {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      }
+    );
+    if (!response.ok) alert("Error: " + response.error);
+    const response_1 = response;
+    return await response_1.json();
+  } catch (e) {
+    return alert("ERROR: " + e);
+  }
+}
+
+function getVideoId(url) {
+  const urlObject = new URL(url);
+  const pathname = urlObject.pathname;
+  if (pathname.startsWith("/clip")) {
+    return document.querySelector("meta[itemprop='videoId']").content;
+  } else {
+    if (pathname.startsWith("/shorts")) {
+      return pathname.slice(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 (
+    // When short (channel) is ignored, the element (like/dislike AND short itself) is
+    // hidden with a 0 DOMRect. In this case, consider it outside of Viewport
+    !(rect.top == 0 && rect.left == 0 && rect.bottom == 0 && rect.right == 0) &&
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= height &&
+    rect.right <= width
+  );
+}
+function isVideoLoaded() {
+  const videoId = getVideoId(window.location.href);
+  return (
+    // desktop: spring 2024 UI
+    document.querySelector(`ytd-watch-grid[video-id='${videoId}']`) !== null ||
+    // desktop: older UI
+    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null ||
+    // mobile: no video-id attribute
+    document.querySelector('#player[loading="false"]:not([hidden])') !== null
+  );
+}
+function createObserver(options, callback) {
+  const observerWrapper = new Object();
+  observerWrapper.options = options;
+  observerWrapper.observer = new MutationObserver(callback);
+  observerWrapper.observe = function (element) {
+    this.observer.observe(element, this.options);
+  };
+  observerWrapper.disconnect = function () {
+    this.observer.disconnect();
+  };
+  return observerWrapper;
+}
+
+function isShorts() {
+  return location.pathname.startsWith("/shorts");
+}
+function isNewDesign() {
+  return document.getElementById("comment-teaser") !== null;
+}