Compare text

Find the difference between two text files

Real-time editor

Hide unchanged lines

Disable line wrap

Layout

Diff precision

Syntax highlighting

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

ryd-js-old-yt-ui

Created 3 years agoDiff never expires

21 removals

Lines
Total
Removed

Characters
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

679 lines

14 additions

Lines
Total
Added

Characters
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

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);
}