42 строки
1.8 KiB
JavaScript
42 строки
1.8 KiB
JavaScript
|
const colorThief = new ColorThief();
|
||
|
|
const musicElement = document.querySelector('#music');
|
||
|
|
const progressBarElement = musicElement.querySelector('#music > .progress-bar');
|
||
|
|
const titleElement = progressBarElement.querySelector('#music > .progress-bar > .data > .title');
|
||
|
|
const artistsElement = progressBarElement.querySelector('#music > .progress-bar > .data > .artists');
|
||
|
|
const coverElement = progressBarElement.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 = attributes.title;
|
||
|
|
artistsElement.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();
|
||
|
|
coverElement.src = url;
|
||
|
|
const colors = colorThief.getPalette(coverElement, 2);
|
||
|
|
progressBarElement.style.setProperty('--primary-color', `rgb(${colors[0][0]}, ${colors[0][1]}, ${colors[0][2]})`);
|
||
|
|
progressBarElement.style.setProperty('--secondary-color', `rgb(${colors[1][0]}, ${colors[1][1]}, ${colors[1][2]})`);
|
||
|
|
musicElement.classList.remove('hidden');
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const connectWebSocket = () => {
|
||
|
|
const ws = new WebSocket('ws://localhost:8000/ws/v1/overlay');
|
||
|
|
|
||
|
|
ws.onmessage = (event) => {
|
||
|
|
const data = JSON.parse(event.data);
|
||
|
|
handlers[data.type](data.attributes);
|
||
|
|
};
|
||
|
|
|
||
|
|
ws.onclose = () => connectWebSocket();
|
||
|
|
};
|
||
|
|
|
||
|
|
connectWebSocket();
|