// ==UserScript== // @name Return YouTube Dislike // @namespace https://www.returnyoutubedislike.com/ // @homepage https://www.returnyoutubedislike.com/ // @version 3.0.1 // @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 ( 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"); } if (document.getElementById("menu-container")?.offsetParent === null) { return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div"); } else { return document .getElementById("menu-container") ?.querySelector("#top-level-buttons-computed"); } } function getLikeButton() { return getButtons().children[0]; } function getDislikeButton() { return getButtons().children[1]; } 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; } getButtons().children[0].querySelector("#text").innerText = likesCount; } function setDislikes(dislikesCount) { if (isMobile) { mobileDislikes = dislikesCount; return; } getButtons().children[1].querySelector("#text").innerText = 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 false; } let likesStr = getLikeButton() .querySelector("yt-formatted-string#text") .getAttribute("aria-label") .replace(/\D/g, ""); return likesStr.length > 0 ? parseInt(likesStr) : 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()} / ${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", `