Youtube Subscriptions Page - List View

[Bardicrune]

Youtube finally hit me with the Grid view only change for the subscriptions page. So I found and modified a tampermonkey script to bring back the list view for it. My modifications were to increase the size of the thumbnails, remove the channel icon, and add a WATCHED badge and grey out watched videos.

Here's my version if the grid view annoys you as well.

// ==UserScript==
// @name         YouTube Subscriptions – List Layout + Inline Descriptions (Fixed Flex)
// @namespace    subs-listview
// @version      1.3
// @description  Horizontal list with 240px thumbs and inline descriptions and watched overlay.
// @match        https://www.youtube.com/feed/subscriptions*
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const THUMB_WIDTH = 240;

    const css = `
/* Make the rich grid behave like a vertical list */
ytd-rich-grid-renderer #contents {
    display: block !important;
}

/* Each item becomes a full-width row */
ytd-rich-item-renderer {
    display: block !important;
    width: 80% !important;
    padding: 1px 0 !important;
    border-bottom: 1px solid var(--yt-spec-10-percent-layer) !important;
    margin-left: 0px !important;
}

/* THE REAL FLEX TARGET — THIS IS THE FIX */
.yt-lockup-view-model.yt-lockup-view-model--vertical {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

/* Thumbnail */
.yt-lockup-view-model__content-image {
    width: ${THUMB_WIDTH}px !important;
    min-width: ${THUMB_WIDTH}px !important;
    max-width: ${THUMB_WIDTH}px !important;
    flex-shrink: 0 !important;
}

/* Add WATCHED Banner to thumbnail */
.ytThumbnailOverlayProgressBarHost.ytThumbnailOverlayProgressBarHostLarge::before {
	content: "WATCHED" !important;
	z-index: 1 !important;
	display: block !important;
	/* top: -120px; */
	/* left: 10px; */
	position: inherit !important;
	background: #000 !important;
	/* opacity: .5 !important; */
	color: #fff !important;
	padding: 2px 4px !important;
	line-height: 1.3em !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	pointer-events: none !important;
}

/* Dim watched videos overlay */
.ytThumbnailOverlayProgressBarHost.ytThumbnailOverlayProgressBarHostLarge::after {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	top: -140px !important;
	width: 250px !important;
	height: 164px !important;
	background: #fff !important;
	opacity: 0.5 !important;
	pointer-events: none !important;
}

.yt-lockup-view-model__content-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    object-fit: cover !important;
}

/* Remove Avatar Image */
.yt-lockup-metadata-view-model__avatar {
    display:none !important;
}

/* Text column */
yt-lockup-metadata-view-model {
    flex: 1 !important;
    max-width: 90% !important;
}

/* Title */
.yt-lockup-metadata-view-model__title {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

/* Metadata */
.marty-meta-inline {
    font-size: 1.1rem !important;
    color: var(--yt-spec-text-secondary) !important;
    margin-bottom: 4px !important;
}

/* Description */
.marty-desc {
    font-size: 1.1rem !important;
    color: var(--yt-spec-text-secondary) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    max-height: 4em !important;
    overflow: auto !important;
}

.yt-lockup-view-model__metadata {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    width: 80%;
}
`;

    const style = document.createElement('style');
    style.textContent = css;
    document.documentElement.appendChild(style);

    function extractVideoId(href) {
        try {
            const url = new URL(href, location.origin);
            return url.searchParams.get('v');
        } catch {
            const m = href.match(/v=([^&]+)/);
            return m ? m[1] : null;
        }
    }

        async function fetchDescription(videoId) {
        if (!videoId) return '';
        try {
            const res = await fetch(`https://www.youtube.com/watch?v=${videoId}`, {
                credentials: 'same-origin'
            });
            const html = await res.text();
            const match = html.match(/ytInitialPlayerResponse\s*=\s*(\{.*?\});/s);
            if (!match) return '';
            const json = JSON.parse(match[1]);
            let desc = json?.videoDetails?.shortDescription || '';

            const sentences = desc.match(/[^.!?]+[.!?]+/g) || [];
            //desc = sentences.slice(0, 2).join(' ').trim();
            //return desc

            return desc.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 400) + (desc.length > 330 ? '…' : '');
        } catch {
            return '';
        }
    }


    async function enhanceDescriptions() {
        const items = document.querySelectorAll('ytd-rich-item-renderer yt-lockup-view-model');
        if (!items.length) return;

        for (const lockup of items) {
            if (lockup.dataset.martyDone === '1') continue;

            const thumbLink = lockup.querySelector('a.yt-lockup-view-model__content-image');
            if (!thumbLink) continue;

            const href = new URL(thumbLink.getAttribute('href'), location.origin).href;
            const videoId = extractVideoId(href);
            if (!videoId) continue;

            const metaContainer =
                lockup.querySelector('.yt-lockup-metadata-view-model__text-container') ||
                lockup.querySelector('yt-lockup-metadata-view-model');

            if (!metaContainer) continue;

            const metaRows = lockup.querySelectorAll('.yt-content-metadata-view-model__metadata-row span');
            const channel = metaRows?.[0]?.innerText?.trim() || '';
            const views = metaRows?.[1]?.innerText?.trim() || '';
            const timeAgo = metaRows?.[2]?.innerText?.trim() || '';
            const metaLine = [channel, views, timeAgo].filter(Boolean).join(' • ');

            const metaDiv = document.createElement('div');
            metaDiv.className = 'marty-meta-inline';
            metaDiv.textContent = metaLine;

            const descDiv = document.createElement('div');
            descDiv.className = 'marty-desc';
            descDiv.textContent = '…';

            //metaContainer.appendChild(metaDiv);
            metaContainer.appendChild(descDiv);

            lockup.dataset.martyDone = '1';

            const desc = await fetchDescription(videoId);
            descDiv.textContent = desc;
        }
    }

    function init() {
        setTimeout(enhanceDescriptions, 100);
        setTimeout(enhanceDescriptions, 500);
    }

    window.addEventListener('yt-navigate-finish', init);
    window.addEventListener('load', init);

})();

