Mute all client/module outputs

components/graph/index.js

@@ -9,6 +9,8 @@ const {
 	merge,
 	repeat,
 	defaultTo,
+	prop,
+	all,
 } = require('ramda');
 
 const React = require('react');
@@ -29,6 +31,8 @@ const {
 const {
 	getPaiByTypeAndIndex,
 	getDerivedMonitorSources,
+	getClientSinkInputs,
+	getModuleSinkInputs,
 } = require('../../selectors');
 
 const {
@@ -545,10 +549,16 @@ class Graph extends React.Component {
 	onNodeMouseDown(event, data) {
 		const pai = dgoToPai.get(data);
 		if (pai && event.button === 1) {
-			if (pai.type === 'sink') {
-				this.props.setSinkMute(pai.index, !pai.muted);
-			} else if (pai.type === 'source') {
-				this.props.setSourceMute(pai.index, !pai.muted);
+			if (pai.type === 'sink' ||
+				pai.type === 'source'
+			) {
+				this.toggleMute(pai);
+			} else if (pai.type === 'client') {
+				const sinkInputs = getClientSinkInputs(pai)({ pulse: this.props });
+				this.toggleAllMute(sinkInputs);
+			} else if (pai.type === 'module') {
+				const sinkInputs = getModuleSinkInputs(pai)({ pulse: this.props });
+				this.toggleAllMute(sinkInputs);
 			}
 		}
 	}
@@ -579,14 +589,36 @@ class Graph extends React.Component {
 	onEdgeMouseDown(event, data) {
 		const pai = dgoToPai.get(data);
 		if (pai && event.button === 1) {
-			if (pai.type === 'sinkInput') {
-				this.props.setSinkInputMuteByIndex(pai.index, !pai.muted);
-			} else if (pai.type === 'sourceOutput') {
-				this.props.setSourceOutputMuteByIndex(pai.index, !pai.muted);
+			if (pai.type === 'sinkInput' ||
+				pai.type === 'sourceOutput'
+			) {
+				this.toggleMute(pai);
 			}
 		}
 	}
 
+	toggleAllMute(pais) {
+		pais = values(pais);
+		const allMuted = all(prop('muted'), pais);
+		pais.forEach(pai => this.toggleMute(pai, !allMuted));
+	}
+
+	toggleMute(pai, muted = !pai.muted) {
+		if (pai.muted === muted) {
+			return;
+		}
+
+		if (pai.type === 'sinkInput') {
+			this.props.setSinkInputMuteByIndex(pai.index, muted);
+		} else if (pai.type === 'sourceOutput') {
+			this.props.setSourceOutputMuteByIndex(pai.index, muted);
+		} else if (pai.type === 'sink') {
+			this.props.setSinkMute(pai.index, muted);
+		} else if (pai.type === 'source') {
+			this.props.setSourceMute(pai.index, muted);
+		}
+	}
+
 	render() {
 		let edges = map(paoToEdge, flatten(map(values, [
 			this.props.objects.sinkInputs,

selectors/index.js

@@ -5,6 +5,7 @@ const {
 	path,
 	filter,
 	indexBy,
+	pickBy,
 } = require('ramda');
 
 const { createSelector } = require('reselect');
@@ -15,6 +16,16 @@ const storeKeyByType = map(prop('key'), indexBy(prop('type'), things));
 
 const getPaiByTypeAndIndex = (type, index) => state => path([ storeKeyByType[type], index ], state.pulse.infos);
 
+const getClientSinkInputs = client => state => pickBy(
+	si => si.clientIndex === client.index,
+	state.pulse.infos.sinkInputs,
+);
+
+const getModuleSinkInputs = module => state => pickBy(
+	si => si.moduleIndex === module.index,
+	state.pulse.infos.sinkInputs,
+);
+
 const getDerivedMonitorSources = createSelector(
 	state => state.pulse.infos.sources,
 	sources => map(source => ({
@@ -28,4 +39,6 @@ const getDerivedMonitorSources = createSelector(
 module.exports = {
 	getPaiByTypeAndIndex,
 	getDerivedMonitorSources,
+	getClientSinkInputs,
+	getModuleSinkInputs,
 };

store/index.js

@@ -37,7 +37,7 @@ module.exports = (state = initialState) => {
 		state,
 		composeWithDevTools({
 			realtime: dev,
-			hostname: 'localhost', port: 8000,
+			// hostname: 'localhost', port: 8000,
 		})(applyMiddleware(...middlewares)),
 	);