GeniusTranslateLyrics.user.js

// ==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)