From fa727b6869535051cdfd95254933c5cbce390c82 Mon Sep 17 00:00:00 2001
From: Daniel Gunzinger <daniel.gunzinger@googlemail.com>
Date: Sat, 18 Apr 2020 16:46:38 +0200
Subject: [PATCH] add delay for sending the new volume (client -> server) to
 limit packet send rate; only update the slider value when the value has
 changed

---
 templates/index.html | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 3dad160..c85aa76 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -71,7 +71,7 @@
 
                             <input type="range" class="custom-range" id="volume-slider" 
                                     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 +493,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,12 +728,15 @@
                 $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                 $("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
             }
-            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;
+            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;
+                }
             }
         }
 
@@ -1169,6 +1174,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();