Fix timeline dups bug, master remote layout

This commit is contained in:
ABelliqueux 2023-01-08 19:29:59 +01:00
parent ce38295600
commit 6872e3f7ed
3 changed files with 44 additions and 16 deletions

View File

@ -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 // 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. // really means moving to the the very start of the playlist.
send_ajax_cmd("/" + host + "/move/" + to_shift + "/1"); send_ajax_cmd("/" + host + "/move/" + to_shift + "/1");
await sleep(90); await sleep(200);
} }
// Un-freeze timeline update flag // Un-freeze timeline update flag
currentUser.freeze_timeline_update = 0; 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) { 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 current_timeline = document.getElementById("timeline_" + host);
let delete_media = get_child_by_id(delete_element_id, current_timeline, 1); let delete_media = get_child_by_id(delete_element_id, current_timeline, 1);
let delete_media_cont = delete_media.parentElement; let delete_media_cont = delete_media.parentElement;
let delete_media_id = delete_media.getAttribute("media_id"); let delete_media_id = delete_media.getAttribute("media_id");
current_timeline.removeChild(delete_media_cont); current_timeline.removeChild(delete_media_cont);
send_ajax_cmd("/" + host + "/delete/" + delete_media_id); send_ajax_cmd("/" + host + "/delete/" + delete_media_id);
await sleep(120); await sleep(200);
adjust_timeline(host); adjust_timeline(host);
currentUser.freeze_timeline_update = 0; //~ currentUser.freeze_timeline_update = 0;
} }
function find_target_index(element, index) { function find_target_index(element, index) {
@ -145,9 +146,11 @@ function drag_over_bin(event) {
let source_element = document.getElementById(source_id); let source_element = document.getElementById(source_id);
let cont_element = get_child_by_id(dropped_id, source_element, 1); let cont_element = get_child_by_id(dropped_id, source_element, 1);
let current_host = source_id.split("_")[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 cont_element = get_child_by_id(dropped_id, source_element, 1);
let current_host = source_id.split("_")[1]; let current_host = source_id.split("_")[1];
cont_element.style.opacity = 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"; source_element.style.border = "none";
// Only shift if not dropping on self // Only shift if not dropping on self
if (source_element.id != target_element.id) { 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); update_delete_VLC_playlist(current_host, dropped_id);
document.getElementById("delete_btn").style.backgroundColor = "#df7474";
} else { } else {
dropped_element = get_child_by_id(dropped_id, source_element, 1); dropped_element = get_child_by_id(dropped_id, source_element, 1);
let dropTarget = shift_elements(dropped_element.parentElement, target_element); let dropTarget = shift_elements(dropped_element.parentElement, target_element);
//~ console.log(target_element);
//~ if (dropTarget) { //~ if (dropTarget) {
// Append dropped element to drop target. // Append dropped element to drop target.
//~ target_element.appendChild(source_element); //~ target_element.appendChild(source_element);
@ -528,7 +534,6 @@ function parse_result(command, infos_array) {
infos_array.forEach(update_status); infos_array.forEach(update_status);
} else if (command.indexOf("/list") > -1 ) { } else if (command.indexOf("/list") > -1 ) {
console.log(currentUser.freeze_timeline_update);
// Requests playlist of every instances // Requests playlist of every instances
if (!currentUser.freeze_timeline_update){ if (!currentUser.freeze_timeline_update){
infos_array.forEach(update_list); infos_array.forEach(update_list);
@ -567,8 +572,8 @@ function parse_result(command, infos_array) {
//~ display_upload_status(infos_array) //~ display_upload_status(infos_array)
} }
} else { } 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) { function enqueue_file(evt) {
send_ajax_cmd("/" + evt.currentTarget.host + "/enqueue/" + evt.currentTarget.innerText); 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"); setTimeout(send_ajax_cmd, 40, "/" + evt.currentTarget.host + "/list");
} }

View File

@ -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;} div {box-sizing: border-box;}
h2 {margin:0;} h2 {margin:0;}
table {background-color: #555;margin-left:.5em;max-width:100%;font-size:.9em} 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 { #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; min-height: 20em;
*/
} }
#master_remote .right_col {background-color:transparent;} #master_remote .right_col {background-color:transparent;}
#master_remote .buttons{
margin: unset;
padding: 0;
}
.client_container { .client_container {
border-bottom: #222 solid 1px; border-bottom: #222 solid 1px;
display:none; display:none;
@ -146,7 +162,7 @@ tr:nth-child(2n+1) {background-color: #888;}
} }
.btn_txt {display: block;font-size: small;} .btn_txt {display: block;font-size: small;}
.delete_btn { #delete_btn {
width: 5em; width: 5em;
height: 3em; height: 3em;
background-color: #df7474; background-color: #df7474;
@ -157,7 +173,7 @@ tr:nth-child(2n+1) {background-color: #888;}
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.delete_btn:hover { #delete_btn:hover {
box-shadow: 0 0 10px #df7474; box-shadow: 0 0 10px #df7474;
} }

View File

@ -9,7 +9,9 @@
<div class="left_col"> <div class="left_col">
<h2>{{gui_l10n['str_pilpil_title']}}</h2> <h2>{{gui_l10n['str_pilpil_title']}}</h2>
<p id="status_all">{{status_message}}</p> <p id="status_all">{{status_message}}</p>
<!--
<p id="filelist">{{queue_msgs[0]}}</p> <p id="filelist">{{queue_msgs[0]}}</p>
-->
</div> </div>
<div class="right_col"> <div class="right_col">
<p class="buttons"> <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/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="/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 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> </p>
</div> </div>
</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}}/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 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="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> <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> </div>
</div> </div>