Added/improved crossfade, mixrampdb, mixrampdelay settings

Completed status interface

htdocs/index.html

@@ -54,13 +54,13 @@
             </button>
             <div class="dropdown-menu dropdown-menu-right bg-dark">
               <h1 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h1>
-              <form class="px-4 py-3" style="padding-top:0px !important;">
-              <div class="btn-group" role="group">
-                <input type="button" class="btn btn-secondary" value="&minus;" onclick="chVolume(-5)"/>
-                <div class="btn btn-secondary">
-                 <input id="volumebar" data-slider-id="volumebar" data-slider-handle="custom" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
-                </div>
-                <input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
+              <form class="px-4 py-3" style="padding-top:0px !important;" id="volumeControl">
+                <div class="btn-group" role="group">
+                  <input type="button" class="btn btn-secondary" value="&minus;" onclick="chVolume(-5)"/>
+                  <div class="btn btn-secondary">
+                    <input id="volumebar" data-slider-id="volumebar" data-slider-handle="custom" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
+                  </div>
+                  <input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
                 </div>
               </form>
               <div class="dropdown-divider"></div>
@@ -305,48 +305,67 @@
           <div class="row">
             <div class="form-group col-md-6">
               <button id="btnrandom" type="button" class="btn btn-secondary btn-block" title="Random">
-                <span class="glyphicon glyphicon-random"></span> Random
+                Random
               </button>
             </div>
             <div class="form-group col-md-6" data-toggle="buttons">          
               <button id="btnconsume" type="button" class="btn btn-secondary btn-block" title="Consume">
-                <span class="glyphicon glyphicon-fire"></span> Consume
+                Consume
               </button>
             </div>
           </div>
           <div class="row">
             <div class="form-group col-md-6" data-toggle="buttons">
               <button id="btnsingle" type="button" class="btn btn-secondary btn-block" title="Single">
-                <span class="glyphicon glyphicon-star"></span> Single
+                Single
               </button>
             </div>
             <div class="form-group col-md-6" data-toggle="buttons">
-              <button id="btncrossfade" type="button" class="btn btn-secondary btn-block" title="Crossfade">
-                <span class="glyphicon glyphicon-link"></span> Crossfade
+              <button id="btnrepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
+                Repeat
               </button>
             </div>
           </div>
           <div class="row">
-            <div class="form-group col-md-6" data-toggle="buttons">
-              <button id="btnrepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
-                <span class="glyphicon glyphicon-repeat"></span> Repeat
-              </button>
+            <div class="form-group input-group col-md-6 border-secondary">
+              <div class="input-group-prepend">
+                <div class="input-group-text bg-secondary text-light border-secondary">Crossfade</div>
+              </div>
+              <input id="inputCrossfade" type="text" class="form-control border-secondary" value="">
             </div>
           </div>
+          <div class="row">
+            <div class="form-group input-group col-md-6 border-secondary">
+              <div class="input-group-prepend">
+                <div class="input-group-text bg-secondary text-light border-secondary">Mixramp DB</div>
+              </div>
+              <input id="inputMixrampdb" type="text" class="form-control border-secondary" value="">
+            </div>
+            <div class="form-group input-group col-md-6 border-secondary">
+              <div class="input-group-prepend">
+                <div class="input-group-text bg-secondary text-light border-secondary">Mixramp Delay</div>
+              </div>
+              <input id="inputMixrampdelay" type="text" class="form-control border-secondary" value="">
+            </div>            
+          </div>
           <hr/>
           <div class="row">
             <div class="form-group col-md-6" data-toggle="buttons">
               <button type="button" class="btn btn-secondary btn-block" id="btnnotifyPage">
-                <span class="glyphicon glyphicon-comment"></span> Page Notifications
+                Page Notifications
               </button>
             </div>
             <div class="form-group col-md-6" data-toggle="buttons">
               <button type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">
