This userscript removes the new autoplay toggle button and replaced it with the old 'Up next autoplay' section on top of related videos.
// ==UserScript==
// @name YT - Bring back the old 'Up next autoplay' section.
// @version 0.5
// @description This userscript removes the new autoplay toggle button and replaced it with the old 'Up next autoplay' section on top of related videos.
// @author Magma_Craft
// @license MIT
// @match *://www.youtube.com/*
// @namespace https://greasyfork.org/en/users/933798
// @icon https://www.youtube.com/favicon.ico
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
var globalCvrRef = null;
var isrStrat = false; // itemsectionrenderer needs hacking
var recoms;
function injectStyles() {
document.head.insertAdjacentHTML('beforeend',
`
<style>
yt-related-chip-cloud-renderer, ytd-item-section-renderer.style-scope.ytd-watch-next-secondary-results-renderer > div#contents.style-scope.ytd-item-section-renderer > ytd-reel-shelf-renderer.style-scope.ytd-item-section-renderer, ytd-reel-shelf-renderer.ytd-structured-description-content-renderer, ytd-watch-flexy ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer, div.ytp-autonav-toggle-button-container{display:none!important;}
ytd-compact-autoplay-renderer {
display: block;
padding-bottom: 8px;
border-bottom: 1px solid var(--yt-spec-10-percent-layer);
margin-bottom: 16px;
}
ytd-compact-autoplay-renderer[hide-autonav-keyline] {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
ytd-compact-autoplay-renderer[mask-as-video] {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
ytd-compact-autoplay-renderer[mask-as-video] #head.ytd-compact-autoplay-renderer {
display: none;
}
ytd-compact-autoplay-renderer[fixie] {
margin-bottom: 12px;
}
ytd-compact-autoplay-renderer:not([queue-is-empty]) {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
#head.ytd-compact-autoplay-renderer {
margin-bottom: 12px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
ytd-compact-autoplay-renderer[fixie] #head.ytd-compact-autoplay-renderer {
margin-bottom: 16px;
}
ytd-compact-autoplay-renderer[hide-autonav-headline] #head.ytd-compact-autoplay-renderer {
position: absolute;
opacity: 0;
}
ytd-compact-autoplay-renderer[hide-autonav-headline] #autoplay.ytd-compact-autoplay-renderer,
ytd-compact-autoplay-renderer[hide-autonav-headline] #toggle.ytd-compact-autoplay-renderer,
ytd-compact-autoplay-renderer[hide-autonav-headline] #tooltip.ytd-compact-autoplay-renderer {
display: none;
}
#upnext.ytd-compact-autoplay-renderer {
color: var(--yt-spec-text-primary);
font-size: 1.6rem;
font-weight: var(--ytd-subheadline_-_font-weight);
line-height: var(--ytd-subheadline_-_line-height);
letter-spacing: var(--ytd-subheadline_-_letter-spacing);
-ms-flex: 1 1 1e-9px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 1e-9px;
flex-basis: 1e-9px;
}
#autoplay.ytd-compact-autoplay-renderer {
color: var(--yt-spec-text-secondary);
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.007px;
text-transform: uppercase;
}
ytd-compact-autoplay-renderer[player-move-autonav-toggle] #autoplay.ytd-compact-autoplay-renderer,
ytd-compact-autoplay-renderer[player-move-autonav-toggle] #toggle.ytd-compact-autoplay-renderer {
display: none;
}
tp-yt-paper-toggle-button.ytd-compact-autoplay-renderer {
margin-left: 8px;
}
ytd-compact-autoplay-renderer[watch-feed-big-thumbs] paper-toggle-button.ytd-compact-autoplay-renderer,
ytd-compact-autoplay-renderer[fixie] paper-toggle-button.ytd-compact-autoplay-renderer {
--paper-toggle-button-label-spacing: 0;
}
ytd-compact-autoplay-renderer[watch-feed-big-thumbs] ytd-compact-video-renderer.ytd-compact-autoplay-renderer {
padding-bottom: 0;
}
ytd-compact-video-renderer.ytd-compact-autoplay-renderer {
padding-bottom: 8px;
}
ytd-compact-video-renderer.ytd-compact-autoplay-renderer[expansion=collapsed] {
padding-bottom: 0;
}
ytd-compact-video-renderer.ytd-compact-autoplay-renderer[expansion=expanded] {
margin-bottom: 0;
}
ytd-compact-autoplay-renderer[fixie] ytd-compact-video-renderer.ytd-compact-autoplay-renderer {
padding-bottom: 4px;
}
#tooltip.ytd-compact-autoplay-renderer {
font-size: var(--ytd-user-comment_-_font-size);
font-weight: var(--ytd-user-comment_-_font-weight);
line-height: var(--ytd-user-comment_-_line-height);
letter-spacing: var(--ytd-user-comment_-_letter-spacing);
}
ytd-compact-autoplay-renderer[player-move-autonav-toggle] #tooltip.ytd-compact-autoplay-renderer {
display: none;
}
ytd-compact-autoplay-renderer[watch-feed-big-thumbs]:not([is-two-columns]):not([mask-as-video]) {
border-bottom: none;
margin-bottom: 0;
}
ytd-compact-autoplay-renderer[watch-feed-big-thumbs]:not([is-two-columns]):not([mask-as-video]) ytd-compact-video-renderer.ytd-compact-autoplay-renderer {
padding-top: 34px;
}
ytd-compact-autoplay-renderer[watch-feed-big-thumbs]:not([is-two-columns]):not([mask-as-video]) #head.ytd-compact-autoplay-renderer {
position: absolute;
left: 0;
width: calc(100% - 48px);
margin-left: 24px;
}
</style>
`
);
}
function hasPlaylist() {
var a;
if (a=document.querySelector('#secondary ytd-playlist-panel-renderer')) {
if (a.hidden && a.hidden == true) {
return false;
} else {
return true;
}
} else {
return false;
}
}
function getAutoplay() {
var ap;
if (ap=document.querySelector('ytd-compact-autoplay-renderer')) {
return ap;
} else {
return false;
}
}
function shouldAutoplay() {
if (!hasPlaylist()) return true;
return false;
}
function getCookies() {
var c = document.cookie.split(';'), o = {};
for (var i = 0, j = c.length; i < j; i++) {
var s = c[i].split('=');
var n = s[0].replace(' ', '');
s.splice(0, 1);
s = s.join('=');
o[n] = s;
}
return o;
}
function parsePref(pref) {
var a = pref.split('&'), o = {};
for (var i = 0, j = a.length; i < j; i++) {
var b = a[i].split('=');
o[b[0]] = b[1];
}
return o;
}
function autoplayState() {
var cookies = getCookies();
if (cookies.PREF) {
var pref = parsePref(cookies.PREF);
if (pref.f5) {
return !(pref.f5 & 8192)
} else {
return true; //default
}
} else {
return true;
}
}
async function waitForElement(query, timeout = 500)
{
var hasTimedOut = false;
setTimeout(function() {
hasTimedOut = true;
}, timeout);
while (null == document.querySelector(query) && !hasTimedOut)
{
await new Promise(r => requestAnimationFrame(r));
}
var a;
if (a = document.querySelector(query))
{
return a;
}
else
{
return null;
}
}
function getFirstCvr(timeout = 500) {
var base = document.querySelector('ytd-watch-next-secondary-results-renderer');
var cvr, i = 0;
console.log(base);
return new Promise(function(r, e){
var mo = new MutationObserver(function(){
if (base.querySelector('#contents.ytd-item-section-renderer') != null) {
recoms = base.querySelector('#contents.ytd-item-section-renderer');
isrStrat = true;
} else if (base.querySelector('#items')) {
recoms = base.querySelector('#items');
isrStrat = false;
} else {
recoms = false;
}
for (i = 0; i < recoms.children.length; i++) {
if (!recoms) break;
if (isrStrat) {
if (recoms.children[i].tagName == 'YTD-COMPACT-VIDEO-RENDERER') {
mo.disconnect();
r(recoms.children[i]);
}
} else {
var data = base.data;
for (var k = 0, j = data.results.length; k < j; k++) {
if (data.results[k].compactVideoRenderer && recoms.children[i].tagName == 'YTD-COMPACT-VIDEO-RENDERER') {
if (data.results[k].compactVideoRenderer.videoId == recoms.children[i].data.videoId) {
r(recoms.children[i]);
}
}
}
}
}
});
mo.observe(base, {'childList': true, 'subtree': true});
});
}
var autoplayRecheck;
var recheckcb;
function clickAutoplay() {
var player = document.querySelector('#movie_player');
// try player mode 1
var a;
if (a = player.querySelector(".ytp-autonav-toggle-button-container")) {
a.parentNode.click();
} else {
var settings = player.querySelector('.ytp-settings-button');
settings.click();settings.click();
var item = player.querySelector('.ytp-menuitem[role="menuitemcheckbox"]');
item.click();
}
recheckcb();
}
async function buildAutoplay() {
const strs = {
UP_NEXT: 'Up next',
AUTOPLAY: 'Autoplay'
};
const autoplayStub = `<ytd-compact-autoplay-renderer queue-is-empty="">
<div id="head" class="ytd-compact-autoplay-renderer style-scope">
<div id="upnext" class="ytd-compact-autoplay-renderer style-scope">
</div>
<div id="autoplay" class="ytd-compact-autoplay-renderer style-scope">
</div>
<tp-yt-paper-toggle-button class="ytd-compact-autoplay-renderer style-scope" id="toggle" noink="" role="button" toggles="" checked="" tabindex="0"></tp-yt-paper-toggle-button>
</div>
<div id="contents" class="ytd-compact-autoplay-renderer style-scope"></div>
</ytd-compact-autoplay-renderer>`;
var ap = getAutoplay();
var sr = document.querySelector('ytd-watch-next-secondary-results-renderer');
var isr = sr.querySelector('ytd-item-section-renderer');
if (isr == null) isr = sr.querySelector('#items');
if (!ap && shouldAutoplay()) {
var cvr = await getFirstCvr();
var state = autoplayState();
isr.insertAdjacentHTML(isrStrat ? 'beforebegin' : 'afterbegin', state ? autoplayStub : autoplayStub.replace('checked=""', ''));
var html = sr.querySelector('ytd-compact-autoplay-renderer');
var un = html.querySelector("#upnext"),
apText = html.querySelector("#autoplay"),
toggle = html.querySelector('#toggle'),
contents = html.querySelector('#contents');
un.innerText = strs.UP_NEXT;
apText.innerText = strs.AUTOPLAY;
contents.appendChild(cvr);
globalCvrRef = cvr;
recheckcb = function(){
if (autoplayState()) {
toggle.setAttribute('checked', '');
} else {
toggle.removeAttribute('checked');
}
};
autoplayRecheck = setInterval(recheckcb, 100);
toggle.addEventListener('click', clickAutoplay);
if (isrStrat) {
recoms.insertAdjacentHTML('afterbegin', '<div id="autoplay-fix-hack" style="display:none"></div>');
}
} else if (ap && !shouldAutoplay()) {
recoms.insertAdjacentElement('afterbegin', globalCvrRef);
globalCvrRef = null;
clearInterval(autoplayRecheck);
ap.remove();
var fixhack;
if (fixhack = document.getElementById('autoplay-fix-hack')) {
fixhack.remove();
}
} else if (isrStrat) {
var cvr = await getFirstCvr();
recoms.insertAdjacentElement('afterbegin', globalCvrRef);
console.log(recoms);
if (!isrStrat) recoms.insertAdjacentHTML('afterbegin', '<div id="autoplay-fix-hack" style="display:none"></div>');
var contents = ap.querySelector('#contents');
contents.appendChild(cvr);
globalCvrRef = cvr;
} else {
console.log('fuck');
recoms.insertAdjacentElement('afterbegin', globalCvrRef);
globalCvrRef = null;
var cvr = await getFirstCvr();
var contents = ap.querySelector('#contents');
contents.appendChild(cvr);
globalCvrRef = cvr;
}
}
function dataUpdated(e) {
if (e.detail.pageType == 'watch') buildAutoplay();
}
document.addEventListener('yt-page-data-updated', dataUpdated);
document.addEventListener('DOMContentLoaded', function _() {
injectStyles();
document.removeEventListener('DOMContentLoaded', _);
});
})();