Fix timeline dups bug, master remote layout

static/script.js

@@ -65,7 +65,7 @@ async function update_sort_VLC_playlist(host) {
 	// In VLC's playlist XML representation, the playlist node always gets id '1', so moving to that id
 	// really means moving to the the very start of the playlist.
 	send_ajax_cmd("/" + host + "/move/" + to_shift + "/1");
-	await sleep(90);
+	await sleep(200);
     }
     // Un-freeze timeline update flag
     currentUser.freeze_timeline_update = 0;
@@ -86,16 +86,17 @@ function get_child_by_id(id, parent_element, depth=0){
 }
 
 async function update_delete_VLC_playlist(host, delete_element_id) {
-    
+    // Delete item from timeline and send corresponding VLC command
     let current_timeline = document.getElementById("timeline_" + host);
     let delete_media = get_child_by_id(delete_element_id, current_timeline, 1);
     let delete_media_cont = delete_media.parentElement;
     let delete_media_id = delete_media.getAttribute("media_id");
+    
     current_timeline.removeChild(delete_media_cont);
     send_ajax_cmd("/" + host + "/delete/" + delete_media_id);
-    await sleep(120);
+    await sleep(200);
     adjust_timeline(host);
-    currentUser.freeze_timeline_update = 0;
+    //~ currentUser.freeze_timeline_update = 0;
 }
 
 function find_target_index(element, index) {
@@ -145,9 +146,11 @@ function drag_over_bin(event) {
     let source_element = document.getElementById(source_id);
     let cont_element = get_child_by_id(dropped_id, source_element, 1);
     let current_host =  source_id.split("_")[1];
-    cont_element.style.opacity = .5;
+    cont_element.style.opacity = 0.5;
-    document.getElementById("delete_" + current_host).style.backgroundColor = "#f00";
+    //~ document.getElement("delete_" + current_host).style.backgroundColor = "#f00";
-    document.getElementById("delete_" + current_host).style.boxShadow = "0 0 10px #fff;";
+    //~ document.getElementById("delete_" + current_host).style.boxShadow = "0 0 10px #fff;";
+    document.getElementById("delete_btn").style.backgroundColor = "#f00";
+    document.getElementById("delete_btn").style.boxShadow = "0 0 10px #fff;";
 }
 
 
@@ -159,7 +162,7 @@ function drag_leave_bin(event) {
     let cont_element = get_child_by_id(dropped_id, source_element, 1);
     let current_host =  source_id.split("_")[1];
     cont_element.style.opacity = 1;
-    document.getElementById("delete_" + current_host).style.backgroundColor = "#df7474";
+    document.getElementById("delete_btn").style.backgroundColor = "#df7474";
 }
 
 
@@ -183,11 +186,14 @@ function drop(event, target_element) {
     source_element.style.border = "none";
     // Only shift if not dropping on self
     if (source_element.id != target_element.id) {
-	if ( target_element.id.indexOf("delete_") > -1 ) {
+	//~ if ( target_element.id.indexOf("delete_") > -1 ) {
+	if ( target_element.id == "delete_btn") {
 	    update_delete_VLC_playlist(current_host, dropped_id);
+	    document.getElementById("delete_btn").style.backgroundColor = "#df7474";
 	} else {
 	    dropped_element = get_child_by_id(dropped_id, source_element, 1);
 	    let dropTarget = shift_elements(dropped_element.parentElement, target_element);
+	    //~ console.log(target_element);
 	    //~ if (dropTarget) {
 		// Append dropped element to drop target.
 		//~ target_element.appendChild(source_element);
@@ -528,7 +534,6 @@ function parse_result(command, infos_array) {
 	    infos_array.forEach(update_status);
 	    
 	} else if (command.indexOf("/list") > -1 ) {
-	    console.log(currentUser.freeze_timeline_update);
 	    // Requests playlist of every instances
 	    if (!currentUser.freeze_timeline_update){
 		infos_array.forEach(update_list);
@@ -567,8 +572,8 @@ function parse_result(command, infos_array) {
 		    //~ display_upload_status(infos_array)
 	    }
 	} else {
-	    setTimeout(send_ajax_cmd, 80, "/all/list");
+	    setTimeout(send_ajax_cmd, 180, "/all/list");
-	    setTimeout(send_ajax_cmd, 120, "/all/status");
+	    setTimeout(send_ajax_cmd, 180, "/all/status");
 	}
 }
 
@@ -593,6 +598,8 @@ function send_ajax_cmd(command) {
 
 function enqueue_file(evt) {
     send_ajax_cmd("/" + evt.currentTarget.host + "/enqueue/" + evt.currentTarget.innerText);
+    // User can't be interacting with timeline when clicking on file so unfreeze it.
+    currentUser.freeze_timeline_update = 0;
     setTimeout(send_ajax_cmd, 40, "/" + evt.currentTarget.host + "/list");
 }
 

static/style.css

@@ -1,4 +1,4 @@
-body {color:#fff;background-color:#666;margin:0;}
+body {color:#fff;background-color:#666;margin:0;padding-top: 8em;}
 div {box-sizing: border-box;}
 h2 {margin:0;}
 table {background-color: #555;margin-left:.5em;max-width:100%;font-size:.9em}
@@ -15,9 +15,25 @@ tr:nth-child(2n+1) {background-color: #888;}
 
 #master_remote {
   background: linear-gradient(0deg, #222 10%, #444 80%);
+  padding: 1em;
+  text-align: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height:8em;
+}
+/*
     min-height: 20em;
+*/
 }
 #master_remote .right_col {background-color:transparent;}
+#master_remote .buttons{
+    margin: unset;
+    padding: 0;
+}
+
 .client_container {
     border-bottom: #222 solid 1px;
     display:none;
@@ -146,7 +162,7 @@ tr:nth-child(2n+1) {background-color: #888;}
 }
 .btn_txt {display: block;font-size: small;}
 
-.delete_btn {
+#delete_btn {
     width: 5em;
     height: 3em;
     background-color: #df7474;
@@ -157,7 +173,7 @@ tr:nth-child(2n+1) {background-color: #888;}
     margin: 0;
     padding: 0;
 }
-.delete_btn:hover {
+#delete_btn:hover {
     box-shadow: 0 0 10px #df7474;
 }
 

templates/main.html

@@ -9,7 +9,9 @@
 	   <div class="left_col">
 		   <h2>{{gui_l10n['str_pilpil_title']}}</h2>
 		   <p id="status_all">{{status_message}}</p>
+<!--
 		   <p id="filelist">{{queue_msgs[0]}}</p>
+-->
 	   </div>
 	   <div class="right_col">
 		   <p class="buttons">
@@ -24,6 +26,7 @@
 				<button value="/all/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">{{gui_l10n['str_clear']}}</span></button>
 				<button value="/all/move/0/1" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">{{gui_l10n['str_sort']}}</span></button>
 				<button value="/sync/all" class="command btn btn-block btn-lg btn-default" role="button">&#x21ad;<span class="btn_txt">{{gui_l10n['str_sync']}}</span></button>
+				<button id="delete_btn" ondrop="drop(event, this)", ondragover="drag_over_bin(event)" ondragleave="drag_leave_bin(event)" class="delete_btn" role="button">&#x1F5D1;<span class="btn_txt">{{gui_l10n['str_delete']}}</span></button>
 			</p>
 			</div>
 	</div>
@@ -77,7 +80,9 @@
 				<button value="/{{host}}/loop" class="command btn btn-block btn-lg btn-default" role="button">&#x1f501;<span class="btn_txt">{{gui_l10n['str_loop']}}</span></button>
 				<button value="/{{host}}/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">{{gui_l10n['str_clear']}}</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">{{gui_l10n['str_sort']}}</span></button>
+<!--
 				<button id="delete_{{host}}" value="/{{host}}/delete" ondrop="drop(event, this)", ondragover="drag_over_bin(event)" ondragleave="drag_leave_bin(event)" class="delete_btn" role="button">&#x1F5D1;<span class="btn_txt">{{gui_l10n['str_delete']}}</span></button>
+-->
 			</div>
 		</div>
 	</div>