From e615cc4d7c82d4776011e26777fcddf24f11a973 Mon Sep 17 00:00:00 2001
From: ABelliqueux <contact@arthus.net>
Date: Thu, 6 Oct 2022 20:08:04 +0200
Subject: [PATCH] timeline work

---
 app.py              |   4 +-
 static/script.js    | 289 +++++++++++++++++++++++++++++---------------
 static/style.css    |  44 ++++++-
 templates/main.html |  24 +++-
 4 files changed, 259 insertions(+), 102 deletions(-)

diff --git a/app.py b/app.py
index b09d0d0..74f4eca 100755
--- a/app.py
+++ b/app.py
@@ -213,7 +213,9 @@ def sendCommand(host, arg0, arg1, arg2):
                 m3u_content += m3u_prefix + item.get("duration") + ", " + item.get("name") + "\n" + item.get("uri")  + "\n"
                 playlist_duration += int(item.get("duration"))
                 # ~ item_info = item.get("id") + " : " + item.get("name") + " - " + sec2min( int( item.get("duration") ) )
-                item_info = item.get("id") + ";" + item.get("name") + ";" + sec2min( int( item.get("duration") ) )
+                item_info = item.get("id") + ";" + item.get("name") + ";" + sec2min( int( item.get("duration") ) ) + ";" 
+                if "current" in  item.keys():
+                    item_info += item.get("current")
                 item_list.append(item_info)
  
         playlist_overview = {
diff --git a/static/script.js b/static/script.js
index d321067..4b84966 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,9 +1,106 @@
+// Timeline drag and drop
+const tl_cont_attr = {id:"tl_cont", ondrop: "drop(event, this)", ondragover:"allowDrop(event)"};
+const tl_drag_attr = {id:"tl_drag", draggable:"true", ondragstart:"drag(event, this)"};
+
+var src_id = "";
+
+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");
+    }  
+}
+
+function findTargetIndex(element, index, array, thisArg){
+  if (element == this) {
+  	return index+1;
+  }
+  return 0;
+};
+
+function moveElements(target) {
+    var elem_list = Array.from(src_id.parentElement.children);
+    var elem_list_slice = elem_list;
+    var source_idx = elem_list.findIndex(findTargetIndex, src_id);
+    var target_idx = elem_list.findIndex(findTargetIndex, target);
+    var idx;
+    if (source_idx < target_idx) {
+        elem_list_slice = elem_list.slice(source_idx+1, target_idx+1);
+      idx = source_idx;
+    } else {
+      elem_list_slice = elem_list.slice(target_idx, source_idx );
+      idx = target_idx+1;
+    }
+    for (i=0, l=elem_list_slice.length; i<l;i++) {
+      elem_list[idx+i].appendChild(elem_list_slice[i].children[0]);
+    }
+    return target;
+};
+
+function allowDrop(ev) {
+  ev.preventDefault();
+  drop_id = ev.dataTransfer.getData("text");
+};
+
+function drag(ev, source) {
+  src_id = ev.target.parentElement;
+  ev.dataTransfer.setData("text", ev.target.id);
+};
+
+function drop(ev, target) {
+  ev.preventDefault();
+  var data = ev.dataTransfer.getData("text");
+  if (src_id.id != target.id) {
+        dropTarget = moveElements(target);
+        if (dropTarget) {
+            dropTarget.appendChild(document.getElementById(data));
+	    updatePlaylist();
+        }
+  }
+  
+};
+
+function adjustTl() {
+    var child = document.getElementById('timeline').children;
+    var divWidth = 100 / child.length;
+    for (i=0, l=child.length;i<l;i++) {
+      child[i].style.width= divWidth + "%";
+    }
+};
+
+function addElement(type, attr, meta = [], j = 0){
+  var elem = document.createElement(type);
+  var keys_array = Object.keys(attr);
+  for (i=0, l=keys_array.length;i<l;i++) {
+    var att = document.createAttribute(keys_array[i]);
+    if(!i){
+	att.value = Object.values(attr)[i]+j;
+    } else {
+	att.value = Object.values(attr)[i];
+    }
+    elem.setAttributeNode(att);
+  }
+  // Set okaylist id attribute
+  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("/all/rssi");
+    sendCmd("/all/list");
+    adjustTl();
     // Tous les elements avec la classe ".command"
     var commandButtons = document.querySelectorAll(".command");
     for (var i=0, l=commandButtons.length; i<l; i++) {
@@ -28,19 +125,19 @@ addEventListener("DOMContentLoaded", function() {
 		    clickedButton.value = clickedButton.value.replace('/0/','/1/')
 		}
 	    } else if ( command.indexOf("/move") > -1 ) {
-		const test_array = [5,6,7,8];
+		const test_array = [21,19,20];
 		for (i=test_array.length, l=0;i>l;i--){
 		    console.log(test_array[i-1]);
 		    sendCmd("/all/move/" + test_array[i-1] + "/1");
-		    
 		};
+		sendCmd("/all/list");    
 		//setInterval( sendCmd, scanInterval, "/all/move/16/1");
 	    };
 
 	      // On envoie la commande en AJAX
 	    var request = new XMLHttpRequest();
 	    if ( command == "/scan" ) {
-		request.onload = refreshInfos(command);
+		request.onload = sendCmd(command);
 	    }
 	    // On construit la commande
 	    request.open("GET", command, true);
@@ -52,98 +149,99 @@ addEventListener("DOMContentLoaded", function() {
 
 // Affichage des infos
 function parseResult(command, infos_array) {
-    //~ var request = new XMLHttpRequest();
-    //~ request.onload = function() {
-	//~ if (request.readyState === request.DONE) {
-	    //~ if (request.status === 200) {
-	    //~ // responseText is a string, use parse to get an array.
-		//~ const infos_array = JSON.parse(request.responseText);
-		switch (command) {
-		    case "/all/status": 
-			// Iterate over array
-			for (var i = 0, l=infos_array.length; i<l; i++) {
-			    document.getElementById("status_"+infos_array[i].host).innerHTML = "Playing " + infos_array[i].file + " : " + infos_array[i].time + " / " + infos_array[i].leng;
-			    if (infos_array[i].loop == "true") { document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
-			    if (infos_array[i].repeat == "true") { document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
-			};
-			break;
-		    case "/all/list":
-			for (var i = 0, l=infos_array.length; i<l; i++) {
-			    document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
-			    var items_array = Array.from(infos_array[i].items);
-			    var html_table  = "<table>" + 
-						"<tr>" + 
-							"<th>Id</th>" + 
-							"<th>Filename</th>" + 
-							"<th>Duration</th>" + 
-						"</tr>";
-			    for (var j = 0, k=items_array.length; j<k; j++) {
-				    item_meta = items_array[j].split(';');
-				    html_table += "<tr>" + 
-							"<td>" + item_meta[0] + "</td>" +
-							"<td>" + item_meta[1] + "</td>" + 
-							"<td>" + item_meta[2] + "</td>" + 
-						  "</tr>" ;
-			    }
-			    html_table += "</table>";
-			    document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
-			};
-			break;
-		    case "/scan":
-			var host_up = infos_array[0];
-			var host_down = infos_array[1];
-			for ( var i=0, l=host_up.length; i<l; i++){
-				document.getElementById(host_up[i]).style.display = 'initial';
-			}
-			for ( var i=0, l=host_down.length; i<l; i++){
-				document.getElementById(host_down[i]).style.display = 'none';
-			}
-			//~ if (host_up.length) { 
-				//~ scanInterval = 10000;
-				//~ document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval;
-			//~ }
-			document.getElementById("status_all").innerHTML = host_up.length + " client(s) found.";
-			break;
-		    case "/browse":
-			var html_table  = "<table>" + 
-					   "<tr>" + 
-						"<th>Filename</th>" + 
-						"<th>Duration</th>" + 
-					   "</tr>";
-			for (var j = 0, k=infos_array.length; j<k; j++) {
-				html_table += "<tr>" + 
-						    "<td>" + infos_array[j] + "</td>" +
-						    "<td>" + "00:00" + "</td>" +
-					      "</tr>" ;
-			}
-			html_table += "</table>";
-			document.getElementById("filelist").innerHTML += html_table;
-			break;
-		    case "/all/rssi":
-			var signal_color = 40;
-			var best_rssi = 30;
-			var worst_rssi = 70;
-			for (var j = 0, k=infos_array.length; j<k; j++) {
-			    var rssi_norm = Math.ceil( (worst_rssi - parseInt(infos_array[j].rssi) ) / ( worst_rssi - best_rssi ) * 4 );
-			    signal_color = (rssi_norm-1) * signal_color;
-			    // Reset to grey
-			    for (i=0, l=4; i<l;i++) {
-				document.getElementById("wl_"+i).style.backgroundColor = "hsl(0, 0%, 65%)";
-			    };
-			    // Color it
-			    for (i=0, l=rssi_norm; i<l;i++) {
-				document.getElementById("wl_"+i).style.backgroundColor = "hsl(" + signal_color + ", 100%, 50%)";
-			    };
-			};
-			break;
-		}; // End switch case
-	    //~ };
-	//~ };
-    //~ };
-      //~ // On construit la commande
-      //~ request.open("GET", command, true);
-      //~ // et on l'envoie
-      //~ request.send(); 
+    switch (command) {
+	case "/all/status": 
+	    // Iterate over array
+	    for (var i = 0, l=infos_array.length; i<l; i++) {
+		document.getElementById("status_"+infos_array[i].host).innerHTML = "Playing " + infos_array[i].file + " : " + infos_array[i].time + " / " + infos_array[i].leng;
+		if (infos_array[i].loop == "true") { document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
+		if (infos_array[i].repeat == "true") { document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
+	    };
+	    break;
+	case "/all/list":
+	    
+	    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;
+		// Build html table and timeline
+		var items_array = Array.from(infos_array[i].items);
+		var html_table  = "<table>" + 
+				    "<tr>" + 
+					    "<th>Id</th>" + 
+					    "<th>Filename</th>" + 
+					    "<th>Duration</th>" + 
+				    "</tr>";
+		for (var j = 0, k=items_array.length; j<k; j++) {
+		    // Table
+		    item_meta = items_array[j].split(';');
+		    html_table += "<tr>" + 
+					"<td>" + item_meta[0] + "</td>" +
+					"<td>" + item_meta[1] + "</td>" + 
+					"<td>" + item_meta[2] + "</td>" + 
+				  "</tr>" ;
+		    // Timeline
+		    var child_node = addElement("div", tl_drag_attr, item_meta, j);
+		    var len = document.getElementById("timeline").children.length;
+		    if ( len < items_array.length ) {
+			document.getElementById("timeline").appendChild( addElement("div", tl_cont_attr, [], len) );
+		    }
+		    document.getElementById(tl_cont_attr.id + j).replaceChildren(child_node);
+		    if (item_meta[3] != ""){
+			document.getElementById(tl_cont_attr.id + j).children[0].style.borderBottom = "4px solid #ff8300";
+		    }
+		}
+		html_table += "</table>";
+		document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
+	    };
+	    break;
+	case "/scan":
+	    var host_up = infos_array[0];
+	    var host_down = infos_array[1];
+	    for ( var i=0, l=host_up.length; i<l; i++){
+		    document.getElementById(host_up[i]).style.display = 'initial';
+	    }
+	    for ( var i=0, l=host_down.length; i<l; i++){
+		    document.getElementById(host_down[i]).style.display = 'none';
+	    }
+	    //~ if (host_up.length) { 
+		    //~ scanInterval = 10000;
+		    //~ document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval;
+	    //~ }
+	    document.getElementById("status_all").innerHTML = host_up.length + " client(s) found.";
+	    break;
+	case "/browse":
+	    var html_table  = "<table>" + 
+			       "<tr>" + 
+				    "<th>Filename</th>" + 
+				    "<th>Duration</th>" + 
+			       "</tr>";
+	    for (var j = 0, k=infos_array.length; j<k; j++) {
+		    html_table += "<tr>" + 
+					"<td>" + infos_array[j] + "</td>" +
+					"<td>" + "00:00" + "</td>" +
+				  "</tr>" ;
+	    }
+	    html_table += "</table>";
+	    document.getElementById("filelist").innerHTML += html_table;
+	    break;
+	case "/all/rssi":
+	    var signal_color = 40;
+	    var best_rssi = 30;
+	    var worst_rssi = 70;
+	    for (var j = 0, k=infos_array.length; j<k; j++) {
+		var rssi_norm = Math.ceil( (worst_rssi - parseInt(infos_array[j].rssi) ) / ( worst_rssi - best_rssi ) * 4 );
+		signal_color = (rssi_norm-1) * signal_color;
+		// Reset to grey
+		for (i=0, l=4; i<l;i++) {
+		    document.getElementById("wl_"+i).style.backgroundColor = "hsl(0, 0%, 65%)";
+		};
+		// Color it
+		for (i=0, l=rssi_norm; i<l;i++) {
+		    document.getElementById("wl_"+i).style.backgroundColor = "hsl(" + signal_color + ", 100%, 50%)";
+		};
+	    };
+	    break;
+    }; // End switch case
 };
 
 function sendCmd(command) {
@@ -164,6 +262,7 @@ function sendCmd(command) {
     // et on l'envoie
     request.send();     
 };
+
 setInterval( sendCmd, 500, "/all/status");
 setInterval( sendCmd, 1000, "/all/list");
 setInterval( sendCmd, scanInterval, "/scan");
diff --git a/static/style.css b/static/style.css
index 81807c4..5a6275b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,5 @@
-body {color:#fff;background-color:#666;}
+body {color:#fff;background-color:#666;margin:0;}
+div {box-sizing: border-box;}
 h2 {margin:0;}
 table {background-color: #555;margin:.5em;}
 td {padding: .2em .5em;}
@@ -9,14 +10,53 @@ tr:nth-child(2n+1) {background-color: #888;}
 #master_remote .right_col {background-color:transparent;}
 .client_container {border-bottom: #bbb solid 4px;display:none;}
 .client_container .button{}
+/*
 .timeline {height: 3em;background-color: #0f0;margin: 2em 0;}
+*/
+#timeline {
+    background-color:#ddd;
+    height: 75px;
+    width:100%
+}
+[id^="tl_cont"] {
+  float: left;
+  width: 10%;
+  height: 75px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #aaaaaa;
+}
+[id^="tl_drag"] {
+    cursor: grab;
+    text-align:center;
+    height:75px;
+    line-height: 75px;
+    width:100%;
+    background-color:#999;
+}
+[id^="tl_cont"]:nth-child(2n+1) [id^="tl_drag"] {
+    background-color:#777;
+}
+/*
+#tl_drag1 {background-color:#486;}
+#tl_drag2 {background-color:#a9e;}
+#tl_drag3 {background-color:#d53;}
+#tl_drag4 {background-color:#ea5;}
+#tl_drag5 {background-color:#964;}
+#tl_drag6 {background-color:#135;}
+#tl_drag7 {background-color:#973;}
+#tl_drag8 {background-color:#b26;}
+#tl_drag9 {background-color:#fe9;}
+#tl_drag10 {background-color:#fe5;}
+*/
+
 .right_col {width: 78%;display: inline-block;background-color:#888;}
 .client_container:nth-child(2n+1) {background-color:#444;}
 .command {margin: 0 !important;}
 .buttons {width:75%;margin:auto;text-align: center;padding: 2em;}
 .btn {
     margin:auto;
-    width:4em;
+    width:3em;
     height: 4em;
     display:inline-block;
     padding: 6px 12px;
diff --git a/templates/main.html b/templates/main.html
index 973aad8..eb76904 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -28,7 +28,7 @@
 				<button value="/all/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>listes</span></button>
 				<button value="/all/enqueue/tst.mp4" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">tst.mp4</span></button>
 				<button value="/all/enqueue/tst1.mp4" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">tst1.mp4</span></button>
-				<button value="/move" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">movePl</span></button>
+				<button value="/move/0/1" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">movePl</span></button>
 			</p>
 			</div>
 	</div>
@@ -55,8 +55,24 @@
 			</div>
 		</div>		
 		<div class="right_col">
-			<div class="timeline"></div>
-			<p class="buttons">
+			<div id="timeline">
+<!--
+				<div id="tl_cont0" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag1" draggable="true" ondragstart="drag(event, this)">tst.mp4</div></div>
+				<div id="tl_cont1" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag2" draggable="true" ondragstart="drag(event, this)">video2.mp4</div></div>
+				<div id="tl_cont2" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag3" draggable="true" ondragstart="drag(event, this)">this_video.mp4</div></div>
+				<div id="tl_cont3" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag4" draggable="true" ondragstart="drag(event, this)">encore.mp4</div></div>
+				<div id="tl_cont4" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag5" draggable="true" ondragstart="drag(event, this)">balah.mp4</div></div>
+				<div id="tl_cont5" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag6" draggable="true" ondragstart="drag(event, this)">foo.mp4</div></div>
+				<div id="tl_cont6" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag7" draggable="true" ondragstart="drag(event, this)">bar.mp4</div></div>
+				<div id="tl_cont7" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag8" draggable="true" ondragstart="drag(event, this)">biche.mp4</div></div>
+				<div id="tl_cont8" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag9" draggable="true" ondragstart="drag(event, this)">genou.mp4</div></div>
+				<div id="tl_cont9" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag10" draggable="true" ondragstart="drag(event, this)">splaf.mp4</div></div>
+-->
+<!--
+				<div id="tl_contX"></div>
+-->
+			</div>
+			<div class="buttons">
 				<button value="/{{host}}/previous" class="command btn btn-block btn-lg btn-default" role="button">&#x23ee;<span class="btn_txt">Pr&eacute;c.</span></button>
 				<button value="/{{host}}/play" class="command btn btn-block btn-lg btn-default" role="button">&#x23f5;<span class="btn_txt">Lecture</span></button>
 				<button value="/{{host}}/pause" class="command btn btn-block btn-lg btn-default" role="button">&#x23f8;<span class="btn_txt">Pause</span></button>
@@ -66,7 +82,7 @@
 				<button value="/{{host}}/loop" class="command btn btn-block btn-lg btn-default" role="button">&#x1f501;<span class="btn_txt">Boucler<br/>liste</span></button>
 				<button value="/{{host}}/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>liste</span></button>
 				<button id="toggle_val_{{host}}}" value="/{{host}}/sort/1/id" class="command btn btn-block btn-lg btn-default" role="button">&#x1f500;<span class="btn_txt">Trier<br/>liste</span></button>
-			</p>
+			</div>
 		</div>
 	</div>
    {% endfor %}