-                <span class="glyphicon glyphicon-comment"></span> Web Notifications
+                Web Notifications
               </button>
             </div>
           </div>
         </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-success" onclick="confirmSettings();">Save</button>
+        </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->

htdocs/js/mpd.js

@@ -524,11 +524,42 @@ function webSocketConnect() {
                     else
                         $('#btnsingle').removeClass("btn-success").addClass("btn-secondary");
 
-                    if(obj.data.crossfade)
-                        $('#btncrossfade').removeClass('btn-secondary').addClass("btn-success")
-                    else
-                        $('#btncrossfade').removeClass("btn-success").addClass("btn-secondary");
-
+                    if(obj.data.crossfade != undefined) {
+                        if (!last_state) {
+                            $('#inputCrossfade').removeAttr('disabled');
+                            $('#inputCrossfade').val(obj.data.crossfade);
+                        } else if(obj.data.crossfade != last_state.data.crossfade) {
+                            $('#inputCrossfade').removeAttr('disabled');
+                            $('#inputCrossfade').val(obj.data.crossfade);
+                        }
+                    } else {
+                        $('#inputCrossfade').attr('disabled', 'disabled');
+                    }
+                    
+                    if(obj.data.mixrampdb != undefined) {
+                        if (!last_state) {
+                            $('#inputMixrampdb').removeAttr('disabled');
+                            $('#inputMixrampdb').val(obj.data.mixrampdb);
+                        } else if(obj.data.mixrampdb != last_state.data.mixrampdb) {
+                            $('#inputMixrampdb').removeAttr('disabled');
+                            $('#inputMixrampdb').val(obj.data.mixrampdb);
+                        }
+                    } else {
+                        $('#inputMixrampdb').attr('disabled', 'disabled');
+                    }
+                    
+                    if(obj.data.mixrampdelay != undefined) {
+                        if (!last_state) {
+                            $('#inputMixrampdelay').removeAttr('disabled');
+                            $('#inputMixrampdelay').val(obj.data.mixrampdelay);
+                        } else if(obj.data.mixrampdelay != last_state.data.mixrampdelay) {
+                            $('#inputMixrampdelay').removeAttr('disabled');
+                            $('#inputMixrampdelay').val(obj.data.mixrampdelay);
+                        }
+                    } else {
+                        $('#inputMixrampdb').attr('disabled', 'disabled');
+                    }
+                    
                     if(obj.data.repeat)
                         $('#btnrepeat').removeClass('btn-secondary').addClass("btn-success")
                     else
@@ -641,13 +672,19 @@ function get_appropriate_ws_url()
 }
 
 function updateVolumeIcon(volume) {
-    $('#volumePrct').text(volume+' %');
-    if(volume == 0) {
-        $("#volume-icon").text("volume_off");
-    } else if (volume < 50) {
-        $("#volume-icon").text("volume_down");
+    if (volume == -1) {
+      $('#volumePrct').text('Volumecontrol disabled');
+      $('#volumeControl').addClass('hide');      
     } else {
-        $("#volume-icon").text("volume_up");
+        $('#volumeControl').removeClass('hidden');
+        $('#volumePrct').text(volume+' %');
+        if(volume == 0) {
+            $("#volume-icon").text("volume_off");
+        } else if (volume < 50) {
+            $("#volume-icon").text("volume_down");
+        } else {
+            $("#volume-icon").text("volume_up");
+        }
     }
 }
 
@@ -716,13 +753,45 @@ $('#btnconsume').on('click', function (e) {
 $('#btnsingle').on('click', function (e) {
     socket.send("MPD_API_TOGGLE_SINGLE," + ($(this).hasClass('btn-success') ? 0 : 1));
 });
-$('#btncrossfade').on('click', function(e) {
-    socket.send("MPD_API_TOGGLE_CROSSFADE," + ($(this).hasClass('btn-success') ? 0 : 1));
-});
+
 $('#btnrepeat').on('click', function (e) {
     socket.send("MPD_API_TOGGLE_REPEAT," + ($(this).hasClass('btn-success') ? 0 : 1));
 });
 
+function confirmSettings() {
+    var value=parseInt($('#inputCrossfade').val());
+    if (!isNaN(value)) {
+        $('#inputCrossfade').val(value);
+        socket.send("MPD_API_SET_CROSSFADE," + value);
+    } else {
+        $('#inputCrossfade').popover({"content":"Must be a number","trigger":"manual"});
+        $('#inputCrossfade').popover('show');
+        $('#inputCrossfade').focus();
+        return;
+    }
+    value=parseFloat($('#inputMixrampdb').val());
+    if (!isNaN(value)) {
+        $('#inputMixrampdb').val(value);
+        socket.send("MPD_API_SET_MIXRAMPDB," + value);
+    } else {
+        $('#inputMixrampdb').popover({"content":"Must be a number","trigger":"manual"});
+        $('#inputMixrampdb').popover('show');
+        $('#inputMixrampdb').focus();
+        return;
+    } 
+    value=parseFloat($('#inputMixrampdelay').val());
+    if (!isNaN(value)) {
+        $('#inputMixrampdelay').val(value);
+        socket.send("MPD_API_SET_MIXRAMPDELAY," + value);
+    } else {
+        $('#inputMixrampdelay').popover({"content":"Must be a number","trigger":"manual"});
+        $('#inputMixrampdelay').popover('show');
+        $('#inputMixrampdelay').focus();
+        return;
+    }
+    $('#settings').modal('hide');
+}
+
 function toggleoutput(button, id) {
     socket.send("MPD_API_TOGGLE_OUTPUT,"+id+"," + ($(button).hasClass('btn-success') ? 0 : 1));
 }

src/mpd_client.c

@@ -63,6 +63,7 @@ int callback_mpd(struct mg_connection *c)
     enum mpd_cmd_ids cmd_id = get_cmd_id(c->content);
     size_t n = 0;
     unsigned int uint_buf, uint_buf_2;
+    double double_buf;
     int int_buf;
     char *p_charbuf = NULL, *token;
     char *mpdtagtype = NULL;
@@ -132,10 +133,18 @@ int callback_mpd(struct mg_connection *c)
             if(sscanf(c->content, "MPD_API_TOGGLE_SINGLE,%u", &uint_buf))
                 mpd_run_single(mpd.conn, uint_buf);
             break;
-        case MPD_API_TOGGLE_CROSSFADE:
-            if(sscanf(c->content, "MPD_API_TOGGLE_CROSSFADE,%u", &uint_buf))
+        case MPD_API_SET_CROSSFADE:
+            if(sscanf(c->content, "MPD_API_SET_CROSSFADE,%u", &uint_buf))
                 mpd_run_crossfade(mpd.conn, uint_buf);
             break;
+        case MPD_API_SET_MIXRAMPDB:
+            if(sscanf(c->content, "MPD_API_SET_MIXRAMPDB,%lf", &double_buf))
+                mpd_run_mixrampdb(mpd.conn, uint_buf);
+            break;
+        case MPD_API_SET_MIXRAMPDELAY:
+            if(sscanf(c->content, "MPD_API_SET_MIXRAMPDELAY,%lf", &double_buf))
+                mpd_run_mixrampdelay(mpd.conn, uint_buf);
+            break;            
         case MPD_API_GET_OUTPUTS:
             mpd.buf_size = mpd_put_outputs(mpd.buf, 1);
             c->callback_param = NULL;
@@ -441,7 +450,7 @@ void mpd_poll(struct mg_server *s)
             break;
 
         case MPD_CONNECTED:
-            mpd.buf_size = mpd_put_state(mpd.buf, &mpd.song_id, &mpd.queue_version);
+            mpd.buf_size = mpd_put_state(mpd.buf, &mpd.song_id, &mpd.next_song_id, &mpd.queue_version);
             for (struct mg_connection *c = mg_next(s, NULL); c != NULL; c = mg_next(s, c))
             {
                 c->callback_param = NULL;
@@ -517,7 +526,7 @@ char* mpd_get_year(struct mpd_song const *song)
     return str;
 }
 
-int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version)
+int mpd_put_state(char *buffer, int *current_song_id, int *next_song_id,  unsigned *queue_version)
 {
     struct mpd_status *status;
     int len;
@@ -534,7 +543,8 @@ int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version)
         " \"state\":%d, \"volume\":%d, \"repeat\":%d,"
         " \"single\":%d, \"crossfade\":%d, \"consume\":%d, \"random\":%d, "
         " \"songpos\": %d, \"elapsedTime\": %d, \"totalTime\":%d, "
-        " \"currentsongid\": %d"
+        " \"currentsongid\": %d, \"kbitrate\": %d, \"mixrampdb\": %lf, "
+        " \"mixrampdelay\": %lf, \"queue_length\": %d, \"nextsongpos\": %d"
         "}}", 
         mpd_status_get_state(status),
         mpd_status_get_volume(status), 
@@ -546,9 +556,16 @@ int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version)
         mpd_status_get_song_pos(status),
         mpd_status_get_elapsed_time(status),
         mpd_status_get_total_time(status),
-        mpd_status_get_song_id(status));
+        mpd_status_get_song_id(status),
+        mpd_status_get_kbit_rate(status),
+        mpd_status_get_mixrampdb(status),
+        mpd_status_get_mixrampdelay(status),
+        mpd_status_get_queue_length(status),
+        mpd_status_get_next_song_pos(status)
+    );
 
     *current_song_id = mpd_status_get_song_id(status);
