See View to Sentiment, View to Like, and other statistics.
/* This script should work in Tampermonkey, as a bookmarklet, or in the console. Have fun! */
/* Tested and known working in both Chrome and Firefox. */
/*
// ==UserScript==
// @name YTVTSview
// @license MIT
// @namespace http://tampermonkey.net/
// @version 1.3
// @description See View to Sentiment, View to Like, and other statistics.
// @author zegfarce
// @match https://www.youtube.com/watch?v=*
// @icon https://www.google.com/s2/favicons?domain=youtube.com
// @grant unsafeWindow
// ==/UserScript==
*/
/* The colors of the things. Change to whatever you want I guess. */
let colors = {
like_color: "#44ff44",
dislike_color: "#ff4444",
viewratio_unfilled: "#717171",
viewratio_partfilled: "#aaaaaa",
viewratio_fullfilled: "#ffffff",
};
/* Based on original work by Estus Flask on Stack Overflow, https://stackoverflow.com/a/44807594 */
/* Licensed under the CC BY-SA 3.0 license. https://creativecommons.org/licenses/by-sa/3.0/ */
/* Modified to make it look a little nicer and call my function */
let scriptPromise = new Promise((resolve, reject) => {
let script = document.createElement('script');
document.body.appendChild(script);
script.onload = resolve;
script.onerror = reject;
script.async = true;
script.src = 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js';
});
scriptPromise.then(runChecks);
let selectors = {
// Specific to YouTube that supports like bars
likebar: "#like-bar",
// Basic YouTube layout stuff
info: "#info-contents",
viewcount: ".ytd-video-view-count-renderer"
}
let ryd_selectors = {
likebar: "#ryd-bar"
}
// Enables Return YouTube Dislike support dynamically.
// really just there to work around bugs
let ryd;
/* yes i really did just comply with creative commons license for stack overflow code */
/* okay back to my code */
function runChecks()
{
/* tampermonkey support */
let window = (typeof unsafeWindow !== "undefined") ? unsafeWindow : globalThis;
let jQuery = window.$;
// no support by default -- detect if the bar is reenabled
ryd = false;
let interval = setInterval(() => {
// Return YouTube Dislike support.
if (jQuery(ryd_selectors.likebar).length)
{
selectors.likebar = ryd_selectors.likebar;
ryd = true; // well return-youtube-dislike exists
}
if (jQuery(selectors.likebar).length === 0)
return;
// hack because youtube didnt remove the html, just hid the element
if (jQuery(selectors.likebar)[0].parentElement.parentElement.hidden)
return;
clearInterval(interval);
init();
}, 100)
}
/* initialises the thing */
function init() {
/* tampermonkey support */
let window = (typeof unsafeWindow !== "undefined") ? unsafeWindow : globalThis;
let jQuery = window.$;
let likebar = jQuery(selectors.likebar)[0]; /* convenient */
let likebar_container = likebar.parentElement; /* less convenient */
let sentiment_section = likebar_container.parentElement;
if (ryd) // they wrapped it in another div -- annoying
sentiment_section = sentiment_section.parentElement;
let tooltip_container = sentiment_section.lastElementChild; /* even less convenient */
let tooltip = tooltip_container.children[0];
likebar.style.background = colors.like_color;
likebar_container.style.background = colors.dislike_color;
/* changing ID messes with the rendering */
let viewratiobar_container;
if (typeof window._yt_tampered_with === "undefined")
/* clone if first time */
viewratiobar_container = likebar_container.cloneNode(true);
else
/* otherwise, get existing one instead */
viewratiobar_container = sentiment_section.lastElementChild.previousElementSibling;
let viewratiobar = viewratiobar_container.children[0];
let viewratiobar_child;
if (typeof window._yt_tampered_with === "undefined")
/* clone if first time */
viewratiobar_child = viewratiobar.cloneNode(true);
else
/* otherwise, get existing one instead */
viewratiobar_child = viewratiobar.firstElementChild;
/* trim and remove commas */
let tooltip_str = tooltip.textContent.trim().replaceAll(',', '');
/* match the string representations of the likes and dislikes */
/* remove the commas too */
/* the .slice(1) removes the full string match */
let [orig, likes, dislikes] = tooltip_str.match(/^((\d+)[^\d]+(\d+))/).slice(1);
likes = parseInt(likes); /* get the number */
dislikes = parseInt(dislikes); /* same here */
let viewcount = jQuery(selectors.viewcount)[0]; /* grab view count html */
let views = viewcount.innerHTML.replaceAll(',', ''); /* grab and trim the html */
views = parseInt(views.match(/^\d+/)[0]); /* match the number and parse it */
let vts_percent = ((likes + dislikes) / views) * 100; /* do some actual math for once in my life */
let lts_percent = (likes / (likes + dislikes)) * 100; /* do some actual math for once in my life */
/* The full bar is the background -- it's colored between the bg and fg by default */
viewratiobar.style.width = vts_percent.toString() + "%";
viewratiobar.style.background = colors.viewratio_partfilled;
/* This bar is the likes percentage in the bar */
viewratiobar_child.style.width = lts_percent.toString() + "%";
viewratiobar_child.style.background = colors.viewratio_fullfilled;
viewratiobar_container.style.background = colors.viewratio_unfilled;
let spacerdiv;
if (typeof window._yt_tampered_with === "undefined")
/* create if first time */
spacerdiv = document.createElement("div");
else
/* otherwise, get existing one instead */
spacerdiv = likebar_container.nextElementSibling;
/* A little spacer that just visually seperates my bar and the original one */
spacerdiv.style.height = "4px";
/* Don't add the divs if we've already added them */
if (typeof window._yt_tampered_with === "undefined")
{
sentiment_section.insertBefore(spacerdiv, likebar_container.nextElementSibling);
sentiment_section.insertBefore(viewratiobar_container, spacerdiv.nextElementSibling);
viewratiobar.appendChild(viewratiobar_child);
}
/* Truncate percentages so you dont get annoyingly precise percentages */
let vts = vts_percent.toFixed(1);
let lts = lts_percent.toFixed(0);
let vtl = (likes/views * 100).toFixed(1);
/* NaN checks just so we dont have NaN show up. */
vts = isNaN(vts) ? 0 : vts;
lts = isNaN(lts) ? 0 : lts;
vtl = isNaN(vtl) ? 0 : vtl;
/* Edit the tooltip to be cooler */
tooltip.textContent = `${orig} (${lts}%) ${vts}% vts ${vtl}% vtl`;
/* The section where the video title, views, upload date, and buttons are. */
let info_contents = jQuery(selectors.info)[0].children[0];
info_contents.style.paddingBottom = "14px"; /* Just extend it a little more to fit my bar. */
/* we've tampered with youtube */
window._yt_tampered_with = true;
};