csasq/yt-music-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлены настройки расширения, введена поддержка локализации, изменены и адаптированы иконки приложений

Browse Source
This commit is contained in:
Глеб Иваницкий
2024-07-27 23:39:28 +03:00
parent 7911e34c00
commit 333ae3d9d2
25 changed files with 745 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
server/static/scripts/main.js
View File

@ -1,41 +1,50 @@
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 locales = {
playing_now_title: {
en: 'Playing Now',
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}`);
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');
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 ws = new WebSocket('ws://localhost:8000/ws/v1/overlay');
const ws = new WebSocket('ws://localhost:8000/ws/v1/overlay')
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
handlers[data.type](data.attributes);
};
const data = JSON.parse(event.data)
handlers[data.type](data.attributes)
}
ws.onclose = () => connectWebSocket();
};
ws.onclose = () => connectWebSocket()
}
connectWebSocket();
connectWebSocket()

2
server/static/styles/main.css
View File

@ -23,6 +23,8 @@
html {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
}