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