Toggle youtube music videoplayer

chrome extensions

Custom JavaScript for Websites 2: https://chrome.google.com/webstore/detail/custom-javascript-for-web/ddbjnfjiigjmcpcpkmhogomapikjbjdk
  

custom_music_youtube.js

// jQuery 3.2.1

const globalCss = `
  .btnTogglePlayer {
    border: 0;
    padding: 5px;
    border-radius: 3px;
    background: grey;
    width: 15px;
    height: 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    cursor: pointer;
  }
  
  .btnTogglePlayer.on, .btnTogglePlayer:hover {
    background-color: red;
    box-shadow: 1px 1px white;
    text-shadow: 1px 1px white;
  }
  
  #player-page > div > div.side-panel.style-scope.ytmusic-player-page {
    flex: 1;
    max-width: 100%;
  }
`

window.addEventListener("load", () => {
  loadCustomScript();
  addcss(globalCss);
}, false);

function addcss(css) {
  var head = document.getElementsByTagName('head')[0];
  var s = document.createElement('style');
  s.setAttribute('type', 'text/css');
  if (s.styleSheet) { // IE
    s.styleSheet.cssText = css;
  } else { // the world
    s.appendChild(document.createTextNode(css));
  }
  head.appendChild(s);
}

function loadCustomScript() {
  let showYtPlayer = true;
  const rightPanelNav = $('.right-content.ytmusic-nav-bar');
    const btnToggleYtPlayer = $('<a class="btnTogglePlayer">⚡</a>');
    btnToggleYtPlayer.click(() => {
      showYtPlayer = !showYtPlayer;
      toggleYtPlayer(showYtPlayer);
    });

    btnToggleYtPlayer.appendTo(rightPanelNav);
  }

  function toggleYtPlayer(show) {
    const ytPlayerPanel = $('#main-panel');
    const queuePanel = $('.side-panel');
    $(ytPlayerPanel).css('display', show ? 'inherit' : 'none');

    const btn = $('.btnTogglePlayer');
    if (!show) {
      btn.addClass('on');
    } else {
      btn.removeClass('on');
    }
  }