Merge branch 'master' of https://github.com/Nofre/ympd into Nofre-master

htdocs/index.html

@@ -34,6 +34,7 @@
         <ul id="nav_links" class="nav navbar-nav">
           <li id="queue"><a href="#/">Queue</a></li>
           <li id="browse"><a href="#/browse/0/">Browse database</a></li>
+          <li id="dirble"><a href="#/dirble/">Dirble</a></li>
           <li><a href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
           <li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
         </ul>
@@ -115,6 +116,29 @@
             <tbody>
             </tbody>
           </table>
+
+          <div id="dirble_panel">
+            <p id="dirble_loading" style="font-size:16px;font-weight:bold;margin-left:4em;">Loading...</p>
+            <table style="float:right; width:44%; margin-right:4%;" id="dirble_right" class="table table-hover">
+                <thead>
+                <tr>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+            <table style="width:44%; margin-left:4%;" id="dirble_left" class="table table-hover">
+                <thead>
+                <tr>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+
         </div><!-- /.panel -->
         <ul class="pager">
           <li id="prev" class="page-btn hide"><a href="">Previous</a></li>

htdocs/js/mpd.js

@@ -25,6 +25,9 @@ var browsepath;
 var lastSongTitle = "";
 var current_song = new Object();
 var MAX_ELEMENTS_PER_PAGE = 512;
