Modify Spotify webplayer frontend to show only the lyrics/transcript and playback controls

spotify-lyrics-transcript-focus-view.js

/**
 * Modify Spotify webplayer interface to show only the lyrics/transcript 
 * and footer bar with playback and miscellaneous controls.
 * 
 * Compatibility tests:
 *  - Chrome 2024-10-12
 */

// remove minimum width,height from 
// https://open.spotifycdn.com/cdn/build/web-player/web-player.f352977c.css
document.body.style['min-width'] = 'initial'
document.body.style['min-height'] = 'initial'

// hide header bar
document.getElementsByClassName('searchInputCollapsed')[0].style['display'] = 'none'
// hide left shortcuts column
document.getElementById('Desktop_LeftSidebar_Id').style['display'] = 'none'

// hide now-playing miniature in footer bar
document.querySelector(
    'footer [data-testid="now-playing-widget"]'
).parentNode.style['display'] = 'none'

// fill in space left by hidden now-playing miniature in footer bar
// playback controls
document.querySelector(
    'footer [data-testid="player-controls"]'
).parentNode.style['width'] = '50%'
// misc controls
document.querySelector(
    'footer button[data-testid="control-button-npv"]'
).parentNode.parentNode.style['width'] = '50%'

// hide main view, to be replaced by now-playing details view containing transcript
document.querySelector('.main-view-container').parentNode.style['display'] = 'none'
// move right now-playing details to main view
const detailsColumn = document.querySelector('.NowPlayingView').parentNode.parentNode
detailsColumn.style['grid-area'] = 'main-view' 

// above edits will cause now-playing details view to be closed for some reason; open if closed
new Promise(function(res) {
    window.setTimeout(
        () => {
            console.log('open now-playing details view')
            document.querySelector(
                'footer button[data-testid="control-button-npv"][data-active="false"]'
            )?.click()
            
            res()
        },
        1000
    )
})
// from here, whenever details view is opened, below must be rerun.
.then(() => {
    // details override static width to fill width of viewport
    detailsColumn.firstChild.style.width = '100%'
    
    // hide now-playing header bar
    detailsColumn.querySelector(
        '[aria-label="now playing view link"]'
    ).parentNode.parentNode.parentNode.style['display'] = 'none'
    
    const detailsContent = detailsColumn.querySelector('[data-testid="NPV_Panel_OpenDiv"]')
    // hide extra now-playing sections
    for (let detailsSectionIdx of [
        // title
        0,
        // summary
        1,
        // 2 - transcript/lyrics (skip)
        // more info
        3, 
        // tags
        4,
        // next in play queue
        5
    ]) {
        detailsContent.childNodes[detailsSectionIdx].style['display'] = 'none'
    }
})

Example in Chrome browser