Desktop-only fork of Return YouTube Dislike. Adds Shorts SPA support, visual like/dislike ratio bar, and a class-based architecture.
// ==UserScript==
// @name Return YouTube Dislike (PC Only)
// @name:ja Return YouTube Dislike（PC専用改良版）
// @namespace https://github.com/koyasi777/return-youtube-dislike-pc-only
// @homepage https://github.com/koyasi777/return-youtube-dislike-pc-only
// @version 4.1.0
// @encoding utf-8
// @description Desktop-only fork of Return YouTube Dislike. Adds Shorts SPA support, visual like/dislike ratio bar, and a class-based architecture.
// @description:ja デスクトップ専用に改良した Return YouTube Dislike。Shorts対応、評価バー表示、クラスベース設計を追加。
// @icon https://github.com/Anarios/return-youtube-dislike/raw/main/Icons/Return%20Youtube%20Dislike%20-%20Transparent.png
// @author Anarios & JRWR (original), koyasi777 (mod)
// @license AGPL-3.0-only
// @licenseURL https://www.gnu.org/licenses/agpl-3.0.html
// @match *://*.youtube.com/*
// @exclude *://music.youtube.com/*
// @exclude *://*.music.youtube.com/*
// @compatible chrome
// @compatible firefox
// @compatible opera
// @compatible safari
// @compatible edge
// @grant GM.xmlHttpRequest
// @grant GM_addStyle
// @connect youtube.com
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
class ReturnYouTubeDislike {
// --- Static Properties ---
static config = { disableLogging: true, coloredThumbs: false, coloredBar: false, colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, tooltipPercentageMode: "none", numberDisplayReformatLikes: false, rateBarEnabled: true };
static API_URL = 'https://returnyoutubedislikeapi.com/votes?videoId=';
static VOTE_STATE = { LIKED: 1, DISLIKED: 2, NEUTRAL: 3 };
static STYLES = `
#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: absolute; display: block; height: 1.5px; bottom: -10px; }
#ryd-dislike-tooltip { visibility: hidden; opacity: 0; transition: opacity 0.15s ease-in-out; background-color: #616161; color: #fff; padding: 8px; border-radius: 2px; font-size: 12px; text-align: center; white-space: nowrap; }
.ryd-tooltip:hover #ryd-dislike-tooltip { visibility: visible; opacity: 1; }
.ryd-tooltip-bar-container { width: 100%; height: 2px; position: absolute; padding-top: 6px; padding-bottom: 12px; top: -6px; }
ytd-menu-renderer.ytd-watch-metadata { overflow-y: visible !important; }
#top-level-buttons-computed { position: relative !important; }
#ryd-shorts-dislike-text { color: var(--yt-spec-text-primary); font-family: "Roboto", "Arial", sans-serif; font-size: 12px; font-weight: 500; text-align: center; margin-top: 4px; }
`;
// --- Instance Properties ---
videoId = null;
likes = 0;
dislikes = 0;
previousState = ReturnYouTubeDislike.VOTE_STATE.NEUTRAL;
domCache = {};
initInterval = null;
rateBarObserver = null;
debouncedUpdateRateBar = null;
constructor() {
this.log('Instance created.');
this.injectStyles();
this.debouncedUpdateRateBar = this.debounce(() => this.createOrUpdateRateBar(), 150);
window.addEventListener('yt-navigate-finish', () => this.run(), true);
this.run();
}
run() {
if (this.initInterval) clearInterval(this.initInterval);
this.initInterval = setInterval(() => this.checkForDOMReady(), 100);
}
checkForDOMReady() {
const currentVideoId = this.getVideoId();
if (!currentVideoId || (currentVideoId === this.videoId && this.domCache.buttons)) return;
if (!currentVideoId && this.videoId) { this.cleanup(); return; }
const buttons = this.getButtons();
if (buttons?.offsetParent && (this.isShorts() || this.isRegularVideoLoaded())) {
this.log('DOM is ready. Initializing main logic.');
clearInterval(this.initInterval);
this.initInterval = null;
this.cleanup();
this.main(currentVideoId, buttons);
}
}
async main(videoId, buttons) {
this.videoId = videoId;
this.log(`Processing video ID: ${this.videoId}`);
if (!this.cacheDomElements(buttons)) { this.logError('Required DOM elements not found. Aborting.'); return; }
try {
const data = await this.fetchVotes();
this.dislikes = data.dislikes;
this.likes = this.getNativeLikeCount() ?? data.likes;
this.log(`Using like count: ${this.likes}`);
this.previousState = this.getInitialVoteState();
this.updateUI();
this.setupEventListeners();
this.setupRateBarObserver();
} catch (error) {
this.logError('Failed to fetch or process votes.', error);
}
}
cleanup() {
this.log('Cleaning up previous instance.');
if (this.initInterval) clearInterval(this.initInterval);
if (this.rateBarObserver) this.rateBarObserver.disconnect();
this.initInterval = null;
this.rateBarObserver = null;
this.domCache = {};
this.videoId = null;
}
setupRateBarObserver() {
if (!ReturnYouTubeDislike.config.rateBarEnabled || this.isShorts() || !this.domCache.buttons) return;
this.rateBarObserver = new MutationObserver(() => {
this.log('Button container changed. Debouncing rate bar update.');
this.debouncedUpdateRateBar();
});
this.rateBarObserver.observe(this.domCache.buttons, { childList: true, subtree: true, attributes: true });
}
/**
* 🚀 [修正] 永続オブザーバーと自己再試行ポーリングを組み合わせたハイブリッド方式
*/
createOrUpdateRateBar(retryCount = 0) {
const { buttons, likeButton, dislikeButton } = this.domCache;
if (!buttons || this.isShorts() || !likeButton || !dislikeButton) return;
const likeButtonWidth = likeButton.clientWidth;
const dislikeButtonWidth = dislikeButton.clientWidth;
const totalWidth = likeButtonWidth + dislikeButtonWidth;
// 起動時の描画タイミング問題に対応するため、自己再試行ロジックを復活させる
if (totalWidth === 0) {
const maxRetries = 10;
if (retryCount < maxRetries) {
this.log(`Rate bar calculation skipped: button width is zero. Retrying... (${retryCount + 1}/${maxRetries})`);
setTimeout(() => this.createOrUpdateRateBar(retryCount + 1), 250);
} else {
this.logError('Failed to get button width for rate bar after multiple retries.');
}
return;
}
let rateBarContainer = document.getElementById('return-youtube-dislike-bar-container');
const totalVotes = this.likes + this.dislikes;
const likePercentage = totalVotes > 0 ? (this.likes / totalVotes) * 100 : 50;
if (!rateBarContainer) {
this.log(`Creating rate bar. Width: ${totalWidth}px`);
const tooltipHtml = this.getTooltipHtml(likePercentage);
const colorLikeStyle = ReturnYouTubeDislike.config.coloredBar ? `background-color: ${this.getColor(true)};` : '';
const colorDislikeStyle = ReturnYouTubeDislike.config.coloredBar ? `background-color: ${this.getColor(false)};` : '';
const barHtml = `<div class="ryd-tooltip" style="width: ${totalWidth}px"><div class="ryd-tooltip-bar-container"><div id="return-youtube-dislike-bar-container" style="width: 100%; height: 2px; ${colorDislikeStyle}"><div id="return-youtube-dislike-bar" style="width: ${likePercentage}%; height: 100%; ${colorLikeStyle}"></div></div></div><tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" role="tooltip" tabindex="-1">${tooltipHtml}</tp-yt-paper-tooltip></div>`;
buttons.insertAdjacentHTML('beforeend', barHtml);
} else {
this.log(`Updating rate bar. Width: ${totalWidth}px`);
document.querySelector('.ryd-tooltip').style.width = `${totalWidth}px`;
document.getElementById('return-youtube-dislike-bar').style.width = `${likePercentage}%`;
document.getElementById('ryd-dislike-tooltip').innerHTML = this.getTooltipHtml(likePercentage);
}
}
// --- Unchanged Helper Methods ---
cacheDomElements(buttonsContainer){this.log("Caching DOM elements..."),this.domCache.buttons=buttonsContainer;const e=this.isShorts()?"#like-button":"ytd-segmented-like-dislike-button-renderer #like-button, ytd-toggle-button-renderer:first-of-type, like-button-view-model",t=this.isShorts()?"#dislike-button":"ytd-segmented-like-dislike-button-renderer #dislike-button, ytd-toggle-button-renderer:nth-of-type(2), dislike-button-view-model";if(this.domCache.likeButton=buttonsContainer.querySelector(e),this.domCache.dislikeButton=buttonsContainer.querySelector(t),!this.domCache.likeButton||!this.domCache.dislikeButton)return!1;if(this.isShorts()){let o=document.getElementById("ryd-shorts-dislike-text");o&&!o.isConnected&&(o=null),o||(o=document.createElement("span"),o.id="ryd-shorts-dislike-text",this.domCache.dislikeButton.insertAdjacentElement("afterend",o)),this.domCache.dislikeText=o}else{if(this.domCache.likeText=this.domCache.likeButton.querySelector("#text, .yt-spec-button-shape-next__button-text-content"),this.domCache.dislikeText=this.domCache.dislikeButton.querySelector("#text, .yt-spec-button-shape-next__button-text-content"),!this.domCache.dislikeText){let i=this.domCache.dislikeButton.querySelector("button")||this.domCache.dislikeButton;if(i.querySelector("#text"))return!0;let s=document.createElement("span");s.id="text",s.className="yt-spec-button-shape-next__button-text-content",s.style.marginLeft="6px",i.style.width="auto",i.appendChild(s),this.domCache.dislikeText=s}}return!0}
isRegularVideoLoaded(){return document.querySelector(`ytd-watch-grid[video-id='${this.getVideoId()}']`)||document.querySelector(`ytd-watch-flexy[video-id='${this.getVideoId()}']`)}
getButtons(){if(this.isShorts()){for(const e of document.querySelectorAll("#actions.ytd-reel-player-overlay-renderer")){const t=e.getBoundingClientRect();if(t.top>0&&t.bottom<window.innerHeight&&t.width>0&&t.height>0)return e}return null}return(document.getElementById("menu-container")?.offsetParent===null?document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div")||document.querySelector("ytd-menu-renderer.ytd-video-primary-info-renderer > div"):document.getElementById("menu-container")?.querySelector("#top-level-buttons-computed"))}
fetchVotes(){return new Promise((e,t)=>{GM.xmlHttpRequest({method:"GET",url:`${ReturnYouTubeDislike.API_URL}${this.videoId}`,onload:o=>{if(o.status>=200&&o.status<300)try{const n=JSON.parse(o.responseText);n&&typeof n.dislikes!="undefined"?(this.log(`Received counts: ${n.dislikes} dislikes, ${n.likes} likes.`),e(n)):t(new Error("Invalid API response format."))}catch(n){t(new Error("Failed to parse API response."))}else t(new Error(`API request failed with status: ${o.status}`))},onerror:e=>t(e),ontimeout:()=>t(new Error("API request timed out.")),timeout:15e3})})}
getInitialVoteState(){const{likeButton:e,dislikeButton:t}=this.domCache;return e?.getAttribute("aria-pressed")==="true"||e?.classList.contains("style-default-active")?ReturnYouTubeDislike.VOTE_STATE.LIKED:t?.getAttribute("aria-pressed")==="true"||t?.classList.contains("style-default-active")?ReturnYouTubeDislike.VOTE_STATE.DISLIKED:ReturnYouTubeDislike.VOTE_STATE.NEUTRAL}
getNativeLikeCount(){if(!this.domCache.likeButton)return null;try{const e=this.domCache.likeButton.querySelector("button")||this.domCache.likeButton,t=(e.getAttribute("aria-label")||"").replace(/\D/g,"");return t?parseInt(t,10):null}catch(e){return this.logError("Could not parse native like count from aria-label.",e),null}}
updateUI(){this.updateDislikeCount(),ReturnYouTubeDislike.config.numberDisplayReformatLikes&&this.updateLikeCount(),ReturnYouTubeDislike.config.rateBarEnabled&&this.createOrUpdateRateBar(),ReturnYouTubeDislike.config.coloredThumbs&&this.applyThumbColors()}
updateDislikeCount(){this.domCache.dislikeText&&(this.domCache.dislikeText.textContent=this.formatNumber(this.dislikes))}
updateLikeCount(){this.domCache.likeText&&(this.domCache.likeText.textContent=this.formatNumber(this.likes))}
applyThumbColors(){}
setupEventListeners(){this.log("Registering button listeners..."),this.domCache.likeButton?.addEventListener("click",this.handleVoteClick.bind(this)),this.domCache.dislikeButton?.addEventListener("click",this.handleVoteClick.bind(this))}
handleVoteClick(){if(this.isUserLoggedIn())setTimeout(()=>{const e=this.getInitialVoteState();if(e!==this.previousState)e===ReturnYouTubeDislike.VOTE_STATE.LIKED?(this.likes++,this.previousState===ReturnYouTubeDislike.VOTE_STATE.DISLIKED&&this.dislikes--):e===ReturnYouTubeDislike.VOTE_STATE.DISLIKED?(this.dislikes++,this.previousState===ReturnYouTubeDislike.VOTE_STATE.LIKED&&this.likes--):e===ReturnYouTubeDislike.VOTE_STATE.NEUTRAL&&(this.previousState===ReturnYouTubeDislike.VOTE_STATE.LIKED&&this.likes--,this.previousState===ReturnYouTubeDislike.VOTE_STATE.DISLIKED&&this.dislikes--),this.previousState=e,this.updateUI()},200)}
debounce(e,t){let o=null;return(...n)=>{window.clearTimeout(o),o=window.setTimeout(()=>{e.apply(null,n)},t)}}
log(e,t=""){ReturnYouTubeDislike.config.disableLogging||console.log(`[RYD] ${e}`,t)}
logError(e,t){console.error(`[RYD] ERROR: ${e}`,t||"")}
injectStyles(){GM_addStyle(ReturnYouTubeDislike.STYLES)}
getVideoId(){const e=new URL(window.location.href);return e.pathname.startsWith("/shorts/")?e.pathname.split("/")[2]:e.pathname.startsWith("/clip/")?document.querySelector("meta[itemprop='videoId']")?.content||null:e.searchParams.get("v")}
isShorts(){return window.location.pathname.startsWith("/shorts/")}
isUserLoggedIn(){return document.querySelector("#avatar-btn")!==null}
formatNumber(e){const t=ReturnYouTubeDislike.config.numberDisplayRoundDown?this.roundDown(e):e;return this.getNumberFormatter().format(t)}
roundDown(e){if(e<1e3)return e;const t=Math.floor(Math.log10(e)-2),o=t+(t%3?1:0);return Math.floor(e/10**o)*10**o}
getNumberFormatter(){const e=document.documentElement.lang||navigator.language||"en",t={compactShort:{notation:"compact",compactDisplay:"short"},compactLong:{notation:"compact",compactDisplay:"long"},standard:{notation:"standard"}};return new Intl.NumberFormat(e,t[ReturnYouTubeDislike.config.numberDisplayFormat]||t.compactShort)}
getTooltipHtml(e){const t=100-e,o=this.likes.toLocaleString(),n=this.dislikes.toLocaleString();switch(ReturnYouTubeDislike.config.tooltipPercentageMode){case"dash_like":return`${o} / ${n} - ${e.toFixed(1)}%`;case"dash_dislike":return`${o} / ${n} - ${t.toFixed(1)}%`;case"both":return`${e.toFixed(1)}% / ${t.toFixed(1)}%`;case"only_like":return`${e.toFixed(1)}%`;case"only_dislike":return`${t.toFixed(1)}%`;default:return`${o} / ${n}`}}
getColor(e){const t={classic:{like:"#00FF00",dislike:"#FF0000"},accessible:{like:"#2186F2",dislike:"#F8C100"},neon:{like:"#00FFFF",dislike:"#FF00FF"}},o=t[ReturnYouTubeDislike.config.colorTheme]||t.classic;return e?o.like:o.dislike}
}
new ReturnYouTubeDislike();
})();