improve documentation

web/src/components/CardVolumeSlider/CardVolumeSlider.jsx

@@ -32,7 +32,7 @@ export const applyPlayerVol = (vol, zones, sourceId, apply) => {
     }
 };
 
-// Used to handle delta volume changes
+// cumulativeDelta reflects the amount of movement that the
 let cumulativeDelta = 0;
 let sendingPacketCount = 0;
 
@@ -41,7 +41,9 @@ const CardVolumeSlider = ({ sourceId }) => {
     const zones = useStatusStore((s) => s.status.zones);
     const setZonesVol = useStatusStore((s) => s.setZonesVol);
     const setZonesMute = useStatusStore((s) => s.setZonesMute);
-    const skipNextUpdate = useStatusStore((s) => s.skipNextUpdate); // needed to ensure that polling doesn't cause the delta volume to be made inacurrate during long slides
+
+    // needed to ensure that polling doesn't cause the delta volume to be made inacurrate during volume slider interactions
+    const skipNextUpdate = useStatusStore((s) => s.skipNextUpdate);
 
     const value = getPlayerVol(sourceId, zones);
 
@@ -68,7 +70,9 @@ const CardVolumeSlider = ({ sourceId }) => {
                     update: { vol_delta_f: cumulativeDelta, mute: false },
                 }),
             }).then(() => {
-                // used to just set cumulativeDelta to 0, that would skip all accumulated delta from fetch start to backend response time
+                // NOTE: This used to just set cumulativeDelta to 0
+                // that would skip all accumulated delta from fetch start to backend response time
+                // causing jittering issues
                 cumulativeDelta -= delta;
                 sendingPacketCount -= 1;
             });
@@ -101,8 +105,10 @@ const CardVolumeSlider = ({ sourceId }) => {
                 mute={mute}
                 setMute={setMute}
                 setVol={(val, force) => {
-                    let old_val = value;  // Cannot use the const as it can change mid-fetch
-                    setPlayerVol(val, old_val);
+                    // Cannot use value directly as that changes during the request when setValue() is called
+                    // Cannot call setValue() as a .then() after the request as that causes the ui to feel unresponsive and choppy
+                    let current_val = value;
+                    setPlayerVol(val, current_val);
                     setValue(val);
                     skipNextUpdate();
                 }}