mute icons fixed

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

View file

@ -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

View file

@ -670,8 +670,10 @@ 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.insertBefore(icon$1, node.firstChild);
node.dataset.icon.split(" ").forEach(name => {
let icon$1 = icon(name);
node.insertBefore(icon$1, node.firstChild);
});
});
}
@ -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;

View file

@ -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>

View file

@ -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.insertBefore(icon, node.firstChild);
node.dataset.icon.split(" ").forEach(name => {
let icon = html.icon(name);
node.insertBefore(icon, node.firstChild);
})
});
}

View file

@ -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;