Adds 3 additional thumbnails per row
目前為
// ==UserScript==
// @name YouTube Smaller Thumbnails
// @namespace http://greasyfork.org
// @version 0.0.4
// @description Adds 3 additional thumbnails per row
// @author you
// @license MIT
// @match *://www.youtube.com/*
// @match *://youtube.com/*
// @run-at document-start
// @grant none
// ==/UserScript==
(function() {
'use strict';
const DELTA = 3; // Amount of columns to add.
const MAX_COLUMNS = 6; // Maximum amount of columns.
const DELTA_SHORTS = 9; // Amount of columns to add.
const MAX_SHORTS_COLUMNS = 12; // Maximum amount of columns for shorts.
function makeShortsSmaller() {
var style = document.createElement('style');
style.innerText = `
ytd-rich-item-renderer[is-slim-media] {
width: 10% !important;
}
`;
document.body.appendChild(style);
console.log('[YouTube Smaller Thumbnails] Reduced shorts size')
}
document.addEventListener("DOMContentLoaded", makeShortsSmaller);
document.addEventListener("load", makeShortsSmaller);
function installStyle(contents) {
var style = document.createElement('style');
style.innerHTML = contents;
document.body.appendChild(style);
}
function getTargetValue(currentValue) {
let newValue = currentValue + DELTA;
if (newValue > MAX_COLUMNS) {
newValue = MAX_COLUMNS;
}
return newValue;
}
function getShortsTargetValue(currentValue) {
let newValue = currentValue + DELTA_SHORTS;
if (newValue > MAX_SHORTS_COLUMNS) {
newValue = MAX_SHORTS_COLUMNS;
}
return newValue;
}
function isShorts(itemElement) {
return null !== itemElement.getAttribute('is-slim-media')
}
function modifyGridStyle(gridElement) {
const currentStyle = gridElement.getAttribute('style');
if (!currentStyle) {
return;
}
const itemsPerRowMatch = currentStyle.match(/--ytd-rich-grid-items-per-row:\s*(\d+)/);
if (!itemsPerRowMatch) {
return;
}
const currentValue = parseInt(itemsPerRowMatch[1], 10);
if (isNaN(currentValue)) {
return;
}
const newValue = getTargetValue(currentValue);
if (currentValue === newValue) {
return;
}
const newStyle = currentStyle.replace(
/--ytd-rich-grid-items-per-row:\s*\d+/,
`--ytd-rich-grid-items-per-row: ${newValue}`
);
gridElement.setAttribute('style', newStyle);
console.log(`[YouTube Smaller Thumbnails] Modified items per row: ${currentValue} -> ${newValue}`);
}
function modifyItemsPerRow(itemElement) {
const currentValue = parseInt(itemElement.getAttribute('items-per-row'), 10);
if (isNaN(currentValue)) {
return;
}
const newValue = isShorts(itemElement) ?
getShortsTargetValue(currentValue) :
getTargetValue(currentValue);
if (currentValue === newValue) {
return;
}
itemElement.setAttribute('items-per-row', newValue);
console.log(`[YouTube Smaller Thumbnails] Modified items per row: ${currentValue} -> ${newValue}`);
}
function modifyShortHidden(itemElement) {
if (!isShorts(itemElement)) {
return;
}
if (null === itemElement.getAttribute('hidden')) {
return
}
itemElement.removeAttribute('hidden');
console.log(`[YouTube Smaller Thumbnails] Modified hidden`);
}
function modifyShelfRenderer(itemElement) {
const currentStyle = itemElement.getAttribute('style');
if (!currentStyle) {
return;
}
const itemsCountMatch = currentStyle.match(/--ytd-rich-shelf-items-count:\s*(\d+)/);
if (!itemsCountMatch) {
return;
}
const currentValue = parseInt(itemElement.getAttribute('elements-per-row'), 10);
if (isNaN(currentValue)) {
return;
}
const newValue = getShortsTargetValue(currentValue)
if (currentValue === newValue) {
return;
}
const newStyle = currentStyle.replace(
/--ytd-rich-shelf-items-count:\s*\d+/,
`--ytd-rich-shelf-items-count: ${newValue}`
);
itemElement.setAttribute('style', newStyle);
itemElement.setAttribute('elements-per-row', newValue);
console.log(`[YouTube Smaller Thumbnails] Modified elements per row: ${currentValue} -> ${newValue}`);
}
function processExistingElements() {
document.querySelectorAll('ytd-rich-grid-renderer').forEach(gridElement => {
modifyGridStyle(gridElement);
});
document.querySelectorAll('ytd-rich-item-renderer').forEach(itemElement => {
modifyItemsPerRow(itemElement);
modifyShortHidden(itemElement);
});
}
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes && mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.tagName === 'YTD-RICH-GRID-RENDERER') {
modifyGridStyle(node);
}
if (node.tagName === 'YTD-RICH-ITEM-RENDERER') {
modifyItemsPerRow(node);
}
if (node.tagName === 'YTD-RICH-SHELF-RENDERER') {
modifyShelfRenderer(node);
}
node.querySelectorAll('ytd-rich-grid-renderer').forEach(gridElement => {
modifyGridStyle(gridElement);
});
node.querySelectorAll('ytd-rich-item-renderer').forEach(itemElement => {
modifyItemsPerRow(itemElement);
modifyShortHidden(itemElement);
});
node.querySelectorAll('ytd-rich-shelf-renderer').forEach(itemElement => {
modifyShelfRenderer(itemElement);
});
}
});
}
if (mutation.type === 'attributes') {
const target = mutation.target;
if (target.tagName === 'YTD-RICH-GRID-RENDERER' && mutation.attributeName === 'style') {
modifyGridStyle(target);
}
if (target.tagName === 'YTD-RICH-ITEM-RENDERER' && mutation.attributeName === 'items-per-row') {
if (mutation.attributeName === 'items-per-row') {
modifyItemsPerRow(target);
}
if (mutation.attributeName === 'hidden') {
modifyShortHidden(target);
}
}
if (target.tagName === 'YTD-RICH-SHELF-RENDERER' && mutation.attributeName === 'elements-per-row') {
modifyShelfRenderer(target);
}
}
});
});
function startObserver() {
processExistingElements();
observer.observe(document.documentElement, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style', 'hidden', 'items-per-row', 'elements-per-row']
});
console.log('[YouTube Smaller Thumbnails] Observer started');
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startObserver);
} else {
startObserver();
}
setInterval(processExistingElements, 3000);
})();