Compare text

Find the difference between two text files

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

Tools

ryd-js-old-yt-ui

Created about a year agoDiff never expires

16 removals

679 lines

7 additions

671 lines

// ==UserScript==

// @name Return YouTube Dislike

// @namespace https://www.returnyoutubedislike.com/

// @homepage https://www.returnyoutubedislike.com/

// @version 3.1.2

// @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

// @match *://*.youtube.com/*

// @exclude *://music.youtube.com/*

// @exclude *://*.music.youtube.com/*

// @compatible chrome

// @compatible firefox

// @compatible opera

// @compatible safari

// @compatible edge

// @downloadURL https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js

// @updateURL https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js

// @grant GM.xmlHttpRequest

// @connect youtube.com

// @grant GM_addStyle

// @run-at document-end

// ==/UserScript==

const extConfig = {

// BEGIN USER OPTIONS

// You may change the following variables to allowed values listed in the corresponding brackets (* means default). Keep the style and keywords intact.

showUpdatePopup: false, // [true, false*] Show a popup tab after extension update (See what's new)

disableVoteSubmission: false, // [true, false*] Disable like/dislike submission (Stops counting your likes and dislikes)

coloredThumbs: false, // [true, false*] Colorize thumbs (Use custom colors for thumb icons)

coloredBar: false, // [true, false*] Colorize ratio bar (Use custom colors for ratio bar)

colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan)

numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered)

numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers)

tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip.

numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)

// END USER OPTIONS

};

const LIKED_STATE = "LIKED_STATE";

const DISLIKED_STATE = "DISLIKED_STATE";

const NEUTRAL_STATE = "NEUTRAL_STATE";

let previousState = 3; //1=LIKED, 2=DISLIKED, 3=NEUTRAL

let likesvalue = 0;

let dislikesvalue = 0;

let isMobile = location.hostname == "m.youtube.com";

let isShorts = () => location.pathname.startsWith("/shorts");

let mobileDislikes = 0;

