yt-music-live/server/static/scripts/main.js

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()