103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
import { withComponent, props } from 'skatejs';
|
|
|
|
function renderTime(duration) {
|
|
const time = parseInt(duration, 10);
|
|
let seconds = parseInt((time) % 60, 10);
|
|
let minutes = parseInt((time / (60)) % 60, 10);
|
|
let hours = parseInt(time / (60 * 60), 10);
|
|
|
|
hours = (hours < 10) ? `0${hours}` : hours;
|
|
minutes = (minutes < 10) ? `0${minutes}` : minutes;
|
|
seconds = (seconds < 10) ? `0${seconds}` : seconds;
|
|
|
|
return `${hours}:${minutes}:${seconds}`;
|
|
}
|
|
|
|
function renderProgress(elapsed, total) {
|
|
if (!parseInt(total, 10)) {
|
|
return '<progress></progress>';
|
|
}
|
|
return `<progress min="0" max="${total}" value="${elapsed}"></progress>`;
|
|
}
|
|
|
|
const Component = withComponent();
|
|
class MPD extends Component {
|
|
static props = {
|
|
mpd: props.string,
|
|
data: props.object,
|
|
interval: props.number,
|
|
};
|
|
|
|
connected() {
|
|
if (!this.mpd) {
|
|
return;
|
|
}
|
|
this.fetchData();
|
|
if (!this.interval) {
|
|
return;
|
|
}
|
|
this.runInterval = window.setInterval(() => {
|
|
this.fetchData();
|
|
}, this.interval * 1000);
|
|
}
|
|
|
|
disconnecting() {
|
|
if (this.runInterval) {
|
|
window.clearInterval(this.runInterval);
|
|
delete this.runInterval;
|
|
}
|
|
}
|
|
|
|
fetchData() {
|
|
const url = `https://c-beam.cbrp3.c-base.org/mpd/${this.mpd}/status/?_=${Date.now()}`;
|
|
fetch(url, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
})
|
|
.then(data => data.json())
|
|
.then((data) => {
|
|
this.data = data.content;
|
|
});
|
|
}
|
|
|
|
renderer(renderRoot, render) {
|
|
const root = renderRoot;
|
|
while (root.firstChild) {
|
|
root.removeChild(root.firstChild);
|
|
}
|
|
root.appendChild(render());
|
|
}
|
|
|
|
render({ data }) {
|
|
const el = document.createElement('div');
|
|
if (!data.state) {
|
|
return el;
|
|
}
|
|
el.className = data.state;
|
|
let status = 'Stopped';
|
|
if (data.state === 'pause') {
|
|
status = `${renderProgress(data.elapsed, data.total)} paused`;
|
|
}
|
|
if (data.state === 'play') {
|
|
status = `${renderProgress(data.elapsed, data.total)} ${renderTime(data.elapsed)}/${renderTime(data.total)}`;
|
|
}
|
|
let artist = data.current_song.artist ? `${data.current_song.artist} - ${data.current_song.album}` : data.current_song.name;
|
|
if (!artist) {
|
|
artist = 'Unknown';
|
|
}
|
|
let volume = parseInt(data.volume, 10);
|
|
if (volume < 0) {
|
|
volume = 0;
|
|
}
|
|
el.innerHTML = `
|
|
<div>${artist}</div>
|
|
<div>${data.current_song.title}</div>
|
|
<div>${status}</div>
|
|
<div><progress min="0" max="100" value="${volume}"></progress> 🔈 ${volume}</div>
|
|
`;
|
|
return el;
|
|
}
|
|
}
|
|
|
|
customElements.define('cbase-mpd', MPD);
|