Fix ESLint errors

.eslintrc.cjs

@@ -6,10 +6,14 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', 'debian', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
+    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

.github/dependabot.yml

@@ -13,9 +13,6 @@ updates:
     dependencies:
       patterns:
       - "*"
-  ignore:
-    - dependency-name: "typescript"
-      update-types: ["version-update:semver-major"]
 - package-ecosystem: github-actions
   directory: "/"
   schedule:

src/components/Client.tsx

@@ -29,7 +29,7 @@ export default function Client(props: ClientProps) {
     props.snapcontrol.setVolume(props.client.id, value, false);
     // setState({});
     props.onVolumeChange();
-  };
+  }
 
   function handleOptionsClicked(event: React.MouseEvent<HTMLButtonElement>) {
     console.debug("handleOptionsClicked");
@@ -38,12 +38,12 @@ export default function Client(props: ClientProps) {
     setName(props.client.config.name);
     setTmpLatency(props.client.config.latency);
     setLatency(props.client.config.latency);
-  };
+  }
 
   function handleMenuClose() {
     setAnchorEl(null)
     setOpen(false);
-  };
+  }
 
   function handleDetailsClose(apply: boolean) {
     setDetailsOpen(false);
@@ -59,33 +59,33 @@ export default function Client(props: ClientProps) {
       setName(props.client.config.name)
       setTmpLatency(latency);
     }
-  };
+  }
 
   function handleDetailsClicked() {
     console.debug("handleDetailsClicked");
     setDetailsOpen(true);
     setAnchorEl(null);
     setOpen(false);
-  };
+  }
 
   function handleNameChange(name: string) {
     console.debug('handleNameChange: ' + name);
     setName(name);
-  };
+  }
 
   function handleLatencyChange(latency: number) {
     console.debug('handleLatencyChange: ' + latency);
     setTmpLatency(latency);
     props.snapcontrol.setClientLatency(props.client.id, latency);
-  };
+  }
 
   function handleMuteClicked() {
     console.debug("handleMuteClicked");
     props.snapcontrol.setVolume(props.client.id, props.client.config.volume.percent, !props.client.config.volume.muted);
     setUpdate(update + 1);
-  };
+  }
 
-  let menuitems = [];
+  const menuitems = [];
   menuitems.push(<MenuItem key='Menu-Details' onClick={() => { handleDetailsClicked() }}>Details</MenuItem>);
   if (!props.client.connected)
     menuitems.push(<MenuItem key='Menu-Delete' onClick={() => { props.onDelete(); setAnchorEl(null); setOpen(false); }}>Delete</MenuItem>);

src/components/Group.tsx

