Audio Only Control for Youtube

yt-audio-only-control.user.js

// ==UserScript==
// @name         Audio Only Control
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Toggle video to be display or hidden
// @author       RZFury
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @updateURL    https://gist.github.com/rzfury/fc68c194777b4b7d16e3db0e008a1240/raw/8a111319cf83ca014755fac7017859093cc54348/yt-audio-only-control.user.js
// @downloadURL  https://gist.github.com/rzfury/fc68c194777b4b7d16e3db0e008a1240/raw/8a111319cf83ca014755fac7017859093cc54348/yt-audio-only-control.user.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement("style");
    style.textContent = "[data-rzfury-audio-only] #movie_player {max-height: 56px !important;}"
        + "[data-rzfury-audio-only] #movie_player .html5-video-container {display: none !important;}"
        + "[data-rzfury-audio-only] #primary-inner #player {max-height: 56px !important;}"
        + "[data-rzfury-audio-only] .ytp-autohide .ytp-chrome-bottom {opacity: 1 !important;display: block !important;bottom: 0;}"
        + "#primary-inner #top-row #rzfury-toggle {cursor: pointer; font-size: 14px; margin-left: 8px; color: var(--yt-spec-text-primary); background-color: var(--yt-spec-badge-chip-background); border-radius: 18px; border-color: transparent;}"
        + "#primary-inner #top-row #rzfury-toggle {font-family: \"Roboto\",\"Arial\",sans-serif; font-weight: 500; padding-inline: 1rem; white-space: nowrap; }"
        + "#primary-inner #top-row #rzfury-toggle:hover {background-color: var(--yt-spec-mono-tonal-hover);}"
        + "[data-rzfury-audio-only] #primary-inner #top-row #rzfury-toggle {background-color: var(--yt-spec-light-green);}";
    document.body.append(style);

    let interval = setInterval(() => {
        let menus = document.querySelector('#primary-inner').querySelector('#top-row');
        if(menus == null) {
            return;
        }

        const btnToggle = document.createElement("button");
        btnToggle.id = "rzfury-toggle";
        btnToggle.textContent = "Audio Only";
        btnToggle.onclick = __RZFURY_toggleAudioOnly;
        menus.querySelector("ytd-menu-renderer").append(btnToggle);

        clearInterval(interval);
    }, 1000);

    if(window.localStorage.getItem("RZFURY::yt-audio-only")) {
        document.body.setAttribute("data-rzfury-audio-only", "true");
    }
})();

function __RZFURY_toggleAudioOnly() {
    const active = document.body.getAttribute("data-rzfury-audio-only");
    console.log(active);
    if (active) {
        document.body.removeAttribute("data-rzfury-audio-only");
        window.localStorage.removeItem("RZFURY::yt-audio-only");
    }
    else {
        document.body.setAttribute("data-rzfury-audio-only", "true");
        window.localStorage.setItem("RZFURY::yt-audio-only", "true");
    };
}