c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve progress rendering

Browse source
This commit is contained in:
Henri Bergius 2017-12-04 16:35:06 +01:00
parent 2f64332f1c
commit 603c06ef2e
1 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
elements/mpd.js
View file

@ -1,15 +1,23 @@
import { withComponent, props } from 'skatejs'; import { withComponent, props } from 'skatejs';
function renderTime(duration) { function renderTime(duration) {
let seconds = parseInt((duration)%60) const time = parseInt(duration, 10);
let minutes = parseInt((duration/(60))%60) let seconds = parseInt((time) % 60, 10);
let hours = parseInt(duration/(60*60)); let minutes = parseInt((time / (60)) % 60, 10);
let hours = parseInt(time / (60 * 60), 10);
hours = (hours < 10) ? "0" + hours : hours; hours = (hours < 10) ? `0${hours}` : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes; minutes = (minutes < 10) ? `0${minutes}` : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds; seconds = (seconds < 10) ? `0${seconds}` : seconds;
return hours + ":" + minutes + ":" + 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(); const Component = withComponent();
@ -41,11 +49,11 @@ class MPD extends Component {
} }
fetchData() { fetchData() {
const url = `https://c-beam.cbrp3.c-base.org/mpd/${this.mpd}/status/?_${Date.now()}`; const url = `https://c-beam.cbrp3.c-base.org/mpd/${this.mpd}/status/?_=${Date.now()}`;
fetch(url, { fetch(url, {
headers: { headers: {
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest',
} },
}) })
.then(data => data.json()) .then(data => data.json())
.then((data) => { .then((data) => {
@ -66,21 +74,27 @@ class MPD extends Component {
if (!data.state) { if (!data.state) {
return el; return el;
} }
el.className = data.state;
let status = 'Stopped'; let status = 'Stopped';
if (data.state === 'play') { if (data.state === 'pause') {
status = 'Now playing'; status = `${renderProgress(data.elapsed, data.total)} paused`;
} }
let artist = data.current_song.artist ? `${data.current_song.artist} - ${data.current_song.album}` : data.current_song.name 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) { if (!artist) {
artist = 'Unknown'; artist = 'Unknown';
} }
const elapsed = let volume = parseInt(data.volume, 10);
if (volume < 0) {
volume = 0;
}
el.innerHTML = ` el.innerHTML = `
<div>${status}</div>
<div>${artist}</div> <div>${artist}</div>
<div>${data.current_song.title}</div> <div>${data.current_song.title}</div>
<div>${renderTime(data.elapsed)}/${renderTime(data.total)}</div> <div>${status}</div>
<div>&#128264; <progress min="0" max="100" value="${data.volume}"></progress></div> <div><progress min="0" max="100" value="${volume}"></progress> &#128264; ${volume}</div>
`; `;
return el; return el;
} }