☰

Greasy Fork is available in English.

Restore App Bar

Restores the appbar used in the classic Hitchhiker YouTube layout

// ==UserScript==
// @name         Restore App Bar
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Restores the appbar used in the classic Hitchhiker YouTube layout
// @author       BowDown097 and whoever made it originally
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @grant        GM_addStyle
// ==/UserScript==

if (typeof GM_addStyle !== "function") {
    function GM_addStyle(css) {
        let style = document.createElement('style');
        style.type = 'text/css';
        style.appendChild(document.createTextNode(css));
        const head = document.getElementsByTagName('head')[0];
        if (head) head.appendChild(style);
        else document.documentElement.appendChild(style);
    }
}

function waitForElement(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }
        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });
        observer.observe(document, {
            childList: true,
            subtree: true
        });
    });
}

function navigate(url, browseId) {
    document.querySelector("ytd-app").insertAdjacentHTML("beforeend", '<ytd-guide-entry-renderer class="ytd-guide-entry-renderer navigateTemp"></ytd-guide-entry-renderer>');
    document.querySelector(".navigateTemp").data = {};
    document.querySelector(".navigateTemp").data.navigationEndpoint = {
        "clickTrackingParams": "CJEBELUsGAIiEwi3y-qlp9bxAhVchuUHHSLSCts=",
        "commandMetadata": {
            "webCommandMetadata": {
                "url": url,
                "webPageType": "WEB_PAGE_TYPE_BROWSE",
                "rootVe": 6827,
                "apiUrl": "/youtubei/v1/browse"
            }
        },
        "browseEndpoint": {
            "browseId": browseId
        }
    };
    document.querySelector(".navigateTemp").click();
    document.querySelector(".navigateTemp").remove();
}

function navBar() {
    const hasMyChannel = document.querySelector("#items > ytd-guide-entry-renderer:nth-child(2) .guide-icon").getComputedStyleValue("content") == "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAOFJREFUeJztlL0Ng0AMhWlSZ5QMkU0o6KjpIlLAHSNkgkyQLbICA6RPT/hEAk8WxwWJKoolS5Z/3vnZhiT5y0cuvtiXZXny3t/run6i2PiIrQKrqvPROdf22gW0JWcN2FhMV3mRH1BsjUVBoaKd9TQ7pYeNTztdpM98tAPmZnPwaQ41QUBLaaDl0mkcLrVxaoKA9nUtmnssxCIG2DZNc0PnNr8IqF0AwGZtDr43eJyyLOWRZdkulEeMnOhS9Gx0GVZkOctnMyRPh93P5wpFOkKx8X192AZ0m09P6W/2c/hteQFIL1T2NRIk0wAAAABJRU5ErkJggg==\")";
    let headers = [{
        text: document.querySelector("ytd-guide-entry-renderer:first-child yt-formatted-string").innerHTML
    }, {
        text: hasMyChannel ? document.querySelector("ytd-guide-entry-renderer:nth-child(3) yt-formatted-string").innerHTML : document.querySelector("ytd-guide-entry-renderer:nth-child(2) yt-formatted-string").innerHTML
    }, {
        text: hasMyChannel ? document.querySelector("ytd-guide-entry-renderer:nth-child(5) yt-formatted-string").innerHTML : document.querySelector("ytd-guide-entry-renderer:nth-child(4) yt-formatted-string").innerHTML
    }];
    
    let appbar = document.createElement("div");
    let appbarNav = document.createElement("ul");
    
    for (const header of headers)
    {
        let item = document.createElement("li");
        let text = document.createElement("span");
        text.href = header.href;
        text.innerHTML = header.text;
        item.appendChild(text);
        appbarNav.appendChild(item);
    }
    
    let home = document.querySelector(`ytd-browse[role="main"][page-subtype="home"]`);
    let trending = document.querySelector(`ytd-browse[role="main"][page-subtype="trending"]`);
    let subscriptions = document.querySelector(`ytd-browse[role="main"][page-subtype="subscriptions"]`);
    
    home?.appendChild(appbar).appendChild(appbarNav);
    trending?.appendChild(appbar).appendChild(appbarNav);
    subscriptions?.appendChild(appbar).appendChild(appbarNav);
    
    appbar.className = "ytcp-main-appbar";
    appbarNav.className = "ytcp-appbar-nav";
    appbarNav.childNodes[0].className = "ytcp-nav-home ytcp-nav-item";
    appbarNav.childNodes[1].className = "ytcp-nav-trending ytcp-nav-item";
    appbarNav.childNodes[2].className = "ytcp-nav-subs ytcp-nav-item";
    
    appbarNav.childNodes[0].addEventListener("click", () => navigate("/", "FEwhat_to_watch"));
    appbarNav.childNodes[1].addEventListener("click", () => navigate("/feed/trending", "FEexplore"));
    appbarNav.childNodes[2].addEventListener("click", () => navigate("/feed/subscriptions", "FEsubscriptions"));
}

