Home: collapse guide, 5 videos per row, hide Shorts. Watch: hide recommendations sidebar and center the player/content.
// ==UserScript==
// @name YouTube Layout Plus
// @namespace https://qazwsx123.uk/
// @version 0.1.0
// @description Home: collapse guide, 5 videos per row, hide Shorts. Watch: hide recommendations sidebar and center the player/content.
// @author Codex
// @match https://www.youtube.com/*
// @run-at document-idle
// @grant none
// ==/UserScript==
(function () {
'use strict';
const STYLE_ID = 'tm-youtube-layout-plus-style';
let currentUrl = location.href;
let applyTimer = null;
let bodyObserver = null;
let routeTimer = null;
let lastAutoCollapsedHomeUrl = '';
function isHomePage() {
return location.pathname === '/';
}
function isWatchPage() {
return location.pathname === '/watch';
}
function ensureStyle() {
if (document.getElementById(STYLE_ID)) return;
const style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = `
html.tm-youtube-layout-plus-home {
--tm-guide-collapsed-width: 72px;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-feed-filter-chip-bar-renderer,
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) #chips-wrapper {
left: var(--tm-guide-collapsed-width) !important;
width: calc(100vw - var(--tm-guide-collapsed-width)) !important;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-page-manager {
margin-left: var(--tm-guide-collapsed-width) !important;
width: calc(100% - var(--tm-guide-collapsed-width)) !important;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-two-column-browse-results-renderer,
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-rich-grid-renderer,
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) #contents.ytd-rich-grid-renderer {
margin-left: 0 !important;
padding-left: 0 !important;
width: auto !important;
}
html.tm-youtube-layout-plus-home ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 5 !important;
--ytd-rich-grid-posts-per-row: 5 !important;
}
html.tm-youtube-layout-plus-home ytd-rich-item-renderer,
html.tm-youtube-layout-plus-home ytd-rich-grid-row,
html.tm-youtube-layout-plus-home ytd-rich-grid-media,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > * {
max-width: none !important;
}
html.tm-youtube-layout-plus-home ytd-rich-section-renderer,
html.tm-youtube-layout-plus-home ytd-rich-shelf-renderer,
html.tm-youtube-layout-plus-home ytd-reel-shelf-renderer {
display: none !important;
}
html.tm-youtube-layout-plus-watch ytd-watch-flexy #secondary,
html.tm-youtube-layout-plus-watch ytd-watch-flexy #related,
html.tm-youtube-layout-plus-watch ytd-watch-flexy #secondary-inner,
html.tm-youtube-layout-plus-watch ytd-watch-next-secondary-results-renderer {
display: none !important;
}
html.tm-youtube-layout-plus-watch ytd-watch-flexy[is-two-columns_] #primary {
max-width: none !important;
width: min(1400px, calc(100vw - 48px)) !important;
margin: 0 auto !important;
}
html.tm-youtube-layout-plus-watch ytd-watch-flexy[is-two-columns_] #columns {
display: block !important;
}
html.tm-youtube-layout-plus-watch ytd-watch-flexy[is-two-columns_] #primary-inner,
html.tm-youtube-layout-plus-watch ytd-watch-flexy[is-two-columns_] #above-the-fold,
html.tm-youtube-layout-plus-watch ytd-watch-flexy[is-two-columns_] #below {
max-width: none !important;
}
`;
document.head.appendChild(style);
}
function collapseGuide() {
const app = document.querySelector('ytd-app');
if (app) {
app.removeAttribute('guide-persistent-and-visible');
app.setAttribute('mini-guide-visible', '');
}
const drawer = document.querySelector('tp-yt-app-drawer#guide');
if (drawer) {
drawer.removeAttribute('opened');
drawer.style.width = '';
drawer.style.minWidth = '';
drawer.style.visibility = '';
}
const guideRenderer = document.querySelector('ytd-guide-renderer');
if (guideRenderer) {
guideRenderer.style.display = '';
guideRenderer.style.width = '';
guideRenderer.style.minWidth = '';
}
}
function applyHomeLayout() {
const richGrid = document.querySelector('ytd-rich-grid-renderer');
if (!richGrid) return;
document.documentElement.classList.add('tm-youtube-layout-plus-home');
if (lastAutoCollapsedHomeUrl !== location.href) {
collapseGuide();
lastAutoCollapsedHomeUrl = location.href;
}
}
function applyWatchLayout() {
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (!watchFlexy) return;
document.documentElement.classList.add('tm-youtube-layout-plus-watch');
}
function clearModeClasses() {
document.documentElement.classList.remove(
'tm-youtube-layout-plus-home',
'tm-youtube-layout-plus-watch'
);
}
function applyLayout() {
ensureStyle();
clearModeClasses();
if (isHomePage()) {
applyHomeLayout();
return;
}
if (isWatchPage()) {
applyWatchLayout();
}
}
function scheduleApply() {
clearTimeout(applyTimer);
applyTimer = window.setTimeout(applyLayout, 120);
}
function startObservers() {
if (bodyObserver) return;
bodyObserver = new MutationObserver(() => {
scheduleApply();
});
bodyObserver.observe(document.body, {
childList: true,
subtree: true,
});
}
function watchRoute() {
if (routeTimer) return;
routeTimer = window.setInterval(() => {
if (location.href === currentUrl) return;
currentUrl = location.href;
if (!isHomePage()) {
lastAutoCollapsedHomeUrl = '';
}
scheduleApply();
}, 500);
}
function init() {
ensureStyle();
scheduleApply();
startObservers();
watchRoute();
}
init();
})();