diff --git a/app.py b/app.py index 740118c..5374235 100755 --- a/app.py +++ b/app.py @@ -140,7 +140,7 @@ else: # Network/link utilities -# https://www.metageek.com/training/resources/understanding-rssi/ + def send_HTTP_request(listed_host, port, time_out=3, request_="/"): ''' Send a http request with http auth @@ -536,7 +536,7 @@ def send_pilpil_command(host, arg0, arg1, arg2): data = send_HTTP_request(host, port_, time_out=3, request_=HTTP_request) if debug: if data: - print(str(host) + " - data length:" + str(len(data))) + print(str(host) + " - data length:" + str(len(data)) + " : " + str(data)) if not data: print("No data was received.") return 0 diff --git a/static/script.js b/static/script.js index 7e82ff7..ea70b59 100644 --- a/static/script.js +++ b/static/script.js @@ -58,6 +58,7 @@ async function update_sort_VLC_playlist(host) { // Reversed loop for (let i=media_count, l=0; i>l; i--) { // Find current's timeline element children's 'media_id' value + //~ console.log(document.getElementById(`timeline_${host}`).children[i-1].children[0]) let to_shift = document.getElementById(`timeline_${host}`).children[i-1].children[0].getAttribute("media_id"); //~ console.log(to_shift + " : " + document.getElementById(`timeline_${host}`).children[i-1].children[0].innerText); // Move 'to_shift' after element with id '1' : @@ -69,16 +70,31 @@ async function update_sort_VLC_playlist(host) { // Un-freeze timeline update flag currentUser.freeze_timeline_update = 0; } - +function get_child_by_id(id, parent_element, depth=0){ + // TODO : fix this ofc + Array.from(parent_element.children).forEach(function(child){ + if (depth){ + if (child.children[0].id == id){ + //~ console.log(child.children[0]); + result = child.children[0]; + } + } else if (child.id == id) { + result = child; + } + }); + return result; +} async function update_delete_VLC_playlist(host, delete_element_id) { - let delete_media = document.getElementById(delete_element_id); + + 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"); - document.getElementById("timeline_" + host).removeChild(delete_media_cont); + current_timeline.removeChild(delete_media_cont); send_ajax_cmd("/" + host + "/delete/" + delete_media_id); - await sleep(90); - adjust_timeline(); + await sleep(120); + adjust_timeline(host); currentUser.freeze_timeline_update = 0; } @@ -124,10 +140,12 @@ function allow_drop(event) { function drag_over_bin(event) { event.preventDefault(); - let dropped_id = event.dataTransfer.getData("text"); - let source_element = document.getElementById(dropped_id); - let current_host = source_element.parentElement.parentElement.id.split("_")[1]; - source_element.style.border = "2px #FFDE00 solid"; + let dropped_id = event.dataTransfer.getData("target_id"); + let source_id = event.dataTransfer.getData("parent_element_id"); + 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;"; } @@ -135,10 +153,12 @@ function drag_over_bin(event) { function drag_leave_bin(event) { event.preventDefault(); - let dropped_id = event.dataTransfer.getData("text"); - let source_element = document.getElementById(dropped_id); - let current_host = source_element.parentElement.parentElement.id.split("_")[1]; - source_element.style.border = "none"; + let dropped_id = event.dataTransfer.getData("target_id"); + let source_id = event.dataTransfer.getData("parent_element_id"); + 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 = 1; document.getElementById("delete_" + current_host).style.backgroundColor = "#df7474"; } @@ -146,7 +166,8 @@ function drag_leave_bin(event) { function drag(event, source) { // Freeze timeline update flag currentUser.freeze_timeline_update = 1; - event.dataTransfer.setData("text", event.target.id); + event.dataTransfer.setData("target_id", event.target.id); + event.dataTransfer.setData("parent_element_id", source.parentElement.parentElement.id); } @@ -155,19 +176,23 @@ function drop(event, target_element) { // shift HTML elements in the timeline to the left or right from the target element. event.preventDefault(); // Get dragged element id - let dropped_id = event.dataTransfer.getData("text"); - let source_element = document.getElementById(dropped_id); - let current_host = source_element.parentElement.parentElement.id.split("_")[1]; + let dropped_id = event.dataTransfer.getData("target_id"); + let source_id = event.dataTransfer.getData("parent_element_id"); + let source_element = document.getElementById(source_id); + let current_host = source_id.split("_")[1]; + 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 ) { update_delete_VLC_playlist(current_host, dropped_id); } else { - let dropTarget = shift_elements(source_element.parentElement, target_element); + dropped_element = get_child_by_id(dropped_id, source_element, 1); + let dropTarget = shift_elements(dropped_element.parentElement, target_element); //~ if (dropTarget) { // Append dropped element to drop target. - target_element.appendChild(source_element); - update_sort_VLC_playlist(current_host); + //~ target_element.appendChild(source_element); + target_element.appendChild(dropped_element); + update_sort_VLC_playlist(current_host); //~ } } // Un-freeze timeline update flag @@ -177,9 +202,10 @@ function drop(event, target_element) { } -function adjust_timeline() { +function adjust_timeline(host) { // Adapt timeline's UI elements to fit the width of their parent container. - let timeline_div = document.querySelector('[id^="timeline_"]').children; + //~ let timeline_div = document.querySelector('[id^="timeline_"]').children; + let timeline_div = document.getElementById("timeline_" + host).children; let div_width = 100 / timeline_div.length; for (let i=0, l=timeline_div.length; i " + infos_array_element.time + " / " + infos_array_element.leng; currentUser.medias_status[infos_array_element.id] = infos_array_element.pos; // Highlight currently playing element - let timeline_medias_array = Array.from(document.querySelectorAll('[media_id]')); + let current_timeline = document.getElementById("timeline_" + infos_array_element.host); + let timeline_medias_array = Array.from(current_timeline.querySelectorAll('[media_id]')); timeline_medias_array.forEach(function(media_element){ if ( media_element.getAttribute("media_id") == infos_array_element.id ) { let first_CSS_gradient_stop = infos_array_element.pos * 100; @@ -288,20 +315,23 @@ function update_list(infos_array_element){ document.getElementById("timeline_" + host).removeChild(child); }); } else { + current_timeline = document.getElementById("timeline_" + host); items_array.forEach(function(item, j){ item_meta = item.split(';'); let child_node = add_HTML_element("div", tl_drag_attr, item_meta, j); - let len = document.getElementById("timeline_" + host).children.length; + let len = current_timeline.children.length; add_HTML_attr("timeline_" + host, "length", len); if ( len < items_array.length ) { - document.getElementById("timeline_" + host).appendChild( add_HTML_element("div", tl_cont_attr, 0, len) ); - } - document.getElementById(tl_cont_attr.id + j).replaceChildren(child_node); - let media_name = document.getElementById(tl_cont_attr.id + j).children[0].innerText; + current_timeline.appendChild( add_HTML_element("div", tl_cont_attr, 0, len) ); + } + //~ document.getElementById(tl_cont_attr.id + j).replaceChildren(child_node); + current_timeline_children = Array.from(current_timeline.children); + current_timeline_children[j].replaceChildren(child_node); + let media_name = current_timeline_children[j].children[0].innerText; let media_url_str = "url(https://" + host + ":" + CMD_PORT + "/thumb/" + media_name + ")"; - document.getElementById(tl_cont_attr.id + j).children[0].style.backgroundImage = media_url_str; + current_timeline_children[j].children[0].style.backgroundImage = media_url_str; // Adjust elements width - adjust_timeline(); + adjust_timeline(host); }); } return items_array.length; @@ -345,6 +375,7 @@ function update_remote_filelist(infos_array_element) { function update_rssi_indicator(infos_array_element){ + let base_height = 0.5; let signal_color = 40; let best_rssi = 30; let worst_rssi = 70; @@ -352,11 +383,13 @@ function update_rssi_indicator(infos_array_element){ signal_color = (rssi_norm-1) * signal_color; // Reset to grey for (let i=0, l=4; i 4 ? 4 : rssi_norm; i - ` + `; let upload_dialog_HTML = `
- ` + `; if ( ul_cont_exists != undefined) { container_element.removeChild(ul_cont_exists); } container_element.insertBefore(upload_dialog_cont_element, siblings[0]); - document.getElementById(upload_dialog_cont_attributes["id"] + host).innerHTML = upload_dialog_HTML; + document.getElementById(upload_dialog_cont_attributes.id + host).innerHTML = upload_dialog_HTML; document.getElementById("ul_stop_btn_" + host).addEventListener("click", send_btn_cmd, false); document.getElementById("ul_status_" + host).innerHTML = upload_status_table; } @@ -461,10 +495,10 @@ async function update_upload_status(current_upload) { console.log("Updating upload status..."); //~ console.log(current_upload); if (current_upload.status == -1){ - console.log("Destroying dialog..." + current_upload.host) + console.log("Destroying dialog..." + current_upload.host); destroy_upload_status(); } else if (current_upload.status) { - console.log("Filling dialog...") + console.log("Filling dialog..."); document.getElementById("ul_dialog_cont_" + current_upload.host).style.display = "block"; // Fill table document.getElementById("ul_status_progress_cnt_" + current_upload.host).innerHTML = current_upload.progress + " / " + current_upload.total_count + t9n[LOCALE].upload_sent_count_msg; @@ -583,7 +617,7 @@ function scan_hosts() { // UI addEventListener("DOMContentLoaded", function() { - adjust_timeline(); + //~ adjust_timeline(); let commandButtons = document.querySelectorAll(".command"); for (let i=0, l=commandButtons.length; i -1 ) { - console.log("Sync command detected") + console.log("Sync command detected"); currentUser.status_all = t9n[LOCALE].sync; // Display dialog display_upload_status(command); diff --git a/static/style.css b/static/style.css index e3d9ba2..3350ee0 100644 --- a/static/style.css +++ b/static/style.css @@ -92,8 +92,13 @@ tr:nth-child(2n+1) {background-color: #888;} height: 75px; margin: 0; padding: 0; - border: 1px solid #aaaaaa; + background-color:#F00; } +/* +[id^="tl_cont"]:nth-child(2n+1) [id^="tl_drag"] { + background-color:#255E70; +} +*/ [id^="tl_drag"] { cursor: grab; text-align:center; @@ -101,12 +106,10 @@ tr:nth-child(2n+1) {background-color: #888;} line-height: 75px; width:100%; background-color:#1F7B99; - background-size: 100% 100%; + background-size: cover; + background-position: center; box-shadow: inset 0 0 20px #0008; } -[id^="tl_cont"]:nth-child(2n+1) [id^="tl_drag"] { - background-color:#255E70; -} .client_container:nth-child(2n+1) {background-color:#444;} .command {margin: 0 !important;} diff --git a/templates/main.html b/templates/main.html index 108ff83..ec14ff0 100644 --- a/templates/main.html +++ b/templates/main.html @@ -40,10 +40,10 @@

{{status_message}}

{{gui_l10n['str_link']}}: - - - - + + + +

{{gui_l10n['str_loop']}}

{{gui_l10n['str_repeat']}}