Разработан веб-сервер и расширение для браузеров на базе Chromium

server/static/scripts/main.js

@@ -0,0 +1,41 @@
+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();