+    *next_song_id = mpd_status_get_next_song_id(status);
     *queue_version = mpd_status_get_queue_version(status);
     mpd_status_free(status);
     return len;

src/mpd_client.h

@@ -70,11 +70,13 @@
     X(MPD_API_TOGGLE_RANDOM) \
     X(MPD_API_TOGGLE_CONSUME) \
     X(MPD_API_TOGGLE_SINGLE) \
-    X(MPD_API_TOGGLE_CROSSFADE) \
+    X(MPD_API_SET_CROSSFADE) \
     X(MPD_API_TOGGLE_REPEAT) \
     X(MPD_API_GET_OPTIONS) \
     X(MPD_API_SEND_SHUFFLE) \
-    X(MPD_API_GET_STATS)
+    X(MPD_API_GET_STATS) \
+    X(MPD_API_SET_MIXRAMPDB) \
+    X(MPD_API_SET_MIXRAMPDELAY)
 
 enum mpd_cmd_ids {
     MPD_CMDS(GEN_ENUM)
@@ -103,6 +105,7 @@ struct t_mpd {
     size_t buf_size;
 
     int song_id;
+    int next_song_id;
     unsigned queue_version;
 } mpd;
 
@@ -111,19 +114,20 @@ char coverimage[40];
 
 struct t_mpd_client_session {
     int song_id;
+    int next_song_id;
     unsigned queue_version;
 };
 
 void mpd_poll(struct mg_server *s);
 int callback_mpd(struct mg_connection *c);
 int mpd_close_handler(struct mg_connection *c);
-int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version);
+int mpd_put_state(char *buffer, int *current_song_id, int *next_song_id, unsigned *queue_version);
 int mpd_put_outputs(char *buffer, int putnames);
 int mpd_put_current_song(char *buffer);
 int mpd_put_queue(char *buffer, unsigned int offset);
 int mpd_put_browse(char *buffer, char *path, unsigned int offset);
 int mpd_search(char *buffer, char *searchstr);
-int mpd_search_queue(char *buffer, char *mpdtagtype, unsigned int offset,  char *searchstr);
+int mpd_search_queue(char *buffer, char *mpdtagtype, unsigned int offset, char *searchstr);
 int mympd_get_stats();
 void mpd_disconnect();
 #endif