Redesign UI and add first-party Docker runtime support

html/js/base_ts.js

@@ -5,6 +5,7 @@ var SEARCH_MAPPING = new Object();
 var UNDO = new Object();
 var SERVER_CONNECTION = false;
 var WS_AVAILABLE = false;
+var ACTIVE_MENU_ID = "";
 // Menü
 var menuItems = new Array();
 menuItems.push(new MainMenuItem("playlist", "{{.mainMenu.item.playlist}}", "m3u.png", "{{.mainMenu.headline.playlist}}"));
@@ -44,7 +45,36 @@ function showElement(elmID, type) {
             cssClass = "none";
             break;
     }
-    document.getElementById(elmID).className = cssClass;
+    var element = document.getElementById(elmID);
+    if (element == null) {
+        return;
+    }
+    element.className = cssClass;
+}
+function setConnectionState(state, text) {
+    var label = text;
+    if (label == undefined || label.length == 0) {
+        switch (state) {
+            case "online":
+                label = "Connected";
+                break;
+            case "busy":
+                label = "Syncing";
+                break;
+            case "offline":
+                label = "Offline";
+                break;
+            default:
+                label = "Connecting";
+                break;
+        }
+    }
+    var indicator = document.getElementById("connection-indicator");
+    if (indicator == null) {
+        return;
+    }
+    indicator.className = "status-" + state;
+    indicator.innerText = label;
 }
 function changeButtonAction(element, buttonID, attribute) {
     var value = element.options[element.selectedIndex].value;
@@ -272,14 +302,15 @@ function searchInMapping() {
     return;
 }
 function calculateWrapperHeight() {
-    if (document.getElementById("box-wrapper")) {
-        var elm = document.getElementById("box-wrapper");
-        var divs = new Array("myStreamsBox", "clientInfo", "content");
-        var elementsHeight = 0 - elm.offsetHeight;
-        for (var i = 0; i < divs.length; i++) {
-            elementsHeight = elementsHeight + document.getElementById(divs[i]).offsetHeight;
+    var elm = document.getElementById("box-wrapper");
+    var content = document.getElementById("content");
+    if (elm != null && content != null) {
+        var contentTop = content.getBoundingClientRect().top;
+        var freeSpace = window.innerHeight - contentTop - 26;
+        if (freeSpace < 180) {
+            freeSpace = 180;
         }
-        elm.style.height = window.innerHeight - elementsHeight + "px";
+        elm.style.height = freeSpace + "px";
     }
     return;
 }