Genius.com translate lyrics

Shows English or Russian translation next to the lyrics on genius.com. Powered by Yandex.Translate
Author's suggested script
You may also like Spotify Genius Lyrics.
Install this script
Ask a question, post a review, or report the script.
// ==UserScript==
// @name         Genius.com translate lyrics
// @description  Shows English or Russian translation next to the lyrics on genius.com. Powered by Yandex.Translate
// @namespace    cuzi
// @license      GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
// @copyright    2019, cuzi (https://github.com/cvzi)
// @version      1
// @grant        GM.xmlHttpRequest
// @grant        GM.setValue
// @grant        GM.getValue
// @connect      translate.yandex.net
// @include      https://genius.com/*
// ==/UserScript==

const YANDEX_API_KEY = 'trnsl.1.1.20190330T204003Z.a10ff99a15ff49d5.81a81cdd708ab5a0a1748539e579820da8446c9c'
const YANDEX_URL = 'https://translate.yandex.net/api/v1.5/tr.json/translate'
const YANDEX_HOME = 'https://translate.yandex.com/translate'
let DEFAULT_LANG = 'en'
const allLangs = {
  'en': 'English',
  'ru': 'Русский'
}
const spinner = '<style>.loadingspinner { pointer-events: none; width: 2.5em; height: 2.5em; border: 0.4em solid transparent; border-color: rgb(255, 255, 100) #181818 #181818 #181818; border-radius: 50%; animation: loadingspin 2s ease infinite;} @keyframes loadingspin { 25% { transform: rotate(90deg) } 50% { transform: rotate(180deg) } 75% { transform: rotate(270deg) } 100% { transform: rotate(360deg) }}</style><div class="loadingspinner"></div>'

const TAGS = ['A', 'I', 'EM', 'SMALL', 'STRONG']
function retrieveText (node) {
  let child = node.firstChild
  let text = ''
  while (child) {
    if (child.tagName === 'BR') {
      text += '\n'
    } else if (child.nodeType === Node.TEXT_NODE) {
      text += child.textContent
    } else if(TAGS.includes(child.tagName)) {
      text += retrieveText(child)
    } else if(child.firstChild && child.firstChild.nodeType === Node.TEXT_NODE && child.firstChild.textContent.trim()) {
      text += child.firstChild.textContent
    }
    child = child.nextSibling
  }
  return text
}

function metricPrefix (n, decimals, k) {
  // http://stackoverflow.com/a/18650828
  if (n <= 0) {
    return String(n)
  }
  k = k || 1000
  let dm = decimals <= 0 ? 0 : decimals || 2
  let sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
  let i = Math.floor(Math.log(n) / Math.log(k))
  return parseFloat((n / Math.pow(k, i)).toFixed(dm)) + sizes[i]
}

function askForKey (fromError) {
  if (fromError) {
    alert('The API key is incorrect or expired/out of quota!')
  } else {
    alert('You have not set your API key yet!')
  }
  config()
}

function config () {
  Promise.all([
    GM.getValue('api_key', false),
    GM.getValue('lang', DEFAULT_LANG),
    GM.getValue('requestcache', '{}')
  ]).then(function (values) {
    let apiKey = values[0]
    DEFAULT_LANG = values[1]
    const requestcacheRaw = values[2]

    // Window
    const win = document.createElement('div')
    win.setAttribute('style', 'position:fixed; top: 10px; left:10px; padding:15px; background:white; border-radius:10%; border:2px solid black; color:black; z-index:100')
    document.body.appendChild(win)
    const h1 = document.createElement('h1')
    win.appendChild(h1).appendChild(document.createTextNode('Options'))
    let a = document.createElement('a')
    a.href = 'https://github.com/cvzi/Genius-translate-lyrics-userscript/issues'
    a.style = 'color:blue'
    win.appendChild(a).appendChild(document.createTextNode('Report problem: github.com/cvzi/Genius-translate-lyrics-userscript'))

    // Text: Api Key
    let div = document.createElement('div')
    win.appendChild(div)
    div.appendChild(document.createTextNode('Your Yandex API key: '))
    const inputApiKey = div.appendChild(document.createElement('input'))
    inputApiKey.type = 'text'
    inputApiKey.size = 90
    if (apiKey) {
      inputApiKey.value = apiKey
    } else {
      inputApiKey.style.backgroundColor = '#f6f6a1'
      inputApiKey.value = '#Not set'
    }
    const onApiKeyChange = function onApiKeyChangeListener () {
      if (inputApiKey.value && (inputApiKey.value.length > 20 || inputApiKey.value === '#Not set')) {
        GM.setValue('api_key', inputApiKey.value !== '#Not set' ? inputApiKey.value : false)
        inputApiKey.style.backgroundColor = '#93d89c'
      } else {
        alert('Invalid api key')
        inputApiKey.style.backgroundColor = '#f2c4be'
      }
    }
    inputApiKey.addEventListener('change', onApiKeyChange)
    div.appendChild(document.createElement('br'))
    div.appendChild(document.createTextNode('You can get a free API key by registering an account here: '))
    div.appendChild(document.createElement('br'))
    a = document.createElement('a')
    a.href = 'https://translate.yandex.com/developers/keys'
    a.style = 'color:blue'
    div.appendChild(a).appendChild(document.createTextNode('https://translate.yandex.com/developers/keys'))

    // Select: Language
    div = document.createElement('div')
    win.appendChild(div)
    div.appendChild(document.createTextNode('Your language: '))
    const selectLang = div.appendChild(document.createElement('select'))
    for (let key in allLangs) {
      const option = selectLang.appendChild(document.createElement('option'))
      option.value = key
      if (DEFAULT_LANG === key) {
        option.selected = true
      }
      option.appendChild(document.createTextNode(allLangs[key]))
    }
    const onLangChange = function onLangChangeListener () {
      GM.setValue('lang', selectLang.selectedOptions[0].value)
      selectLang.style.backgroundColor = '#93d89c'
    }
    selectLang.addEventListener('change', onLangChange)

    // Clear request cache button
    const bytes = metricPrefix(requestcacheRaw.length - 2, 2, 1024) + 'Bytes'
    const clearCacheButton = win.appendChild(document.createElement('button'))
    clearCacheButton.appendChild(document.createTextNode('Clear cache (' + bytes + ')'))
    clearCacheButton.addEventListener('click', function onClearCacheButtonClick () {
      GM.setValue('requestcache', '{}').then(function () {
        clearCacheButton.innerHTML = 'Cleared'
      })
    })

    // Close button
    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)
    })
  })
}

