Media enqueuing UI

app.py

@@ -7,15 +7,18 @@ from flask import Flask, render_template, request, make_response, jsonify
 import gettext
 import http.client
 import os
-import socket
+# ~ import requests
+# ~ import socket
 import ssl
 import subprocess
-import requests
 from shutil import which
 import sys
+# ~ import threading
 import toml
+from urllib.parse import quote, unquote
 import xml.etree.ElementTree as ET
 from waitress import serve
+    
 
 # l10n
 LOCALE = os.getenv('LANG', 'en')
@@ -30,8 +33,6 @@ for location in config_locations:
     if app.config.from_file(os.path.expanduser( location + "pilpil-server.toml"), load=toml.load, silent=True):
         print( _("Found configuration file in {}").format( os.path.expanduser(location) ) )
 
-### 
-
 hosts_available, hosts_unavailable = [],[]
 queue_msgs = [
     _("No items"), 
@@ -57,7 +58,6 @@ cmd_player = {
     "move"       : "pl_move",
     "sort"       : "pl_sort",
     "seek"       : "seek",
-    "sync"       : "sync",
     "status"     : "status.xml",
     "list"       : "playlist.xml", 
     #"volume"       : "volume", 
@@ -65,19 +65,20 @@ cmd_player = {
     #"dir"        : "?dir=<uri>",
     #"command"    : "?command=<cmd>",
     #"key"         : "key=", 
-    #"browse"      : "browse.xml?uri=file://~"
+    "browse"      : "browse.xml?uri=file://~"
     }
 cmd_server = [
     # Map pilpil-client http url parameters to pilpil-server urls
     "blink",
     "reboot",
     "poweroff",
-    "rssi"
+    "rssi", 
+    "sync"
     ]
 
 # Configuration 
 debug = app.config['DEFAULT']['debug']
-media_folder_remote = app.config['DEFAULT']['media_folder_remote']
+media_folder_remote = os.path.expanduser(app.config['DEFAULT']['media_folder_remote'])
 media_folder_local = os.path.expanduser(app.config['DEFAULT']['media_folder_local'])
 media_exts = app.config['DEFAULT']['media_exts']
 auth = str(base64.b64encode(str(":" + app.config['DEFAULT']['vlc_auth']).encode('utf-8')), 'utf-8')
@@ -98,6 +99,7 @@ else:
      sslcontext.check_hostname = False
      sslcontext.verify_mode = ssl.CERT_NONE
 
+current_upload = 0
 
 class PilpilClient:
     def __init__(self):
@@ -190,6 +192,8 @@ def sync_media_folder(media_folder_local, media_folder_remote, host_local, port,
     '''
     Sync media_folder_local with media_folder_remote using sync_facility
     '''
+    total_size = 0
+    transfer_ok = 0
     trailing_slash = 1
     # Check for trailing / and add it if missing
     if media_folder_local[-1:] != "/":
@@ -200,10 +204,18 @@ def sync_media_folder(media_folder_local, media_folder_remote, host_local, port,
     #Using http_upload
     if sync_facility == "http":
         media_list = list_media_files(media_folder_local)
-        transfer_ok = 0
         for media in media_list:
-            transfer_ok += HTTP_upload(media, host_local, port, trailing_slash)
+            current_upload = media.strip("/")
-        return _("{} files uploaded.").format(str(transfer_ok))
+            if debug: 
+                print("Uploading " + str(media))
+            if HTTP_upload(media, host_local, port, trailing_slash):
+                if debug: 
+                    print("File size : " + str(os.stat(media_folder_local + media).st_size))
+                total_size += os.stat(media_folder_local + media).st_size
+                transfer_ok += 1 
+        # ~ return _("{} files uploaded.").format(str(transfer_ok))
+        # ~ return _("{} files uploaded.").format(str(transfer_ok))
+    # Using system cmd
     elif which(sync_facility):
         # Build subprocess arg list accroding to sync_facility
         # Using Rsync
@@ -224,9 +236,9 @@ def sync_media_folder(media_folder_local, media_folder_remote, host_local, port,
         if len(sync_proc.stdout):
             scrape_index = str(sync_proc.stdout).index(scrape_str)+len(scrape_str)
             total_size = str(sync_proc.stdout)[ scrape_index: ].split(" ")[0][:-1]
-        else:
+    if debug:
-            total_size = "N/A";
+        print("Transferred size : " + str(total_size))
-        return total_size
+    return total_size
 
 def get_meta_data(host, xml_data, request_="status", m3u_=0):
     '''
@@ -239,7 +251,7 @@ def get_meta_data(host, xml_data, request_="status", m3u_=0):
     }
     if request_ == "list":
         # Return current instance's playlist
-         return get_playlist(host, xml_data, m3u_)
+        return get_playlist(host, xml_data, m3u_)
     elif request_ == "status":
          # Return current instance's status ( currently playing, state, time length, etc. )
         if xml_data.findall("./information/category/"):
@@ -267,22 +279,37 @@ def get_meta_data(host, xml_data, request_="status", m3u_=0):
               'id': cur_id,
             })
     elif request_ == "rssi":
-        #  # Return current instance's wifi signal quality
+        # Return current instance's wifi signal quality
-        print(xml_data)
+        if debug:
+            print(xml_data)
         if xml_data.findall("rssi"):
             media_infos.update({
               'status': 1,
               'rssi' : xml_data.find('rssi').text
             })
-        
+    elif request_ == "browse":
+        host_medias = {}
+        for media in xml_data:
+            media_name = media.attrib["name"]
+            if len(media_name.split('.')) > 1:
+                if media_name.split('.')[1] in media_exts:
+                    host_medias[media_name] = { 
+                            "name": media_name,
+                            "uri": media.attrib["uri"], 
+                            "size": round(int(media.attrib["size"])/1000000, 2)}
+        media_infos = {host : host_medias}
+        if debug:
+            print(media_infos)
+            
     return media_infos
 
 def get_playlist(host, xml_data, m3u=0):
     playlist = []
     item_list = []
     playlist_duration = 0
-    
+        
-    if xml_data.find("./node") and xml_data.find("./node").get('name') == "Playlist":
+    if xml_data.find("./node") and xml_data.find("./node").get('name') == _("Playlist"):
+        print("HAHAHAH")
         playlist = xml_data.findall("./node/leaf")
     
     content_format = "{};{};{};"
@@ -329,14 +356,22 @@ def send_pilpil_command(host, arg0, arg1, arg2):
     #
     # Default request
     HTTP_request = "/requests/status.xml"
-    if arg0 == "list" :
+    if arg0 == "list":
         # Get playlist
         HTTP_request = "/requests/playlist.xml"
+    elif arg0 == "browse":
+        if debug:
+            print("Brosing {}".format(media_folder_remote))
+        # Browse remote media folder
+        media_folder_remote_URL = quote(media_folder_remote)
+        HTTP_request = "/requests/browse.xml?uri=file://{}".format(media_folder_remote_URL)
+        if debug:
+            print("requesting url {} to {}:{}".format(HTTP_request, host, port_))
     elif arg0 in cmd_server:
         # Switching to cmd server
         HTTP_request = "/" + str(arg0)
         port_ = cmd_port
-    elif arg0 != "status" :
+    elif arg0 != "status":
         # Build request for VLC command
         HTTP_request = HTTP_request + "?command=" + cmd_player[arg0]
         if arg1 != "null" :
@@ -352,7 +387,7 @@ def send_pilpil_command(host, arg0, arg1, arg2):
                 HTTP_request = HTTP_request + "&val=" + arg1
             elif (arg0 == "enqueue") or (arg0 == "add") :
                 # Add 'input' url parameter
-                HTTP_request = HTTP_request + "&input=file://" + media_folder_remote + "/" + arg1
+                HTTP_request = HTTP_request + "&input=file://" + quote(media_folder_remote) + "/" + arg1
     
     # Send request and get data response
     data = send_HTTP_request(host, port_, time_out=3, request_=HTTP_request)
@@ -371,7 +406,7 @@ def send_pilpil_command(host, arg0, arg1, arg2):
     return metadata
 
 # Utilities
-def list_media_files(folder):
+def list_local_media_files(folder):
     '''
     List files in folder which extension is allowed (exists in media_exts).
     '''
@@ -426,20 +461,24 @@ def scan():
     hosts_available, hosts_unavailable = check_hosts(hosts)
     return [hosts_available, hosts_unavailable]
     
-@app.route("/browse")
+@app.route("/browse_local")
 def browse():
-    return list_media_files(media_folder_local)
+    return list_local_media_files(media_folder_local)
-    
+
 @app.route("/sync/<host>")
 def sync(host):
     # TODO : Add feedback for transfer in GUI
     size = 0
-    if host == "all":
+    if host == "status":
+        return str(current_upload)
+    elif host == "all":
         for hostl in hosts_available:
             size += sync_media_folder(media_folder_local, media_folder_remote, hostl, cmd_port)
+            # ~ th = threading.Thread(target=blink_pi, args=(16,))
+            # ~ th.start()
     else: 
         size = sync_media_folder(media_folder_local, media_folder_remote, host, cmd_port)
-    return size;
+    return str(size)
     
 @app.route("/<host>/<arg0>/", defaults = { "arg1": "null", "arg2": "null" })
 @app.route("/<host>/<arg0>/<arg1>/", defaults = { "arg2": "null" })
@@ -453,10 +492,10 @@ def action(host, arg0, arg1, arg2):
     
     if host == "all":
         # Send request to all available hosts
-        resp = []
+        responses = []
         for hostl in hosts_available:
-            resp.append(send_pilpil_command(hostl, arg0, arg1, arg2))
+            responses.append(send_pilpil_command(hostl, arg0, arg1, arg2))
-        status_message = resp
+        status_message = responses
     elif host not in hosts_available:
         status_message =  "<p>{}</p>".format("Host is not reachable")
     else:

changelog_todo.md

@@ -32,7 +32,7 @@ sha256 : 0fe3fe76d0e56e445124fa20646fa8b3d8c59568786b3ebc8a96d83d92f203e3
 md5    :  dee7af70135994169cab4f073ee51905
 sha256 :  ec3e17fc9b41f8c5181484e9866be2d1d92cab8403210e3d22f4f689edd4cfde
 
-  * Switch to rpi os Bullseye
+  * Switch to rpi os Bullseye arm64
   * Switch to user 'pil', pw 'pilpoil'
   * client config file parsing ( look for 'pilpil-client.toml' in ./, ~/., ~/.config/)
   * Add media folder sync (scp, rsync, http upload)
@@ -70,6 +70,7 @@ sha256 :
  * setup : Generate/install http auth secret at setup
  * setup : Add dry, help flags
  * FR localisation for server, client and install script
+ * pep8ification 
  
 
 # OTHER: 
@@ -77,7 +78,7 @@ sha256 :
 
 # TODO :
  
- * ? python sanitization
+ * ~ python sanitization
  * ~ Test with several rpis
  * ? Scripts hotspot linux/win/mac
  * ? Config sync

locales/fr/LC_MESSAGES/template.pot

@@ -54,6 +54,10 @@ msgstr "Erreur pendant la connexion à {}:{}"
 msgid "{} reachable on {}"
 msgstr "{} accessible sur {}"
 
+#: app.py:311
+msgid "Playlist"
+msgstr "Liste de lecture"
+
 #: app.py:331
 msgid "Idle"
 msgstr "Innocupé"

pilpil-server.toml

@@ -1,16 +1,17 @@
 [DEFAULT]
 debug = 1
-useSSL = true
+useSSL = false
 CAfile = "selfCA.crt"
 # scp, rsync, http
 sync_facility = "http" 
 media_folder_local = "../medias"
-media_folder_remote = "/home/pil/Videos"
+media_folder_remote = "~/Vidéos"
 media_exts = ["mp4", "avi", "mkv"]
 vlc_auth  = "secret" 
 # OnNlY3JldA==
 cmd_auth  = "secret"
-hosts = ["10.42.0.10", "10.42.0.11"]
+#hosts = ["10.42.0.10", "10.42.0.11"]
+hosts = ["127.0.0.1"]
 # VLC http LUA port
 vlc_port = 8887
 # Clients cmd port

static/script.js

@@ -5,15 +5,17 @@ const tl_drag_attr = {id:"tl_drag", draggable:"true", ondragstart:"drag(event, t
 // Config
 var timeline_color_cursor = "#FF8839";
 var timeline_color_bg = "#2EB8E6";
-
+var scanInterval = 3000;
+var status_all =  "Searching network for live hosts..."
+//  Global vars
 var src_id = "";
 var medias_status = {};
+var fileButtons = [];
 
 function updatePlaylist(){
     var new_list = [];
     var media_count = document.getElementById("timeline").children.length;
     for (i=media_count,l=0;i>l;i--) {
-	//~ new_list.push(document.getElementById("timeline").children[i].children[0].getAttribute("media_id"));
 	toMove = document.getElementById("timeline").children[i-1].children[0].getAttribute("media_id");
 	console.log(toMove);
 	sendCmd("/all/move/" + toMove + "/1");
@@ -21,10 +23,10 @@ function updatePlaylist(){
 }
 
 function findTargetIndex(element, index, array, thisArg){
-  if (element == this) {
+    if (element == this) {
-  	return index+1;
+	return index+1;
-  }
+    }
-  return 0;
+    return 0;
 };
 
 function moveElements(target) {
@@ -47,26 +49,25 @@ function moveElements(target) {
 };
 
 function allowDrop(ev) {
-  ev.preventDefault();
+    ev.preventDefault();
-  drop_id = ev.dataTransfer.getData("text");
+    drop_id = ev.dataTransfer.getData("text");
 };
 
 function drag(ev, source) {
-  src_id = ev.target.parentElement;
+    src_id = ev.target.parentElement;
-  ev.dataTransfer.setData("text", ev.target.id);
+    ev.dataTransfer.setData("text", ev.target.id);
 };
 
 function drop(ev, target) {
-  ev.preventDefault();
+    ev.preventDefault();
-  var data = ev.dataTransfer.getData("text");
+    var data = ev.dataTransfer.getData("text");
-  if (src_id.id != target.id) {
+    if (src_id.id != target.id) {
         dropTarget = moveElements(target);
         if (dropTarget) {
             dropTarget.appendChild(document.getElementById(data));
 	    updatePlaylist();
-        }
+	}
-  }
+    }
-  
 };
 
 function adjustTl() {
@@ -88,36 +89,45 @@ function addAttr(id, attr, val , child=-1) {
 };
 
 function addElement(type, attr, meta = 0, j = 0){
-  var elem = document.createElement(type);
+    var elem = document.createElement(type);
-  var keys_array = Object.keys(attr);
+    var keys_array = Object.keys(attr);
-  for (i=0, l=keys_array.length;i<l;i++) {
+    for (i=0, l=keys_array.length;i<l;i++) {
-    var att = document.createAttribute(keys_array[i]);
+	var att = document.createAttribute(keys_array[i]);
-    if(!i){
+	if(!i){
-	att.value = Object.values(attr)[i]+j;
+	    att.value = Object.values(attr)[i]+j;
-    } else {
+	} else {
-	att.value = Object.values(attr)[i];
+	    att.value = Object.values(attr)[i];
+	}
+	elem.setAttributeNode(att);
+    }	
+    // Set playlist id attribute
+    if (meta) {
+	att = document.createAttribute("media_id");
+	att.value = meta[0];
+	elem.setAttributeNode(att);
     }
-    elem.setAttributeNode(att);
+    // Get filename 
-  }
+    elem.innerText = meta[1];
-  // Set playlist id attribute
+    return elem;
-  if (meta) {
-      att = document.createAttribute("media_id");
-      att.value = meta[0];
-      elem.setAttributeNode(att);
-  }
-  // Get filename 
-  elem.innerText = meta[1];
-  return elem;
 };
-
-var scanInterval = 3000;
 // Bouttons de commande
 addEventListener("DOMContentLoaded", function() {
     sendCmd("/scan");
-    sendCmd("/browse");
+    sendCmd("/browse_local");
     sendCmd("/all/rssi");
     sendCmd("/all/list");
+    sendCmd("/all/browse");
     adjustTl();
+    
+    // Get filename when selected in table
+    //~ for (var i=0, l=fileButtons.length; i<l; i++) {
+	//~ var selected_file = fileButtons[i];
+	//~ // Sur un click
+	//~ selected_file.addEventListener("click", function(event) {
+	  //~ // On intercepte le signal
+	    //~ event.preventDefault();
+	//~ }
+    //~ }
     // Tous les elements avec la classe ".command"
     var commandButtons = document.querySelectorAll(".command");
     for (var i=0, l=commandButtons.length; i<l; i++) {
@@ -133,14 +143,17 @@ addEventListener("DOMContentLoaded", function() {
 		if ( !confirm("Êtes vous certain de vouloir effectuer cette action ?") ) {
 		    return 0;
 		}
+		
 	    } else if ( command == "/scan" ) {
-		document.getElementById("status_all").innerHTML = "Searching network for live hosts...";
+		document.getElementById("status_all").innerHTML = status_all;
+		
 	    } else if ( command.indexOf("/sort") > -1 ){ 
 		if (command.indexOf('/1/') > -1 ) {
 		    clickedButton.value = clickedButton.value.replace('/1/','/0/')
 		} else {
 		    clickedButton.value = clickedButton.value.replace('/0/','/1/')
 		}
+		
 	    } else if ( command.indexOf("/move") > -1 ) {
 		const test_array = [21,19,20];
 		for (i=test_array.length, l=0;i>l;i--){
@@ -155,7 +168,11 @@ addEventListener("DOMContentLoaded", function() {
 	    var request = new XMLHttpRequest();
 	    if ( command == "/scan" ) {
 		request.onload = sendCmd(command);
-	    }
+	    } else if ( command == "/sync/all" ) {
+		status_all = "Syncing files..."
+		request.onload = sendCmd("/sync/status");
+	    };
+
 	    // On construit la commande
 	    request.open("GET", command, true);
 	    // et on l'envoie
@@ -175,15 +192,6 @@ function parseResult(command, infos_array) {
 		    document.getElementById("status_"+infos_array[i].host).innerHTML = infos_array[i].file + " <br/> " + infos_array[i].time + " / " + infos_array[i].leng;
 		    medias_status[infos_array[i].id] = infos_array[i].pos;
 		}
-		// Find currently playing element
-		//~ var pl_length = document.getElementById("timeline").getAttribute("length");
-		//~ for (j=0,k=pl_length;j<k;j++){
-		    //~ if (document.getElementById("timeline").children[j].children[0].getAttribute('media_id') == infos_array[i].id ) {
-			//~ addAttr(document.getElementById("timeline").children[j].children[0].id, "pos", infos_array[i].pos); 
-		    //~ }
-		//~ };
-		//~ document.getElementById("timeline").children[0].children[0].hasAttribute('media_id')
-		// Toggle loop indicator
 		if (infos_array[i].loop == "true") { 
 		    document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#78E738"
 		} else {
@@ -201,7 +209,7 @@ function parseResult(command, infos_array) {
 	    
 	    for (var i = 0, l=infos_array.length; i<l; i++) {
 		// Fill Playlist infos
-		document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
+		//~ document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
 		// Build html table and timeline
 		var items_array = Array.from(infos_array[i].items);
 		//console.log(items_array.length);
@@ -212,20 +220,20 @@ function parseResult(command, infos_array) {
 		    };
 		    break;
 		}
-		var html_table  = "<table>" + 
+		//~ var html_table  = "<table>" + 
-				    "<tr>" + 
+				    //~ "<tr>" + 
-					    "<th>Id</th>" + 
+					    //~ "<th>Id</th>" + 
-					    "<th>Filename</th>" + 
+					    //~ "<th>Filename</th>" + 
-					    "<th>Duration</th>" + 
+					    //~ "<th>Duration</th>" + 
-				    "</tr>";
+				    //~ "</tr>";
 		for (var j = 0, k=items_array.length; j<k; j++) {
 		    // Table
 		    item_meta = items_array[j].split(';');
-		    html_table += "<tr>" + 
+		    //~ html_table += "<tr>" + 
-					"<td>" + item_meta[0] + "</td>" +
+					//~ "<td>" + item_meta[0] + "</td>" +
-					"<td>" + item_meta[1] + "</td>" + 
+					//~ "<td>" + item_meta[1] + "</td>" + 
-					"<td>" + item_meta[2] + "</td>" + 
+					//~ "<td>" + item_meta[2] + "</td>" + 
-				  "</tr>" ;
+				  //~ "</tr>" ;
 		    // Timeline
 		    var child_node = addElement("div", tl_drag_attr, item_meta, j);
 		    var len = document.getElementById("timeline").children.length;
@@ -248,8 +256,8 @@ function parseResult(command, infos_array) {
 			document.getElementById(tl_cont_attr.id + j).children[0].style.background = "linear-gradient(90deg," + timeline_color_bg + " " + pos1 + ", " + timeline_color_cursor + " " + pos + ", " + timeline_color_bg + " " + pos + ")";
 		    }
 		}
-		html_table += "</table>";
+		//~ html_table += "</table>";
-		document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
+		//~ document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
 	    };
 	    break;
 	case "/scan":
@@ -263,11 +271,13 @@ function parseResult(command, infos_array) {
 	    }
 	    if (host_up.length) { 
 		    scanInterval = 10000;
-		    document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval;
+		    //~ document.getElementById("status_all").innerHTML = "Scan interval set to " + scanInterval;
+		    status_all = "Scan interval set to " + scanInterval; 
 	    }
-	    document.getElementById("status_all").innerHTML = host_up.length + " client(s).";
+	    //~ document.getElementById("status_all").innerHTML = host_up.length + " client(s).";
+	    status_all = host_up.length + " client(s).";
 	    break;
-	case "/browse":
+	case "/browse_local":
 	    var html_table  = "<table>" + 
 			       "<tr>" + 
 				    "<th>Filename</th>" + 
@@ -299,6 +309,47 @@ function parseResult(command, infos_array) {
 		};
 	    };
 	    break;
+	case "/all/browse":
+	    for (var i=0, l=infos_array.length; i<l; i++) {
+		hosts = Object.keys(infos_array[i]);
+		//~ console.log(keys);
+		//~ var html_table  = "<table id='file_sel_" + hosts + "'>" + 
+				//~ "<tr>" + 
+				    //~ "<th>Filename</th>" + 
+				    //"<th>Size</th>" + 
+				//~ "</tr>";
+		for ( var j=0, k=hosts.length;j<k;j++ ) {
+		    keys_ = Object.keys(infos_array[i][hosts[j]]);
+		    //~ console.log(infos_array[i][hosts[j]]);
+		    for ( var m=0, n=keys_.length;m<n;m++ ) {
+			item_meta = infos_array[i][hosts[j]][keys_[m]];
+			//~ console.log(item_meta);
+			//~ html_table += "<tr>" + 
+					//~ "<td class='.file_selection'>" + item_meta["name"] + "</td>" +
+					//"<td>" + item_meta["size"] + "</td>" + 
+				  //~ "</tr>" ;
+			tr = document.createElement("tr");
+			td = document.createElement("td");
+			tr.appendChild(td);
+			tr.setAttribute("class", "file_selection");
+			tr.host = hosts[j];
+			td.innerText = item_meta["name"];
+			tr.addEventListener("click", enqueueFile, false)
+			document.getElementById("file_sel_"+hosts).appendChild(tr);
+		    };
+		}
+		//~ html_table += "</table>";
+		//~ document.getElementById("playlist_"+hosts).innerHTML += html_table;
+		//~ fileButtons = document.querySelectorAll('.file_selection');
+		//~ console.log(fileButtons);
+		//~ for (var i=fileButtons.length; i>0; i--) {
+		    //~ fileButtons[i].addEventListener('click', selectFile, false);
+		//~ }
+	    }
+	    break;
+	case "/sync/status":
+	    status_all = infos_array;
+	    break;
     }; // End switch case
 };
 
@@ -321,8 +372,20 @@ function sendCmd(command) {
     request.send();     
 };
 
-setInterval( sendCmd, 500, "/all/status");
+function enqueueFile(evt) {
-setInterval( sendCmd, 1000, "/all/list");
+    //console.log(evt.currentTarget.innerText + evt.currentTarget.host);
-setInterval( sendCmd, scanInterval, "/scan");
+    sendCmd("/" + evt.currentTarget.host + "/enqueue/" + evt.currentTarget.innerText);
-setInterval( sendCmd, 20000, "/all/rssi");
+};
+
+function updateStatusAll() {
+    document.getElementById("status_all").innerHTML = status_all;
+};
+
+setInterval(sendCmd, 500, "/all/status");
+setInterval(sendCmd, 1000, "/all/list");
+//~ setInterval(sendCmd, 3000, "/all/browse");
+setInterval(sendCmd, scanInterval, "/scan");
+setInterval(sendCmd, 20000, "/all/rssi");
+setInterval(updateStatusAll, 1000);
+
 

static/style.css

@@ -1,7 +1,7 @@
 body {color:#fff;background-color:#666;margin:0;}
 div {box-sizing: border-box;}
 h2 {margin:0;}
-table {background-color: #555;margin:.5em;max-width:100%;font-size:.9em}
+table {background-color: #555;margin-left:.5em;max-width:100%;font-size:.9em}
 td {padding: 0;}
 th {background-color: #aaa;}
 tr:nth-child(2n+1) {background-color: #888;}
@@ -87,9 +87,9 @@ tr:nth-child(2n+1) {background-color: #888;}
 }
 .btn_txt {display: block;font-size: small;}
 /*Right column*/
-.right_col {width: 79.9%;display: inline-block;}
+.right_col {width: 71%;display: inline-block;}
 /*Left column*/
-.left_col {width: 20%;display: inline-block;float: left;clear: left;}
+.left_col {width: 28%;display: inline-block;float: left;clear: left;}
 .left_col button {
   width: 2em;
   height: 2em;
@@ -109,30 +109,38 @@ tr:nth-child(2n+1) {background-color: #888;}
 }
 .left_col button:hover .btn_txt {display:block;}
 .col_1 {
-  width: 40%;
+    width: 40%;
-  float: left;
+    float: left;
-  padding: 3% 0 0 5%;
+    padding: 3% 0 0 5%;
-}
 }
 .col_2 {
-  width: 60%;
+    width: 59%;
-  display: inline-block;
+    display: inline-block;
-  clear: right;
+    clear: right;
+    height: 170px;
+}
+.col_2 div {
+    overflow-y: scroll;
+    height: 170px;
 }
 .indicator {
- display:inline-block;
+    display:inline-block;
- background-color: #C32600;
+    background-color: #C32600;
- margin: 0 0 0 5%;
+    margin: 0 0 0 5%;
- padding: 0.3em;
+    padding: 0.3em;
  }
+ .file_sel {
+    width: 100%;
+    margin: 0;
+}
 .wl_indicator {
-  display: inline-block;
+    display: inline-block;
-  background-color: #bbb;
+    background-color: #bbb;
-  vertical-align: bottom;
+    vertical-align: bottom;
-  margin: 0 1px;
+    margin: 0 1px;
-  padding: 0;
+    padding: 0;
-  height: .5em;
+    height: .5em;
-  width: 5%;
+    width: 5%;
 }
 #wl_0 {height:.5em;}
 #wl_1 {height:.65em;}

templates/main.html

@@ -56,7 +56,15 @@
 				<p id="repeat_ind_{{ host }}" class="indicator">Repeat</p>
 			</div>
 			<div class="col_2">
-				<p id="playlist_{{ host }}">{{queue_msgs[1]}}</p>
+				<div>{{queue_msgs[1]}}
+					<div id="playlist_{{ host }}" class="table_cont">
+						<table id="file_sel_{{ host }}">
+							<tr>
+								<th>Filename</th>
+							</tr>
+						</table>
+					</div>
+				</div>
 			</div>
 		</div>		
 		<div class="right_col">