fix: Add dislikes to YouTube shorts with comments box open

Extensions/UserScript/Return Youtube Dislike.user.js

@@ -6,7 +6,7 @@
 // @encoding utf-8
 // @description Return of the YouTube Dislike, Based off https://www.returnyoutubedislike.com/
 // @icon https://github.com/Anarios/return-youtube-dislike/raw/main/Icons/Return%20Youtube%20Dislike%20-%20Transparent.png
-// @author Anarios & JRWR
+// @author Anarios & JRWR & Ethan
 // @match *://*.youtube.com/*
 // @exclude *://music.youtube.com/*
 // @exclude *://*.music.youtube.com/*
@@ -136,7 +136,7 @@ function getLikeButton() {
  ? document.querySelector("#segmented-like-button")
  : getButtons().children[0].children[0]
  : getButtons().querySelector("like-button-view-model") ??
-  getButtons().children[0];
+ getButtons().children[0];
 }
 
 function getLikeTextContainer() {
@@ -206,14 +206,43 @@ if (isShorts() && !shortsObserver) {
  }
  cLog(
  "Unexpected mutation observer event: " +
-  mutation.target +
-  mutation.type,
+ mutation.target +
+ mutation.type,
  );
  });
  },
  );
 }
 
+let dislikeObserver = null;
+
+function createDislikeObserver() {
+ if (!dislikeObserver) {
+ dislikeObserver = createObserver(
+ {
+ attributes: true,
+ subtree: true,
+ childList: true,
+ subtree: true,
+ characterData: true
+ },
+ (updateDOMDislikes),
+ );
+ dislikeObserver.container = null;
+ }
+
+ const dislikeButtonContainer = getDislikeTextContainer();
+ if (
+ dislikeButtonContainer &&
+ dislikeObserver.container != dislikeButtonContainer
+ ) {
+ cLog("Initializing dislike mutation observer");
+ dislikeObserver.disconnect();
+ dislikeObserver.observe(dislikeButtonContainer);
+ dislikeObserver.container = dislikeButtonContainer;
+ }
+}
+
 function isVideoLiked() {
  if (isMobile) {
  return (
@@ -279,6 +308,10 @@ function setLikes(likesCount) {
 }
 
 function setDislikes(dislikesCount) {
+ if (getDislikeTextContainer()?.innerText === dislikesCount) {
+ return;
+ }
+
  if (isMobile) {
  mobileDislikes = dislikesCount;
  return;
@@ -308,11 +341,11 @@ function getLikeCountFromButton() {
 (typeof GM_addStyle != "undefined"
  ? GM_addStyle
  : (styles) => {
-  let styleNode = document.createElement("style");
-  styleNode.type = "text/css";
-  styleNode.innerText = styles;
-  document.head.appendChild(styleNode);
-  })(`
+ let styleNode = document.createElement("style");
+ styleNode.type = "text/css";
+ styleNode.innerText = styles;
+ document.head.appendChild(styleNode);
+ })(`
  #return-youtube-dislike-bar-container {
  background: var(--yt-spec-icon-disabled);
  border-radius: 2px;
@@ -717,6 +750,11 @@ function setEventListeners(evt) {
  clearInterval(jsInitChecktimer);
  }
  }
+
+
+ if (isShorts() && !isMobile && getButtons()?.offsetParent) {
+ createDislikeObserver();
+ }
  }
 
  cLog("Setting up...");

Extensions/combined/ryd.content-script.js

@@ -2,13 +2,14 @@
 import { getButtons } from "./src/buttons";
 
 //--- Import State Functions ---//
-import { isShorts, setInitialState, initExtConfig } from "./src/state";
+import { isShorts, isMobile, setInitialState, initExtConfig } from "./src/state";
 
 //--- Import Video & Browser Functions ---//
 import { getBrowser, isVideoLoaded, cLog } from "./src/utils";
 import {
  addLikeDislikeEventListener,
  createSmartimationObserver,
+ createDislikeObserver,
  storageChangeHandler,
 } from "./src/events";
 
@@ -29,6 +30,10 @@ async function setEventListeners(evt) {
  isSetInitialStateDone = true;
  getBrowser().storage.onChanged.addListener(storageChangeHandler);
  }
+
+ if (isShorts() && !isMobile() && getButtons()?.offsetParent) {
+ createDislikeObserver();
+ }
  } catch (exception) {
  if (!isSetInitialStateDone) {
  cLog("error");

Extensions/combined/src/events.js

@@ -9,6 +9,7 @@ import {
  checkForSignInButton,
  getButtons,
  getDislikeButton,
+ getDislikeTextContainer,
  getLikeButton,
 } from "./buttons";
 import {
@@ -134,6 +135,35 @@ function createSmartimationObserver() {
  }
 }
 
+let dislikeObserver = null;
+
+function createDislikeObserver() {
+ if (!dislikeObserver) {
+ dislikeObserver = createObserver(
+ {
+ attributes: true,
+ subtree: true,
+ childList: true,
+ subtree: true,
+ characterData: true
+ },
+ (updateDOMDislikes),
+ );
+ dislikeObserver.container = null;
+ }
+
+ const dislikeButtonContainer = getDislikeTextContainer();
+ if (
+ dislikeButtonContainer &&
+ dislikeObserver.container != dislikeButtonContainer
+ ) {
+ cLog("Initializing dislike mutation observer");
+ dislikeObserver.disconnect();
+ dislikeObserver.observe(dislikeButtonContainer);
+ dislikeObserver.container = dislikeButtonContainer;
+ }
+}
+
 function storageChangeHandler(changes, area) {
  if (changes.disableVoteSubmission !== undefined) {
  handleDisableVoteSubmissionChangeEvent(
@@ -190,5 +220,6 @@ export {
  dislikeClicked,
  addLikeDislikeEventListener,
  createSmartimationObserver,
+ createDislikeObserver,
  storageChangeHandler,
 };

Extensions/combined/src/state.js

@@ -111,8 +111,8 @@ if (isShorts() && !shortsObserver) {
  }
  cLog(
  "Unexpected mutation observer event: " +
-  mutation.target +
-  mutation.type,
+ mutation.target +
+ mutation.type,
  );
  });
  },
@@ -139,7 +139,7 @@ function isVideoLiked() {
  return (
  getLikeButton().classList.contains("style-default-active") ||
  getLikeButton().querySelector("button")?.getAttribute("aria-pressed") ===
-  "true"
+ "true"
  );
 }
 
@@ -153,7 +153,7 @@ function isVideoDisliked() {
  return (
  getDislikeButton().classList.contains("style-default-active") ||
  getDislikeButton().querySelector("button")?.getAttribute("aria-pressed") ===
-  "true"
+ "true"
  );
 }
 
@@ -175,6 +175,11 @@ function setLikes(likesCount) {
 
 function setDislikes(dislikesCount) {
  cLog(`SET dislikes ${dislikesCount}`);
+
+ if (getDislikeTextContainer()?.innerText === dislikesCount) {
+ return;
+ }
+
  getDislikeTextContainer()?.removeAttribute("is-empty");
  if (!isLikesDisabled()) {
  if (isMobile()) {
@@ -317,7 +322,7 @@ async function initializeSelectors() {
  },
  })
  .then((response) => response.json())
- .catch((error) => {});
+ .catch((error) => { });
  extConfig.selectors = result ?? extConfig.selectors;
  console.log(result);
 }