pilpil
/
pilpil-setup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

timeline work

This commit is contained in:
ABelliqueux 2022-10-06 20:08:04 +02:00
parent b51b2db8db
commit e615cc4d7c
4 changed files with 259 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.py
View File

@ -213,7 +213,9 @@ def sendCommand(host, arg0, arg1, arg2):
m3u_content += m3u_prefix + item.get("duration") + ", " + item.get("name") + "\n" + item.get("uri") + "\n" m3u_content += m3u_prefix + item.get("duration") + ", " + item.get("name") + "\n" + item.get("uri") + "\n"
playlist_duration += int(item.get("duration")) playlist_duration += int(item.get("duration"))
# ~ item_info = item.get("id") + " : " + item.get("name") + " - " + sec2min( int( item.get("duration") ) ) # ~ item_info = item.get("id") + " : " + item.get("name") + " - " + sec2min( int( item.get("duration") ) )
item_info = item.get("id") + ";" + item.get("name") + ";" + sec2min( int( item.get("duration") ) ) item_info = item.get("id") + ";" + item.get("name") + ";" + sec2min( int( item.get("duration") ) ) + ";"
if "current" in item.keys():
item_info += item.get("current")
item_list.append(item_info) item_list.append(item_info)
playlist_overview = { playlist_overview = {

289
static/script.js
View File

@ -1,9 +1,106 @@
// Timeline drag and drop
const tl_cont_attr = {id:"tl_cont", ondrop: "drop(event, this)", ondragover:"allowDrop(event)"};
const tl_drag_attr = {id:"tl_drag", draggable:"true", ondragstart:"drag(event, this)"};
var src_id = "";
function updatePlaylist(){
var new_list = [];
var media_count = document.getElementById("timeline").children.length;
for (i=media_count,l=0;i>l;i--) {
//~ new_list.push(document.getElementById("timeline").children[i].children[0].getAttribute("media_id"));
toMove = document.getElementById("timeline").children[i-1].children[0].getAttribute("media_id");
console.log(toMove);
sendCmd("/all/move/" + toMove + "/1");
}
}
function findTargetIndex(element, index, array, thisArg){
if (element == this) {
return index+1;
}
return 0;
};
function moveElements(target) {
var elem_list = Array.from(src_id.parentElement.children);
var elem_list_slice = elem_list;
var source_idx = elem_list.findIndex(findTargetIndex, src_id);
var target_idx = elem_list.findIndex(findTargetIndex, target);
var idx;
if (source_idx < target_idx) {
elem_list_slice = elem_list.slice(source_idx+1, target_idx+1);
idx = source_idx;
} else {
elem_list_slice = elem_list.slice(target_idx, source_idx );
idx = target_idx+1;
}
for (i=0, l=elem_list_slice.length; i<l;i++) {
elem_list[idx+i].appendChild(elem_list_slice[i].children[0]);
}
return target;
};
function allowDrop(ev) {
ev.preventDefault();
drop_id = ev.dataTransfer.getData("text");
};
function drag(ev, source) {
src_id = ev.target.parentElement;
ev.dataTransfer.setData("text", ev.target.id);
};
function drop(ev, target) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (src_id.id != target.id) {
dropTarget = moveElements(target);
if (dropTarget) {
dropTarget.appendChild(document.getElementById(data));
updatePlaylist();
}
}
};
function adjustTl() {
var child = document.getElementById('timeline').children;
var divWidth = 100 / child.length;
for (i=0, l=child.length;i<l;i++) {
child[i].style.width= divWidth + "%";
}
};
function addElement(type, attr, meta = [], j = 0){
var elem = document.createElement(type);
var keys_array = Object.keys(attr);
for (i=0, l=keys_array.length;i<l;i++) {
var att = document.createAttribute(keys_array[i]);
if(!i){
att.value = Object.values(attr)[i]+j;
} else {
att.value = Object.values(attr)[i];
}
elem.setAttributeNode(att);
}
// Set okaylist id attribute
att = document.createAttribute("media_id");
att.value = meta[0];
elem.setAttributeNode(att);
// Get filename
elem.innerText = meta[1];
return elem;
};
var scanInterval = 3000; var scanInterval = 3000;
// Bouttons de commande // Bouttons de commande
addEventListener("DOMContentLoaded", function() { addEventListener("DOMContentLoaded", function() {
sendCmd("/scan"); sendCmd("/scan");
sendCmd("/browse"); sendCmd("/browse");
sendCmd("/all/rssi"); sendCmd("/all/rssi");
sendCmd("/all/list");
adjustTl();
// Tous les elements avec la classe ".command" // Tous les elements avec la classe ".command"
var commandButtons = document.querySelectorAll(".command"); var commandButtons = document.querySelectorAll(".command");
for (var i=0, l=commandButtons.length; i<l; i++) { for (var i=0, l=commandButtons.length; i<l; i++) {
@ -28,19 +125,19 @@ addEventListener("DOMContentLoaded", function() {
clickedButton.value = clickedButton.value.replace('/0/','/1/') clickedButton.value = clickedButton.value.replace('/0/','/1/')
} }
} else if ( command.indexOf("/move") > -1 ) { } else if ( command.indexOf("/move") > -1 ) {
const test_array = [5,6,7,8]; const test_array = [21,19,20];
for (i=test_array.length, l=0;i>l;i--){ for (i=test_array.length, l=0;i>l;i--){
console.log(test_array[i-1]); console.log(test_array[i-1]);
sendCmd("/all/move/" + test_array[i-1] + "/1"); sendCmd("/all/move/" + test_array[i-1] + "/1");
}; };
sendCmd("/all/list");
//setInterval( sendCmd, scanInterval, "/all/move/16/1"); //setInterval( sendCmd, scanInterval, "/all/move/16/1");
}; };
// On envoie la commande en AJAX // On envoie la commande en AJAX
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
if ( command == "/scan" ) { if ( command == "/scan" ) {
request.onload = refreshInfos(command); request.onload = sendCmd(command);
} }
// On construit la commande // On construit la commande
request.open("GET", command, true); request.open("GET", command, true);
@ -52,98 +149,99 @@ addEventListener("DOMContentLoaded", function() {
// Affichage des infos // Affichage des infos
function parseResult(command, infos_array) { function parseResult(command, infos_array) {
//~ var request = new XMLHttpRequest(); switch (command) {
//~ request.onload = function() { case "/all/status":
//~ if (request.readyState === request.DONE) { // Iterate over array
//~ if (request.status === 200) { for (var i = 0, l=infos_array.length; i<l; i++) {
//~ // responseText is a string, use parse to get an array. document.getElementById("status_"+infos_array[i].host).innerHTML = "Playing " + infos_array[i].file + " : " + infos_array[i].time + " / " + infos_array[i].leng;
//~ const infos_array = JSON.parse(request.responseText); if (infos_array[i].loop == "true") { document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
switch (command) { if (infos_array[i].repeat == "true") { document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
case "/all/status": };
// Iterate over array break;
for (var i = 0, l=infos_array.length; i<l; i++) { case "/all/list":
document.getElementById("status_"+infos_array[i].host).innerHTML = "Playing " + infos_array[i].file + " : " + infos_array[i].time + " / " + infos_array[i].leng;
if (infos_array[i].loop == "true") { document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#f00"}; for (var i = 0, l=infos_array.length; i<l; i++) {
if (infos_array[i].repeat == "true") { document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#f00"}; // Fill Playlist infos
}; document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
break; // Build html table and timeline
case "/all/list": var items_array = Array.from(infos_array[i].items);
for (var i = 0, l=infos_array.length; i<l; i++) { var html_table = "<table>" +
document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration; "<tr>" +
var items_array = Array.from(infos_array[i].items); "<th>Id</th>" +
var html_table = "<table>" + "<th>Filename</th>" +
"<tr>" + "<th>Duration</th>" +
"<th>Id</th>" + "</tr>";
"<th>Filename</th>" + for (var j = 0, k=items_array.length; j<k; j++) {
"<th>Duration</th>" + // Table
"</tr>"; item_meta = items_array[j].split(';');
for (var j = 0, k=items_array.length; j<k; j++) { html_table += "<tr>" +
item_meta = items_array[j].split(';'); "<td>" + item_meta[0] + "</td>" +
html_table += "<tr>" + "<td>" + item_meta[1] + "</td>" +
"<td>" + item_meta[0] + "</td>" + "<td>" + item_meta[2] + "</td>" +
"<td>" + item_meta[1] + "</td>" + "</tr>" ;
"<td>" + item_meta[2] + "</td>" + // Timeline
"</tr>" ; var child_node = addElement("div", tl_drag_attr, item_meta, j);
} var len = document.getElementById("timeline").children.length;
html_table += "</table>"; if ( len < items_array.length ) {
document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table; document.getElementById("timeline").appendChild( addElement("div", tl_cont_attr, [], len) );
}; }
break; document.getElementById(tl_cont_attr.id + j).replaceChildren(child_node);
case "/scan": if (item_meta[3] != ""){
var host_up = infos_array[0]; document.getElementById(tl_cont_attr.id + j).children[0].style.borderBottom = "4px solid #ff8300";
var host_down = infos_array[1]; }
for ( var i=0, l=host_up.length; i<l; i++){ }
document.getElementById(host_up[i]).style.display = 'initial'; html_table += "</table>";
} document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
for ( var i=0, l=host_down.length; i<l; i++){ };
document.getElementById(host_down[i]).style.display = 'none'; break;
} case "/scan":
//~ if (host_up.length) { var host_up = infos_array[0];
//~ scanInterval = 10000; var host_down = infos_array[1];
//~ document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval; for ( var i=0, l=host_up.length; i<l; i++){
//~ } document.getElementById(host_up[i]).style.display = 'initial';
document.getElementById("status_all").innerHTML = host_up.length + " client(s) found."; }
break; for ( var i=0, l=host_down.length; i<l; i++){
case "/browse": document.getElementById(host_down[i]).style.display = 'none';
var html_table = "<table>" + }
"<tr>" + //~ if (host_up.length) {
"<th>Filename</th>" + //~ scanInterval = 10000;
"<th>Duration</th>" + //~ document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval;
"</tr>"; //~ }
for (var j = 0, k=infos_array.length; j<k; j++) { document.getElementById("status_all").innerHTML = host_up.length + " client(s) found.";
html_table += "<tr>" + break;
"<td>" + infos_array[j] + "</td>" + case "/browse":
"<td>" + "00:00" + "</td>" + var html_table = "<table>" +
"</tr>" ; "<tr>" +
} "<th>Filename</th>" +
html_table += "</table>"; "<th>Duration</th>" +
document.getElementById("filelist").innerHTML += html_table; "</tr>";
break; for (var j = 0, k=infos_array.length; j<k; j++) {
case "/all/rssi": html_table += "<tr>" +
var signal_color = 40; "<td>" + infos_array[j] + "</td>" +
var best_rssi = 30; "<td>" + "00:00" + "</td>" +
var worst_rssi = 70; "</tr>" ;
for (var j = 0, k=infos_array.length; j<k; j++) { }
var rssi_norm = Math.ceil( (worst_rssi - parseInt(infos_array[j].rssi) ) / ( worst_rssi - best_rssi ) * 4 ); html_table += "</table>";
signal_color = (rssi_norm-1) * signal_color; document.getElementById("filelist").innerHTML += html_table;
// Reset to grey break;
for (i=0, l=4; i<l;i++) { case "/all/rssi":
document.getElementById("wl_"+i).style.backgroundColor = "hsl(0, 0%, 65%)"; var signal_color = 40;
}; var best_rssi = 30;
// Color it var worst_rssi = 70;
for (i=0, l=rssi_norm; i<l;i++) { for (var j = 0, k=infos_array.length; j<k; j++) {
document.getElementById("wl_"+i).style.backgroundColor = "hsl(" + signal_color + ", 100%, 50%)"; var rssi_norm = Math.ceil( (worst_rssi - parseInt(infos_array[j].rssi) ) / ( worst_rssi - best_rssi ) * 4 );
}; signal_color = (rssi_norm-1) * signal_color;
}; // Reset to grey
break; for (i=0, l=4; i<l;i++) {
}; // End switch case document.getElementById("wl_"+i).style.backgroundColor = "hsl(0, 0%, 65%)";
//~ }; };
//~ }; // Color it
//~ }; for (i=0, l=rssi_norm; i<l;i++) {
//~ // On construit la commande document.getElementById("wl_"+i).style.backgroundColor = "hsl(" + signal_color + ", 100%, 50%)";
//~ request.open("GET", command, true); };
//~ // et on l'envoie };
//~ request.send(); break;
}; // End switch case
}; };
function sendCmd(command) { function sendCmd(command) {
@ -164,6 +262,7 @@ function sendCmd(command) {
// et on l'envoie // et on l'envoie
request.send(); request.send();
}; };
setInterval( sendCmd, 500, "/all/status"); setInterval( sendCmd, 500, "/all/status");
setInterval( sendCmd, 1000, "/all/list"); setInterval( sendCmd, 1000, "/all/list");
setInterval( sendCmd, scanInterval, "/scan"); setInterval( sendCmd, scanInterval, "/scan");

44
static/style.css
View File

@ -1,4 +1,5 @@
body {color:#fff;background-color:#666;} body {color:#fff;background-color:#666;margin:0;}
div {box-sizing: border-box;}
h2 {margin:0;} h2 {margin:0;}
table {background-color: #555;margin:.5em;} table {background-color: #555;margin:.5em;}
td {padding: .2em .5em;} td {padding: .2em .5em;}
@ -9,14 +10,53 @@ tr:nth-child(2n+1) {background-color: #888;}
#master_remote .right_col {background-color:transparent;} #master_remote .right_col {background-color:transparent;}
.client_container {border-bottom: #bbb solid 4px;display:none;} .client_container {border-bottom: #bbb solid 4px;display:none;}
.client_container .button{} .client_container .button{}
/*
.timeline {height: 3em;background-color: #0f0;margin: 2em 0;} .timeline {height: 3em;background-color: #0f0;margin: 2em 0;}
*/
#timeline {
background-color:#ddd;
height: 75px;
width:100%
}
[id^="tl_cont"] {
float: left;
width: 10%;
height: 75px;
margin: 0;
padding: 0;
border: 1px solid #aaaaaa;
}
[id^="tl_drag"] {
cursor: grab;
text-align:center;
height:75px;
line-height: 75px;
width:100%;
background-color:#999;
}
[id^="tl_cont"]:nth-child(2n+1) [id^="tl_drag"] {
background-color:#777;
}
/*
#tl_drag1 {background-color:#486;}
#tl_drag2 {background-color:#a9e;}
#tl_drag3 {background-color:#d53;}
#tl_drag4 {background-color:#ea5;}
#tl_drag5 {background-color:#964;}
#tl_drag6 {background-color:#135;}
#tl_drag7 {background-color:#973;}
#tl_drag8 {background-color:#b26;}
#tl_drag9 {background-color:#fe9;}
#tl_drag10 {background-color:#fe5;}
*/
.right_col {width: 78%;display: inline-block;background-color:#888;} .right_col {width: 78%;display: inline-block;background-color:#888;}
.client_container:nth-child(2n+1) {background-color:#444;} .client_container:nth-child(2n+1) {background-color:#444;}
.command {margin: 0 !important;} .command {margin: 0 !important;}
.buttons {width:75%;margin:auto;text-align: center;padding: 2em;} .buttons {width:75%;margin:auto;text-align: center;padding: 2em;}
.btn { .btn {
margin:auto; margin:auto;
width:4em; width:3em;
height: 4em; height: 4em;
display:inline-block; display:inline-block;
padding: 6px 12px; padding: 6px 12px;

24
templates/main.html
View File

@ -28,7 +28,7 @@
<button value="/all/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>listes</span></button> <button value="/all/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>listes</span></button>
<button value="/all/enqueue/tst.mp4" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">tst.mp4</span></button> <button value="/all/enqueue/tst.mp4" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">tst.mp4</span></button>
<button value="/all/enqueue/tst1.mp4" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">tst1.mp4</span></button> <button value="/all/enqueue/tst1.mp4" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">tst1.mp4</span></button>
<button value="/move" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">movePl</span></button> <button value="/move/0/1" class="command btn btn-block btn-lg btn-default" role="button">&#x3b2;<span class="btn_txt">movePl</span></button>
</p> </p>
</div> </div>
</div> </div>
@ -55,8 +55,24 @@
</div> </div>
</div> </div>
<div class="right_col"> <div class="right_col">
<div class="timeline"></div> <div id="timeline">
<p class="buttons"> <!--
<div id="tl_cont0" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag1" draggable="true" ondragstart="drag(event, this)">tst.mp4</div></div>
<div id="tl_cont1" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag2" draggable="true" ondragstart="drag(event, this)">video2.mp4</div></div>
<div id="tl_cont2" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag3" draggable="true" ondragstart="drag(event, this)">this_video.mp4</div></div>
<div id="tl_cont3" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag4" draggable="true" ondragstart="drag(event, this)">encore.mp4</div></div>
<div id="tl_cont4" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag5" draggable="true" ondragstart="drag(event, this)">balah.mp4</div></div>
<div id="tl_cont5" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag6" draggable="true" ondragstart="drag(event, this)">foo.mp4</div></div>
<div id="tl_cont6" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag7" draggable="true" ondragstart="drag(event, this)">bar.mp4</div></div>
<div id="tl_cont7" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag8" draggable="true" ondragstart="drag(event, this)">biche.mp4</div></div>
<div id="tl_cont8" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag9" draggable="true" ondragstart="drag(event, this)">genou.mp4</div></div>
<div id="tl_cont9" ondrop="drop(event, this)" ondragover="allowDrop(event)"><div id="tl_drag10" draggable="true" ondragstart="drag(event, this)">splaf.mp4</div></div>
-->
<!--
<div id="tl_contX"></div>
-->
</div>
<div class="buttons">
<button value="/{{host}}/previous" class="command btn btn-block btn-lg btn-default" role="button">&#x23ee;<span class="btn_txt">Pr&eacute;c.</span></button> <button value="/{{host}}/previous" class="command btn btn-block btn-lg btn-default" role="button">&#x23ee;<span class="btn_txt">Pr&eacute;c.</span></button>
<button value="/{{host}}/play" class="command btn btn-block btn-lg btn-default" role="button">&#x23f5;<span class="btn_txt">Lecture</span></button> <button value="/{{host}}/play" class="command btn btn-block btn-lg btn-default" role="button">&#x23f5;<span class="btn_txt">Lecture</span></button>
<button value="/{{host}}/pause" class="command btn btn-block btn-lg btn-default" role="button">&#x23f8;<span class="btn_txt">Pause</span></button> <button value="/{{host}}/pause" class="command btn btn-block btn-lg btn-default" role="button">&#x23f8;<span class="btn_txt">Pause</span></button>
@ -66,7 +82,7 @@
<button value="/{{host}}/loop" class="command btn btn-block btn-lg btn-default" role="button">&#x1f501;<span class="btn_txt">Boucler<br/>liste</span></button> <button value="/{{host}}/loop" class="command btn btn-block btn-lg btn-default" role="button">&#x1f501;<span class="btn_txt">Boucler<br/>liste</span></button>
<button value="/{{host}}/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>liste</span></button> <button value="/{{host}}/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>liste</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">Trier<br/>liste</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">Trier<br/>liste</span></button>
</p> </div>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}