Bookmarklet for Pinguin Radio

README.md

This gist contains JS code that can be used as a bookmarklet to change the new (awesome!) Pinguin Radio website to only display the audio player.

Before

After

javascript: document.title = document.querySelector(".stream-title").textContent;PinguinRadioObserver = new MutationObserver(function() {document.title = document.querySelector(".stream-title").textContent});PinguinRadioObserver.observe(document.querySelector(".stream-title"), {characterData: true,childList: true,subtree: true});Object.entries({".audio-player":"position:relative; top:0; left:0; width:100%; height:100%; text-align:center; max-width:none;",".container":"width:100%;",".controls":"bottom:7em; left:calc(50% - 5em);",".main-container":"display:none;",".mat-drawer":"display:none;",".pinguin-name":"font-size:80%;",".sidenav-chat":"display:none;",".sidenav-container":"background:black; margin:0; width:100%;",".stream-title":"font-size:6vw; height:100%; display:flex; align-items:center; flex-direction:column; justify-content:center; white-space:initial;margin:0; width:100%;",".stream-item img":"height:100%; width:100%; opacity:0.35;",".stream-item a":"height:100%; width:100%",}).forEach(([selector, style]) => document.querySelector(selector).style = style);

pinguin-radio.js

document.title = document.querySelector(".stream-title").textContent;

PinguinRadioObserver = new MutationObserver(function() {
    document.title = document.querySelector(".stream-title").textContent
});

PinguinRadioObserver.observe(document.querySelector(".stream-title"), {
    characterData: true,
    childList: true,
    subtree: true
});

Object.entries({
    ".audio-player":"position:relative; top:0; left:0; width:100%; height:100%; text-align:center; max-width:none;",
    ".container":"width:100%;",
    ".controls":"bottom:7em; left:calc(50% - 5em);",
    ".main-container":"display:none;",
    ".mat-drawer":"display:none;",
    ".pinguin-name":"font-size:80%;",
    ".sidenav-chat":"display:none;",
    ".sidenav-container":"background:black; margin:0; width:100%;",
    ".stream-title":"font-size:6vw; height:100%; display:flex; align-items:center; flex-direction:column; justify-content:center; white-space:initial;margin:0; width:100%;",
    ".stream-item img":"height:100%; width:100%; opacity:0.35;",
    ".stream-item a":"height:100%; width:100%",
}).forEach(([selector, style]) => document.querySelector(selector).style = style);