@@ -37,9 +37,9 @@ export default function Group(props: GroupProps) {
   const groupVolumeChange = useRef<GroupVolumeChange>({ volumeEntered: true, client_volumes: new Map<string, number>(), group_volume: 0 });
 
   function updateVolume() {
-    let clients = getClients();
+    const clients = getClients();
     let volume = 0;
-    for (let client of clients)
+    for (const client of clients)
       volume += client.config.volume.percent;
     volume /= clients.length;
     setVolume(volume);
@@ -53,10 +53,10 @@ export default function Group(props: GroupProps) {
   function handleSettingsClicked(_event: React.MouseEvent<HTMLButtonElement>) {
     console.debug("handleSettingsClicked");
 
-    let clients: GroupClient[] = [];
-    for (let group of props.server.groups) {
-      for (let client of group.clients) {
-        let inGroup: boolean = props.group.clients.includes(client);
+    const clients: GroupClient[] = [];
+    for (const group of props.server.groups) {
+      for (const client of group.clients) {
+        const inGroup: boolean = props.group.clients.includes(client);
         clients.push({ client: client, inGroup: inGroup, wasInGroup: inGroup });
       }
     }
@@ -66,22 +66,22 @@ export default function Group(props: GroupProps) {
     setSettingsOpen(true);
     setClients(clients);
     setStreamId(props.group.stream_id)
-  };
+  }
 
   function handleSettingsClose(apply: boolean) {
     console.debug("handleSettingsClose: " + apply);
     if (apply) {
       let changed: boolean = false;
-      for (let element of clients) {
+      for (const element of clients) {
         if (element.inGroup !== element.wasInGroup) {
           changed = true;
           break;
         }
       }
 
       if (changed) {
-        let groupClients: string[] = [];
-        for (let element of clients)
+        const groupClients: string[] = [];
+        for (const element of clients)
           if (element.inGroup)
             groupClients.push(element.client.id);
         props.snapcontrol.setClients(props.group.id, groupClients);
@@ -91,21 +91,21 @@ export default function Group(props: GroupProps) {
         props.snapcontrol.setStream(props.group.id, streamId);
     }
     setSettingsOpen(false);
-  };
+  }
 
   function handleGroupClientChange(client: Snapcast.Client, inGroup: boolean) {
     console.debug("handleGroupClientChange: " + client.id + ", in group: " + inGroup);
-    let newclients = clients;
-    let idx = newclients.findIndex(element => element.client === client);
+    const newclients = clients;
+    const idx = newclients.findIndex(element => element.client === client);
     newclients[idx].inGroup = inGroup;
     setClients(newclients);
     // dummy update, since the array was just mutated
     setUpdate(update + 1);
-  };
+  }
 
   function handleClientDelete(client: Snapcast.Client) {
     console.debug("handleClientDelete: " + client.getName());
-    let newDeletedClients = deletedClients;
+    const newDeletedClients = deletedClients;
     if (!newDeletedClients.includes(client))
       newDeletedClients.push(client);
     setDeletedClients(newDeletedClients);
@@ -123,42 +123,42 @@ export default function Group(props: GroupProps) {
     if (!undo)
       props.snapcontrol.deleteClient(client.id);
 
-    let newDeletedClients = deletedClients;
+    const newDeletedClients = deletedClients;
     if (newDeletedClients.includes(client))
       newDeletedClients.splice(newDeletedClients.indexOf(client), 1);
 
     setDeletedClients(newDeletedClients);
     setUpdate(update + 1);
-  };
+  }
 
   function handleMuteClicked() {
     console.debug("handleMuteClicked");
     props.group.muted = !props.group.muted;
     props.snapcontrol.muteGroup(props.group.id, props.group.muted);
     setUpdate(update + 1);
-  };
+  }
 
   function handleVolumeChange(value: number) {
     console.debug("handleVolumeChange: " + value);
     if (groupVolumeChange.current.volumeEntered) {
       groupVolumeChange.current.client_volumes.clear();
       groupVolumeChange.current.group_volume = 0;
-      for (let client of getClients()) {
+      for (const client of getClients()) {
         groupVolumeChange.current.client_volumes.set(client.id, client.config.volume.percent);
         groupVolumeChange.current.group_volume += client.config.volume.percent;
       }
       groupVolumeChange.current.group_volume /= groupVolumeChange.current.client_volumes.size;
       groupVolumeChange.current.volumeEntered = false;
     }
 
-    let delta = value - groupVolumeChange.current.group_volume;
+    const delta = value - groupVolumeChange.current.group_volume;
     let ratio: number;
     if (delta < 0)
       ratio = (groupVolumeChange.current.group_volume - value) / groupVolumeChange.current.group_volume;
     else
       ratio = (value - groupVolumeChange.current.group_volume) / (100 - groupVolumeChange.current.group_volume);
 
-    for (let client of getClients()) {
+    for (const client of getClients()) {
       let new_volume = groupVolumeChange.current.client_volumes.get(client.id)!;
       if (delta < 0)
         new_volume -= ratio * new_volume;
@@ -170,12 +170,12 @@ export default function Group(props: GroupProps) {
     }
 
     setVolume(value);
-  };
+  }
 
   function handleVolumeChangeCommitted(value: number) {
     console.debug("handleVolumeChangeCommitted: " + value);
     groupVolumeChange.current.volumeEntered = true;
-  };
+  }
 
   function handlePlayPauseClicked() {
     if (props.server.getStream(props.group.stream_id)?.properties.playbackStatus === "playing")
@@ -203,12 +203,12 @@ export default function Group(props: GroupProps) {
           </Alert>
         </Snackbar >)
     )
-  };
+  }
 
 
   function getClients(): Snapcast.Client[] {
-    let clients = [];
-    for (let client of props.group.clients) {
+    const clients = [];
+    for (const client of props.group.clients) {
       if ((client.connected || props.showOffline) && !deletedClients.includes(client)) {
         clients.push(client);
       }
@@ -217,24 +217,24 @@ export default function Group(props: GroupProps) {
   }
 
   console.debug("Render Group " + props.group.id);
-  let groupClients = [];
+  const groupClients = [];
 
-  for (let client of getClients()) {
+  for (const client of getClients()) {
     groupClients.push(<Client key={client.id} client={client} snapcontrol={props.snapcontrol} onDelete={() => { handleClientDelete(client) }} onVolumeChange={() => { handleClientVolumeChange(client) }} />);
   }
   if (groupClients.length === 0)
     return (<div>{snackbar()}</div>);
 
-  let stream = props.server.getStream(props.group.stream_id);
-  let artUrl = stream?.properties.metadata?.artUrl || logo;
-  let title = stream?.properties.metadata?.title || "Unknown Title";
-  let artist: string = (stream?.properties.metadata?.artist) ? stream!.properties.metadata.artist.join(', ') : "Unknown Artist";
+  const stream = props.server.getStream(props.group.stream_id);
+  const artUrl = stream?.properties.metadata?.artUrl || logo;
+  const title = stream?.properties.metadata?.title || "Unknown Title";
+  const artist: string = (stream?.properties.metadata?.artist) ? stream!.properties.metadata.artist.join(', ') : "Unknown Artist";
 
   console.debug("Art URL: " + artUrl);
 
-  let allClients = [];
-  for (let group of props.server.groups)
-    for (let client of group.clients)
+  const allClients = [];
+  for (const group of props.server.groups)
+    for (const client of group.clients)
       allClients.push(client);
 
   return (
@@ -263,7 +263,7 @@ export default function Group(props: GroupProps) {
                   value={props.group.stream_id}
                   label="Stream"
                   onChange={(event) => {
-                    let stream: string = event.target.value;
+                    const stream: string = event.target.value;
                     setStreamId(stream);
                     props.snapcontrol.setStream(props.group.id, stream);
                   }}

src/components/SnapWeb.tsx

@@ -105,24 +105,24 @@ export default function SnapWeb(props: SnapWebProps) {
 
   function getMyStreamId(): string {
     try {
-      let group = props.snapcontrol.getGroupFromClient(SnapStream.getClientId());
+      const group = props.snapcontrol.getGroupFromClient(SnapStream.getClientId());
       return props.snapcontrol.getStream(group.stream_id).id;
     } catch (e) {
       return "";
     }
-  };
+  }
 
   function updateMediaSession() {
     console.debug('updateMediaSession');
     if (!snapstreamRef.current)
       return;
     try {
-      let streamId = getMyStreamId();
-      let properties = props.snapcontrol.getStream(streamId).properties;
-      let metadata = properties.metadata;
-      let title: string = metadata?.title || "Unknown Title";
-      let artist: string = (metadata?.artist !== undefined) ? metadata?.artist.join(', ') : "Unknown Artist";
-      let album: string = metadata?.album || "";
+      const streamId = getMyStreamId();
+      const properties = props.snapcontrol.getStream(streamId).properties;
+      const metadata = properties.metadata;
+      const title: string = metadata?.title || "Unknown Title";
+      const artist: string = (metadata?.artist !== undefined) ? metadata?.artist.join(', ') : "Unknown Artist";
+      const album: string = metadata?.album || "";
       let artwork: Array<MediaImage> = [{ src: snapcast512, sizes: '512x512', type: 'image/png' }];
       if (metadata?.artUrl !== undefined) {
         artwork = [
@@ -142,7 +142,7 @@ export default function SnapWeb(props: SnapWebProps) {
         artwork: artwork
       });
 
-      let mediaSession = navigator.mediaSession!;
+      const mediaSession = navigator.mediaSession!;
       let play_state: MediaSessionPlaybackState = "none";
       if (properties.playbackStatus !== undefined) {
         if (properties.playbackStatus === "playing") {
@@ -172,25 +172,25 @@ export default function SnapWeb(props: SnapWebProps) {
       } catch (error) {
         console.debug('Warning! The "stop" media session action is not supported.');
       }
-      let defaultSkipTime: number = 10; // Time to skip in seconds by default
+      const defaultSkipTime: number = 10; // Time to skip in seconds by default
       mediaSession.setActionHandler('seekbackward', properties.canSeek ?
         (event: MediaSessionActionDetails) => {
-          let offset: number = (event.seekOffset || defaultSkipTime) * -1;
+          const offset: number = (event.seekOffset || defaultSkipTime) * -1;
           if (properties.position !== undefined)
             Math.max(properties.position! + offset, 0);
           props.snapcontrol.control(streamId, 'seek', { 'offset': offset })
         } : null);
 
       mediaSession.setActionHandler('seekforward', properties.canSeek ? (event: MediaSessionActionDetails) => {
-        let offset: number = event.seekOffset || defaultSkipTime;
+        const offset: number = event.seekOffset || defaultSkipTime;
         if ((metadata?.duration !== undefined) && (properties.position !== undefined))
           Math.min(properties.position! + offset, metadata.duration!);
         props.snapcontrol.control(streamId, 'seek', { 'offset': offset })
       } : null);
 
       try {
         mediaSession.setActionHandler('seekto', properties.canSeek ? (event: MediaSessionActionDetails) => {
-          let position: number = event.seekTime || 0;
+          const position: number = event.seekTime || 0;
           if (metadata?.duration !== undefined)
             Math.min(position, metadata.duration!);
           props.snapcontrol.control(streamId, 'setPosition', { 'position': position })
@@ -281,7 +281,7 @@ export default function SnapWeb(props: SnapWebProps) {
 
           <ListItem disablePadding>
             <ListItemButton role={undefined} onClick={(_event) => {
-              let showoffline = !showOffline;
+              const showoffline = !showOffline;
               if (window.localStorage)
                 window.localStorage.setItem("showoffline", showoffline ? "true" : "false");
               setShowOffline(showoffline);
@@ -301,7 +301,7 @@ export default function SnapWeb(props: SnapWebProps) {
 
           <ListItem disablePadding>
             <ListItemButton role={undefined} onClick={(_event) => {
-              let darkmode = !darkMode;
+              const darkmode = !darkMode;
               if (window.localStorage)
                 window.localStorage.setItem("darkmode", darkmode ? "true" : "false");
               setDarkMode(darkmode);