Optimized YouTube Subscription feed list view with more information on less space
// ==UserScript==
// @name YouTube (New Design) | Compact Subscription Feed
// @namespace de.sidneys.userscripts
// @homepage https://gist.githubusercontent.com/sidneys/1aec97019cde4fe37619e36eb730b216/raw/
// @version 1.0.0
// @description Optimized YouTube Subscription feed list view with more information on less space
// @author sidneys
// @icon https://www.youtube.com/favicon.ico
// @include http*://www.youtube.com/*
// @require https://greasyfork.org/scripts/38888-greasemonkey-color-log/code/Greasemonkey%20%7C%20Color%20Log.js
// @require https://greasyfork.org/scripts/38889-greasemonkey-waitforkeyelements-2018/code/Greasemonkey%20%7C%20waitForKeyElements%202018.js
// @run-at document-end
// @grant GM_addStyle
// ==/UserScript==
/**
* @default
* @constant
* @global
*/
DEBUG = false;
/**
* @default
* @constant
*/
const urlPath = '/feed/subscriptions';
/**
* Inject Stylesheet
*/
let injectStylesheet = () => {
console.debug('injectStylesheet');
GM_addStyle(`
/* ==========================================================================
GLOBAL
========================================================================== */
.hide
{
opacity: 0 !important;
}
/* ==========================================================================
LIST
========================================================================== */
/* Container
========================================================================== */
.layout-list div#content
{
position: relative !important;
margin-top: 2% !important;
width: 95% !important;
}
.layout-list div.branded-page-v2-primary-col > div.yt-card
{
margin-top: 0 !important;
}
/* Header
========================================================================== */
.layout-list ol.section-list > li:first-child div.feed-item-container
{
border-top: none !important;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.25)) !important;
background-repeat: no-repeat !important;
background-size: 100% 45px !important;
}
.layout-list ol.section-list > li:first-child div.feed-item-container div.menu-container
{
margin-bottom: 20px !important;
}
.layout-list ol.section-list > li:first-child div.feed-item-container div.shelf-title-table
{
display: table !important;
width: 100% !important;
}
.layout-list ol.section-list > li:first-child div.feed-item-container div.shelf-title-table h2
{
display: none !important;
}
.layout-list ol.section-list > li:first-child div.feed-item-container div.shelf-title-table .menu-container
{
display: block !important;
}
/* ==========================================================================
ITEM
========================================================================== */
/* Stripes
========================================================================== */
.layout-list #contents.ytd-section-list-renderer > *.ytd-section-list-renderer:nth-child(odd)
{
background-color: rgba(0, 0, 0, 0.1) !important;
}
/* Container
========================================================================== */
.layout-list ytd-shelf-renderer
{
border-bottom: 1px solid #5a5a5a !important;
border-top: none !important;
padding-bottom: 12px !important;
padding-top: 12px !important;
}
.layout-list .text-wrapper.ytd-video-renderer
{
max-width: none !important;
}
.layout-list .grid-subheader.ytd-shelf-renderer
{
display: none !important;
}
.layout-list #contents.ytd-shelf-renderer
{
margin-top: 0 !important;
}
.layout-list ytd-expanded-shelf-contents-renderer
{
margin-bottom: 0 !important;
}
/* Thumbnail
========================================================================== */
.layout-list ytd-thumbnail
{
width: 72px !important;
height: auto !important;
margin-left: 16px !important;
}
.layout-list ytd-thumbnail-overlay-time-status-renderer
{
color: rgb(118, 118, 118) !important;
font-size: 12px !important;
background-color: transparent !important;
bottom: 15% !important;
}
.layout-list ytd-thumbnail-overlay-resume-playback-renderer:before
{
top: -37px !important;
width: 72px !important;
height: 41px !important;
line-height: 36px !important;
font-size: 1em !important;
}
.layout-list ytd-thumbnail-overlay-resume-playback-renderer:after
{
font-size: 0.75rem !important;
font-weight: !important;
}
/* Title
========================================================================== */
/*.layout-list #title-wrapper.ytd-video-renderer
{
padding: 4px 0 !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: none !important;
margin-right: 50px !important;
}*/
.layout-list #video-title.ytd-video-renderer
{
font-size: 13px !important;
line-height: 1.3em !important;
font-weight: 500 !important;
display: inline !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
background: none !important;
}
.layout-list .badge-style-type-verified.ytd-badge-supported-renderer
{
margin: 0 0 0 5px !important;
}
/* Channel
========================================================================== */
.layout-list a.yt-simple-endpoint.yt-formatted-string
{
color: #1ea4e8 !important;
}
/* Description
========================================================================== */
.layout-list #description-text.ytd-video-renderer
{
max-width: 70% !important;
margin-top: 4px !important;
display: none !important;
}
/* Badges
========================================================================== */
.layout-list ytd-video-meta-block #byline-container
{
display: none !important;
}
/* Time
========================================================================== */
.layout-list span.timestamp.ytd-video-meta-block
{
float: right !important;
position: absolute !important;
right: 0 !important;
margin-right: 16px !important;
}
.layout-list span.timestamp.ytd-video-meta-block br
{
display: none !important;
}
`);
};
/**
* Feed in list / grid layout?
* @returns {Boolean} - Page layout
*/
let isListLayout = () => !Boolean(document.querySelector('div.multirow-shelf'));
/**
* Adapt feed item element
* @param {HTMLElement} element - Feed item container
*/
let adaptItemLayout = (element) => {
console.debug('adaptItemLayout');
// DOM
const titleElement = element.querySelector('#video-title.ytd-video-renderer');
const verifiedElement = element.querySelector('#byline-container.ytd-video-meta-block yt-icon.ytd-badge-supported-renderer');
const channelElement = element.querySelector('a.yt-simple-endpoint.yt-formatted-string');
const videoMetaDivList = element.querySelectorAll('div.yt-lockup-meta');
const videoBadgesDiv = element.querySelector('div.yt-lockup-badges');
const videoLiveSpan = element.querySelector('span.yt-badge-live');
const videoReminderSpan = element.querySelector('span.yt-uix-livereminder');
// Create Separator
let elementSeparator = document.createElement('span');
elementSeparator.innerText = ' | ';
// Title
if (titleElement) {
titleElement.insertBefore(elementSeparator, titleElement.firstChild);
}
// Verified
if (verifiedElement) {
titleElement.insertBefore(verifiedElement, titleElement.firstChild);
verifiedElement.style.marginLeft = '4px';
}
// Channel
if (channelElement && titleElement) {
titleElement.insertBefore(channelElement, titleElement.firstChild);
}
// Live Badge
if (videoLiveSpan && videoBadgesDiv && videoMetaDivList && videoMetaDivList[0] && videoMetaDivList[0].style) {
videoBadgesDiv.style.display = 'inline-block';
videoMetaDivList[0].style.display = 'inline-block';
}
// Reminder Badge
if (videoReminderSpan && videoBadgesDiv && videoMetaDivList && videoMetaDivList[0]) {
videoBadgesDiv.style.display = 'inline-block';
videoMetaDivList.forEach((videoMetaDiv) => {
videoMetaDiv.style.display = 'inline-block';
});
}
};
/**
* Adapt timestamp element
* @param {HTMLElement} element - Timestamp element
*/
let adaptTimestampLayout = (element) => {
console.debug('adaptTimestampLayout');
// DOM
const itemElement = element.closest('ytd-shelf-renderer');
const videoMetadataLineDiv = itemElement.querySelector('#metadata-line.ytd-video-meta-block');
// Create new timestamp element
const timestampElement = document.createElement('span');
timestampElement.className = 'timestamp ytd-video-meta-block';
timestampElement.innerText = element.innerText;
videoMetadataLineDiv.appendChild(timestampElement);
// Remove old timestamp element
element.closest('ytd-thumbnail-overlay-time-status-renderer').parentNode.removeChild(element.closest('ytd-thumbnail-overlay-time-status-renderer'));
};
/**
* Init
*/
let init = () => {
console.info('init');
// Check URL
if (!location.pathname.startsWith(urlPath)) { return; }
// Add Stylesheet
injectStylesheet();
// Set layout helper class (document.body)
if (isListLayout()) {
document.body.classList.add('layout-list');
} else {
document.body.classList.remove('layout-list');
}
// Watch items
waitForKeyElements('.layout-list ytd-shelf-renderer', (item) => {
adaptItemLayout(item);
});
// Watch timestamps
waitForKeyElements('span.ytd-thumbnail-overlay-time-status-renderer', (item) => {
adaptTimestampLayout(item);
});
};
/**
* @listens window:Event#load
*/
window.addEventListener('load', () => {
console.debug('window#load');
init();
});
/**
* @listens window:Event#spfdone
*/
window.addEventListener('spfdone', () => {
console.debug('window#spfdone');
init();
});