var socket; var last_state; $('#volumeslider').slider().on('slide', function(event) { socket.send("MPD_API_SET_VOLUME,"+event.value); }); $(window).bind('hashchange', function(e) { $('#nav_links > li').each(function(value) { if(window.location.hash === $(this).children().attr('href')) $(this).addClass('active'); else $(this).removeClass('active'); }); switch(window.location.hash) { case "#browse": $('#panel-heading').text("Browse database"); socket.send('MPD_API_GET_BROWSE,/'); break; case "#about": $('#panel-heading').text("About"); break; default: $('#panel-heading').text("Playlist"); $('#nav_links > li:first-child').addClass('active'); socket.send("MPD_API_GET_PLAYLIST"); } socket.send("MPD_API_GET_TRACK_INFO"); }); $(document).ready(function(){ webSocketConnect(); }); function webSocketConnect() { if (typeof MozWebSocket != "undefined") { socket = new MozWebSocket(get_appropriate_ws_url(), "ympd-client"); } else { socket = new WebSocket(get_appropriate_ws_url(), "ympd-client"); } try { socket.onopen = function() { console.log("Connected"); $(window).trigger( 'hashchange' ); } socket.onmessage =function got_packet(msg) { if(msg.data === last_state) return; var obj = JSON.parse(msg.data); switch (obj.type) { case "playlist": if(window.location.hash) break; $('#salamisandwich').find("tr:gt(0)").remove(); for (var song in obj.data) { var minutes = Math.floor(obj.data[song].duration / 60); var seconds = obj.data[song].duration - minutes * 60; $('#salamisandwich tr:last').after( "" + obj.data[song].pos + "" + ""+ obj.data[song].title +"" + ""+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds + " "); } break; case "browse": if(window.location.hash !== '#browse') break; $('#salamisandwich').find("tr:gt(0)").remove(); for (var item in obj.data) { switch(obj.data[item].type) { case "directory": $('#salamisandwich tr:last').after( "" + "" + obj.data[item].dir +"" + ""); break; case "song": var minutes = Math.floor(obj.data[item].duration / 60); var seconds = obj.data[item].duration - minutes * 60; $('#salamisandwich tr:last').after( "" + "" + obj.data[item].title +"" + ""+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +""); break; case "playlist": break; } } $('#salamisandwich td:eq(1)').click(function(){ socket.send('MPD_API_GET_BROWSE,'+$(this).text()); }); break; case "state": if(JSON.stringify(obj) === JSON.stringify(last_state)) break; var total_minutes = Math.floor(obj.data.totalTime / 60); var total_seconds = obj.data.totalTime - total_minutes * 60; var elapsed_minutes = Math.floor(obj.data.elapsedTime / 60); var elapsed_seconds = obj.data.elapsedTime - elapsed_minutes * 60; $('#volumeslider').slider('setValue', obj.data.volume); var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime) + "%"; $('#progressbar').width(progress); $('#counter') .text(elapsed_minutes + ":" + (elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " + total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds); $('#salamisandwich > thead > tr').each(function(value) { $(this).removeClass('success'); }); $('#playlist_'+obj.data.currentsongid).addClass('success'); if(obj.data.random) $('#btnrandom').addClass("active") else $('#btnrandom').removeClass("active"); if(obj.data.consume) $('#btnconsume').addClass("active") else $('#btnconsume').removeClass("active"); if(obj.data.single) $('#btnsingle').addClass("active") else $('#btnsingle').removeClass("active"); if(obj.data.repeat) $('#btnrepeat').addClass("active") else $('#btnrepeat').removeClass("active"); if(last_state && (obj.data.state !== last_state.data.state)) updatePlayIcon(obj.data.state); if(last_state && (obj.data.volume !== last_state.data.volume)) updateVolumeIcon(obj.data.volume); if(obj.data.elapsedTime <= 1) socket.send("MPD_API_GET_TRACK_INFO"); break; case "disconnected": $('#alert') .text("Server lost connection to MPD Host.") .removeClass("hide alert-info") .addClass("alert-danger"); break; case "current_song": $('#currenttrack').text(" " + obj.data.title); default: break; } last_state = obj; } socket.onclose = function(){ console.log("Disconnected"); var seconds = 5; var tm = setInterval(disconnectAlert,1000); function disconnectAlert() { $('#alert') .text("Connection to MPD lost, retrying in " + seconds + " seconds") .removeClass("hide alert-info") .addClass("alert-danger"); if(seconds-- <= 0) { webSocketConnect(); seconds = 5; $('#alert').addClass("hide"); clearInterval(tm); } } } } catch(exception) { alert('

Error' + exception); } } function get_appropriate_ws_url() { var pcol; var u = document.URL; /* /* We open the websocket encrypted if this page came on an /* https:// url itself, otherwise unencrypted /*/ if (u.substring(0, 5) == "https") { pcol = "wss://"; u = u.substr(8); } else { pcol = "ws://"; if (u.substring(0, 4) == "http") u = u.substr(7); } u = u.split('/'); return pcol + u[0]; } var updateVolumeIcon = function(volume) { $("#volume-icon").removeClass("glyphicon-volume-off"); $("#volume-icon").removeClass("glyphicon-volume-up"); $("#volume-icon").removeClass("glyphicon-volume-down"); if(volume == 0) { $("#volume-icon").addClass("glyphicon-volume-off"); } else if (volume < 50) { $("#volume-icon").addClass("glyphicon-volume-down"); } else { $("#volume-icon").addClass("glyphicon-volume-up"); } } var updatePlayIcon = function(state) { $("#play-icon").removeClass("glyphicon-play") .removeClass("glyphicon-pause") .removeClass("glyphicon-stop"); $('#track-icon').removeClass("glyphicon-play") .removeClass("glyphicon-pause") .removeClass("glyphicon-stop"); if(state == 1) { $("#play-icon").addClass("glyphicon-stop"); $('#track-icon').addClass("glyphicon-stop"); } else if(state == 2) { $("#play-icon").addClass("glyphicon-pause"); $('#track-icon').addClass("glyphicon-play"); } else { $("#play-icon").addClass("glyphicon-play"); $('#track-icon').addClass("glyphicon-pause"); } } function updateDB() { socket.send('MPD_API_UPDATE_DB'); $('#alert') .text("Updating MPD Database...") .removeClass("hide alert-danger") .addClass("alert-info"); setTimeout(function() { $('#alert').addClass("hide"); }, 5000); } $('#btnrandom').on('click', function (e) { socket.send("MPD_API_TOGGLE_RANDOM," + ($(this).hasClass('active') ? 0 : 1)); }); $('#btnconsume').on('click', function (e) { socket.send("MPD_API_TOGGLE_CONSUME," + ($(this).hasClass('active') ? 0 : 1)); }); $('#btnsingle').on('click', function (e) { socket.send("MPD_API_TOGGLE_SINGLE," + ($(this).hasClass('active') ? 0 : 1)); }); $('#btnrepeat').on('click', function (e) { socket.send("MPD_API_TOGGLE_REPEAT," + ($(this).hasClass('active') ? 0 : 1)); });