streaming

2019-01-03 14:21:24 +01:00
parent 5e4f9b8862
commit 683cce60ab
5 changed files with 175 additions and 94 deletions
@@ -19,13 +19,10 @@
    				console.log("update")	    				
    				list = Array.from(document.querySelectorAll('#sortable>li'));
    				var i = list.indexOf(u.item[0])
-    				console.log(u.item.attr("id") + " is now " + i)
    				on_update_operation(u.item.attr("id"), i)
    			}
    		});
    		$( "#sortable" ).disableSelection();
-
-    		// connect to ppop
    		sock = new WebSocket("ws://localhost:8718/ppop");
    		sock.onopen = function() {
    			console.log("ppop open")
@@ -34,31 +31,63 @@
    			console.log("ppop closed")
    			sock = new WebSocket("ws://localhost:8718/ppop");
    		}
-
    		sock.onmessage = function(msg) {
-    			console.log(msg.data)
+          check_fix_list(JSON.parse(msg.data))
    		}
-
-    		// setInterval(function() {
-    		// 	sock.send(JSON.stringify({"op": "tick", "id": "0", "index": 0}));
-    		// },3000);
-
  		} );
  		var sock = null;
  		function on_update_operation(id, index) {
  			if(sock) {
  				console.log("sending")
-  				sock.send(JSON.stringify({"op": "move", "id": id, "index": index}));	
+  				sock.send(JSON.stringify({"op": "move", "id": id, "index": index}))
  			}  			
  		}
+      function check_fix_list(playlist) {
+
+        console.log(playlist)
+
+        $("#pname").text("Playlist: " + playlist.name)
+        $("#tname").text("Current Track: " + playlist.ctrack)
+        $("#aname").text("Current Album: " + playlist.calbum)
+
+
+        list = Array.from(document.querySelectorAll('#sortable>li'))
+
+
+        console.log("length ul: " + list.length)
+        console.log("length playlist: " + playlist.list.length)
+
+
+        for (let i = 0; i < list.length; i++) {
+          if(i >= playlist.list.length) {
+            break
+          } else if (list[i].id != playlist.list[i]["id"]) {
+            console.log("difference at index: " + i)
+            list[i].setAttribute("id", playlist.list[i]["id"])
+            list[i].innerHTML = "<span>" + playlist.list[i]["maker"] + 
+                                  " - " + playlist.list[i]["album"] + 
+                                  " - " + playlist.list[i]["name"] + "</span>" ;
+          }
+        }
+
+        var ul = document.getElementById('sortable');
+        if(list.length > playlist.list.length) {
+          for(let i = playlist.list.length; i < list.length; i++) {
+            ul.removeChild(list[i])
+          }
+        } else if (list.length < playlist.list.length) {
+
+        }
+        console.log("synched!!")
+      }
 	</script>	
 	<title>Radiodiodio</title>
 </head>
 <body>
-<h1>Playlist: {{.NAME}}</h1>
-
-<h2>Current Track: {{.CTRACK.NAME}} </h2>
-<h2>Current Album : {{.CALBUM.NAME}} - {{.CALBUM.MAKER}}</h2>
+<h1 id="pname">Playlist: {{.NAME}}</h1>
+<audio controls src="http://192.168.1.80:8088/wwww"></audio>
+<h2 id="tname">Current Track: {{.CTRACK.NAME}}</h2>
+<h2 id="aname">Current Album : {{.CALBUM.NAME}} - {{.CALBUM.MAKER}}</h2>

 <ul id="sortable">
 	{{range $.LIST}}