Greasemonkey | YouTube | Fullsize Playlist

de.sidneys.greasemonkey.youtube.fullsize-playlist.js

// ==UserScript==
// @name            YouTube | Fullsize Playlist
// @version         3.3.0
// @description     Show full playlist without scrolling
// @namespace       https://gist.github.com/sidneys
// @author          sidneys
// @icon            https://youtube.com/favicon.ico
// @include         http*://www.youtube.com/*
// @grant           GM_addStyle
// @require         https://code.jquery.com/jquery-latest.min.js
// @require         https://greasyfork.org/scripts/5392-waitforkeyelements/code/WaitForKeyElements.js
// @run-at          document-start
// ==/UserScript==

/**
 * @default
 * @constant
 */
const urlPath = '/watch';
const urlQuerystring = 'list';


/**
 * Inject Stylesheet
 */
let injectCss = () => {
    console.log(GM_info.script.name, 'injectCss');

    GM_addStyle(`
    /* Sidebar
       ========================================================================== */
    #watch7-sidebar-contents {
        display: none !important;
    }
    `);
};


/**
 * Get playlist element
 * @returns {HTMLElement} Playlist
 */
let getPlaylist = () => {
    console.info(GM_info.script.name, 'getPlaylist');

    return document.querySelector('#watch-appbar-playlist') || document.querySelector('#watch-queue');
};

/**
 * Get playlist bounds
 * @returns {Object} Size of playlist
 */
let getPlaylistBounds = () => {
    console.info(GM_info.script.name, 'getPlaylistBounds');

    const playlistElement = getPlaylist();
    const headerElement = playlistElement.querySelector('.playlist-header') || playlistElement.querySelector('.watch-queue-header');
    const queueElement = playlistElement.querySelector('#playlist-autoscroll-list') || playlistElement.querySelector('.watch-queue-items-list');

    // Playlist size = Header + Items
    return {
        x: playlistElement.getBoundingClientRect().left,
        y: playlistElement.getBoundingClientRect().top,
        height: headerElement.scrollHeight + queueElement.scrollHeight,
        width: headerElement.scrollWidth + queueElement.scrollWidth
    };
};

/**
 * Set footer position
 */
let setFooterPosition = () => {
    console.info(GM_info.script.name, 'setFooterPosition');

    const containerElement = document.querySelector('#body-container');
    const footerElement = document.querySelector('#footer-container');

    const playlistBounds = getPlaylistBounds();

    containerElement.style.height = `${parseInt(playlistBounds.y + playlistBounds.height + footerElement.scrollHeight)}px`;
};

/**
 * Set playlist size
 */
let setPlaylistBounds = () => {
    console.info(GM_info.script.name, 'setPlaylistBounds');

    const playlistElement = getPlaylist();

    const playlistBounds = getPlaylistBounds();

    playlistElement.style.height = `${playlistBounds.height}px`;
};


/**
 * Init
 */
let init = () => {
    console.info(GM_info.script.name, 'init');

    // Check URL
    if (!document.location.pathname.startsWith(urlPath)) { return; }
    if (!document.location.search.includes(`${urlQuerystring}=`)) { return; }

    // Add Stylesheet
    injectCss();

    // Wait for footer
    waitForKeyElements('#player-playlist li:first-child', () => {
        setPlaylistBounds();
        setFooterPosition();
    });
};


/**
 * @listens window:Event#load
 * @listens window:Event#spfdone
 */
window.addEventListener('load', init);
window.addEventListener('spfdone', init);