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

mute icons fixed

Browse source
This commit is contained in:
Ondřej Žára 2020-05-06 13:55:01 +02:00
parent ac40ec8f2c
commit e0cb504a55
6 changed files with 18 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/css/elements/player.less
View file

@ -7,6 +7,8 @@ cyp-player {
&:not([data-state=play]) .pause { display: none; } &:not([data-state=play]) .pause { display: none; }
&[data-state=play] .play { display: none; } &[data-state=play] .play { display: none; }
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
&[data-flags~=mute] .mute .icon-volume-high { display: none; }
&:not([data-flags~=mute]) .mute .icon-volume-off { display: none; }
x-range { x-range {
flex: auto; flex: auto;

2
app/cyp.css
View file

File diff suppressed because one or more lines are too long

18
app/cyp.js
View file

@ -670,9 +670,11 @@ function text(txt, parent) {
function initIcons() { function initIcons() {
Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => { Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => {
let icon$1 = icon(node.dataset.icon); node.dataset.icon.split(" ").forEach(name => {
let icon$1 = icon(name);
node.insertBefore(icon$1, node.firstChild); node.insertBefore(icon$1, node.firstChild);
}); });
});
} }
async function initMpd() { async function initMpd() {
@ -1058,6 +1060,7 @@ class Player extends Component {
let flags = []; let flags = [];
if (data["random"] == "1") { flags.push("random"); } if (data["random"] == "1") { flags.push("random"); }
if (data["repeat"] == "1") { flags.push("repeat"); } if (data["repeat"] == "1") { flags.push("repeat"); }
if (data["volume"] === "0") { flags.push("mute"); } // strict, because volume might be missing
this.dataset.flags = flags.join(" "); this.dataset.flags = flags.join(" ");
this.dataset.state = data["state"]; this.dataset.state = data["state"];
} }
@ -1072,17 +1075,8 @@ class Player extends Component {
DOM.volume.disabled = false; DOM.volume.disabled = false;
DOM.volume.value = volume; DOM.volume.value = volume;
if (volume == 0 && this._current.volume > 0) { // muted if (volume == 0 && this._current.volume > 0) { this._toggledVolume = this._current.volume; } // muted
this._toggledVolume = this._current.volume; if (volume > 0 && this._current.volume == 0) { this._toggledVolume = 0; } // restored
clear(DOM.mute);
DOM.mute.appendChild(icon("volume-off"));
}
if (volume > 0 && this._current.volume == 0) { // restored
this._toggledVolume = 0;
clear(DOM.mute);
DOM.mute.appendChild(icon("volume-high"));
}
this._current.volume = volume; this._current.volume = volume;
} else { } else {
DOM.mute.disabled = true; DOM.mute.disabled = true;

2
app/index.html
View file

@ -28,7 +28,7 @@
<button class="next" data-icon="fast-forward"></button> <button class="next" data-icon="fast-forward"></button>
</div> </div>
<div class="volume"> <div class="volume">
<button class="mute" data-icon="volume-high"></button> <button class="mute" data-icon="volume-high volume-off"></button>
<x-range></x-range> <x-range></x-range>
</div> </div>
</div> </div>

4
app/js/elements/app.js
View file

@ -4,8 +4,10 @@ import * as html from "../html.js";
function initIcons() { function initIcons() {
Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => { Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => {
let icon = html.icon(node.dataset.icon); node.dataset.icon.split(" ").forEach(name => {
let icon = html.icon(name);
node.insertBefore(icon, node.firstChild); node.insertBefore(icon, node.firstChild);
})
}); });
} }

14
app/js/elements/player.js
View file

@ -120,6 +120,7 @@ class Player extends Component {
let flags = []; let flags = [];
if (data["random"] == "1") { flags.push("random"); } if (data["random"] == "1") { flags.push("random"); }
if (data["repeat"] == "1") { flags.push("repeat"); } if (data["repeat"] == "1") { flags.push("repeat"); }
if (data["volume"] === "0") { flags.push("mute"); } // strict, because volume might be missing
this.dataset.flags = flags.join(" "); this.dataset.flags = flags.join(" ");
this.dataset.state = data["state"]; this.dataset.state = data["state"];
} }
@ -134,17 +135,8 @@ class Player extends Component {
DOM.volume.disabled = false; DOM.volume.disabled = false;
DOM.volume.value = volume; DOM.volume.value = volume;
if (volume == 0 && this._current.volume > 0) { // muted if (volume == 0 && this._current.volume > 0) { this._toggledVolume = this._current.volume; } // muted
this._toggledVolume = this._current.volume; if (volume > 0 && this._current.volume == 0) { this._toggledVolume = 0; } // restored
html.clear(DOM.mute);
DOM.mute.appendChild(html.icon("volume-off"));
}
if (volume > 0 && this._current.volume == 0) { // restored
this._toggledVolume = 0;
html.clear(DOM.mute);
DOM.mute.appendChild(html.icon("volume-high"));
}
this._current.volume = volume; this._current.volume = volume;
} else { } else {
DOM.mute.disabled = true; DOM.mute.disabled = true;