function createArea () {
  if (document.getElementById('userscripttranslate')) {
    document.getElementById('userscripttranslate').remove()
  }

  // Move lyrics to the right
  const columnLayout = document.querySelector('routable-page song-page .song_body.column_layout')
  const minWidth = columnLayout.querySelector('.column_layout-column_span--primary').clientWidth + 50
  const rightOffset = document.body.clientWidth - minWidth
  if (rightOffset > 0) {
    columnLayout.style.margin = '0 auto 0 ' + minWidth + 'px'
  } else {
    columnLayout.style.margin = '0 0 0 auto'
  }

  const bodyRect = document.body.getBoundingClientRect()
  const elemRect = document.querySelector('song-page lyrics div div.lyrics section p').getBoundingClientRect()
  const offset = elemRect.top - bodyRect.top
  const width = elemRect.left - bodyRect.left

  const div = document.createElement('div')
  div.setAttribute('id', 'userscripttranslate')
  document.body.appendChild(div)

  div.style = 'overflow:auto;position:absolute;top:' + offset + 'px;left:0px;max-width:' + width + 'px;padding:0 2.5rem 0 0;margin:0 1rem;white-space: nowrap;font-size: 1.125em;color:#222;background-color:#f7f7f7;font-family: Programme,sans-serif;word-break: break-word;line-height: 1.7em;font-weight: 100;'

  return div
}

function translate () {
  Promise.all([
    GM.getValue('api_key', false),
    GM.getValue('requestcache', '{}')
  ]).then(function (values) {
    if (!values[0]) {
      askForKey()
    }

    let requestCache = JSON.parse(values[1])
    /*
    requestCache = {
       "cachekey0": "121648565.5\njsondata123",
       ...
       }
    */
    const now = (new Date()).getTime()
    const exp = 48 * 60 * 60 * 1000
    for (let prop in requestCache) {
      // Delete cached values, that are older than 2 days
      const time = requestCache[prop].split('\n')[0]
      if ((now - (new Date(time)).getTime()) > exp) {
        delete requestCache[prop]
      }
    }

    yandex(values[0] || YANDEX_API_KEY, requestCache)
  })
}

