Skip to content

Instantly share code, notes, and snippets.

@cmondev
Last active October 17, 2020 17:12
Show Gist options
  • Save cmondev/ac1d835ff2852f1cd2857e8bbfe1d194 to your computer and use it in GitHub Desktop.
Save cmondev/ac1d835ff2852f1cd2857e8bbfe1d194 to your computer and use it in GitHub Desktop.
YouTube Reaction Overview 1
function queryAndWriteData(ids, elements) {
console.log("Fetching yt api data");
const urlToRequest = BASE_URL + ids.join("&id=");
GM_xmlhttpRequest({
method: "GET",
url: urlToRequest,
responseType: "json",
onload: function(response) {
handleApiResponse(response.response);
for(let el of elements) {
const id = getVideoIdFromUrl(el.href);
if(ID_STATS_MAP[id]) {
writeLikesAndDislikesToDom(el, ID_STATS_MAP[id].likes, ID_STATS_MAP[id].dislikes);
}
}
}
});
}
function handleApiResponse(response) {
if(response.items.length > 0) {
for(var item of response.items) {
const id = item.id;
const stats = item.statistics;
const likes = stats.likeCount;
const dislikes = stats.dislikeCount;
ID_STATS_MAP[id] = {"likes": likes, "dislikes": dislikes};
}
}
}
const API_KEY = "YourYtApiKey";
const BASE_URL = "https://www.googleapis.com/youtube/v3/videos?part=statistics&key=" + API_KEY + "&id=";
const ID_STATS_MAP = {};
(function() {
window.addEventListener("load", function(event) {
const elements = getElementsForVideos();
getIdsAndQueryData(elements);
});
})();
function getElementsForVideos() {
const root = document.querySelector("#content #page-manager");
if(!root) {
window.setTimeout(getElementsForVideos, 500);
return;
}
const elements = root.querySelectorAll("ytd-grid-video-renderer #video-title");
return elements;
}
// ==UserScript==
// @name YouTube Reaction Overview Basic
// @namespace https://cmon.dev
// @version 0.1
// @description Shows the amount of likes and dislikes of a YouTube video before clicking it
// @author Simon Hofer
// @include https://www.youtube.com/*
// @grant GM_xmlhttpRequest
// @connect googleapis.com
// ==/UserScript==
function getIdsAndQueryData(elements) {
if(elements.length > 0) {
const ids = Array.from(elements).map(e => getVideoIdFromUrl(e.href));
const slices = 50;
const sliced_ids = new Array(Math.ceil(ids.length / slices))
.fill().map(_ => ids.splice(0, slices));
for(let id_slice of sliced_ids) {
queryAndWriteData(id_slice, elements);
}
}
else {
console.log("No elements found");
}
}
function getVideoIdFromUrl(url) {
return url.split("&t=")[0].split("watch?v=")[1];
}
function writeLikesAndDislikesToDom(element, likes, dislikes) {
let likesElements = element.parentElement.getElementsByClassName("likes");
if(likesElements.length !== 0) {
element.parentElement.removeChild(likesElements[0]);
}
let likesElement = createDiv("likes", likes, "green");
element.parentElement.appendChild(likesElement);
let dislikesElements = element.parentElement.getElementsByClassName("dislikes");
if(dislikesElements.length !== 0) {
element.parentElement.removeChild(dislikesElements[0]);
}
let dislikesElement = createDiv("dislikes", dislikes, "red");
element.parentElement.appendChild(dislikesElement);
}
function createDiv(className, text, color) {
let el = document.createElement("div");
el.setAttribute("style", "color: " + color);
el.setAttribute("class", className);
el.innerText = text;
return el;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment