diff --git a/static/script.js b/static/script.js index ea70b59..65b2f49 100644 --- a/static/script.js +++ b/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; - document.getElementById("delete_" + current_host).style.backgroundColor = "#f00"; - document.getElementById("delete_" + current_host).style.boxShadow = "0 0 10px #fff;"; + cont_element.style.opacity = 0.5; + //~ document.getElement("delete_" + current_host).style.backgroundColor = "#f00"; + //~ 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, 120, "/all/status"); + setTimeout(send_ajax_cmd, 180, "/all/list"); + 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"); } diff --git a/static/style.css b/static/style.css index 3350ee0..151db81 100644 --- a/static/style.css +++ b/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} @@ -14,10 +14,26 @@ tr:nth-child(2n+1) {background-color: #888;} } #master_remote { - background: linear-gradient(0deg, #222 10%, #444 80%); + 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; } diff --git a/templates/main.html b/templates/main.html index ec14ff0..de2b799 100644 --- a/templates/main.html +++ b/templates/main.html @@ -9,7 +9,9 @@

{{gui_l10n['str_pilpil_title']}}

{{status_message}}

+

@@ -24,6 +26,7 @@ +

@@ -77,7 +80,9 @@ +