Browse Source

Merge pull request #159 from eb041592/unclutter_interface

Unclutter Interface
Andy 6 years ago
parent
commit
17b97c8f6b
4 changed files with 55 additions and 57 deletions
  1. 6 0
      htdocs/css/mpd.css
  2. 18 18
      htdocs/index.html
  3. 31 37
      htdocs/js/mpd.js
  4. 0 2
      src/ympd.c

+ 6 - 0
htdocs/css/mpd.css

@@ -93,3 +93,9 @@ td:last-child, td:first-child {
 button {
   overflow: hidden;
 }
+
+#trashmode span:last-child {
+  display:inline-block;
+  text-align:left;
+  width:2.8em;
+}

+ 18 - 18
htdocs/index.html

@@ -152,7 +152,7 @@
         </ul>
       </div><!-- /.col-md-10 -->
 
-      <div class="col-md-2 col-xs-12" >
+      <div class="col-md-2 col-xs-12">
         <div class="btn-toolbar">
           <div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
             <button id="btnrandom" type="button" class="btn btn-default">
@@ -177,15 +177,15 @@
           <div id="trashmode" class="btn-group-vertical btn-block btn-group-lg" data-toggle="radio">
             <button id="btntrashmodeup" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-chevron-up"></span>
-              <span class="glyphicon glyphicon-trash"></span> up &nbsp;&nbsp;&nbsp;
+              <span class="glyphicon glyphicon-trash"></span> <span>Up</span>
             </button>
             <button id="btntrashmodesingle" type="button" class="btn btn-default active">
               <span class="glyphicon glyphicon-star-empty"></span>
-              <span class="glyphicon glyphicon-trash"></span> single
+              <span class="glyphicon glyphicon-trash"></span> <span>Single</span>
             </button>
             <button id="btntrashmodedown" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-chevron-down"></span>
-              <span class="glyphicon glyphicon-trash"></span> down&nbsp;
+              <span class="glyphicon glyphicon-trash"></span> <span>Down</span>
             </button>
           </div>
 
@@ -198,11 +198,6 @@
             </a>
           </div>
 
-            <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
-              <button type="button" class="btn btn-default" id="btnnotify">
-               <span class="glyphicon glyphicon-comment"></span> Notifications
-              </button>
-            </div>
         </div>
       </div><!-- /.col-md-2 -->
     </div><!-- /.row -->
@@ -223,6 +218,19 @@
           <h5>ympd uses following excellent software:</h5>
           <h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
           <h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
+	  <hr />
+          <div class="row">
+            <div class="form-group col-md-6">
+              <button type="button" class="btn btn-default btn-block" onclick="updateDB();">
+                <span class="glyphicon glyphicon-refresh"></span> Update Database
+              </button>
+            </div>
+            <div class="form-group col-md-6" data-toggle="buttons">
+              <button type="button" class="btn btn-default btn-block" id="btnnotify">
+                <span class="glyphicon glyphicon-comment"></span> Enable Notifications
+              </button>
+            </div>
+          </div>
           <hr />
           <form role="form">
             <div class="row">
@@ -252,14 +260,6 @@
                   MPD Password is set
                 </div>
               </div>
-
-            </div>
-            <div class="row">
-              <div class="form-group col-md-12">
-                <button type="button" class="btn btn-default" onclick="updateDB();">
-                  <span class="glyphicon glyphicon-refresh"></span> Update DB
-                </button>
-              </div>
             </div>
           </form>
         </div>
@@ -282,7 +282,7 @@
         <div class="modal-body">
           <form role="form">
             <div class="row">
-              <div class="form-group col-md-9">
+              <div class="form-group col-md-12">
                 <label class="control-label" for="streamurl">Stream URL</label>
                 <input type="text" class="form-control" id="streamurl" />
               </div>

+ 31 - 37
htdocs/js/mpd.js

@@ -110,7 +110,6 @@ var app = $.sammy(function() {
         $('#panel-heading').text("Search: "+searchstr);
     });
 
