// ==UserScript==
// @name YouTube: Search results in Grid view
// @namespace https://greasyfork.org/users/1166888-pedro
// @match https://www.youtube.com/*
// @version 2023.12.10
// @author Pedro
// @description See more results in one go, without irrelevant results, such as 'People also watched' and 'For you', in the way.
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @compatible Chrome
// @compatible Safari
// @compatible Firefox
// @license MIT
// ==/UserScript==
GM_registerMenuCommand('Settings', settingsMenu);
function settingsMenu() {
const menu = document.createElement('settings-menu');
document.documentElement.appendChild(menu);
menu.insertAdjacentHTML('afterbegin', `
<div>
<header>
<span>Settings</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" opacity=".87"></path>
<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"></path>
</svg>
</header>
<label>
<span>Videos per row</span>
<input type="number" id="videosPerRow">
</label>
<label>
<span>Hide right sidebar</span>
<input type="checkbox" id="hideRightSidebar">
</label>
<style>
settings-menu svg {
color: var(--background-3);
width: 24px;
height: 24px;
transition: 0.4s;
}
settings-menu svg:hover {
color: inherit;
transform: rotate(-90deg);
}
settings-menu svg:active {
transform: scale(1.5);
}
settings-menu div {
margin: 10px;
}
settings-menu {
width: 225px;
position: fixed;
background: var(--background);
top: 20px;
right: 20px;
z-index: 9999;
color: var(--text);
font-size: 1.4rem;
border-radius: 12px;
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.1);
font-weight: 400;
border: 1px solid var(--border);
}
settings-menu header {
font-size: 1.7rem;
font-weight: 500
}
settings-menu header,
settings-menu label {
padding: 6px;
display: flex;
align-items: center;
}
settings-menu svg,
settings-menu label {
cursor: pointer;
}
settings-menu span {
flex-grow: 1;
}
settings-menu [type="number"] {
font-family: "Roboto";
font-size: inherit;
box-sizing: border-box;
border: none;
width: 60px;
height: 30px;
background: var(--background-2);
color: inherit;
outline: none;
border-radius: 5px;
padding: 0 3px;
}
settings-menu [type="number"]::-webkit-inner-spin-button {
height: 30px;
}
settings-menu [type="checkbox"] {
appearance: none;
-webkit-tap-highlight-color: transparent;
position: relative;
border: 0;
outline: 0;
width: 37.5px;
height: 24px;
cursor: pointer;
}
settings-menu [type="checkbox"]:after {
content: "";
width: 100%;
height: 100%;
display: inline-block;
border-radius: 100px;
clear: both;
background: var(--toggle-button-track);
transition: background-color linear 0.08s;
}
settings-menu [type="checkbox"]:checked:after {
background: #1db954;
}
settings-menu [type="checkbox"]:before {
content: "";
height: 19.5px;
width: 19.5px;
display: block;
position: absolute;
left: 0;
top: 2px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.2);
transform: translateX(2px);
transition: transform linear 0.1s, background-color linear 0.08s;
}
settings-menu [type="checkbox"]:checked:before {
transform: translateX(16px);
transition: transform linear 0.1s, background-color linear 0.08s;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--text: #f1f1f1;
--background: #121212;
--background-2: #272727;
--background-3: #999;
--toggle-button-track: rgba(113, 113, 113, 0.4);
--border: rgba(255, 255, 255, 0.2)
}
}
@media (prefers-color-scheme: light) {
:root {
--text: #030303;
--background: #fff;
--background-2: #e5e5e5;
--background-3: #666;
--toggle-button-track: rgba(144, 144, 144, 0.4);
}
}
</style>
</div>`);
menu.addEventListener('change', function(event) {
if (event.target.type === 'number') {
GM_setValue('videosPerRow', event.target.value);
document.documentElement.style.setProperty('--videos-per-row', event.target.value);
} else {
GM_setValue('hideRightSidebar', event.target.checked);
document.documentElement.classList.toggle('hideRightSidebar');
}
});
menu.querySelector('#videosPerRow').value = GM_getValue('videosPerRow') || 5;
menu.querySelector('#hideRightSidebar').checked = GM_getValue('hideRightSidebar');
menu.querySelector('svg').addEventListener('click', function() {
menu.remove();
});
}
document.documentElement.style.setProperty('--videos-per-row', GM_getValue('videosPerRow') || 5);
if (GM_getValue('hideRightSidebar')) document.documentElement.classList.add('hideRightSidebar');
document.documentElement.insertAdjacentHTML('beforeend', `
<style>
ytd-search ytd-search-pyv-renderer,
ytd-search ytd-ad-slot-renderer,
ytd-search .metadata-snippet-container-one-line.ytd-video-renderer,
ytd-search .metadata-snippet-container.ytd-video-renderer,
ytd-search #description-text.ytd-video-renderer,
ytd-search #expandable-metadata.ytd-video-renderer:not(:empty),
ytd-search ytd-exploratory-results-renderer.ytd-item-section-renderer,
ytd-search ytd-horizontal-card-list-renderer.ytd-item-section-renderer:not(:first-child),
ytd-search ytd-reel-shelf-renderer.ytd-item-section-renderer,
ytd-search ytd-shelf-renderer.ytd-item-section-renderer,
.hideRightSidebar ytd-search #secondary.ytd-two-column-search-results-renderer {
display: none !important;
}
ytd-search #container.ytd-search {
width: 100%;
max-width: calc(var(--videos-per-row) * (var(--ytd-rich-grid-item-max-width) + var(--ytd-rich-grid-item-margin)));
}
ytd-search #header.ytd-search,
ytd-search ytd-two-column-search-results-renderer,
ytd-search #primary.ytd-two-column-search-results-renderer {
max-width: 100% !important;
}
ytd-search #contents>ytd-item-section-renderer,
ytd-search #contents>ytd-item-section-renderer>#contents {
display: contents;
}
ytd-search #contents.ytd-section-list-renderer {
display: flex;
flex-wrap: wrap;
}
ytd-search ytd-video-renderer,
ytd-search ytd-radio-renderer,
ytd-search ytd-playlist-renderer,
ytd-search ytd-show-renderer,
ytd-search ytd-channel-renderer {
margin-left: calc(var(--ytd-rich-grid-item-margin) / 2);
margin-right: calc(var(--ytd-rich-grid-item-margin) / 2);
width: calc(100% / var(--videos-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);
margin-bottom: 24px;
}
ytd-search ytd-movie-renderer {
margin-left: calc(var(--ytd-rich-grid-item-margin) / 2);
margin-right: calc(var(--ytd-rich-grid-item-margin) / 2);
width: calc(200% / var(--videos-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px);
margin-bottom: 24px;
}
ytd-search yt-did-you-mean-renderer,
ytd-search yt-showing-results-for-renderer,
ytd-search ytd-thumbnail.ytd-video-renderer,
ytd-search ytd-playlist-thumbnail.ytd-radio-renderer,
ytd-search ytd-playlist-thumbnail.ytd-playlist-renderer,
ytd-search ytd-playlist-thumbnail.ytd-show-renderer {
min-width: 100% !important;
}
ytd-search .thumbnail-container.ytd-movie-renderer {
min-width: 0 !important;
}
ytd-search ytd-item-section-renderer[top-spacing-zero]:first-child #contents.ytd-item-section-renderer .ytd-item-section-renderer:first-child:not(yt-did-you-mean-renderer):not(yt-showing-results-for-renderer) {
margin-top: 16px;
}
ytd-search #dismissible.ytd-video-renderer,
ytd-search ytd-radio-renderer,
ytd-search ytd-playlist-renderer,
ytd-search #content-section.ytd-channel-renderer,
ytd-search #info-section.ytd-channel-renderer,
ytd-search ytd-show-renderer {
flex-direction: column;
}
ytd-search .ytd-channel-renderer {
align-self: center;
text-align: center;
}
ytd-search #video-title:is(.ytd-video-renderer, .ytd-radio-renderer, .ytd-playlist-renderer, .ytd-show-renderer, .ytd-movie-renderer),
ytd-search #channel-title.ytd-channel-renderer {
font-size: 1.4rem;
line-height: 2rem;
font-weight: 500;
}
ytd-search .title-and-badge.ytd-video-renderer,
ytd-search #channel-title.ytd-channel-renderer,
ytd-search #content.ytd-radio-renderer,
ytd-search #video-title.ytd-playlist-renderer,
ytd-search h3.ytd-show-renderer {
margin: 12px 0 4px 0 !important;
}
ytd-search ytd-menu-renderer.ytd-video-renderer {
margin: 4px 0 0 0;
}
ytd-search .text-wrapper.ytd-video-renderer {
max-width: 100% !important;
}
ytd-search #content.ytd-playlist-renderer,
ytd-search #content.ytd-radio-renderer,
ytd-search #info-section.ytd-channel-renderer {
flex-basis: 100%;
}
ytd-search ytd-playlist-thumbnail.ytd-show-renderer {
flex: 0 !important;
}
ytd-search #info.ytd-channel-renderer {
padding: 0 0px 16px 0;
}
ytd-search #avatar-section.ytd-channel-renderer,
ytd-search #buttons.ytd-channel-renderer,
ytd-search #badges.ytd-video-renderer,
ytd-search ytd-playlist-thumbnail.ytd-playlist-renderer {
margin: 0 !important;
}
ytd-search ytd-channel-renderer:not([dual-buttons]) #buttons.ytd-channel-renderer,
ytd-search #purchase-button.ytd-channel-renderer,
ytd-search #subscribe-button.ytd-channel-renderer {
padding: 0;
}
body[dir="ltr"] ytd-search ytd-menu-renderer.ytd-video-renderer {
position: absolute;
right: -12px;
}
body[dir="ltr"] ytd-search #meta.ytd-video-renderer {
padding-right: 24px;
}
body[dir="rtl"] ytd-search ytd-menu-renderer.ytd-video-renderer {
position: absolute;
left: -12px;
}
body[dir="rtl"] ytd-search #meta.ytd-video-renderer {
padding-left: 24px;
}
</style>`);
