audio = null; playlist = null; // pre-load some icons cache_images = new Array( 'music-cached.png', 'music-queued.png', 'loading.gif' ); var img = new Image(); for(var i = 0; i < cache_images.length; i++) { img.src = '/static/icons/' + cache_images[i]; } function MusicListing(type, path, name, cached) { this.type = type; this.path = path; this.name = name ? name : path.split('/').pop(); this.a = document.createElement('a'); this.a.tag = path; this.a.ml = this; this.play = function() { log('playing ' + path); xmlhttp = new XMLHttpRequest(); xmlhttp.open('GET', '/play?path=' + encodeURIComponent(path)); xmlhttp.send(null); } this.recode = function() { var path = '/recode?path=' + encodeURIComponent(this.path); var a = this.a; var ml = this; var xmlhttp = new XMLHttpRequest(); a.setAttribute('class', 'file file-queued'); xmlhttp.open('GET', path); xmlhttp.send(null); } this.get_anchor = function() { var a = this.a; var className = type; if(cached) className += ' file-cached' a.setAttribute('class', className); a.setAttribute('href', '#'); a.appendChild(document.createTextNode(this.name)); var ml = this; a.onclick = function() { if(type == 'dir') { list(path); } else if(type == 'file') { playlist.add(ml); } return false; } return a; } } function set_current(path) { document.getElementById('current-dir').innerHTML = 'Directory: ' + path; } function log(s) { logbox = document.getElementById('logbox'); logbox.value += s + '\n'; logbox.scrollTop = logbox.scrollHeight; } function change_url(url) { audio.set_src(url); var audio_src_url = document.getElementById('audio-src-url'); audio_src_url.innerHTML = 'Playing: ' + url.replace('&', '&'); } function output_link(obj) { var a = obj.get_anchor(); var li = document.createElement('li'); li.appendChild(a); var song_links = document.getElementById('song-links'); song_links.appendChild(li); } function list(root) { log('listing ' + root); var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4) { set_current(root); var json = JSON.parse(xmlhttp.responseText); document.getElementById('song-links').innerHTML = ''; // add "up" link if(root.length > 1) { up = root.substr(0, root.lastIndexOf('/')); if(up.length == 0) up = '/'; l = new MusicListing('dir', up, '..'); output_link(l); } for(var i = 0; i < json.length; i++) { var type = json[i]["type"]; var path = json[i]["name"]; var name = path.substring(path.lastIndexOf('/')+1); var cached = type == "file" ? json[i]["cached"] : false; var l = new MusicListing(type, path, name, cached); output_link(l); } } } path = '/list?directory=' + encodeURIComponent(root); xmlhttp.open('GET', path); xmlhttp.send(); } function add_directory() { var songs = document.getElementById('song-links').getElementsByTagName('a'); for(var i = 0; i < songs.length; i++) { var a = songs[i]; log(a); var ml = a.ml; log(ml); if(ml.type && ml.type == 'file') playlist.add(ml); } } var source = null; function get_a(path) { var as = document.getElementsByTagName('a'); for(var i = 0; i < as.length; i++) { var a = as[i]; if(a.tag == path) return a; } } function event_handler(event) { data = JSON.parse(event.data); switch(data['type']) { case 'cached': case 'recoding': log('[' + data['type'] + '] ' + data['path']); // update directory browser var a = get_a(data['path']); if(a) a.setAttribute('class', 'file file-' + data['type']); // update song queue var li = playlist.get(data['path']); if(li) { a = li.getElementsByTagName('a')[0]; if(data['type'] == 'cached') { // play the current song if we were waiting for it if(li == playlist.current) a.onclick(); else a.setAttribute('class', ''); } else { a.setAttribute('class', 'file-recoding'); } } break; case 'play': log('[play] ' + data['path']); change_url(data['path']); audio.play(); break; default: log('[event] unknown type: ' + data['type']); } } function event_open() { if(source) source.close(); source = new EventSource('/events'); source.onopen = function() { log('event source opened'); } source.onmessage = event_handler; source.onerror = function(event) { log('event source error'); } log('event source status: ' + source.readyState); } window.onload = function() { event_open(); audio = new Audio(); playlist = new Playlist(document.getElementById('playlist'), audio); audio.audio.addEventListener('ended', function() { playlist.next(); }); list('/'); }