-
     this.get(/\#\/dirble\/(\d+)\/(\d+)/, function() {
         prepare();
         current_app = 'dirble';
@@ -134,14 +133,9 @@ var app = $.sammy(function() {
 
         dirble_stations = true;
 
-        if(dirble_api_token) {
-            dirble_load_stations();
-        } else {
-            getDirbleApiToken();
-        }
+        if (dirble_api_token) { dirble_load_stations(); }
     });
 
-
     this.get(/\#\/dirble\//, function() {
         prepare();
         current_app = 'dirble';
@@ -157,11 +151,7 @@ var app = $.sammy(function() {
 
         dirble_stations = false;
 
-        if(dirble_api_token) {
-            dirble_load_categories();
-        } else {
-            getDirbleApiToken();
-        }
+        if (dirble_api_token) { dirble_load_categories(); }
     });
 
     this.get("/", function(context) {
@@ -199,7 +189,6 @@ $(document).ready(function(){
     add_filter();
 });
 
-
 function webSocketConnect() {
     if (typeof MozWebSocket != "undefined") {
         socket = new MozWebSocket(get_appropriate_ws_url());
@@ -217,7 +206,9 @@ function webSocketConnect() {
 
             app.run();
             /* emit initial request for output names */
-            socket.send("MPD_API_GET_OUTPUTS");
+            socket.send('MPD_API_GET_OUTPUTS');
+            /* emit initial request for dirble api token */
+            socket.send('MPD_API_GET_DIRBLEAPITOKEN');
         }
 
         socket.onmessage = function got_packet(msg) {
@@ -446,7 +437,7 @@ function webSocketConnect() {
                     });
 
                     break;
-                case "state":
+                case 'state':
                     updatePlayIcon(obj.data.state);
                     updateVolumeIcon(obj.data.volume);
 
@@ -500,16 +491,20 @@ function webSocketConnect() {
 
                     last_state = obj;
                     break;
-                case "outputnames":
+                case 'outputnames':
                     $('#btn-outputs-block button').remove();
-                    $.each(obj.data, function(id, name){
-                        var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
-                        btn.appendTo($('#btn-outputs-block'));
-                    });
+                    if (obj.data.length > 1) {
+		        $.each(obj.data, function(id, name){
+                            var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
+                            btn.appendTo($('#btn-outputs-block'));
+                        });
+		    } else {
+                        $('#btn-outputs-block').addClass('hide');
+		    }
                     /* remove cache, since the buttons have been recreated */
                     last_outputs = '';
                     break;
-                case "outputs":
+                case 'outputs':
                     if(JSON.stringify(obj) === JSON.stringify(last_outputs))
                         break;
                     $.each(obj.data, function(id, enabled){
@@ -520,7 +515,7 @@ function webSocketConnect() {
                     });
                     last_outputs = obj;
                     break;
-                case "disconnected":
+                case 'disconnected':
                     if($('.top-right').has('div').length == 0)
                         $('.top-right').notify({
                             message:{text:"ympd lost connection to MPD "},
@@ -528,11 +523,11 @@ function webSocketConnect() {
                             fadeOut: { enabled: true, delay: 1000 },
                         }).show();
                     break;
-                case "update_queue":
+                case 'update_queue':
                     if(current_app === 'queue')
                         socket.send('MPD_API_GET_QUEUE,'+pagination);
                     break;
-                case "song_change":
+                case 'song_change':
 
                     $('#album').text("");
                     $('#artist').text("");
@@ -560,22 +555,26 @@ function webSocketConnect() {
                         }).show();
                         
                     break;
-                case "mpdhost":
+                case 'mpdhost':
                     $('#mpdhost').val(obj.data.host);
                     $('#mpdport').val(obj.data.port);
                     if(obj.data.passwort_set)
                         $('#mpd_password_set').removeClass('hide');
                     break;
-                case "dirbleapitoken":
+                case 'dirbleapitoken':
                     dirble_api_token = obj.data;
                     
-                    if(dirble_stations) {
-                        dirble_load_stations();
+		    if (dirble_api_token) {
+		        $('#dirble').removeClass('hide');
+
+                        if (dirble_stations) { dirble_load_stations();   }
+                        else {                 dirble_load_categories(); }
+
                     } else {
-                        dirble_load_categories();
-                    }
+                        $('#dirble').addClass('hide');
+		    }
                     break;
-                case "error":
+                case 'error':
                     $('.top-right').notify({
                         message:{text: obj.data},
                         type: "danger",
@@ -583,9 +582,8 @@ function webSocketConnect() {
                 default:
                     break;
             }
-
-
         }
+
         socket.onclose = function(){
             console.log("disconnected");
             $('.top-right').notify({
@@ -777,10 +775,6 @@ function getHost() {
     $('#mpd_pw_con').keypress(onEnter);
 }
 
-function getDirbleApiToken() {
-    socket.send('MPD_API_GET_DIRBLEAPITOKEN');
-}
-
 $('#search').submit(function () {
     app.setLocation("#/search/"+$('#search > div > input').val());
     $('#wait').modal('show');

+ 0 - 2
src/ympd.c

@@ -80,8 +80,6 @@ int main(int argc, char **argv)
     mpd.port = 6600;
     strcpy(mpd.host, "127.0.0.1");
 
-    strcpy(dirble_api_token, "2e223c9909593b94fc6577361a");
-
     static struct option long_options[] = {
         {"host",         required_argument, 0, 'h'},
         {"port",         required_argument, 0, 'p'},