This repository has been archived by the owner on Mar 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
radio-card.js
99 lines (88 loc) · 3.06 KB
/
radio-card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
function htmlToElement(html) {
var template = document.createElement("template");
html = html.trim();
template.innerHTML = html;
return template.content.firstChild;
}
function load(url) {
if (audio.mp3==url && audio.playing==true) {
audio.pause();
} else {
audio.load(url);
audio.play();
};
}
function loadScript(url){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
audiojs.events.ready(function() {
var as = audiojs.createAll();
audio=as[0];
});
}
};
} else { //Others
script.onload = function(){
audiojs.events.ready(function() {
var as = audiojs.createAll();
audio=as[0];
});
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var templateAudioJs = `
<div style="visibility: hidden;">
<audio></audio>
</div>
`;
var templateRadio = `
<state-badge id="ItemId" class="badgeradio" style='background-image: url("ItemImg");border-radius: 0; width:80px; height:80px; margin:10px; filter: grayscale(100%);'></state-badge>
`;
class RadioCard extends HTMLElement {
setConfig(config) {
this.config = config;
var radiojs = htmlToElement(templateAudioJs);
document.body.insertBefore(radiojs, document.body.firstChild);
for (var i = 0; i < config.radios.length; ++i) {
var item = config.radios[i];
var radio = htmlToElement(
templateRadio
.replace("ItemId", i)
.replace("ItemImg", item.img)
);
this.append(radio);
}
loadScript("/local/custom-lovelace/radio-card/audio.js")
var listOfItems = this.childNodes
for (var i = 0; i < listOfItems.length; ++i) {
var item = this.childNodes[i];
item.onclick = function(){
load(this.parentElement.config.radios[this.id].stream)
var listOfBrothers = this.parentElement.childNodes
for (var i = 0; i < listOfItems.length; ++i) {
var item = this.parentElement.childNodes[i];
if (item.id==this.id) {
if (item.style.filter=="grayscale(100%)") {
item.style.filter="grayscale(0%)"
} else {
item.style.filter="grayscale(100%)"
}
} else {
item.style.filter="grayscale(100%)";
}
}
}
}
}
getCardSize() {
return this.config.radios.length + 1;
}
}
customElements.define('radio-card', RadioCard);