<html>
<head>
<style type="text/css">
html, body{
padding: 0px;
margin: 0px;
}
body {
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);
}
else {
var tracks = GetChildTracks(path, e.target.parentNode.parentNode.parentNode.childNodes);
queueTracks(tracks);
}
e.preventDefault();
}
else if(e.target.textContent == 'Play') {
path = GetItemPath(e.target.parentNode.parentNode);
console.log("Playing - " + path);
if(e.target.parentNode.tagName == 'TD') {
playTrackNow(path);
}
else {
var tracks = GetChildTracks(path, e.target.parentNode.parentNode.parentNode.childNodes);
playTracksNow(tracks);
}
e.preventDefault();
}
}
e.stopPropagation();
});
const urlParams = new URLSearchParams(window.location.search);
const MAX_SAMPLE_RATE = urlParams.get('max_sample_rate');
const BITDEPTH = urlParams.get('bitdepth');
var PTrackUrlParams;
var TrackQueue = [];
var QueueIndex = 0;
var finished = true;
function AddPTrack(track) {
PTrackUrlParams.append('ptrack', track);
window.history.replaceState('playlist', 'Title', 'music?' + PTrackUrlParams.toString());
}
function play_track(track_index) {
var track = TrackQueue[track_index] || '';
if((track_index-1) >= 0) {
document.getElementById('prev_text').innerHTML = '<span>' + TrackQueue[track_index-1] + '</span>';
}
else {
document.getElementById('prev_text').innerHTML = '<span></span>';
}
document.getElementById('play_text').innerHTML = '<span>' + track + '</span>';
if((track_index+1) <= (TrackQueue.length - 1)) {
document.getElementById('next_text').innerHTML = '<span>' + TrackQueue[track_index+1]+ '</span>';
}
else {
document.getElementById('next_text').innerHTML = '<span></span>';
}
QueueIndex = track_index;
if(track != '') {
var url = 'music_dl?name=' + encodeURIComponent(track);
if(MAX_SAMPLE_RATE) url += '&max_sample_rate=' + MAX_SAMPLE_RATE;
if(BITDEPTH) url += '&bitdepth=' + BITDEPTH;
document.getElementById('audio_src').src = url;
finished = false;
}
else {
document.getElementById('audio_src').src = "";
finished = true;
}
document.getElementById('mainplayer').load();
document.getElementById('mainplayer').play();
}
function onTrackEnd() {
play_track(QueueIndex+1);
}
document.getElementById('mainplayer').addEventListener("ended", onTrackEnd);
function _queueTrack(track) {
TrackQueue.push(track);
if(finished) {
play_track(TrackQueue.length - 1);
}
else if(QueueIndex <= (TrackQueue.length - 2)) {
document.getElementById('next_text').innerHTML = '<span>' + TrackQueue[QueueIndex+1] + '</span>';
}
}
function queueTrack(track) {
_queueTrack(track);
AddPTrack(track);
}
function queueTracks(tracks) {
tracks.forEach(function(track) {
_queueTrack(track);
PTrackUrlParams.append('ptrack', track);
});
window.history.replaceState('playlist', 'Title', 'music?' + PTrackUrlParams.toString());
}
function playPreviousTrack() {
if(QueueIndex > 0) {
document.getElementById('mainplayer').pause();
play_track(QueueIndex-1);
}
}
function playNextTrack() {
if(QueueIndex <= (TrackQueue.length - 2)) {
document.getElementById('mainplayer').pause();
play_track(QueueIndex+1);
}
}
function playTrackNow(track) {
if(finished) {
queueTrack(track);
}
else {
TrackQueue.splice(QueueIndex+1, 0, track);
playNextTrack();
BuildPTrack();
}
}
function playTracksNow(tracks) {
if(finished) {
queueTracks(tracks);
}
else {
var i = 1;
tracks.forEach(function(track) {
TrackQueue.splice(QueueIndex+i, 0, track);
i++;
});
playNextTrack();
BuildPTrack();
}
}
function _BuildPTrack() {
PTrackUrlParams = new URLSearchParams();
if(MAX_SAMPLE_RATE) PTrackUrlParams.append('max_sample_rate', MAX_SAMPLE_RATE);
if(BITDEPTH) PTrackUrlParams.append('bitdepth', BITDEPTH);
TrackQueue.forEach(function(track) {
PTrackUrlParams.append('ptrack', track);
});
}
function BuildPTrack() {
_BuildPTrack();
var urlstring = PTrackUrlParams.toString();
if(urlstring != '') {
window.history.replaceState('playlist', 'Title', 'music_gapless?' + urlstring);
}
}
_BuildPTrack();
var orig_ptracks = urlParams.getAll('ptrack');
if(orig_ptracks.length > 0) {
queueTracks(orig_ptracks);
}
</script>
</body>
</html>