From deacb74d3985fd65ac53976b8527e87efda1f653 Mon Sep 17 00:00:00 2001
From: Fredrik Lanker <fredrik@lanker.se>
Date: Sat, 10 May 2025 15:34:21 +0200
Subject: [PATCH 1/2] Add setting for max volume per client

---
 src/components/Client.tsx | 12 ++++++++++--
 src/snapcontrol.ts        |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Client.tsx b/src/components/Client.tsx
index b23dd76..e76f050 100644
--- a/src/components/Client.tsx
+++ b/src/components/Client.tsx
@@ -4,6 +4,7 @@ import { SnapControl, Snapcast } from '../snapcontrol';
 import { Box, Button, Grid, InputAdornment, Menu, MenuItem, Slider, Stack, TextField, Typography, IconButton } from '@mui/material';
 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import { VolumeUp as VolumeUpIcon, VolumeOff as VolumeOffIcon, MoreVert as MoreVertIcon } from '@mui/icons-material';
+import { getPersistentValue, setPersistentValue } from '../config';
 
 
 type ClientProps = {
@@ -22,11 +23,13 @@ export default function Client(props: ClientProps) {
   const [name, setName] = useState(props.client.config.name);
   const [tmpLatency, setTmpLatency] = useState(props.client.config.latency);
   const [latency, setLatency] = useState(props.client.config.latency);
+  const persistantMaxVolumeKey = `${props.client.id}-maxVolume`;
+  const [maxVolume, setMaxVolume] = useState(Number(getPersistentValue(persistantMaxVolumeKey, "100") ?? 100));
 
   function handleVolumeChange(value: number) {
     console.debug("handleVolumeChange: " + value);
     props.client.config.volume.percent = value;
-    props.snapcontrol.setVolume(props.client.id, value, false);
+    props.snapcontrol.setVolume(props.client.id, value, maxVolume, false);
     // setState({});
     props.onVolumeChange();
   }
@@ -105,7 +108,7 @@ export default function Client(props: ClientProps) {
               <IconButton aria-label="Mute" onClick={() => { handleMuteClicked() }}>
                 {props.client.config.volume.muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
               </IconButton>
-              <Slider aria-label="Volume" color="secondary" min={0} max={100} size="small" key={"slider-" + props.client.id} value={props.client.config.volume.percent} onChange={(_, value) => { handleVolumeChange(value as number) }} />
+              <Slider aria-label="Volume" color="secondary" min={0} max={maxVolume ?? 100} size="small" key={"slider-" + props.client.id} value={props.client.config.volume.percent} onChange={(_, value) => { handleVolumeChange(value as number) }} />
             </Stack>
           </Stack>
         </Grid>
@@ -147,6 +150,11 @@ export default function Client(props: ClientProps) {
               }
             }}
           />
+          <TextField
+            margin="dense" id="maxVolume" label="Max volume" type="number" fullWidth variant="standard"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => { setPersistentValue(persistantMaxVolumeKey, event.target.value); setMaxVolume(Number(event.target.value)) }}
+            value={maxVolume}
+          />
           <TextField
             margin="dense" id="client" label="Client" type="text" fullWidth variant="standard"
             value={props.client.snapclient.name + " " + props.client.snapclient.version}
diff --git a/src/snapcontrol.ts b/src/snapcontrol.ts
index fea3ff6..1d37ec1 100644
--- a/src/snapcontrol.ts
+++ b/src/snapcontrol.ts
@@ -406,8 +406,8 @@ class SnapControl {
         return stream;
     }
 
-    public setVolume(client_id: string, percent: number, mute?: boolean) {
-        percent = Math.max(0, Math.min(100, percent));
+    public setVolume(client_id: string, percent: number, max?: number, mute?: boolean) {
+        percent = Math.max(0, Math.min(max ?? 100, percent));
         const client = this.getClient(client_id);
         client.config.volume.percent = percent;
         if (mute !== undefined)

From df6c18d73657a49e6634c78a6d09fd1a5629025f Mon Sep 17 00:00:00 2001
From: Fredrik Lanker <fredrik@lanker.se>
Date: Sat, 10 May 2025 15:37:45 +0200
Subject: [PATCH 2/2] Show labels for volume sliders

---
 src/components/Client.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Client.tsx b/src/components/Client.tsx
index e76f050..c19ea08 100644
--- a/src/components/Client.tsx
+++ b/src/components/Client.tsx
@@ -108,7 +108,7 @@ export default function Client(props: ClientProps) {
               <IconButton aria-label="Mute" onClick={() => { handleMuteClicked() }}>
                 {props.client.config.volume.muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
               </IconButton>
-              <Slider aria-label="Volume" color="secondary" min={0} max={maxVolume ?? 100} size="small" key={"slider-" + props.client.id} value={props.client.config.volume.percent} onChange={(_, value) => { handleVolumeChange(value as number) }} />
+              <Slider aria-label="Volume" color="secondary" valueLabelDisplay="auto" min={0} max={maxVolume ?? 100} size="small" key={"slider-" + props.client.id} value={props.client.config.volume.percent} onChange={(_, value) => { handleVolumeChange(value as number) }} />
             </Stack>
           </Stack>
         </Grid>