54 строки
2.2 KiB
JavaScript
54 строки
2.2 KiB
JavaScript
const locales = {
|
|
playing_now_title: {
|
|
en: 'Now Playing',
|
|
ru: 'Сейчас играет',
|
|
},
|
|
}
|
|
|
|
const colorThief = new ColorThief()
|
|
const musicElement = document.querySelector('#music')
|
|
const titleElement = musicElement.querySelector('#music > .title')
|
|
const musicProgressBarElement = musicElement.querySelector('#music > .progress-bar')
|
|
const musicTitleElement = musicProgressBarElement.querySelector('#music > .progress-bar > .data > .title')
|
|
const musicArtistsElement = musicProgressBarElement.querySelector('#music > .progress-bar > .data > .artists')
|
|
const musicCoverElement = musicProgressBarElement.querySelector('#music > .progress-bar > .cover')
|
|
|
|
const handlers = {
|
|
'target': (attributes) => {
|
|
const target = document.getElementById(attributes.id)
|
|
target.style.setProperty('--progress-size', `${attributes.progress}`)
|
|
},
|
|
'music': (attributes) => {
|
|
titleElement.textContent = locales.playing_now_title[attributes.locale] || locales.playing_now_title.en
|
|
musicTitleElement.textContent = attributes.title
|
|
musicArtistsElement.textContent = attributes.artists
|
|
musicElement.style.setProperty('--progress-size', `${(1 - attributes.progress) * 100}%`)
|
|
const url = new URL(location)
|
|
url.pathname = '/image'
|
|
const urlSearchParams = new URLSearchParams()
|
|
urlSearchParams.set('src', attributes.image)
|
|
url.search = urlSearchParams.toString()
|
|
musicCoverElement.src = url
|
|
const colors = colorThief.getPalette(musicCoverElement, 2)
|
|
musicProgressBarElement.style.setProperty('--primary-color', `rgb(${colors[0][0]}, ${colors[0][1]}, ${colors[0][2]})`)
|
|
musicProgressBarElement.style.setProperty('--secondary-color', `rgb(${colors[1][0]}, ${colors[1][1]}, ${colors[1][2]})`)
|
|
musicElement.classList.remove('hidden')
|
|
},
|
|
}
|
|
|
|
const connectWebSocket = () => {
|
|
const url = new URL(location)
|
|
url.protocol = 'ws'
|
|
url.pathname = '/ws/v1/overlay'
|
|
const ws = new WebSocket(url)
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data)
|
|
handlers[data.type](data.attributes)
|
|
}
|
|
|
|
ws.onclose = () => connectWebSocket()
|
|
}
|
|
|
|
connectWebSocket()
|