Merge pull request #129 from Gunzinger/master

Pull request for the first trivial implementation of the volume slider in the webinterface

interface.py

@@ -235,14 +235,15 @@ def status():
                         'empty': False,
                         'play': not var.bot.is_pause,
                         'mode': var.playlist.mode,
-                        'volume': var.db.getfloat('bot', 'volume')})
+                        'volume': var.bot.volume_set})
+
     else:
         return jsonify({'ver': var.playlist.version,
                         'current_index': var.playlist.current_index,
                         'empty': True,
                         'play': not var.bot.is_pause,
                         'mode': var.playlist.mode,
-                        'volume': var.db.getfloat('bot', 'volume')})
+                        'volume': var.bot.volume_set})
 
 
 @web.route("/post", methods=['POST'])
@@ -405,12 +406,14 @@ def post():
                 log.info("web: volume up to %d" % (var.bot.volume_set * 100))
             elif action == "volume_set_value":
                 if 'new_volume' in request.form:
-                    # new_volume is slider value ranging from 0-100
+                    if float(request.form['new_volume']) > 1:
-                    var.bot.volume_set = (int(request.form['new_volume']) * 0.01)
-                    if var.bot.volume_set > 1:
                         var.bot.volume_set = 1
-                    elif var.bot.volume_set < 0:
+                    elif float(request.form['new_volume']) < 0:
                         var.bot.volume_set = 0
+                    else:
+                        # value for new volume is between 0 and 1, round to two decimal digits
+                        var.bot.volume_set = round(float(request.form['new_volume']), 2)
+
                     var.db.set('bot', 'volume', str(var.bot.volume_set))
                     log.info("web: volume set to %d" % (var.bot.volume_set * 100))
 

templates/index.html

@@ -70,8 +70,9 @@
                             </button>
 
                             <input type="range" class="custom-range" id="volume-slider" 
-                                    min="0" max="100" step="1" value="50"
+                                    min="0" max="1" step="0.01" value="0.5"
-                                    onchange="request('post', {action : 'volume_set_value', new_volume : this.value})">
+                                    onchange="setVolumeDelayed(this.value)">
+
                             </input>
 
                             <button type="button" class="btn btn-warning btn-space"
@@ -493,6 +494,8 @@
         var playlist_range_from = 0;
         var playlist_range_to = 0;
 
+        var last_volume = 0;
+
         function request(_url, _data, refresh=false){
             console.log(_data);
             $.ajax({
@@ -726,7 +729,16 @@
                 $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                 $("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
             }
-            document.getElementById("volume-slider").value = Math.round(volume*100);
+            if(volume != last_volume) {
+                last_volume = volume;
+                if(volume > 1) {
+                    document.getElementById("volume-slider").value = 1;
+                } else if(volume < 0) {
+                    document.getElementById("volume-slider").value = 0;
+                } else {
+                    document.getElementById("volume-slider").value = volume;
+                }
+            }
         }
 
         function themeInit(){
@@ -1163,6 +1175,13 @@
             updateResults(active_page);
         }
 
+        var volume_update_timer;
+        function setVolumeDelayed(new_volume_value) {
+            window.clearTimeout(volume_update_timer);
+            volume_update_timer = window.setTimeout(function() {
+                request('post', {action : 'volume_set_value', new_volume : new_volume_value});
+                }, 500); // delay in milliseconds
+        }
 
         themeInit();
         updateResults();