Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

progress

Browse source
This commit is contained in:
Ondrej Zara 2019-04-10 14:37:02 +02:00
parent 82d1d1a78a
commit e75ce14ec0
4 changed files with 32 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/app.css
View file

@ -143,11 +143,15 @@ nav ul li.active {
} }
#player h2 { #player h2 {
font-size: 125%; font-size: 125%;
margin-top: 0; margin: 0;
} }
#player .info { #player .info {
flex-grow: 1; flex-grow: 1;
align-self: stretch;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-evenly;
} }
#player .title, #player .title,
#player .subtitle { #player .subtitle {
@ -155,18 +159,18 @@ nav ul li.active {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#player progress {
width: 100%;
}
#player .controls { #player .controls {
white-space: nowrap; display: flex;
text-align: center; flex-direction: row;
align-items: center;
} }
#player .controls .icon { #player .controls .icon {
width: 32px; width: 32px;
margin: 8px; margin: 8px;
} }
#player .controls [type=range] {
width: 144px;
margin: 0;
}
#player .misc { #player .misc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

27
app/css/player.less
View file

@ -15,29 +15,30 @@
h2 { h2 {
font-size: 125%; font-size: 125%;
margin-top: 0; margin: 0;
} }
.info { .info {
flex-grow: 1; flex-grow: 1;
align-self: stretch;
overflow: hidden; overflow: hidden;
.flex-column;
justify-content: space-evenly;
} }
.title, .subtitle { .long-line; } .title, .subtitle { .long-line; }
.controls {
@icon-margin: 8px;
@icon-size: 32px;
white-space: nowrap;
text-align: center;
.icon {
width: @icon-size;
margin: @icon-margin;
}
[type=range] { progress {
width: 3 * (@icon-size + 2*@icon-margin); width: 100%;
margin: 0; }
.controls {
.flex-row;
.icon {
width: 32px;
margin: 8px;
} }
} }

4
app/index.html
View file

@ -13,15 +13,13 @@
<div class="info"> <div class="info">
<h2 class="title"></h2> <h2 class="title"></h2>
<div class="subtitle"></div> <div class="subtitle"></div>
<progress class="elapsed"></progress>
</div> </div>
<div class="controls"> <div class="controls">
<button class="prev" data-icon="rewind"></button> <button class="prev" data-icon="rewind"></button>
<button class="play" data-icon="play"></button> <button class="play" data-icon="play"></button>
<button class="pause" data-icon="pause"></button> <button class="pause" data-icon="pause"></button>
<button class="next" data-icon="fast-forward"></button> <button class="next" data-icon="fast-forward"></button>
<div>
<input type="range" step="any" min="0" class="elapsed" />
</div>
</div> </div>
<div class="misc"> <div class="misc">
<button class="repeat" data-icon="repeat"></button> <button class="repeat" data-icon="repeat"></button>

9
app/js/player.js
View file

@ -19,12 +19,10 @@ function sync(data) {
if (data["file"] != current["file"]) { // changed song if (data["file"] != current["file"]) { // changed song
if (data["file"]) { // playing at all? if (data["file"]) { // playing at all?
DOM.elapsed.disabled = false;
DOM.elapsed.max = Number(data["duration"]); DOM.elapsed.max = Number(data["duration"]);
DOM.title.textContent = data["Title"] || data["file"].split("/").pop(); DOM.title.textContent = data["Title"] || data["file"].split("/").pop();
DOM.subtitle.textContent = format.subtitle(data); DOM.subtitle.textContent = format.subtitle(data);
} else { } else {
DOM.elapsed.disabled = true;
DOM.title.textContent = ""; DOM.title.textContent = "";
DOM.subtitle.textContent = ""; DOM.subtitle.textContent = "";
} }
@ -88,7 +86,12 @@ export function init(n) {
DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`)); DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`));
DOM.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`)); DOM.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`));
DOM.elapsed.addEventListener("input", e => command(`seekcur ${e.target.value}`));
DOM.elapsed.addEventListener("click", e => {
let rect = e.target.getBoundingClientRect();
let frac = (e.clientX - rect.left) / rect.width;
command(`seekcur ${frac * e.target.max}`);
});
update(); update();
} }