')
// Remove cookie consent
html = html.replace(/'
// Add to
parts = html.split('')
html = parts[0] + '\n' + headhtml + '\n' + parts.slice(1).join('')
cb(html)
}
function onResize () {
let iframe = document.getElementById('lyricsiframe')
if (iframe) {
iframe.style.width = document.getElementById('lyricscontainer').clientWidth - 1 + 'px'
iframe.style.height = document.querySelector('.Root__nav-bar .navBar').clientHeight + 'px'
}
}
function initResize () {
window.addEventListener('mousemove', onMouseMoveResize)
window.addEventListener('mouseup', stopResize)
window.removeEventListener('resize', onResize)
}
function onMouseMoveResize (e) {
optionCurrentSize = 100 - (e.clientX / document.body.clientWidth * 100)
resizeLeftContainer.style.width = (100 - optionCurrentSize) + '%'
resizeContainer.style.width = optionCurrentSize + '%'
}
function stopResize () {
window.removeEventListener('mousemove', onMouseMoveResize)
window.removeEventListener('mouseup', stopResize)
window.addEventListener('resize', onResize)
onResize()
GM.setValue('optioncurrentsize', optionCurrentSize)
}
function getCleanLyricsContainer () {
const topContainer = document.querySelector('.Root__top-container')
if (!document.getElementById('lyricscontainer')) {
topContainer.style.width = (100 - optionCurrentSize) + '%'
topContainer.style.float = 'left'
resizeContainer = document.createElement('div')
resizeContainer.id = 'lyricscontainer'
resizeContainer.style = 'min-height: 100%; width: ' + optionCurrentSize + '%; position: relative; z-index: 1; float:left'
topContainer.parentNode.insertBefore(resizeContainer, topContainer.nextSibling)
} else {
resizeContainer = document.getElementById('lyricscontainer')
resizeContainer.innerHTML = ''
}
resizeLeftContainer = topContainer
return document.getElementById('lyricscontainer')
}
function hideLyrics () {
if (document.getElementById('lyricscontainer')) {
document.getElementById('lyricscontainer').parentNode.removeChild(document.getElementById('lyricscontainer'))
const topContainer = document.querySelector('.Root__top-container')
topContainer.style.width = '100%'
topContainer.style.removeProperty('float')
}
addLyricsButton()
}
function showLyrics (song, searchresultsLengths) {
const container = getCleanLyricsContainer()
const separator = document.createElement('span')
separator.setAttribute('class', 'second-line-separator')
separator.setAttribute('style', 'padding:0px 3px')
separator.appendChild(document.createTextNode('•'))
const bar = document.createElement('div')
bar.style.fontSize = '0.7em'
container.appendChild(bar)
// Resize button
const resizeButton = document.createElement('span')
resizeButton.style.fontSize = '1.8em'
resizeButton.style.cursor = 'ew-resize'
resizeButton.style.color = 'white'
resizeButton.appendChild(document.createTextNode('⇹'))
resizeButton.addEventListener('mousedown', initResize)
bar.appendChild(resizeButton)
bar.appendChild(separator.cloneNode(true))
// Hide button
const hideButton = document.createElement('a')
hideButton.href = '#'
hideButton.appendChild(document.createTextNode('Hide'))
hideButton.addEventListener('click', function hideButtonClick (ev) {
ev.preventDefault()
clearInterval(mainIv)
hideLyrics()
})
bar.appendChild(hideButton)
bar.appendChild(separator.cloneNode(true))
// Config button
const configButton = document.createElement('a')
configButton.href = '#'
configButton.appendChild(document.createTextNode('Options'))
configButton.addEventListener('click', function configButtonClick (ev) {
ev.preventDefault()
config()
})
bar.appendChild(configButton)
bar.appendChild(separator.cloneNode(true))
// Wrong lyrics
const wrongLyricsButton = document.createElement('a')
wrongLyricsButton.href = '#'
wrongLyricsButton.appendChild(document.createTextNode('Wrong lyrics'))
wrongLyricsButton.addEventListener('click', function wrongLyricsButtonClick (ev) {
ev.preventDefault()
forgetLyricsSelection(currentTitle, currentArtists, this.dataset.hit)
showSearchField(currentArtists + ' ' + currentTitle)
})
bar.appendChild(wrongLyricsButton)
// Back button
if (searchresultsLengths) {
bar.appendChild(separator.cloneNode(true))
const backbutton = document.createElement('a')
backbutton.href = '#'
if (searchresultsLengths === true) {
backbutton.appendChild(document.createTextNode('Back to search results'))
} else {
backbutton.appendChild(document.createTextNode('Back to search (' + (searchresultsLengths - 1) + ' other result' + (searchresultsLengths === 2 ? '' : 's') + ')'))
}
backbutton.addEventListener('click', function backbuttonClick (ev) {
ev.preventDefault()
addLyrics(true)
})
bar.appendChild(backbutton)
}
const iframe = document.createElement('iframe')
iframe.id = 'lyricsiframe'
container.appendChild(iframe)
const spinner = '
'
if (isFirefox) {
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(spinner)
} else {
iframe.src = 'https://open.spotify.com/405#html,' + encodeURIComponent(spinner)
}
iframe.style.width = container.clientWidth - 1 + 'px'
iframe.style.height = document.querySelector('.Root__nav-bar .navBar').clientHeight + 'px'
loadGeniusSong(song, function loadGeniusSongCb (html) {
loadGeniusAnnotations(song, html, function loadGeniusAnnotationsCb (song, html, annotations) {
combineGeniusResources(song, html, annotations, function combineGeniusResourcesCb (html) {
if (isFirefox) {
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(html)
} else {
iframe.src = 'https://open.spotify.com/404#html:scripts,' + encodeURIComponent(html)
}
iframe.style.position = 'fixed'
})
})
})
}
function listSongs (hits, container, query) {
if (!container) {
container = getCleanLyricsContainer()
}
// Back to search button
const backToSearchButton = document.createElement('a')
backToSearchButton.href = '#'
backToSearchButton.appendChild(document.createTextNode('Search again'))
backToSearchButton.addEventListener('click', function backToSearchButtonClick (ev) {
ev.preventDefault()
if (query) {
showSearchField(query)
} else if (currentArtists) {
showSearchField(currentArtists + ' ' + currentTitle)
} else {
showSearchField()
}
})
// List search results
const trackhtml = '
'
container.innerHTML = '
'
container.insertBefore(backToSearchButton, container.firstChild)
const ol = container.querySelector('ol.tracklist')
const searchresultsLengths = hits.length
const title = currentTitle
const artists = currentArtists
const onclick = function onclick () {
rememberLyricsSelection(title, artists, this.dataset.hit)
showLyrics(JSON.parse(this.dataset.hit), searchresultsLengths)
}
hits.forEach(function forEachHit (hit) {
let li = document.createElement('li')
li.setAttribute('class', 'tracklist-row')
li.setAttribute('role', 'button')
li.innerHTML = trackhtml.replace(/\$title/g, hit.result.title_with_featured).replace(/\$artist/g, hit.result.primary_artist.name).replace(/\$lyrics_state/g, hit.result.lyrics_state).replace(/\$stats\.pageviews/g, metricPrefix(hit.result.stats.pageviews, 1))
li.dataset.hit = JSON.stringify(hit)
li.addEventListener('click', onclick)
ol.appendChild(li)
})
}
function addLyrics (force, beLessSpecific) {
let songTitle = document.querySelector('.track-info__name.ellipsis-one-line').innerText
let feat = songTitle.indexOf(' (feat')
if (feat !== -1) {
songTitle = songTitle.substring(0, feat).trim()
}
const musicIsPlaying = document.querySelector('.now-playing-bar .player-controls__buttons .control-button.control-button--circled').className.toLowerCase().indexOf('pause') !== -1
const songArtistsArr = []
document.querySelector('.track-info__artists.ellipsis-one-line').querySelectorAll('a[href^="/artist/"]').forEach((e) => songArtistsArr.push(e.innerText))
let songArtists = songArtistsArr.join(' ')
if (force || (!document.hidden && musicIsPlaying && (currentTitle !== songTitle || currentArtists !== songArtists))) {
currentTitle = songTitle
currentArtists = songArtists
const firstArtist = songArtistsArr[0]
let simpleTitle = songTitle = songTitle.replace(/\s*-\s*.+?$/, '') // Remove anything following the last dash
if (beLessSpecific) {
songArtists = firstArtist
songTitle = simpleTitle
}
let hitFromCache = getLyricsSelection(songTitle, songArtists)
if (!force && hitFromCache) {
showLyrics(hitFromCache, true)
} else {
geniusSearch(songTitle + ' ' + songArtists, function geniusSearchCb (r) {
const hits = r.response.sections[0].hits
if (hits.length === 0) {
hideLyrics()
if (!beLessSpecific && (firstArtist !== songArtists || simpleTitle !== songTitle)) {
// Try again with only the first artist or the simple title
addLyrics(!!force, true)
} else if (force) {
showSearchField()
}
} else if (hits.length === 1) {
showLyrics(hits[0])
} else {
listSongs(hits)
}
})
}
}
}
function searchByQuery (query, container) {
geniusSearch(query, function geniusSearchCb (r) {
const hits = r.response.sections[0].hits
if (hits.length === 0) {
alert('No search results')
} else {
listSongs(hits, container, query)
}
})
}
function showSearchField (query) {
const b = getCleanLyricsContainer()
b.appendChild(document.createTextNode('Search genius.com'))
b.style.paddingRight = '15px'
const input = b.appendChild(document.createElement('input'))
input.className = 'SearchInputBox__input'
input.placeholder = 'Search genius.com...'
if (query) {
input.value = query
} else if (currentArtists) {
input.value = currentArtists
}
input.addEventListener('change', function onSearchLyricsButtonClick () {
if (input.value) {
searchByQuery(input.value, b)
}
})
input.addEventListener('keyup', function onSearchLyricsKeyUp (ev) {
if (ev.keyCode === 13) {
ev.preventDefault()
if (input.value) {
searchByQuery(input.value, b)
}
}
})
document.body.appendChild(b)
input.focus()
}
function addLyricsButton () {
if (document.getElementById('showlyricsbutton')) {
return
}
const b = document.createElement('div')
b.setAttribute('id', 'showlyricsbutton')
b.setAttribute('style', 'position:absolute; top: 0px; right:0px; color:#ffff64; cursor:pointer')
b.setAttribute('title', 'Load lyrics from genius.com')
b.appendChild(document.createTextNode('🅖'))
b.addEventListener('click', function onShowLyricsButtonClick () {
mainIv = window.setInterval(main, 2000)
addLyrics(true)
})
document.body.appendChild(b)
}
function config () {
loadCache()
const win = document.createElement('div')
win.setAttribute('style', 'position:absolute; top: 10px; right:10px; padding:15px; background:white; border-radius:10%; border:2px solid black; color:black')
document.body.appendChild(win)
const h1 = document.createElement('h1')
win.appendChild(h1).appendChild(document.createTextNode('Options'))
const a = document.createElement('a')
a.href = 'https://github.com/cvzi/Spotify-Genius-Lyrics-userscript/issues'
a.style = 'color:blue'
win.appendChild(a).appendChild(document.createTextNode('Report problem: github.com/cvzi/Spotify-Genius-Lyrics-userscript'))
// Switch: Show automatically
let div = document.createElement('div')
win.appendChild(div)
const checkAutoShow = div.appendChild(document.createElement('input'))
checkAutoShow.type = 'checkbox'
checkAutoShow.checked = optionAutoShow === true
const onAutoShow = function onAutoShowListener () {
GM.setValue('optionautoshow', checkAutoShow.checked === true)
}
checkAutoShow.addEventListener('click', onAutoShow)
checkAutoShow.addEventListener('change', onAutoShow)
div.appendChild(document.createTextNode(' Automatically show lyrics when new song starts'))
div.appendChild(document.createElement('br'))
div.appendChild(document.createTextNode('(if you disable this, a small button will appear in the top right corner to show the lyrics)'))
const closeButton = win.appendChild(document.createElement('button'))
closeButton.appendChild(document.createTextNode('Close'))
closeButton.style.color = 'black'
closeButton.addEventListener('click', function onCloseButtonClick () {
win.parentNode.removeChild(win)
})
const bytes = metricPrefix(JSON.stringify(selectionCache).length + JSON.stringify(requestCache).length, 2, 1024) + 'Bytes'
const clearCacheButton = win.appendChild(document.createElement('button'))
clearCacheButton.appendChild(document.createTextNode('Clear cache (' + bytes + ')'))
clearCacheButton.style.color = 'black'
clearCacheButton.addEventListener('click', function onClearCacheButtonClick () {
Promise.all([GM.setValue('selectioncache', '{}'), GM.setValue('requestcache', '{}')]).then(function () {
clearCacheButton.innerHTML = 'Cleared'
})
})
}
function main () {
if (document.querySelector('.now-playing')) {
if (optionAutoShow) {
addLyrics()
} else {
addLyricsButton()
}
}
}
if (!isFirefox && document.location.href.startsWith('https://open.spotify.com/404#html:scripts,')) {
const [script, onload] = myScripts()
document.write(decodeURIComponent(document.location.hash.split('#html:scripts,')[1]))
window.setTimeout(function () {
eval(script.join('\n') + '\n' + onload.join('\n'))
}, 1000)
} else if (!isFirefox && document.location.href.startsWith('https://open.spotify.com/405#html,')) {
document.write(decodeURIComponent(document.location.hash.split('#html,')[1]))
} else {
loadCache()
mainIv = window.setInterval(main, 2000)
window.addEventListener('resize', onResize)
}