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 )