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
// 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");
}

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;}
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;
}

View File

@ -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>