Adds button for loading the previous video in a YT playlist
// ==UserScript==
// @name Play Youtube playlist in reverse order
// @namespace https://github.com/Dragosarus/Userscripts/
// @version 7.9
// @description Adds button for loading the previous video in a YT playlist
// @author Dragosarus
// @match http://www.youtube.com/*
// @match https://www.youtube.com/*
// @grant none
// @require http://code.jquery.com/jquery-latest.js
// @noframes
// ==/UserScript==
// Cookies (current session):
// pytplir_playPrevious - saves the button state between loads
/* NOTES:
* - If the button is not displayed (but the script is running), pause and unpause the video.
* - If it still does not appear, reload the page.
* - If it *still* does not appear, let me know through Greasy Fork or GitHub.
* - If the button is displayed but does not work properly/consistently, increase the value of redirectWhenTimeLeft.
*/
(function() {
'use strict';
$(document).ready(function() {
// Determines when to load the next video.
// Increase these if the redirect does not work as intended (i.e. fails to override Youtube's redirect),
// Decreasing these will let you see more of the video before it redirects, but the redirect might stop working (consistently)
const redirectWhenTimeLeft = 0.3; // seconds before the end of the video
const redirectWhenTimeLeft_miniplayer = 0.6;
const skipUnplayable = true; // Skip videos that have not been premiered yet/upcoming livestreams
const activeColor = "rgb(64,166,255)";
const inactiveColor = "rgb(144,144,144)";
const circleColor = "rgb(144,144,144)";
const ttBGColor = "rgb(100,100,100)";
const ttTextColor = "rgb(237,240,243)";
// Logs debug messages to the console.
const debug = false;
const selectors = {
"buttonLocation": "div[id=playlist-action-menu] > .ytd-playlist-panel-renderer > div[id=top-level-buttons-computed]",
"content": "#content",
"player": ".html5-main-video",
"miniplayerDiv": "div.miniplayer",
"playlistButtons": ".ytd-watch-flexy #playlist #playlist-action-menu",
"playlistButtonsMiniplayer": "ytd-playlist-panel-renderer.ytd-miniplayer #playlist-action-menu",
"playlistCurrentVideo": "ytd-playlist-panel-video-renderer[selected]",
"playlistVideos": "#publisher-container span.index-message",
"playlistVideosMiniplayer": "yt-formatted-string[id=owner-name] :nth-child(3)",
"shuffleButtonActive": "path[d='M18.51,13.29l4.21,4.21l-4.21,4.21l-1.41-1.41l1.8-1.8c-2.95-0.03-5.73-1.32-7.66-3.55l1.51-1.31 c1.54,1.79,3.77,2.82,6.13,2.85l-1.79-1.79L18.51,13.29z M18.88,7.51l-1.78,1.78l1.41,1.41l4.21-4.21l-4.21-4.21l-1.41,1.41l1.8,1.8 c-3.72,0.04-7.12,2.07-8.9,5.34l-0.73,1.34C7.81,14.85,5.03,17,2,17v2c3.76,0,7.21-2.55,9.01-5.85l0.73-1.34 C13.17,9.19,15.9,7.55,18.88,7.51z M8.21,10.31l1.5-1.32C7.77,6.77,4.95,5,2,5v2C4.38,7,6.64,8.53,8.21,10.31z']",
"shuffleButtonInactive": "path[d='M18.15,13.65l3.85,3.85l-3.85,3.85l-0.71-0.71L20.09,18H19c-2.84,0-5.53-1.23-7.39-3.38l0.76-0.65 C14.03,15.89,16.45,17,19,17h1.09l-2.65-2.65L18.15,13.65z M19,7h1.09l-2.65,2.65l0.71,0.71l3.85-3.85l-3.85-3.85l-0.71,0.71 L20.09,6H19c-3.58,0-6.86,1.95-8.57,5.09l-0.73,1.34C8.16,15.25,5.21,17,2,17v1c3.58,0,6.86-1.95,8.57-5.09l0.73-1.34 C12.84,8.75,15.79,7,19,7z M8.59,9.98l0.75-0.66C7.49,7.21,4.81,6,2,6v1C4.52,7,6.92,8.09,8.59,9.98z']",
"shuffleButtonLegacy": "path[d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z']",
"timestamp": "span.ytd-thumbnail-overlay-time-status-renderer",
"videoPlayer": ".html5-video-player"
}
const ytdApp = $("ytd-app")[0];
let player;
let playPrevious;
let redirectFlag = false;
let shuffle;
let miniplayerActive = false;
let miniplayerFlag = false; // keep track of switches between miniplayer and normal mode
let playerListenersAdded = false;
// create button
const svgNS = "http://www.w3.org/2000/svg";
const btn_div = document.createElement("div");
const bg_circle = document.createElementNS(svgNS, "circle");
const bg_circle_anim = document.createElementNS(svgNS, "animate");
const arrow_up = document.createElementNS(svgNS, "polygon");
const arrow_down = document.createElementNS(svgNS, "polygon");
const btn_svg = document.createElementNS(svgNS, "svg");
const tt_svg = document.createElementNS(svgNS, "svg");
const tt_svg_fadein = document.createElementNS(svgNS, "animate");
const tt_svg_fadeout = document.createElementNS(svgNS, "animate");
const tt_rect = document.createElementNS(svgNS, "rect");
const tt_text = document.createElementNS(svgNS, "text");
const tt_div = document.createElement("div");
setAttributes(bg_circle_anim, [["attributeName", "fill-opacity"],
["values", "0;0.1;0.2;0.1;0.0"],
["dur", "0.3s"],
["restart", "always"],
["repeatCount", "1"],
["begin", "indefinite"],
["id", "pytplir_bg_circle_anim"]]);
setAttributes(bg_circle, [["cx", "20"],
["cy", "20"],
["r", "20"],
["fill", circleColor],
["fill-opacity", "0"]]);
setAttributes(arrow_up, [["points", "17,19 17,17 13,17 20,11 27,17 23,17 23,19"],
["id", "pytplir_arrow_up"]]);
setAttributes(arrow_down, [["points", "17,21 17,23 13,23 20,29 27,23 23,23 23,21"],
["id", "pytplir_arrow_down"]]);
setAttributes(btn_svg, [["xmlns", svgNS],
["viewbox", "0 0 40 40"],
["width", "40"],
["height", "40"],
["style", "cursor: pointer; margin-left: 8px;"],
["id", "pytplir_btn"]]);
setAttributes(tt_rect, [["x", "0"],
["y", "0"],
["rx", "2"],
["ry", "2"],
["width", "110"],
["height", "34"],
["fill", ttBGColor],
["fill-opacity", "0.9"]]);
setAttributes(tt_text, [["x", "8"],
["y", "22"],
["font-family", "Roboto, Noto, sans-serif"],
["font-size", "13px"],
["fill", ttTextColor],
["style", "user-select:none;"]]);
setAttributes(tt_svg_fadein, [["attributeType", "CSS"],
["attributeName", "opacity"],
["values", "0;1"],
["dur", "0.1s"],
["restart", "always"],
["repeatCount", "1"],
["begin", "indefinite"],
["id", "pytplir_tt_fadein"],
["fill", "freeze"]]);
setAttributes(tt_svg_fadeout, [["attributeType", "CSS"],
["attributeName", "opacity"],
["values", "1;0"],
["dur", "0.1s"],
["restart", "always"],
["repeatCount", "1"],
["begin", "indefinite"],
["id", "pytplir_tt_fadeout"],
["fill", "freeze"]]);
const tt_svg_offset = "position:absolute; top:13px; left:-32px; z-index:100; opacity:0.0;";
setAttributes(tt_svg, [["viewbox", "0 0 100 34"],
["xmlns", "http://www.w3.org/2000/svg"],
["width", "100"],
["height", "34"],
["style", "padding-left: 10px; fill:" + ttBGColor + "; " + tt_svg_offset],
["id", "pytplir_tt"]]);
setAttributes(tt_div, [["style", "position:relative; width:0; height:0;"]]);
setAttributes(btn_div, [["id", "pytplir_div"]]);
tt_text.innerHTML = "Autoplay order";
bg_circle.appendChild(bg_circle_anim);
appendChildren(btn_svg, [bg_circle, arrow_up, arrow_down]);
appendChildren(tt_svg, [tt_rect, tt_text, tt_svg_fadein, tt_svg_fadeout]);
tt_div.appendChild(tt_svg);
appendChildren(btn_div, [btn_svg, tt_div]);
$(btn_svg).on("click", onButtonClick);
$(btn_svg).on("click", function(){$(this).parent().find("#pytplir_bg_circle_anim")[0].beginElement();});
$(btn_svg).on("mouseenter", function(){$(this).parent().find("#pytplir_tt_fadein")[0].beginElement();});
$(btn_svg).on("mouseleave", function(){$(this).parent().find("#pytplir_tt_fadeout")[0].beginElement();});
init();
function setAttributes(node, attributeValuePairs) { // [["id", "example"], ["width","20"], ...]
for (let attVal of attributeValuePairs){
node.setAttribute(attVal[0], attVal[1]);
}
}
function appendChildren(node, childList) {
for (let child of childList) {
node.appendChild(child);
}
}
function init() {
// the button needs to be re-added whenever the playlist is updated (e.g when a video is loaded or removed)
function observerCallback(mutationList, observer) {
debugLog("Observer triggered!")
start();
}
const playlistObserver = new MutationObserver(observerCallback);
const observerOptions = {subtree:true, childList:true, characterData:true};
initObserver(playlistObserver, observerOptions);
playPrevious = getCookie("pytplir_playPrevious");
if (playPrevious === "") { // cookie has not been set yet
playPrevious = false; // inital state
setCookie("pytplir_playPrevious", playPrevious);
}
start();
}
function initObserver(observer, options) {
try {
observer.observe($(selectors.playlistVideos)[0], options);
observer.observe($(selectors.playlistVideosMiniplayer)[0], options);
} catch (e) {
setTimeout(function(){initObserver(observer)}, 100);
}
}
function onButtonClick() { // toggle
playPrevious = !playPrevious;
setCookie("pytplir_playPrevious", playPrevious);
updateButtonState();
}
function addButton() { // Add button(s)
debugLog("addButton start")
withQuery(selectors.buttonLocation, "*", function(res) {
res.each(function() {
if (!$(this).find("#pytplir_div").length) {
this.appendChild($(btn_div).clone(true)[0]);
updateButtonState();
debugLog("button added");
}
});
});
debugLog("addButton finish")
}
function updateButtonState() {
if (playPrevious) { // play previous video
$("polygon[id=pytplir_arrow_up]").each(function() {
this.setAttribute("style", "fill:" + activeColor);
});
$("polygon[id=pytplir_arrow_down]").each(function() {
this.setAttribute("style", "fill:" + inactiveColor);
});
} else { // play next video
$("polygon[id=pytplir_arrow_up]").each(function() {
this.setAttribute("style", "fill:" + inactiveColor);
});
$("polygon[id=pytplir_arrow_down]").each(function() {
this.setAttribute("style", "fill:" + activeColor);
});
}
miniplayerActive = isMiniplayerActive();
let ctx = miniplayerActive ? selectors.miniplayerDiv : selectors.content;
$(ctx + " #pytplir_btn")[0].setAttribute("activated", playPrevious);
debugLog($(ctx + " #pytplir_btn"));
}
function start() { // Add button(s) and event listeners
addButton();
debugLog("playerListenersAdded = " + playerListenersAdded);
if (!playerListenersAdded) {
withQuery(selectors.player, ":visible", function(res) {
player = res[0];
player.addEventListener("timeupdate", checkTime);
player.addEventListener("play", addButton); // ensure button is added
playerListenersAdded = true;
});
}
}
function withQuery(query, filter="*", onSuccess = function(r){}) {
let res;
if (filter == "*") {
res = $(query);
} else {
res = $(query).filter(filter);
}
if (res.length) { // >= 1 result
onSuccess(res);
return res;
} else { // not loaded yet => retry
setTimeout(function(){withQuery(query, filter, onSuccess)});
}
}
function isMiniplayerActive() {
// Youtube seems to change this quite often, and due to A/B testing all of them need to be checked
let miniplayer_attributes = ["miniplayer-is-active", "miniplayer-active_", "miniplayer-active"];
miniplayerActive = false;
for (let attr of miniplayer_attributes) {
miniplayerActive ||= ytdApp.hasAttribute(attr);
}
return miniplayerActive;
}
function checkTime() {
let miniplayerActive = isMiniplayerActive();
let context = miniplayerActive ? selectors.miniplayerDiv : selectors.content;
let buttonSelector = context + " " + selectors.buttonLocation + " #pytplir_div";
let noButton = !$(buttonSelector).length;
let playlistHeaderQuery = miniplayerActive ? $(selectors.playlistVideosMiniplayer).parent() : $(selectors.playlistVideos).parent();
let playlistVisible = playlistHeaderQuery.length && playlistHeaderQuery.is(":visible");
// exit early when not watching a playlist
if (!playlistVisible) {return;} // button not loaded
else if (noButton) { // button was removed
debugLog("failsafe: adding button");
addButton();
}
debugLog("checkTime: miniplayer: " + miniplayerActive +
", button == " + !noButton);
let timeLeft = player.duration - player.currentTime;
let videoPlayer = $(selectors.videoPlayer)[0];
let redirectTime;
let shuffleContext;
if (miniplayerActive) {
redirectTime = redirectWhenTimeLeft_miniplayer;
shuffleContext = selectors.playlistButtonsMiniplayer;
} else {
redirectTime = redirectWhenTimeLeft;
shuffleContext = selectors.playlistButtons;
}
if (!shuffle || (miniplayerActive != miniplayerFlag)) { // wysiwyg
shuffle = $(shuffleContext + " " + selectors.shuffleButtonActive).parents("button[aria-pressed]");
if (!shuffle.length) { // shuffle not activated or new UI has not been pushed to the user yet
shuffle = $(shuffleContext + " " + selectors.shuffleButtonInactive).parents("button[aria-pressed]");
if (!shuffle.length) { // new UI not pushed to user
shuffle = $(selectors.shuffleButtonLegacy).filter(":visible").parents("button[aria-pressed]");
}
}
shuffle = shuffle[0];
miniplayerFlag = miniplayerActive;
}
try {videoPlayer.classList.contains("ad-showing");} // ensure it will work below
catch (TypeError) { // video player undefined
return;
}
let shuffleEnabled;
try {
shuffleEnabled = strToBool(shuffle.attributes["aria-pressed"].nodeValue);
} catch (TypeError) { // e.g. when using Queues
shuffleEnabled = false;
}
if (timeLeft < redirectTime && !redirectFlag && playPrevious && !shuffleEnabled && !player.hasAttribute("loop")
&& !videoPlayer.classList.contains("ad-showing")) {
// attempt to prevent the default redirect from triggering
player.pause();
player.currentTime -= 2;
if (getVidNum()[0] !== "1") {
redirectFlag = true;
redirect();
setTimeout(function() {redirectFlag = false;}, 1000);
}
}
}
function getVidNum() { // returns string array [current, total], e.g "32 / 152" => ["32", "152"]
let vidNum;
if (ytdApp.hasAttribute("miniplayer-active") || ytdApp.hasAttribute("miniplayer-active_")) {
vidNum = $(selectors.playlistVideosMiniplayer);
} else {
vidNum = $(selectors.playlistVideos);
}
// the desired element is hidden; to distinguish from
// other hidden elements, check parent's visibility
vidNum = vidNum.filter(function(){
return $(this).parent().is(":visible");
})[0].innerText;
return vidNum.split(" / ");
}
function redirect() {
let previousURL = getPreviousURL();
if (previousURL) {
previousURL.click();
}
}
function getPreviousURL(){ // returns <a> element
let elem;
if (ytdApp.hasAttribute("miniplayer-active") || ytdApp.hasAttribute("miniplayer-active_")) { // avoid being forced out of miniplayer mode on video load
elem = $(selectors.miniplayerDiv).find(selectors.playlistCurrentVideo).prev();
} else {
elem = $(selectors.content).find(selectors.playlistCurrentVideo).prev();
}
let ts;
if (skipUnplayable) {
ts = $(elem).find(selectors.timestamp);
if (ts.length) {ts = ts[0].innerText; }
}
while (!elem.find("#unplayableText").prop("hidden") ||
(skipUnplayable && typeof(ts) == "string" && !ts.includes(":"))) { // while an unplayable (e.g. private) video is selected
elem = elem.prev();
if (!elem.length) return null; // first video in playlist
if (skipUnplayable) {
ts = $(elem).find(selectors.timestamp);
if (ts.length) { ts = ts[0].innerText; }
}
}
return elem.children()[0];
}
function strToBool(str) {
return str.toLowerCase() == "true";
}
function debugLog(...args) {
if (debug) {
args.unshift("pytplir:");
console.log.apply(this, args);
}
}
// adapted from https://www.w3schools.com/js/js_cookies.asp
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + ";sameSite=lax;path=www.youtube.com/watch";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
let x = c.substring(name.length, c.length);
return strToBool(x);
}
}
return "";
}
});
})();
/*eslint-env jquery*/ // stop eslint from showing "'$' is not defined" warnings