Skip to content

Commit

Permalink
cleanup code
Browse files Browse the repository at this point in the history
  • Loading branch information
@withstu
withstu committed May 8, 2021
1 parent 0892c80 commit 4e746c6
Show file tree
Hide file tree
Showing 6 changed files with 758 additions and 411 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@ Alternative you can use the script from Uhula: https://forum.iobroker.net/post/4

## Changelog

### 1.8.x
* (withstu) BREAKING: add queue paging
* (withstu) BREAKING: volume_max -> volume_limit

### 1.8.1 (2021-05-07)
* (withstu) fix reboot loop

Expand Down
100 changes: 50 additions & 50 deletions docs/vis/scripts/browse.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
on({id: 'heos.0.sources.browse_result', change: 'any'}, function (obj) {
on({ id: 'heos.0.sources.browse_result', change: 'any' }, function (obj) {
let data = JSON.parse(obj.state.val);
let html = `<style>
.heos-browse {
Expand Down Expand Up @@ -79,85 +79,85 @@ on({id: 'heos.0.sources.browse_result', change: 'any'}, function (obj) {
text-align: right;
}
</style>`;
if(data){
if (data) {
html += "<div class=\"heos-browse\">"
html += "<table>"
html += "<tr><th>";
if(data.image_url.length){
if (data.image_url.length) {
html += "<img src=\"" + data.image_url + "\" height=\"30px\">";
}
html += "</th><th>" + (data.name == "sources" ? "Overview" : data.name) + "</th><th></th></tr>";
for (let i = 0; i < data.payload.length; i++) {
let payload = data.payload[i];
html += "<tr class=\"";
if(payload.type == "control"){
html += "heos-browse-row-control";
if (payload.type == "control") {
html += "heos-browse-row-control";
} else {
html += "heos-browse-row-media"
}
html += "\">";
html += "<td class=\"heos-browse-image\"";
if("browse" in payload.commands){
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands["browse"].replace(/'/g, "\\'") +"')\"";
} else if(Object.keys(payload.commands).length == 1){
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands[Object.keys(payload.commands)[0]].replace(/'/g, "\\'") +"')\"";
if ("browse" in payload.commands) {
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands["browse"].replace(/'/g, "\\'") + "')\"";
} else if (Object.keys(payload.commands).length == 1) {
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands[Object.keys(payload.commands)[0]].replace(/'/g, "\\'") + "')\"";
}
html += ">"
if(payload.image_url.length){
html += "<img src=\"" + payload.image_url + "\">";
if (payload.image_url.length) {
html += "<img src=\"" + payload.image_url + "\">";
}
html += "</td>";
html += "<td class=\"heos-browse-name\"";
if("browse" in payload.commands){
if ("browse" in payload.commands) {
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands["browse"].replace(/'/g, "\\'") + "')\"";
} else if(Object.keys(payload.commands).length == 1){
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands[Object.keys(payload.commands)[0]].replace(/'/g, "\\'") +"')\"";
} else if (Object.keys(payload.commands).length == 1) {
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands[Object.keys(payload.commands)[0]].replace(/'/g, "\\'") + "')\"";
}
html += ">"
if(payload.type == "control"){
switch(payload.name){
case "load_next":
html += "Next page";
break;
case "load_prev":
html += "Previous page";
break;
case "play_all":
html += "Play all";
break;
case "back":
html += "Back";
break;
case "sources":
html += "Overview";
break;
}
if (payload.type == "control") {
switch (payload.name) {
case "load_next":
html += "Next page";
break;
case "load_prev":
html += "Previous page";
break;
case "play_all":
html += "Play all";
break;
case "back":
html += "Back";
break;
case "sources":
html += "Overview";
break;
}
} else {
html += payload.name;
html += payload.name;
}
html +="</td>";
html += "</td>";
html += "<td class=\"heos-browse-control\">";
for (let key in payload.commands) {
let command = payload.commands[key];
html += "<button class=\"heos-browse-btn"
if(Object.keys(payload.commands).length > 1){
html += " heos-browse-btn-multi"
}
html += "\" onClick=\"servConn.setState('heos.0.command','" + command.replace(/'/g, "\\'") +"')\">"
switch(key){
case "play":
html += "►";
break;
case "browse":
html += ">";
break;
}
html += "</button>";
let command = payload.commands[key];
html += "<button class=\"heos-browse-btn"
if (Object.keys(payload.commands).length > 1) {
html += " heos-browse-btn-multi"
}
html += "\" onClick=\"servConn.setState('heos.0.command','" + command.replace(/'/g, "\\'") + "')\">"
switch (key) {
case "play":
html += "►";
break;
case "browse":
html += ">";
break;
}
html += "</button>";
}
html += "</td>";
html += "</tr>";
}
html += "</table></div>";
}
setState("0_userdata.0.heos.browse_result_html", html);
});
});
100 changes: 77 additions & 23 deletions docs/vis/scripts/queue.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
on({id: '0_userdata.0.heos.queue_pid', change: 'any'}, function (obj) {
var queueHandler;
on({ id: '0_userdata.0.heos.queue_pid', change: 'any' }, function (obj) {
if(queueHandler){
unsubscribe(queueHandler);
}
let pid = obj.state.val;
let data = JSON.parse(getState("heos.0.players." + pid + ".queue").val);
updateHTML(pid, data);
queueHandler = on({ id: 'heos.0.players.' + pid + '.queue', change: 'any' }, function(obj){
updateHTML(pid, JSON.parse(obj.state.val));
});
});

function updateHTML(pid, data) {
let current_qid = getState("heos.0.players." + pid + ".current_qid").val;
let html = `<style>
.heos-queue {
background-color: #333333;
Expand Down Expand Up @@ -32,7 +44,7 @@ on({id: '0_userdata.0.heos.queue_pid', change: 'any'}, function (obj) {
}
.heos-queue td {
padding: 5px;
height: 60px
height: 60px;
}
.heos-queue-btn {
color: #fff;
Expand All @@ -53,11 +65,14 @@ on({id: '0_userdata.0.heos.queue_pid', change: 'any'}, function (obj) {
border-right: 1px solid #929292;
}
.heos-queue-row-media {
//cursor: pointer;
cursor: pointer;
}
.heos-queue-row-media.playing{
background-color: green;
}
.heos-queue-row-control {
color: #d60000;
//cursor: pointer;
cursor: pointer;
}
.heos-queue-image {
white-space: nowrap;
Expand All @@ -80,39 +95,78 @@ on({id: '0_userdata.0.heos.queue_pid', change: 'any'}, function (obj) {
text-align: right;
}
</style>`;
if(data){
if (data) {
html += "<div class=\"heos-queue\">"
html += "<table>"
html += "<tr><th>";
html += "</th><th>Queue</th><th></th></tr>";
for (var qid in data) {
let payload = data[qid];
html += "<tr class=\"heos-queue-row-media\">";
html += "<td class=\"heos-queue-image\">";
if(payload.image_url.length){
html += "<img src=\"" + payload.image_url + "\">";
html += "</th><th>" + data.name + "</th><th></th></tr>";
for (let i = 0; i < data.payload.length; i++) {
let payload = data.payload[i];
html += "<tr class=\"";
if (payload.type == "control") {
html += "heos-queue-row-control";
} else {
html += "heos-queue-row-media"
if(current_qid == payload.qid){
html += " playing"
}
}
html += "\">";
html += "<td class=\"heos-queue-image\"";
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands[Object.keys(payload.commands)[0]].replace(/'/g, "\\'") + "')\"";
html += ">"
if (payload.image_url.length) {
html += "<img src=\"" + payload.image_url + "\">";
}
html += "</td>";
html += "<td class=\"heos-queue-name\">";
html += "<td class=\"heos-queue-name\"";
html += " onClick=\"servConn.setState('heos.0.command','" + payload.commands[Object.keys(payload.commands)[0]].replace(/'/g, "\\'") + "')\"";
html += ">"
let meta = [];
if(payload.song){
meta.push(payload.song);
if (payload.song) {
meta.push(payload.song);
}
if(payload.artist){
meta.push(payload.artist);
if (payload.artist) {
meta.push(payload.artist);
}
if(payload.album){
meta.push(payload.album);
if (payload.album) {
meta.push(payload.album);
}
if(meta.length){
html += meta.join(' <br> ');
if (payload.type == "control") {
switch (payload.name) {
case "load_next":
html += "Next page";
break;
case "load_prev":
html += "Previous page";
break;
}
} else if (meta.length) {
html += meta.join(' <br> ');
}
html +="</td>";
html += "</td>";
html += "<td class=\"heos-queue-control\">";
for (let key in payload.commands) {
let command = payload.commands[key];
html += "<button class=\"heos-queue-btn"
if (Object.keys(payload.commands).length > 1) {
html += " heos-queue-btn-multi"
}
html += "\" onClick=\"servConn.setState('heos.0.command','" + command.replace(/'/g, "\\'") + "')\">"
switch (key) {
case "play":
html += "►";
break;
case "browse":
html += ">";
break;
}
html += "</button>";
}
html += "</td>";
html += "</tr>";
}
html += "</table></div>";
}
setState("0_userdata.0.heos.queue_html", html);
});
};
Loading

0 comments on commit 4e746c6

Please sign in to comment.