Fixing YouTube Music’s “New Albums & Singles” Section

July 14th, 2021

It’s been a minute. How about a good helping of fixing some really bad UI/UX decisions from the YouTube Music team as a “welcome back” to writing in this section.

I recently moved away from Spotify due to a price increase and also as a way to consolidate some of the services I use. I use YouTube a ton already, and I have got increasingly annoyed at the ad situation. I may as well get YouTube Premium to get access to YouTube Music and remove those pesky ads while still supporting creators with view revenue.

One of my favorite sections on Spotify was the new releases section. This is how I scope out new music to enjoy. I was very surprised to see how bad this page was on YouTube Music’s side, at least on the Desktop client/browser view, where I listen to most of my music.

Albums, singles and EPs are not distinguishable from each other. You can’t even read some artist names or song names completely. Everything is shortened and truncated inexpleciably. I doubt anybody actually even uses this page as a result. It’s a truely terrible experience. Check for yourself: https://music.youtube.com/new_releases/albums

I decided to write a UserScript to fix this up a bit. Here’s the before and after:

UserScript:

// ==UserScript==
// @name         YouTube Music New Releases Fixer
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Fix some really bad UI/UX decisions.
// @author       Vaughn Royko
// @match        https://music.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    function addGlobalStyle(css) {
        var head = document.getElementsByTagName('head')[0];
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
 
    addGlobalStyle('ytmusic-two-row-item-renderer[has-badges_] .subtitle.ytmusic-two-row-item-renderer { white-space: normal !important; }');
    addGlobalStyle('.title-group.ytmusic-two-row-item-renderer { max-height: none !important; }');
    addGlobalStyle('ytmusic-two-row-item-renderer:not([has-badges_]) .subtitle.ytmusic-two-row-item-renderer { display: block !important; overflow: visisble !important; max-height: none !important; }');
 
    function addAlbumStyles() {
        var albumTypes = document.getElementsByClassName('style-scope yt-formatted-string');
        for (var albumType of albumTypes) {
            var albumCover = albumType.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('image')[0];
            albumCover.style.boxSizing = 'border-box';
            if (albumType.innerHTML === 'Single') {
                albumCover.style.border = '5px solid #ff0047';
                albumType.style.color = '#ff0047';
            } else if (albumType.innerHTML === 'EP') {
                albumCover.style.border = '5px solid #a9ff00';
                albumType.style.color = '#a9ff00';
            } else if (albumType.innerHTML === 'Album') {
                albumCover.style.border = '5px solid #00d0ff';
                albumType.style.color = '#00d0ff';
            }
        }
    }
    addAlbumStyles();
 
    var currentLocation = document.location.href;
    var observer = new MutationObserver((mutationList) => {
        if (currentLocation !== document.location.href) {
            currentLocation = document.location.href;
            addAlbumStyles();
        }
    });
 
    observer.observe(document.getElementById('contents'), {
        childList: true,
        subtree: true
    });
})();

This will work with plugins like Tampermonkey, Greasemonkey, or Violentmonkey.

Alternatively, you can view it on Greasy Fork.

Enjoy!