function cLog(text, subtext = "") {

subtext = subtext.trim() === "" ? "" : `(${subtext})`;

console.log(`[Return YouTube Dislikes] ${text} ${subtext}`);

}

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 getButtons() {

if (isShorts()) {

let elements = document.querySelectorAll(

isMobile

? "ytm-like-button-renderer"

: "#like-button > ytd-like-button-renderer"

);

for (let element of elements) {

if (isInViewport(element)) {

return element;

}

if (isMobile) {

return (

document.querySelector(".slim-video-action-bar-actions .segmented-buttons") ??

document.querySelector(".slim-video-action-bar-actions")

);

}

if (document.getElementById("menu-container")?.offsetParent === null) {

return (

document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div") ??

document.querySelector("ytd-menu-renderer.ytd-video-primary-info-renderer > div")

);

} else {

return document

.getElementById("menu-container")

?.querySelector("#top-level-buttons-computed");

}

function getDislikeButton() {

return getButtons().children[0].tagName ===

let segmentedDislikeButtons = document.querySelectorAll("#segmented-dislike-button");

"YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"

return segmentedDislikeButtons.length >= 2 ? segmentedDislikeButtons[1] : getButtons().children[1];

? getButtons().children[0].children[1] === undefined ? document.querySelector("#segmented-dislike-button") : getButtons().children[0].children[1]

: getButtons().children[1];

}

function getLikeButton() {

return getButtons().children[0].tagName ===

const segmentedLikeButtons = document.querySelectorAll("#segmented-like-button");

"YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"

return segmentedLikeButtons.length >= 2 ? segmentedLikeButtons[1] : getButtons().children[0].children[0];

? document.querySelector("#segmented-like-button") !== null ? document.querySelector("#segmented-like-button") : getButtons().children[0].children[0]

: getButtons().children[0];

}

function getLikeTextContainer() {

return (

getLikeButton().querySelector("#text") ??

getLikeButton().getElementsByTagName("yt-formatted-string")[0] ??

getLikeButton().querySelector("span[role='text']")

);

}

function getDislikeTextContainer() {

let result =

getDislikeButton().querySelector("#text") ??

getDislikeButton().getElementsByTagName("yt-formatted-string")[0] ??

getDislikeButton().querySelector("span[role='text']")

if (result === null) {

let textSpan = document.createElement("span");

textSpan.id = "text";

textSpan.style.marginLeft = "6px";

getDislikeButton().querySelector("button").appendChild(textSpan);

getDislikeButton().querySelector("button").style.width = "auto";

result = getDislikeButton().querySelector("#text");

}

return result;

}

let mutationObserver = new Object();

if (isShorts() && mutationObserver.exists !== true) {

cLog("initializing mutation observer");

mutationObserver.options = {

childList: false,

attributes: true,

subtree: false,

};

mutationObserver.exists = true;

mutationObserver.observer = new MutationObserver(function (

mutationList,

observer

) {

mutationList.forEach((mutation) => {

if (

mutation.type === "attributes" &&

mutation.target.nodeName === "TP-YT-PAPER-BUTTON" &&

mutation.target.id === "button"

) {

cLog("Short thumb button status changed");

if (mutation.target.getAttribute("aria-pressed") === "true") {

mutation.target.style.color =

mutation.target.parentElement.parentElement.id === "like-button"

? getColorFromTheme(true)

: getColorFromTheme(false);

} else {

mutation.target.style.color = "unset";

}

return;

}

cLog(

"unexpected mutation observer event: " + mutation.target + mutation.type

);

});

}

function isVideoLiked() {

if (isMobile) {

return (

getLikeButton().querySelector("button").getAttribute("aria-label") ==

"true"

);

}

return getLikeButton().classList.contains("style-default-active");

}

function isVideoDisliked() {

if (isMobile) {

return (

getDislikeButton().querySelector("button").getAttribute("aria-label") ==

"true"

);

}

return getDislikeButton().classList.contains("style-default-active");

}

function isVideoNotLiked() {

if (isMobile) {

return !isVideoLiked();

}

return getLikeButton().classList.contains("style-text");

}

function isVideoNotDisliked() {

if (isMobile) {

return !isVideoDisliked();

}

return getDislikeButton().classList.contains("style-text");

}

function checkForUserAvatarButton() {

if (isMobile) {

return;

}

if (document.querySelector("#avatar-btn")) {

return true;

} else {

return false;

}

function getState() {

if (isVideoLiked()) {

return LIKED_STATE;

}

if (isVideoDisliked()) {

return DISLIKED_STATE;

}

return NEUTRAL_STATE;

}

function setLikes(likesCount) {

if (isMobile) {

getButtons().children[0].querySelector(".button-renderer-text").innerText =

likesCount;

return;

}

getLikeTextContainer().innerText = likesCount;

}

function setDislikes(dislikesCount) {

if (isMobile) {

mobileDislikes = dislikesCount;

return;

}

getDislikeTextContainer()?.removeAttribute('is-empty');

getDislikeTextContainer().innerText = dislikesCount;

}

function getLikeCountFromButton() {

try {

if (isShorts()) {

//Youtube Shorts don't work with this query. It's not necessary; 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 false;

}

let likeButton = getLikeButton()

.querySelector("yt-formatted-string#text") ??

getLikeButton().querySelector("button");

let likesStr = likeButton.getAttribute("aria-label")

.replace(/\D/g, "");

return likesStr.length > 0 ? parseInt(likesStr) : false;

}

catch {

return false;

}

(typeof GM_addStyle != "undefined"

? GM_addStyle

: (styles) => {

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;

}

#return-youtube-dislike-bar {

background: var(--yt-spec-text-primary);

border-radius: 2px;

transition: all 0.15s ease-in-out;

}

.ryd-tooltip {

position: relative;

display: block;

height: 2px;

top: 9px;

}

.ryd-tooltip-bar-container {

width: 100%;

height: 2px;

position: absolute;

padding-top: 6px;

padding-bottom: 28px;

top: -6px;

left: 5px;

}

`);

function createRateBar(likes, dislikes) {

if (isMobile) {

return;

}

let rateBar = document.getElementById("return-youtube-dislike-bar-container");

const widthPx =

getButtons().children[0].clientWidth +

getButtons().children[0].clientWidth-6;

getButtons().children[1].clientWidth +

const widthPercent =

likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;

var likePercentage = parseFloat(widthPercent.toFixed(1));

const dislikePercentage = (100 - likePercentage).toLocaleString();

likePercentage = likePercentage.toLocaleString();

var tooltipInnerHTML;

switch (extConfig.tooltipPercentageMode) {

case "dash_like":

tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${likePercentage}%`;

break;

case "dash_dislike":

tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${dislikePercentage}%`;

break;

case "both":

tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`;

break;

case "only_like":

tooltipInnerHTML = `${likePercentage}%`;

break;

case "only_dislike":

tooltipInnerHTML = `${dislikePercentage}%`;

break;

default:

tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`;

}

if (!rateBar && !isMobile) {

let colorLikeStyle = "";

let colorDislikeStyle = "";

if (extConfig.coloredBar) {

colorLikeStyle = "; background-color: " + getColorFromTheme(true);

colorDislikeStyle = "; background-color: " + getColorFromTheme(false);

}

document.getElementById("menu-container").insertAdjacentHTML(

"beforeend",

<div

id="return-youtube-dislike-bar-container"

style="width: 100%; height: 2px;${colorDislikeStyle}"

<div

id="return-youtube-dislike-bar"

style="width: ${widthPercent}%; height: 100%${colorDislikeStyle}"

></div>

</div>

<tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">

${tooltipInnerHTML}

</tp-yt-paper-tooltip>

</div>

);

} else {

document.getElementById(

"return-youtube-dislike-bar-container"

).style.width = widthPx + "px";

document.getElementById("return-youtube-dislike-bar").style.width =

widthPercent + "%";

document.querySelector("#ryd-dislike-tooltip > #tooltip").innerHTML =

tooltipInnerHTML;

if (extConfig.coloredBar) {

document.getElementById(

"return-youtube-dislike-bar-container"

).style.backgroundColor = getColorFromTheme(false);

document.getElementById(

"return-youtube-dislike-bar"

).style.backgroundColor = getColorFromTheme(true);

}

function setState() {

cLog("Fetching votes...");

let statsSet = false;

fetch(

`https://returnyoutubedislikeapi.com/votes?videoId=${getVideoId()}`

).then((response) => {

response.json().then((json) => {

if (json && !("traceId" in response) && !statsSet) {

const { dislikes, likes } = json;

cLog(`Received count: ${dislikes}`);

likesvalue = likes;

dislikesvalue = dislikes;

setDislikes(numberFormat(dislikes));

if (extConfig.numberDisplayReformatLikes === true) {

const nativeLikes = getLikeCountFromButton();

if (nativeLikes !== false) {

setLikes(numberFormat(nativeLikes));

}

createRateBar(likes, dislikes);

if (extConfig.coloredThumbs === true) {

if (isShorts()) {

// for shorts, leave deactived buttons in default color

let shortLikeButton = getLikeButton().querySelector(

"tp-yt-paper-button#button"

);

let shortDislikeButton = getDislikeButton().querySelector(

"tp-yt-paper-button#button"

);

if (shortLikeButton.getAttribute("aria-pressed") === "true") {

shortLikeButton.style.color = getColorFromTheme(true);

}

if (shortDislikeButton.getAttribute("aria-pressed") === "true") {

shortDislikeButton.style.color = getColorFromTheme(false);

}

mutationObserver.observer.observe(

shortLikeButton,

mutationObserver.options

);

mutationObserver.observer.observe(

shortDislikeButton,

mutationObserver.options

);

} else {

getLikeButton().style.color = getColorFromTheme(true);

getDislikeButton().style.color = getColorFromTheme(false);

}

});

}

function likeClicked() {

if (checkForUserAvatarButton() == true) {

if (previousState == 1) {

likesvalue--;

createRateBar(likesvalue, dislikesvalue);

setDislikes(numberFormat(dislikesvalue));

previousState = 3;

} else if (previousState == 2) {

likesvalue++;

dislikesvalue--;

setDislikes(numberFormat(dislikesvalue));

createRateBar(likesvalue, dislikesvalue);

previousState = 1;

} else if (previousState == 3) {

likesvalue++;

createRateBar(likesvalue, dislikesvalue);

previousState = 1;

}

if (extConfig.numberDisplayReformatLikes === true) {

const nativeLikes = getLikeCountFromButton();

if (nativeLikes !== false) {

setLikes(numberFormat(nativeLikes));

}

function dislikeClicked() {

if (checkForUserAvatarButton() == true) {

if (previousState == 3) {

dislikesvalue++;

setDislikes(numberFormat(dislikesvalue));

createRateBar(likesvalue, dislikesvalue);

previousState = 2;

} else if (previousState == 2) {

dislikesvalue--;

setDislikes(numberFormat(dislikesvalue));

createRateBar(likesvalue, dislikesvalue);

previousState = 3;

} else if (previousState == 1) {

likesvalue--;

dislikesvalue++;

setDislikes(numberFormat(dislikesvalue));

createRateBar(likesvalue, dislikesvalue);

previousState = 2;

if (extConfig.numberDisplayReformatLikes === true) {

const nativeLikes = getLikeCountFromButton();

if (nativeLikes !== false) {

setLikes(numberFormat(nativeLikes));

}

function setInitialState() {

setState();

}

function getVideoId() {

const urlObject = new URL(window.location.href);

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 isVideoLoaded() {

if (isMobile) {

return document.getElementById("player").getAttribute("loading") == "false";

}

const videoId = getVideoId();

return (

document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null

);

}

function roundDown(num) {

if (num < 1000) return num;

const int = Math.floor(Math.log10(num) - 2);

const decimal = int + (int % 3 ? 1 : 0);

const value = Math.floor(num / 10 ** decimal);

return value * 10 ** decimal;

}

function numberFormat(numberState) {

let numberDisplay;

if (extConfig.numberDisplayRoundDown === false) {

numberDisplay = numberState;

} else {

numberDisplay = roundDown(numberState);

}

return getNumberFormatter(extConfig.numberDisplayFormat).format(

numberDisplay

);

}

function getNumberFormatter(optionSelect) {

let userLocales;

if (document.documentElement.lang) {

userLocales = document.documentElement.lang;

} else if (navigator.language) {

userLocales = navigator.language;

} else {

try {

userLocales = new URL(

Array.from(document.querySelectorAll("head > link[rel='search']"))

?.find((n) => n?.getAttribute("href")?.includes("?locale="))

?.getAttribute("href")

)?.searchParams?.get("locale");

} catch {

cLog(

"Cannot find browser locale. Use en as default for number formatting."

);

userLocales = "en";

}

let formatterNotation;

let formatterCompactDisplay;

switch (optionSelect) {

case "compactLong":

formatterNotation = "compact";

formatterCompactDisplay = "long";

break;

case "standard":

formatterNotation = "standard";

formatterCompactDisplay = "short";

break;

case "compactShort":

default:

formatterNotation = "compact";

formatterCompactDisplay = "short";

}

const formatter = Intl.NumberFormat(userLocales, {

notation: formatterNotation,

compactDisplay: formatterCompactDisplay,

});

return formatter;

}

function getColorFromTheme(voteIsLike) {

let colorString;

switch (extConfig.colorTheme) {

case "accessible":

if (voteIsLike === true) {

colorString = "dodgerblue";

} else {

colorString = "gold";

}

break;

case "neon":

if (voteIsLike === true) {

colorString = "aqua";

} else {

colorString = "magenta";

}

break;

case "classic":

default:

if (voteIsLike === true) {

colorString = "lime";

} else {

colorString = "red";

}

return colorString;

}

function setEventListeners(evt) {

let jsInitChecktimer;

function checkForJS_Finish() {

//console.log();

if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {

const buttons = getButtons();

if (!window.returnDislikeButtonlistenersSet) {

cLog("Registering button listeners...");

try {

getLikeButton().addEventListener("click", likeClicked);

getDislikeButton().addEventListener("click", dislikeClicked);

getLikeButton().addEventListener("touchstart", likeClicked);

getDislikeButton().addEventListener("touchstart", dislikeClicked);

} catch {

return;

} //Don't spam errors into the console

window.returnDislikeButtonlistenersSet = true;

}

setInitialState();

clearInterval(jsInitChecktimer);

}

cLog("Setting up...");

jsInitChecktimer = setInterval(checkForJS_Finish, 111);

}

(function () {

"use strict";

window.addEventListener("yt-navigate-finish", setEventListeners, true);

setEventListeners();

})();

if (isMobile) {

let originalPush = history.pushState;

history.pushState = function (...args) {

window.returnDislikeButtonlistenersSet = false;

setEventListeners(args[2]);

return originalPush.apply(history, args);

};

setInterval(() => {

if(getDislikeButton().querySelector(".button-renderer-text") === null){

getDislikeTextContainer().innerText = mobileDislikes;

}

else{

getDislikeButton().querySelector(".button-renderer-text").innerText =

mobileDislikes;

}

}, 1000);

}

Saved diffs

Original text

Open file

// ==UserScript==
// @name         Return YouTube Dislike
// @namespace    https://www.returnyoutubedislike.com/
// @homepage     https://www.returnyoutubedislike.com/
// @version      3.1.2
// @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
// @match        *://*.youtube.com/*
// @exclude      *://music.youtube.com/*
// @exclude      *://*.music.youtube.com/*
// @compatible   chrome
// @compatible   firefox
// @compatible   opera
// @compatible   safari
// @compatible   edge
// @downloadURL  https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js
// @updateURL    https://github.com/Anarios/return-youtube-dislike/raw/main/Extensions/UserScript/Return%20Youtube%20Dislike.user.js
// @grant        GM.xmlHttpRequest
// @connect      youtube.com
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

const extConfig = {
  // BEGIN USER OPTIONS
  // You may change the following variables to allowed values listed in the corresponding brackets (* means default). Keep the style and keywords intact.
  showUpdatePopup: false, // [true, false*] Show a popup tab after extension update (See what's new)
  disableVoteSubmission: false, // [true, false*] Disable like/dislike submission (Stops counting your likes and dislikes)
  coloredThumbs: false, // [true, false*] Colorize thumbs (Use custom colors for thumb icons)
  coloredBar: false, // [true, false*] Colorize ratio bar (Use custom colors for ratio bar)
  colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan)
  numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered)
  numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers)
  tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip.
  numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)
  // END USER OPTIONS
};

const LIKED_STATE = "LIKED_STATE";
const DISLIKED_STATE = "DISLIKED_STATE";
const NEUTRAL_STATE = "NEUTRAL_STATE";
let previousState = 3; //1=LIKED, 2=DISLIKED, 3=NEUTRAL
let likesvalue = 0;
let dislikesvalue = 0;

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 getDislikeButton() {
  return getButtons().children[0].tagName ===
  "YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"
    ? getButtons().children[0].children[1] === undefined ? document.querySelector("#segmented-dislike-button") : getButtons().children[0].children[1]
    : getButtons().children[1];
}

function getLikeButton() {
  return getButtons().children[0].tagName ===
  "YTD-SEGMENTED-LIKE-DISLIKE-BUTTON-RENDERER"
    ? document.querySelector("#segmented-like-button") !== null ? document.querySelector("#segmented-like-button") : getButtons().children[0].children[0]
    : getButtons().children[0];
}

function getLikeTextContainer() {
  return (
    getLikeButton().querySelector("#text") ??
    getLikeButton().getElementsByTagName("yt-formatted-string")[0] ??
    getLikeButton().querySelector("span[role='text']")
  );
}

function getDislikeTextContainer() {
  let result =
    getDislikeButton().querySelector("#text") ??
    getDislikeButton().getElementsByTagName("yt-formatted-string")[0] ??
    getDislikeButton().querySelector("span[role='text']")
  if (result === null) {
    let textSpan = document.createElement("span");
    textSpan.id = "text";
    textSpan.style.marginLeft = "6px";
    getDislikeButton().querySelector("button").appendChild(textSpan);
    getDislikeButton().querySelector("button").style.width = "auto";
    result = getDislikeButton().querySelector("#text");
  }
  return result;
}

let mutationObserver = new Object();

if (isShorts() && mutationObserver.exists !== true) {
  cLog("initializing mutation observer");
  mutationObserver.options = {
    childList: false,
    attributes: true,
    subtree: false,
  };
  mutationObserver.exists = true;
  mutationObserver.observer = new MutationObserver(function (
    mutationList,
    observer
  ) {
    mutationList.forEach((mutation) => {
      if (
        mutation.type === "attributes" &&
        mutation.target.nodeName === "TP-YT-PAPER-BUTTON" &&
        mutation.target.id === "button"
      ) {
        cLog("Short thumb button status changed");
        if (mutation.target.getAttribute("aria-pressed") === "true") {
          mutation.target.style.color =
            mutation.target.parentElement.parentElement.id === "like-button"
              ? getColorFromTheme(true)
              : getColorFromTheme(false);
        } else {
          mutation.target.style.color = "unset";
        }
        return;
      }
      cLog(
        "unexpected mutation observer event: " + mutation.target + mutation.type
      );
    });
  });
}

function isVideoLiked() {
  if (isMobile) {
    return (
      getLikeButton().querySelector("button").getAttribute("aria-label") ==
      "true"
    );
  }
  return getLikeButton().classList.contains("style-default-active");
}

function isVideoDisliked() {
  if (isMobile) {
    return (
      getDislikeButton().querySelector("button").getAttribute("aria-label") ==
      "true"
    );
  }
  return getDislikeButton().classList.contains("style-default-active");
}

function isVideoNotLiked() {
  if (isMobile) {
    return !isVideoLiked();
  }
  return getLikeButton().classList.contains("style-text");
}

function isVideoNotDisliked() {
  if (isMobile) {
    return !isVideoDisliked();
  }
  return getDislikeButton().classList.contains("style-text");
}

function checkForUserAvatarButton() {
  if (isMobile) {
    return;
  }
  if (document.querySelector("#avatar-btn")) {
    return true;
  } else {
    return false;
  }
}

function getState() {
  if (isVideoLiked()) {
    return LIKED_STATE;
  }
  if (isVideoDisliked()) {
    return DISLIKED_STATE;
  }
  return NEUTRAL_STATE;
}

function setLikes(likesCount) {
  if (isMobile) {
    getButtons().children[0].querySelector(".button-renderer-text").innerText =
      likesCount;
    return;
  }
  getLikeTextContainer().innerText = likesCount;
}

function setDislikes(dislikesCount) {
  if (isMobile) {
    mobileDislikes = dislikesCount;
    return;
  }
  getDislikeTextContainer()?.removeAttribute('is-empty');
  getDislikeTextContainer().innerText = dislikesCount;
}

function getLikeCountFromButton() {
  try {
    if (isShorts()) {
      //Youtube Shorts don't work with this query. It's not necessary; 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 false;
    }
    let likeButton = getLikeButton()
    .querySelector("yt-formatted-string#text") ??
    getLikeButton().querySelector("button");

let likesStr = likeButton.getAttribute("aria-label")
    .replace(/\D/g, "");
    return likesStr.length > 0 ? parseInt(likesStr) : false;
  }
  catch {
    return false;
  }

}

(typeof GM_addStyle != "undefined"
  ? GM_addStyle
  : (styles) => {
      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;
    }

#return-youtube-dislike-bar {
      background: var(--yt-spec-text-primary);
      border-radius: 2px;
      transition: all 0.15s ease-in-out;
    }

.ryd-tooltip {
      position: relative;
      display: block;
      height: 2px;
      top: 9px;
    }

.ryd-tooltip-bar-container {
      width: 100%;
      height: 2px;
      position: absolute;
      padding-top: 6px;
      padding-bottom: 28px;
      top: -6px;
    }
  `);

function createRateBar(likes, dislikes) {
  if (isMobile) {
    return;
  }
  let rateBar = document.getElementById("return-youtube-dislike-bar-container");

const widthPx =
    getButtons().children[0].clientWidth +
    getButtons().children[1].clientWidth +
    8;

const widthPercent =
    likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;

var likePercentage = parseFloat(widthPercent.toFixed(1));
  const dislikePercentage = (100 - likePercentage).toLocaleString();
  likePercentage = likePercentage.toLocaleString();

var tooltipInnerHTML;
  switch (extConfig.tooltipPercentageMode) {
    case "dash_like":
      tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${likePercentage}%`;
      break;
    case "dash_dislike":
      tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${dislikePercentage}%`;
      break;
    case "both":
      tooltipInnerHTML = `${likePercentage}%&nbsp;/&nbsp;${dislikePercentage}%`;
      break;
    case "only_like":
      tooltipInnerHTML = `${likePercentage}%`;
      break;
    case "only_dislike":
      tooltipInnerHTML = `${dislikePercentage}%`;
      break;
    default:
      tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
  }

if (!rateBar && !isMobile) {
    let colorLikeStyle = "";
    let colorDislikeStyle = "";
    if (extConfig.coloredBar) {
      colorLikeStyle = "; background-color: " + getColorFromTheme(true);
      colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
    }

document.querySelector("#ryd-dislike-tooltip > #tooltip").innerHTML =
      tooltipInnerHTML;

if (extConfig.coloredBar) {
      document.getElementById(
        "return-youtube-dislike-bar-container"
      ).style.backgroundColor = getColorFromTheme(false);
      document.getElementById(
        "return-youtube-dislike-bar"
      ).style.backgroundColor = getColorFromTheme(true);
    }
  }
}

function setState() {
  cLog("Fetching votes...");
  let statsSet = false;

fetch(
    `https://returnyoutubedislikeapi.com/votes?videoId=${getVideoId()}`
  ).then((response) => {
    response.json().then((json) => {
      if (json && !("traceId" in response) && !statsSet) {
        const { dislikes, likes } = json;
        cLog(`Received count: ${dislikes}`);
        likesvalue = likes;
        dislikesvalue = dislikes;
        setDislikes(numberFormat(dislikes));
        if (extConfig.numberDisplayReformatLikes === true) {
          const nativeLikes = getLikeCountFromButton();
          if (nativeLikes !== false) {
            setLikes(numberFormat(nativeLikes));
          }
        }
        createRateBar(likes, dislikes);
        if (extConfig.coloredThumbs === true) {
          if (isShorts()) {
            // for shorts, leave deactived buttons in default color
            let shortLikeButton = getLikeButton().querySelector(
              "tp-yt-paper-button#button"
            );
            let shortDislikeButton = getDislikeButton().querySelector(
              "tp-yt-paper-button#button"
            );
            if (shortLikeButton.getAttribute("aria-pressed") === "true") {
              shortLikeButton.style.color = getColorFromTheme(true);
            }
            if (shortDislikeButton.getAttribute("aria-pressed") === "true") {
              shortDislikeButton.style.color = getColorFromTheme(false);
            }
            mutationObserver.observer.observe(
              shortLikeButton,
              mutationObserver.options
            );
            mutationObserver.observer.observe(
              shortDislikeButton,
              mutationObserver.options
            );
          } else {
            getLikeButton().style.color = getColorFromTheme(true);
            getDislikeButton().style.color = getColorFromTheme(false);
          }
        }
      }
    });
  });
}

function setInitialState() {
  setState();
}

function isVideoLoaded() {
  if (isMobile) {
    return document.getElementById("player").getAttribute("loading") == "false";
  }
  const videoId = getVideoId();

return (
    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
  );
}

function roundDown(num) {
  if (num < 1000) return num;
  const int = Math.floor(Math.log10(num) - 2);
  const decimal = int + (int % 3 ? 1 : 0);
  const value = Math.floor(num / 10 ** decimal);
  return value * 10 ** decimal;
}

let formatterNotation;
  let formatterCompactDisplay;
  switch (optionSelect) {
    case "compactLong":
      formatterNotation = "compact";
      formatterCompactDisplay = "long";
      break;
    case "standard":
      formatterNotation = "standard";
      formatterCompactDisplay = "short";
      break;
    case "compactShort":
    default:
      formatterNotation = "compact";
      formatterCompactDisplay = "short";
  }

const formatter = Intl.NumberFormat(userLocales, {
    notation: formatterNotation,
    compactDisplay: formatterCompactDisplay,
  });
  return formatter;
}

function setEventListeners(evt) {
  let jsInitChecktimer;

function checkForJS_Finish() {
    //console.log();
    if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {
      const buttons = getButtons();

if (!window.returnDislikeButtonlistenersSet) {
        cLog("Registering button listeners...");
        try {
          getLikeButton().addEventListener("click", likeClicked);
          getDislikeButton().addEventListener("click", dislikeClicked);
          getLikeButton().addEventListener("touchstart", likeClicked);
          getDislikeButton().addEventListener("touchstart", dislikeClicked);
        } catch {
          return;
        } //Don't spam errors into the console
        window.returnDislikeButtonlistenersSet = true;
      }
      setInitialState();
      clearInterval(jsInitChecktimer);
    }
  }

cLog("Setting up...");
  jsInitChecktimer = setInterval(checkForJS_Finish, 111);
}

Changed text

Open file

let mutationObserver = new Object();

function isVideoNotLiked() {
  if (isMobile) {
    return !isVideoLiked();
  }
  return getLikeButton().classList.contains("style-text");
}

function isVideoNotDisliked() {
  if (isMobile) {
    return !isVideoDisliked();
  }
  return getDislikeButton().classList.contains("style-text");
}

function checkForUserAvatarButton() {
  if (isMobile) {
    return;
  }
  if (document.querySelector("#avatar-btn")) {
    return true;
  } else {
    return false;
  }
}

function getState() {
  if (isVideoLiked()) {
    return LIKED_STATE;
  }
  if (isVideoDisliked()) {
    return DISLIKED_STATE;
  }
  return NEUTRAL_STATE;
}

let likesStr = likeButton.getAttribute("aria-label")
    .replace(/\D/g, "");
    return likesStr.length > 0 ? parseInt(likesStr) : false;
  }
  catch {
    return false;
  }

}

#return-youtube-dislike-bar {
      background: var(--yt-spec-text-primary);
      border-radius: 2px;
      transition: all 0.15s ease-in-out;
    }

.ryd-tooltip {
      position: relative;
      display: block;
      height: 2px;
      top: 9px;
    }

.ryd-tooltip-bar-container {
      width: 100%;
      height: 2px;
      position: absolute;
      padding-top: 6px;
      padding-bottom: 28px;
      left: 5px;
    }
  `);

function createRateBar(likes, dislikes) {
  if (isMobile) {
    return;
  }
  let rateBar = document.getElementById("return-youtube-dislike-bar-container");

const widthPx =
    getButtons().children[0].clientWidth-6;

const widthPercent =
    likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;

var likePercentage = parseFloat(widthPercent.toFixed(1));
  const dislikePercentage = (100 - likePercentage).toLocaleString();
  likePercentage = likePercentage.toLocaleString();

document.querySelector("#ryd-dislike-tooltip > #tooltip").innerHTML =
      tooltipInnerHTML;

function setState() {
  cLog("Fetching votes...");
  let statsSet = false;

function setInitialState() {
  setState();
}

function isVideoLoaded() {
  if (isMobile) {
    return document.getElementById("player").getAttribute("loading") == "false";
  }
  const videoId = getVideoId();

return (
    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
  );
}

const formatter = Intl.NumberFormat(userLocales, {
    notation: formatterNotation,
    compactDisplay: formatterCompactDisplay,
  });
  return formatter;
}

function setEventListeners(evt) {
  let jsInitChecktimer;

function checkForJS_Finish() {
    //console.log();
    if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {
      const buttons = getButtons();

cLog("Setting up...");
  jsInitChecktimer = setInterval(checkForJS_Finish, 111);
}