timeline work
This commit is contained in:
parent
b51b2db8db
commit
e615cc4d7c
4
app.py
4
app.py
|
|
@ -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"
|
||||
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") ) ) + ";"
|
||||
if "current" in item.keys():
|
||||
item_info += item.get("current")
|
||||
item_list.append(item_info)
|
||||
|
||||
playlist_overview = {
|
||||
|
|
|
|||
131
static/script.js
131
static/script.js
|
|
@ -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;
|
||||
// Bouttons de commande
|
||||
addEventListener("DOMContentLoaded", function() {
|
||||
sendCmd("/scan");
|
||||
sendCmd("/browse");
|
||||
sendCmd("/all/rssi");
|
||||
sendCmd("/all/list");
|
||||
adjustTl();
|
||||
// Tous les elements avec la classe ".command"
|
||||
var commandButtons = document.querySelectorAll(".command");
|
||||
for (var i=0, l=commandButtons.length; i<l; i++) {
|
||||
|
|
@ -28,19 +125,19 @@ addEventListener("DOMContentLoaded", function() {
|
|||
clickedButton.value = clickedButton.value.replace('/0/','/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--){
|
||||
console.log(test_array[i-1]);
|
||||
sendCmd("/all/move/" + test_array[i-1] + "/1");
|
||||
|
||||
};
|
||||
sendCmd("/all/list");
|
||||
//setInterval( sendCmd, scanInterval, "/all/move/16/1");
|
||||
};
|
||||
|
||||
// On envoie la commande en AJAX
|
||||
var request = new XMLHttpRequest();
|
||||
if ( command == "/scan" ) {
|
||||
request.onload = refreshInfos(command);
|
||||
request.onload = sendCmd(command);
|
||||
}
|
||||
// On construit la commande
|
||||
request.open("GET", command, true);
|
||||
|
|
@ -52,12 +149,6 @@ addEventListener("DOMContentLoaded", function() {
|
|||
|
||||
// Affichage des infos
|
||||
function parseResult(command, infos_array) {
|
||||
//~ var request = new XMLHttpRequest();
|
||||
//~ request.onload = function() {
|
||||
//~ if (request.readyState === request.DONE) {
|
||||
//~ if (request.status === 200) {
|
||||
//~ // responseText is a string, use parse to get an array.
|
||||
//~ const infos_array = JSON.parse(request.responseText);
|
||||
switch (command) {
|
||||
case "/all/status":
|
||||
// Iterate over array
|
||||
|
|
@ -68,8 +159,11 @@ function parseResult(command, infos_array) {
|
|||
};
|
||||
break;
|
||||
case "/all/list":
|
||||
|
||||
for (var i = 0, l=infos_array.length; i<l; i++) {
|
||||
// Fill Playlist infos
|
||||
document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
|
||||
// Build html table and timeline
|
||||
var items_array = Array.from(infos_array[i].items);
|
||||
var html_table = "<table>" +
|
||||
"<tr>" +
|
||||
|
|
@ -78,12 +172,23 @@ function parseResult(command, infos_array) {
|
|||
"<th>Duration</th>" +
|
||||
"</tr>";
|
||||
for (var j = 0, k=items_array.length; j<k; j++) {
|
||||
// Table
|
||||
item_meta = items_array[j].split(';');
|
||||
html_table += "<tr>" +
|
||||
"<td>" + item_meta[0] + "</td>" +
|
||||
"<td>" + item_meta[1] + "</td>" +
|
||||
"<td>" + item_meta[2] + "</td>" +
|
||||
"</tr>" ;
|
||||
// Timeline
|
||||
var child_node = addElement("div", tl_drag_attr, item_meta, j);
|
||||
var len = document.getElementById("timeline").children.length;
|
||||
if ( len < items_array.length ) {
|
||||
document.getElementById("timeline").appendChild( addElement("div", tl_cont_attr, [], len) );
|
||||
}
|
||||
document.getElementById(tl_cont_attr.id + j).replaceChildren(child_node);
|
||||
if (item_meta[3] != ""){
|
||||
document.getElementById(tl_cont_attr.id + j).children[0].style.borderBottom = "4px solid #ff8300";
|
||||
}
|
||||
}
|
||||
html_table += "</table>";
|
||||
document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
|
||||
|
|
@ -137,13 +242,6 @@ function parseResult(command, infos_array) {
|
|||
};
|
||||
break;
|
||||
}; // End switch case
|
||||
//~ };
|
||||
//~ };
|
||||
//~ };
|
||||
//~ // On construit la commande
|
||||
//~ request.open("GET", command, true);
|
||||
//~ // et on l'envoie
|
||||
//~ request.send();
|
||||
};
|
||||
|
||||
function sendCmd(command) {
|
||||
|
|
@ -164,6 +262,7 @@ function sendCmd(command) {
|
|||
// et on l'envoie
|
||||
request.send();
|
||||
};
|
||||
|
||||
setInterval( sendCmd, 500, "/all/status");
|
||||
setInterval( sendCmd, 1000, "/all/list");
|
||||
setInterval( sendCmd, scanInterval, "/scan");
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
table {background-color: #555;margin:.5em;}
|
||||
td {padding: .2em .5em;}
|
||||
|
|
@ -9,14 +10,53 @@ tr:nth-child(2n+1) {background-color: #888;}
|
|||
#master_remote .right_col {background-color:transparent;}
|
||||
.client_container {border-bottom: #bbb solid 4px;display:none;}
|
||||
.client_container .button{}
|
||||
/*
|
||||
.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;}
|
||||
.client_container:nth-child(2n+1) {background-color:#444;}
|
||||
.command {margin: 0 !important;}
|
||||
.buttons {width:75%;margin:auto;text-align: center;padding: 2em;}
|
||||
.btn {
|
||||
margin:auto;
|
||||
width:4em;
|
||||
width:3em;
|
||||
height: 4em;
|
||||
display:inline-block;
|
||||
padding: 6px 12px;
|
||||
|
|
|
|||
|
|
@ -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/enqueue/tst.mp4" class="command btn btn-block btn-lg btn-default" role="button">β<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">β<span class="btn_txt">tst1.mp4</span></button>
|
||||
<button value="/move" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">movePl</span></button>
|
||||
<button value="/move/0/1" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">movePl</span></button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,8 +55,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right_col">
|
||||
<div class="timeline"></div>
|
||||
<p class="buttons">
|
||||
<div id="timeline">
|
||||
<!--
|
||||
<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">⏮<span class="btn_txt">Préc.</span></button>
|
||||
<button value="/{{host}}/play" class="command btn btn-block btn-lg btn-default" role="button">⏵<span class="btn_txt">Lecture</span></button>
|
||||
<button value="/{{host}}/pause" class="command btn btn-block btn-lg btn-default" role="button">⏸<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">🔁<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 id="toggle_val_{{host}}}" value="/{{host}}/sort/1/id" class="command btn btn-block btn-lg btn-default" role="button">🔀<span class="btn_txt">Trier<br/>liste</span></button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue