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);