App-MHFS
view release on metacpan or search on metacpan
share/templates/music_legacy.html view on Meta::CPAN
color: #ababab;
background: #000;
font-family: Segoe UI, Helvetica, Arial, Sans-Serif;
}
.header {
position: fixed;
top: 0;
padding-left: 25px;
background-color: #000;
width: 100%;
}
.body {
margin-top: 90px;
margin-bottom: 200px;
padding-left: 25px;
}
.track:hover {
background-color: yellow;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
padding-left: 25px;
}
audio {
width: 80%; margin:20px;
}
#seekbar {
width: 60%; margin:20px;
}
</style>
<title>Music</title>
</head>
<body>
<div class="header row">
<h1>Music</h1>
</div>
<div class="body row scroll-y">
<div id="musicdb">
<TMPL_VAR NAME="musicdb">
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="footer row" style="background-color:blue;">
<table border="1" width="80%">
<tr><th>Previous</th><th>Now Playing</th><th>Next</th></tr>
<tr><td><div id="prev_text"></div></td><td><div id="play_text"></div></td><td><div id="next_text"></div></td></tr>
</table>
<input type="button" value="PREV" onclick="playPreviousTrack();"><audio id="mainplayer" controls="controls" preload="none"> <source id="audio_src" src=""></source></audio><input type="button" value="NEXT" onclick="playNextTrack()">
<iframe src="static/250ms_silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
</div>
<script>
function GetItemPath(elm) {
var els = [];
var lastitem;
do {
var elmtemp = elm;
while(elmtemp.firstChild)
{
elmtemp = elmtemp.firstChild;
}
if(elmtemp.textContent != lastitem) {
lastitem = elmtemp.textContent;
els.unshift(elmtemp.textContent);
}
elm = elm.parentNode;
}while(elm.id != 'musicdb');
var path = '';
//console.log(els);
els.forEach(function(part) {
path += part + '/';
});
path = path.slice(0, -1);
return path;
}
function GetChildTracks(path, nnodes) {
path += '/';
var nodes = [];
for(var i = nnodes.length; i--; nodes.unshift(nnodes[i]));
var tracks = [];
nodes.splice(0, 1);
nodes.forEach( function ( node) {
if(node.childNodes.length == 1) {
var newnodes = node.childNodes[0].childNodes[0].childNodes[0].childNodes;
var nodearr = [];
for(var i = newnodes.length; i--; nodearr.unshift(newnodes[i]));
var felm = nodearr[0].childNodes[0].textContent;
var ttracks = GetChildTracks(path + felm, nodearr);
tracks = tracks.concat(ttracks);
}
else {
tracks.push(path + node.childNodes[0].childNodes[0].textContent);
}
});
return tracks;
}
var dbarea = document.getElementById('musicdb');
dbarea.addEventListener('click', function(e) {
if(e.target !== e.currentTarget) {
console.log(e.target + ' clicked with text ' + e.target.textContent);
if(e.target.textContent == 'Queue') {
path = GetItemPath(e.target.parentNode.parentNode);
console.log("Queuing - " + path);
if(e.target.parentNode.tagName == 'TD') {
queueTrack(path);
}
( run in 1.481 second using v1.01-cache-2.11-cpan-e1769b4cff6 )