Averaging group volume

src/js/components/Fields/VolumeControl.js

@@ -9,6 +9,7 @@ export default class VolumeControl extends React.Component{
 	}
 
 	handleClick(e){
+		var old_percent = this.props.volume;
 		var slider = e.target;
 		if (slider.className != 'slider' ) slider = slider.parentElement;
 
@@ -22,11 +23,12 @@ export default class VolumeControl extends React.Component{
 			percent = 0
 		}
 
-		this.props.onVolumeChange(percent);
+		this.props.onVolumeChange(percent, old_percent);
 	}
 
 	handleWheel(e){
 		if (this.props.scrollWheel){
+			var old_percent = this.props.volume;
 			
 			// Identify which direction we've scrolled (inverted)
 			// This is simplified and doesn't consider momentum as it varies wildly
@@ -42,7 +44,7 @@ export default class VolumeControl extends React.Component{
 				percent = 0
 			}
 
-			this.props.onVolumeChange(percent);
+			this.props.onVolumeChange(percent, old_percent);
 			e.preventDefault();
 		}
 	}
@@ -66,10 +68,14 @@ export default class VolumeControl extends React.Component{
 	}
 
 	render(){
-		var className = "volume-control"
+		var className = "volume-control";
 		if (this.props.mute){
-			className += " muted"
+			className += " muted";
 		}
+		if (this.props.className){
+			className += " "+this.props.className;
+		}
+
 		return (
 			<span className={className} onWheel={e => this.handleWheel(e)}>
 				{this.renderMuteButton()}

src/js/components/Snapcast.js

@@ -96,6 +96,7 @@ class Snapcast extends React.Component{
 								</div>
 								<div className="col volume">
 									<VolumeControl 
+										className="client-volume-control"
 										volume={client.config.volume.percent}
 										mute={client.config.volume.muted}
 										onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, percent)}
@@ -199,6 +200,15 @@ class Snapcast extends React.Component{
 
 				{
 					groups.map((group, i) => {
+
+						// Average our clients' volume for an overall group volume
+						var group_volume = 0;
+						for (var i = 0; i < group.clients.length; i++){
+							var client = group.clients[i];
+							group_volume += client.config.volume.percent;
+						}
+						group_volume = group_volume / group.clients.length;
+
 						return (
 							<div className="group" key={group.id}>
 								<div className="field">
@@ -236,9 +246,10 @@ class Snapcast extends React.Component{
 									</div>
 									<div className="input">	
 										<VolumeControl 
-											volume={group.volume}
+											className="group-volume-control"
+											volume={group_volume}
 											mute={group.muted}
-											onVolumeChange={percent => this.props.pusherActions.setSnapcastGroupVolume(group.id, percent)}
+											onVolumeChange={(percent, old_percent) => this.props.pusherActions.setSnapcastGroupVolume(group.id, percent, old_percent)}
 											onMuteChange={mute => this.props.pusherActions.setSnapcastGroupMute(group.id, mute)}
 										/>
 									</div>