Adds a button to a YouTube channel's videos page which sorts recent uploads by views
// ==UserScript==
// @name YouTube Uploads Sorter Button
// @namespace http://tampermonkey.net/
// @version 0.14.0
// @description Adds a button to a YouTube channel's videos page which sorts recent uploads by views
// @author Lex
// @include /^https?:\/\/(www\.)?youtube\.com\/(c|channel|user)\//
// @include /^https?:\/\/(www\.)?youtube\.com\/.*\/videos/
// @require https://code.jquery.com/jquery-3.2.1.min.js
// @grant none
// ==/UserScript==
(function($) {
'use strict';
function addButton() {
if ($("#sortViewButton").length == 0) {
const container = $("#chips-wrapper");
$("<button>").attr("id", "sortViewButton").html("Sort by Views").click(sortByViews).appendTo(container);
}
}
function getViews(e) {
try {
const viewsTitle = $(e).find('#video-title-link')[0].getAttribute("aria-label");
//console.log(`Found title: ${viewsTitle}`);
if (viewsTitle.search(/No views$/) > -1) // video has no views yet
return 0;
else {
const views = parseInt(/([\d,]+) views( - play Short)?$/.exec(viewsTitle)[1].replace(/,/g, ""));
return views;
}
} catch(err) {
//console.log(err);
return 0;
}
}
function sortByViews() {
console.log("Sorting...");
const items = $("ytd-rich-item-renderer");
console.log(`Found ${items.length} videos on the page.`);
//console.log(items);
//console.log(getViews(items[0]));
// Array of each parent for a given index.
// e.g. if there are 4 videos in the first row container, the first 4 indexes are that first row
const parents = [...items].map(e => e.parentNode);
//console.log(parents);
const sorted = items.toArray().sort(function(a, b) {
return getViews(b) - getViews(a);
});
for (let item of sorted) {
// Remove item from its parent and append it to the ordered parent
const parent = parents.shift();
//console.log("Parent: ", parent);
//console.log("Removing", item, "from its parent");
item.parentNode.removeChild(item);
parent.append(item);
}
}
setTimeout(addButton, 1250);
addButton(); // try to add the button immediately
$("#sub-menu:visible").on("DOMNodeInserted", addButton); // but also add button whenever the #sub-menu is changed
})(window.jQuery);