+var dirble_selected_cat = "";
+var dirble_catid = "";
+var dirble_page = 1;
 
 var app = $.sammy(function() {
 
@@ -32,7 +35,8 @@ var app = $.sammy(function() {
         current_app = 'queue';
 
         $('#breadcrump').addClass('hide');
-        $('#salamisandwich').find("tr:gt(0)").remove();
+        $('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
+        $('#dirble_panel').addClass('hide');
         socket.send('MPD_API_GET_QUEUE,'+pagination);
 
         $('#panel-heading').text("Queue");
@@ -59,7 +63,8 @@ var app = $.sammy(function() {
         pagination = parseInt(this.params['splat'][0]);
         current_app = 'browse';
         $('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/browse/0/\">root</a></li>");
-        $('#salamisandwich').find("tr:gt(0)").remove();
+        $('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
+        $('#dirble_panel').addClass('hide');
         socket.send('MPD_API_GET_BROWSE,'+pagination+','+(browsepath ? browsepath : "/"));
         // Don't add all songs from root
         if (browsepath) {
@@ -90,6 +95,7 @@ var app = $.sammy(function() {
     this.get(/\#\/search\/(.*)/, function() {
         current_app = 'search';
         $('#salamisandwich').find("tr:gt(0)").remove();
+        $('#dirble_panel').addClass('hide');
         var searchstr = this.params['splat'][0];
 
         $('#search > div > input').val(searchstr);
@@ -98,6 +104,48 @@ var app = $.sammy(function() {
         $('#panel-heading').text("Search: "+searchstr);
     });
 
+
+    this.get(/\#\/dirble\/(\d+)\/(\d+)/, function() {
+        prepare();
+        current_app = 'dirble';
+        $('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/dirble/\">Categories</a></li><li>"+dirble_selected_cat+"</li>");
+        $('#salamisandwich').addClass('hide');
+        $('#dirble_panel').removeClass('hide');
+        $('#dirble_loading').removeClass('hide');
+        $('#dirble_left').find("tr:gt(0)").remove();
+        $('#dirble_right').find("tr:gt(0)").remove();
+
+        $('#panel-heading').text("Dirble");
+        $('#dirble').addClass('active');
+
+        $('#next').addClass('hide');
+
+        if (this.params['splat'][1] > 1) $('#prev').removeClass('hide');
+        else $('#prev').addClass('hide');
+
+        dirble_catid = this.params['splat'][0];
+        dirble_page = this.params['splat'][1];
+
+        dirble_load_stations();
+    });
+
+
+    this.get(/\#\/dirble\//, function() {
+        prepare();
+        current_app = 'dirble';
+        $('#breadcrump').removeClass('hide').empty().append("<li>Categories</li>");
+        $('#salamisandwich').addClass('hide');
+        $('#dirble_panel').removeClass('hide');
+        $('#dirble_loading').removeClass('hide');
+        $('#dirble_left').find("tr:gt(0)").remove();
+        $('#dirble_right').find("tr:gt(0)").remove();
+
+        $('#panel-heading').text("Dirble");
+        $('#dirble').addClass('active');
+
+        dirble_load_categories();
+    });
+
     this.get("/", function(context) {
         context.redirect("#/0");
     });
@@ -394,6 +442,10 @@ function webSocketConnect() {
                         socket.send('MPD_API_GET_QUEUE,'+pagination);
                     break;
                 case "song_change":
+
+                    $('#album').text("");
+                    $('#artist').text("");
+
                     $('#currenttrack').text(" " + obj.data.title);
                     var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
 
@@ -593,12 +645,16 @@ $('.page-btn').on('click', function (e) {
 
     switch ($(this).text()) {
         case "Next":
-            pagination += MAX_ELEMENTS_PER_PAGE;
+            if (current_app == "dirble") dirble_page++;
+            else pagination += MAX_ELEMENTS_PER_PAGE;
             break;
         case "Previous":
-            pagination -= MAX_ELEMENTS_PER_PAGE;
+            if (current_app == "dirble") dirble_page--
-            if(pagination <= 0)
+            else {
-                pagination = 0;
+                pagination -= MAX_ELEMENTS_PER_PAGE;
+                if(pagination <= 0)
+                    pagination = 0;
+            }
             break;
     }
 
@@ -609,6 +665,9 @@ $('.page-btn').on('click', function (e) {
         case "browse":
             app.setLocation('#/browse/'+pagination+'/'+browsepath);
             break;
+        case "dirble":
+            app.setLocation("#/dirble/"+dirble_catid+"/"+dirble_page);
+            break;
     }
     e.preventDefault();
 });
@@ -700,3 +759,158 @@ $(document).keydown(function(e){
     }
     e.preventDefault();
 });
+
+function dirble_load_categories() {
+
+    dirble_page = 1;
+
+    $.getJSON( "http://api.dirble.com/v2/categories?token=2e223c9909593b94fc6577361a", function( data ) {
+
+        $('#dirble_loading').addClass('hide');
+
+        data = data.sort(function(a, b) {
+            return (a.title > b.title) ? 1 : 0;
+        });
+
+        var max = data.length - data.length%2;
+
+        for(i = 0; i < max; i+=2) {
+
+            $('#dirble_left > tbody').append(
+                "<tr><td catid=\""+data[i].id+"\">"+data[i].title+"</td></tr>"
+            );
+
+            $('#dirble_right > tbody').append(
+                "<tr><td catid=\""+data[i+1].id+"\">"+data[i+1].title+"</td></tr>"
+            );
+        }
+
+        if (max != data.length) {
+            $('#dirble_left > tbody').append(
+                "<tr><td catid=\""+data[max].id+"\">"+data[max].title+"</td></tr>"
+            );
+        }
+
+        $('#dirble_left > tbody > tr > td').on({
+            click: function() {
+                dirble_selected_cat = $(this).text();
+                dirble_catid = $(this).attr("catid");
+                app.setLocation("#/dirble/"+dirble_catid+"/"+dirble_page);
+            }
+        });
+
+        $('#dirble_right > tbody > tr > td').on({
+            click: function() {
+                dirble_selected_cat = $(this).text();
+                dirble_catid = $(this).attr("catid");
+                app.setLocation("#/dirble/"+dirble_catid+"/"+dirble_page);
+            }
+        });
+    });
+}
+
+
+function dirble_load_stations() {
+
+    $.getJSON( "http://api.dirble.com/v2/category/"+dirble_catid+"/stations?page="+dirble_page+"&per_page=20&token=2e223c9909593b94fc6577361a", function( data ) {
+
+        $('#dirble_loading').addClass('hide');
+        if (data.length == 20) $('#next').removeClass('hide');
+
+        var max = data.length - data.length%2;
+
+        for(i = 0; i < max; i+=2) {
+
+            $('#dirble_left > tbody').append(
+                "<tr><td radioid=\""+data[i].id+"\">"+data[i].name+"</td></tr>"
+            );
+            $('#dirble_right > tbody').append(
+                "<tr><td radioid=\""+data[i+1].id+"\">"+data[i+1].name+"</td></tr>"
+            );
+        }
+
+        if (max != data.length) {
+            $('#dirble_left > tbody').append(
+                "<tr><td radioid=\""+data[max].id+"\">"+data[max].name+"</td></tr>"
+            );
+        }
+
+        $('#dirble_left > tbody > tr > td').on({
+            click: function() {
+                var _this = $(this);
+
+                $.getJSON( "http://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=2e223c9909593b94fc6577361a", function( data ) {
+
+                    socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream);
+                    $('.top-right').notify({
+                        message:{
+                            text: _this.text() + " added"
+                        }
+                    }).show();
+                });
+            },
+            mouseenter: function() {
+                var _this = $(this);
+
+                $(this).last().append(
+                "<a role=\"button\" class=\"pull-right btn-group-hover\">" +
+                "<span class=\"glyphicon glyphicon-play\"></span></a>").find('a').click(function(e) {
+                    e.stopPropagation();
+
+                    $.getJSON( "http://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=2e223c9909593b94fc6577361a", function( data ) {
+
+                        socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream);
+                        $('.top-right').notify({
+                            message:{
+                                text: _this.text() + " added"
+                            }
+                        }).show();
+                    });
+                }).fadeTo('fast',1);
+            },
+
+            mouseleave: function(){
+                $(this).last().find("a").stop().remove();
+            }
+        });
+
+        $('#dirble_right> tbody > tr > td').on({
+            click: function() {
+                var _this = $(this);
+
+                $.getJSON( "http://api.dirble.com/v2/station/"+$(this).attr("radioid")+"?token=2e223c9909593b94fc6577361a", function( data ) {
+
+                    socket.send("MPD_API_ADD_TRACK," + data.streams[0].stream);
+                    $('.top-right').notify({
+                        message:{
+                            text: _this.text() + " added"
+                        }
+                    }).show();
+                });
+            },
+            mouseenter: function() {
+                var _this = $(this);
+
+                $(this).last().append(
+                "<a role=\"button\" class=\"pull-right btn-group-hover\">" +
+                "<span class=\"glyphicon glyphicon-play\"></span></a>").find('a').click(function(e) {
+                    e.stopPropagation();
+
+                    $.getJSON( "http://api.dirble.com/v2/station/"+_this.attr("radioid")+"?token=2e223c9909593b94fc6577361a", function( data ) {
+
+                        socket.send("MPD_API_ADD_PLAY_TRACK," + data.streams[0].stream);
+                        $('.top-right').notify({
+                            message:{
+                                text: _this.text() + " added"
+                            }
+                        }).show();
+                    });
+                }).fadeTo('fast',1);
+            },
+
+            mouseleave: function(){
+                $(this).last().find("a").stop().remove();
+            }
+        });
+    });
+}