+
{/* Used to make sure the background doesn't stretch or stop prematurely on scrollable pages */}
-
-
+
+
+
);
};
App.propTypes = {
diff --git a/web/src/components/CardVolumeSlider/CardVolumeSlider.jsx b/web/src/components/CardVolumeSlider/CardVolumeSlider.jsx
index fdb1c0d3c..9972e13ee 100644
--- a/web/src/components/CardVolumeSlider/CardVolumeSlider.jsx
+++ b/web/src/components/CardVolumeSlider/CardVolumeSlider.jsx
@@ -11,7 +11,7 @@ const getPlayerVol = (sourceId, zones) => {
let n = 0;
for (const i of getSourceZones(sourceId, zones)) {
n += 1;
- vol += i.vol_f;
+ vol += i.vol_f + i.vol_f_overflow; // Add buffer to retain proper relative space when doing an action that would un-overload the slider
}
const avg = vol / n;
@@ -27,13 +27,13 @@ export const applyPlayerVol = (vol, zones, sourceId, apply) => {
let delta = vol - getPlayerVol(sourceId, zones);
for (let i of getSourceZones(sourceId, zones)) {
- let set_pt = Math.max(0, Math.min(1, i.vol_f + delta));
- apply(i.id, set_pt);
+ apply(i.id, i.vol_f + delta);
}
};
-// cumulativeDelta reflects the amount of movement that the
-let cumulativeDelta = 0;
+// cumulativeDelta reflects the amount of movement that the volume bar has had that has gone unreflected in the backend
+let cumulativeDelta = 0.0;
+let previous_delta = null;
let sendingPacketCount = 0;
// main volume slider on player and volume slider on player card
@@ -41,8 +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 setSystemState = useStatusStore((s) => s.setSystemState);
- // needed to ensure that polling doesn't cause the delta volume to be made inacurrate during volume slider interactions
+ // needed to ensure that polling doesn't cause the delta volume to be made inaccurate during volume slider interactions
const skipNextUpdate = useStatusStore((s) => s.skipNextUpdate);
const value = getPlayerVol(sourceId, zones);
@@ -52,32 +53,42 @@ const CardVolumeSlider = ({ sourceId }) => {
setZonesMute(false, zones, sourceId);
};
- function setPlayerVol(vol, val) {
- cumulativeDelta += vol - val;
-
- if(sendingPacketCount <= 0){
+ function setPlayerVol(force = false) {
+ if(sendingPacketCount <= 0 || force){ // Sometimes slide and release interactions can send the same request twice, this check helps prevent that from doubling the intended change
sendingPacketCount += 1;
const delta = cumulativeDelta;
-
- fetch("/api/zones", {
- method: "PATCH",
- headers: {
- "Content-type": "application/json",
- },
- body: JSON.stringify({
- zones: getSourceZones(sourceId, zones).map((z) => z.id),
- update: { vol_delta_f: cumulativeDelta, mute: false },
- }),
- }).then(() => {
- // 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;
+ if(previous_delta !== delta){
+ previous_delta = delta;
+
+ fetch("/api/zones", {
+ method: "PATCH",
+ headers: {
+ "Content-type": "application/json",
+ },
+ body: JSON.stringify({
+ zones: getSourceZones(sourceId, zones).map((z) => z.id),
+ update: { vol_delta_f: delta, mute: false },
+ }),
+ }).then(() => {
+ // 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
+ if(force){
+ cumulativeDelta = 0.0; // If you force push a change, do not store any unrecognized changes
+ } else {
+ cumulativeDelta -= delta; // If this is a normal change, there is likely a change coming up and setting to zero would lose part of that upcoming delta
+ }
+ sendingPacketCount -= 1;
+ // In many similar requests we instantly consume the response by doing something like this:
+ // if(res.ok){res.json().then(s=> setSystemState(s));}
+ // This cannot be done here due to how rapid fire the requests can be when sliding the slider rather than just tapping it
+ });
+ } else {
sendingPacketCount -= 1;
- });
+ }
}
- };
+ }
const mute = getSourceZones(sourceId, zones)
.map((z) => z.mute)
@@ -95,6 +106,8 @@ const CardVolumeSlider = ({ sourceId }) => {
zones: getSourceZones(sourceId, zones).map((z) => z.id),
update: { mute: mute },
}),
+ }).then(res => {
+ if(res.ok){res.json().then(s => setSystemState(s));}
});
};
@@ -107,9 +120,9 @@ const CardVolumeSlider = ({ sourceId }) => {
setVol={(val, force) => {
// 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);
+ cumulativeDelta += Math.round((val - value) * 1000) / 1000;
setValue(val);
+ setPlayerVol(force);
skipNextUpdate();
}}
disabled={getSourceZones(sourceId, zones) == 0}
diff --git a/web/src/components/GroupVolumeSlider/GroupVolumeSlider.jsx b/web/src/components/GroupVolumeSlider/GroupVolumeSlider.jsx
index f1edf40cb..aeda0c234 100644
--- a/web/src/components/GroupVolumeSlider/GroupVolumeSlider.jsx
+++ b/web/src/components/GroupVolumeSlider/GroupVolumeSlider.jsx
@@ -15,12 +15,22 @@ let sendingRequestCount = 0;
// volume slider for a group in the volumes drawer
const GroupVolumeSlider = ({ groupId, sourceId, groupsLeft }) => {
+ const setSystemState = useStatusStore((s) => s.setSystemState);
const group = useStatusStore(s => s.status.groups.filter(g => g.id === groupId)[0]);
- const volume = group.vol_f;
+ const zones = useStatusStore(s => s.status.zones);
const setGroupVol = useStatusStore(s => s.setGroupVol);
const setGroupMute = useStatusStore(s => s.setGroupMute);
const [slidersOpen, setSlidersOpen] = React.useState(false);
+ const getVolume = () => { // Make sure group sliders account for vol_f_overflow
+ let v = 0;
+ for(let i = 0; i < group.zones.length; i++){
+ v += (zones[group.zones[i]].vol_f + zones[group.zones[i]].vol_f_overflow);
+ }
+
+ return v / group.zones.length;
+ };
+ const volume = getVolume();
// get zones for this group
const groupZones = getSourceZones(sourceId, useStatusStore(s => s.status.zones)).filter(z => group.zones.includes(z.id));
@@ -68,6 +78,8 @@ const GroupVolumeSlider = ({ groupId, sourceId, groupsLeft }) => {
"Content-type": "application/json",
},
body: JSON.stringify({ mute: mute }),
+ }).then(res => {
+ if(res.ok){res.json().then(s => setSystemState(s));}
});
};
diff --git a/web/src/components/PlayerCard/PlayerCardFb.jsx b/web/src/components/PlayerCard/PlayerCardFb.jsx
index 7bfc1d79b..c610fe538 100644
--- a/web/src/components/PlayerCard/PlayerCardFb.jsx
+++ b/web/src/components/PlayerCard/PlayerCardFb.jsx
@@ -82,7 +82,7 @@ const PlayerCardFb = ({ sourceId, setVol }) => {
{ !is_streamer && (
-
+
)}
{ is_streamer && (
diff --git a/web/src/components/VolumeSlider/VolumeSlider.jsx b/web/src/components/VolumeSlider/VolumeSlider.jsx
index 8fa967f32..73660fc3f 100644
--- a/web/src/components/VolumeSlider/VolumeSlider.jsx
+++ b/web/src/components/VolumeSlider/VolumeSlider.jsx
@@ -71,31 +71,31 @@ const VolumeSlider = ({ vol, mute, setVol, setMute, disabled }) => {
>