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( "
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)); });