Original Source: https://pastebin.com/f4eCyxj2

[Bardicrune]

This no longer works well. Youtube changed their CSS (again) and now each line is huge. Instead here's an extension that does something similar:

Firefox: https://addons.mozilla.org/en-US/fir...outubelistview
Chrome: https://chromewebstore.google.com/de...ejdmngabahpckd

Here's a Tampermonkey script that just replicates the WATCHED badge and dim watched videos.

// ==UserScript==
// @name         YouTube Subscriptions – Watched Overlay
// @namespace    yt-subs-watched-overlay
// @version      1.0.0
// @description  Add Watched Tag and Dim the Thumbnails
// @match        https://www.youtube.com/feed/subscriptions*
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const css = `
/* Add WATCHED Banner to thumbnail */
.ytThumbnailOverlayProgressBarHost.ytThumbnailOverlayProgressBarHostLarge::before {
	content: "WATCHED" !important;
	z-index: 1 !important;
	display: block !important;
	/* top: -120px; */
	/* left: 10px; */
	position: inherit !important;
	background: #000 !important;
	/* opacity: .5 !important; */
	color: #fff !important;
	padding: 2px 4px !important;
	line-height: 1.3em !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	pointer-events: none !important;
}

/* Dim watched videos overlay */
.ytThumbnailOverlayProgressBarHost.ytThumbnailOverlayProgressBarHostLarge::after {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	top: -140px !important;
	width: 300px !important;
	height: 164px !important;
	background: #fff !important;
	opacity: 0.5 !important;
	pointer-events: none !important;
}
}
`;

    const style = document.createElement('style');
    style.textContent = css;
    document.documentElement.appendChild(style);

})();