function yandex (apiKey, requestCache) {
  const div = createArea()

  div.innerHTML = spinner + '<br>Collecting lyrics...'

  const textInput = retrieveText(document.querySelector('song-page lyrics div div.lyrics section p'))

  const cachekey = JSON.stringify(textInput)
  if (cachekey in requestCache) {
    div.innerHTML += ' Found in cache.'
    const cacheResponse = JSON.parse(requestCache[cachekey].split('\n')[1])
    showTranslation(JSON.parse(cacheResponse.responseText), div)
    return
  }

  const requestURL = YANDEX_URL + '?key=' + apiKey + '&lang=' + DEFAULT_LANG + '&format=plain'

  div.innerHTML += ' OK<br>Opening translate.yandex.net<br>'
  GM.xmlHttpRequest({
    method: 'POST',
    url: requestURL,
    data: '&text=' + encodeURIComponent(textInput),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    onload: function (response) {
      div.innerHTML += response.status + ' ' + response.statusText
      if (response.status === 200) {
        // Cache result:
        const time = (new Date()).toJSON()
        // Chrome fix: Otherwise JSON.stringify(requestCache) omits responseText
        var newobj = {}
        for (var key in response) {
          newobj[key] = response[key]
        }
        newobj.responseText = response.responseText
        requestCache[cachekey] = time + '\n' + JSON.stringify(newobj)
        GM.setValue('requestcache', JSON.stringify(requestCache))
        // Show result
        showTranslation(JSON.parse(response.responseText), div)
      } else {
        showError(response, div)
      }
    },
    onreadystatechange: function (response) {
      if (response.readyState === 1) {
        div.innerHTML += 'Opened.'
      } else if (response.readyState === 2) {
        div.innerHTML += ' Sent.'
      } else if (response.readyState === 3) {
        div.innerHTML += ' Downloading... '
      }
    },
    onerror: function (response) {
      console.log('Error: ' + response.status + '\nURL: ' + requestURL + '\nResponse:\n' + response.responseText)

      div.innerHTML += '<br><br>'

      const a = div.appendChild(document.createElement('a'))
      a.appendChild(document.createTextNode('Try again on translate.yandex.com/translate'))
      a.href = YANDEX_HOME + '?url=' + encodeURIComponent(document.location.href) + '&lang=' + DEFAULT_LANG
      a.target = '_blank'
      
      div.innerHTML += '<br><br>Error: ' + response.status + '<br>URL: ' + requestURL + '<br>Response:<br>' + response.responseText
    }
  })
}

function showError (response, div) {
  try {
    let data = JSON.parse(response.responseText)
    if ('code' in data) {
      div.innerHTML += '<br>Error code: ' + data.code
      if (data.code === 401) {
        askForKey(true)
      }
    }
    if ('message' in data) {
      div.innerHTML += '<br>Error message: ' + data.message
    }
  } catch (e) {
  }

  div.innerHTML += '<br><br>'

  const a = div.appendChild(document.createElement('a'))
  a.appendChild(document.createTextNode('Try again on translate.yandex.com/translate'))
  a.href = YANDEX_HOME + '?url=' + encodeURIComponent(document.location.href) + '&lang=' + DEFAULT_LANG
  a.target = '_blank'

  div.innerHTML += '<br><br>Response body:<br><pre>' + response.responseText + '</pre>'
}

function showTranslation (data, div) {
  if (data.code !== 200) {
    alert('Error ' + data.code + '\n' + JSON.stringify(data))
    return
  }

  let html = '' + data.text

  div.innerHTML = html.split('\n').join('<br>\n')
  div.appendChild(document.createElement('br'))
  div.appendChild(document.createElement('br'))

  const a = document.createElement('a')
  a.href = YANDEX_HOME + '?url=' + encodeURIComponent(document.location.href) + '&lang=' + DEFAULT_LANG
  a.target = '_blank'
  a.appendChild(document.createTextNode('\uD83D\uDD17 Powered by Yandex.Translate'))
  div.appendChild(a)

  div.appendChild(document.createElement('br'))
  div.appendChild(document.createElement('br'))

  const configLink = document.createElement('a')
  configLink.href = '#'
  configLink.addEventListener('click', function (ev) {
    ev.preventDefault()
    config()
  })
  configLink.appendChild(document.createTextNode('\u2699\uFE0F Userscript options'))
  div.appendChild(configLink)
}

function addTranslateButton () {
  GM.getValue('lang', DEFAULT_LANG).then(function (value) {
    DEFAULT_LANG = value
    if (document.querySelector('lyrics div.lyrics_controls')) {
      const button = document.createElement('button')
      button.setAttribute('class', 'square_button')
      button.appendChild(document.createTextNode('Translate'))
      button.addEventListener('click', translate)
      button.addEventListener('auxclick', function (event) {
        window.open(YANDEX_HOME + '?url=' + encodeURIComponent(document.location.href) + '&lang=' + DEFAULT_LANG)
      })
      document.querySelector('lyrics div.lyrics_controls').appendChild(button)
    } else if (document.querySelector('song-page secondary song-metadata-preview > div')) {
      const div = document.createElement('div')
      div.setAttribute('class', 'header_with_cover_art-metadata_preview-unit')
      const a = document.createElement('a')
      a.appendChild(document.createTextNode('Translate'))
      a.addEventListener('click', function (ev) {
        ev.preventDefault()
        translate()
      })
      a.href = YANDEX_HOME + '?url=' + encodeURIComponent(document.location.href) + '&lang=' + DEFAULT_LANG

      document.querySelector('song-page secondary song-metadata-preview > div').appendChild(div)
      div.appendChild(a)
    }
  })
}

let iv = window.setInterval(function () {
  if (document.querySelector('song-page lyrics div div.lyrics section p')) {
    clearInterval(iv)
    addTranslateButton()
  }
}, 500)