function setupNavbar() {
    if (!["/", "/feed/trending", "/feed/subscriptions"].includes(window.location.pathname)) return;
    waitForElement("ytd-guide-entry-renderer").then(() => navBar());
    document.querySelector("[hidden] .ytcp-main-appbar")?.remove();
}

(function() {
    'use strict';
    window.addEventListener("yt-page-data-updated", setupNavbar, false);
    GM_addStyle(`
.ytcp-main-appbar {
    margin: -12px;
	width: 100%;
	text-align: center;
	line-height: 40px;
	height: 40px;
	border-bottom: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
	background-color: #fff;
	position: fixed;
	z-index: 2001;
	font-size: 13px;
	font-family: Roboto, arial, sans-serif;
}

html:not([dark]) .ytcp-nav-item {
	display: inline-block;
	margin-left: 30px;
}

html:not([dark]) .ytcp-nav-item span {
	display: inline-block;
	color: #666;
	text-decoration: none;
	cursor: pointer;
}

html:not([dark]) .ytcp-nav-item span:hover {
	box-shadow: inset 0 -3px #cc181e;
}

html:not([dark]) [page-subtype="home"] .ytcp-nav-home span,
html:not([dark]) [page-subtype="subscriptions"] .ytcp-nav-subs span,
html:not([dark]) [page-subtype="trending"] .ytcp-nav-trending span {
	box-shadow: inset 0 -3px #cc181e;
	color: #333;
}

html:not([dark]) .ytcp-appbar-nav {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

html[dark] .ytcp-main-appbar {
	width: 100%;
	text-align: center;
	line-height: 40px;
	height: 40px;
	background-color: var(--yt-spec-brand-background-primary);
    border-bottom: 1px solid var(--yt-spec-10-percent-layer);
    border-left: 1px solid var(--yt-spec-10-percent-layer);
	position: fixed;
	z-index: 2001;
	font-size: 13px;
	font-family: Roboto, arial, sans-serif;
	box-shadow: inset 0 1px #0f0f0f;
}

html[dark] .ytcp-nav-item {
	display: inline-block;
	margin-left: 30px;
}

html[dark] .ytcp-nav-item span {
	display: inline-block;
	color: #8f8f8f;
	text-decoration: none;
	cursor: pointer;
}

html[dark] .ytcp-nav-item span:hover {
	box-shadow: inset 0 -3px #dcdcdc;
}

html[dark] [page-subtype="home"] .ytcp-nav-home span,
html[dark] [page-subtype="subscriptions"] .ytcp-nav-subs span,
html[dark] [page-subtype="trending"] .ytcp-nav-trending span {
	box-shadow: inset 0 -3px #dcdcdc;
	color: #c1c1c1;
}

html[dark] .ytcp-appbar-nav {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

.ytcp-load-more-button {
	margin: 20px auto;
	display: block;
	height: 28px;
	border-radius: 2px;
	cursor: pointer;
	font: 11px Roboto, arial, sans-serif;
	padding: 0 10px;
	font-weight: 500;
	outline: 0;
}

.ytcp-load-more-button.ytcp-related {
	margin: 0 auto !important;
}

html:not([dark]) .ytcp-load-more-button {
	border: 1px solid #d3d3d3;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
	background-color: #f8f8f8;
	color: #333;
}

html:not([dark]) .ytcp-load-more-button:hover {
	border-color: #c6c6c6;
	background-color: #f0f0f0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

html:not([dark]) .ytcp-load-more-button:active {
	border-color: #c6c6c6;
	background-color: #e9e9e9;
	box-shadow: inset 0 1px 0 #ddd;
}

html[dark] .ytcp-load-more-button {
	border: 0;
	background-color: #2e2e2e;
	color: #c1c1c1;
}

html[dark] .ytcp-load-more-button:hover {
	background-color: #353535;
}

html[dark] .ytcp-load-more-button:active {
	background-color: #292929;
}

[page-subtype="home"] ytd-two-column-browse-results-renderer,
[page-subtype="trending"] ytd-two-column-browse-results-renderer,
[page-subtype="subscriptions"] ytd-two-column-browse-results-renderer,
[page-subtype="trending"] tp-yt-app-header {
	margin-top: 60px !important;
}`);
})();