mute icons fixed
This commit is contained in:
parent
ac40ec8f2c
commit
e0cb504a55
6 changed files with 18 additions and 28 deletions
|
@ -7,6 +7,8 @@ cyp-player {
|
|||
&:not([data-state=play]) .pause { display: none; }
|
||||
&[data-state=play] .play { display: none; }
|
||||
&: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 {
|
||||
flex: auto;
|
||||
|
|
File diff suppressed because one or more lines are too long
18
app/cyp.js
18
app/cyp.js
|
@ -670,9 +670,11 @@ function text(txt, parent) {
|
|||
|
||||
function initIcons() {
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function initMpd() {
|
||||
|
@ -1058,6 +1060,7 @@ class Player extends Component {
|
|||
let flags = [];
|
||||
if (data["random"] == "1") { flags.push("random"); }
|
||||
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.state = data["state"];
|
||||
}
|
||||
|
@ -1072,17 +1075,8 @@ class Player extends Component {
|
|||
DOM.volume.disabled = false;
|
||||
DOM.volume.value = volume;
|
||||
|
||||
if (volume == 0 && this._current.volume > 0) { // muted
|
||||
this._toggledVolume = this._current.volume;
|
||||
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"));
|
||||
}
|
||||
if (volume == 0 && this._current.volume > 0) { this._toggledVolume = this._current.volume; } // muted
|
||||
if (volume > 0 && this._current.volume == 0) { this._toggledVolume = 0; } // restored
|
||||
this._current.volume = volume;
|
||||
} else {
|
||||
DOM.mute.disabled = true;
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
<button class="next" data-icon="fast-forward"></button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,8 +4,10 @@ import * as html from "../html.js";
|
|||
|
||||
function initIcons() {
|
||||
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);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -120,6 +120,7 @@ class Player extends Component {
|
|||
let flags = [];
|
||||
if (data["random"] == "1") { flags.push("random"); }
|
||||
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.state = data["state"];
|
||||
}
|
||||
|
@ -134,17 +135,8 @@ class Player extends Component {
|
|||
DOM.volume.disabled = false;
|
||||
DOM.volume.value = volume;
|
||||
|
||||
if (volume == 0 && this._current.volume > 0) { // muted
|
||||
this._toggledVolume = this._current.volume;
|
||||
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"));
|
||||
}
|
||||
if (volume == 0 && this._current.volume > 0) { this._toggledVolume = this._current.volume; } // muted
|
||||
if (volume > 0 && this._current.volume == 0) { this._toggledVolume = 0; } // restored
|
||||
this._current.volume = volume;
|
||||
} else {
|
||||
DOM.mute.disabled = true;
|
||||
|
|
Loading…
Reference in a new issue