Show pulseaudio errors

actions/pulse.js

@@ -6,6 +6,8 @@ module.exports = createActionCreators({
 		READY: null,
 		CLOSE: null,
 
+		ERROR: null,
+
 		NEW: null,
 		CHANGE: null,
 		REMOVE: null,

components/log/index.js

@@ -0,0 +1,71 @@
+
+const {
+	compose,
+	map,
+	filter,
+	differenceWith,
+	takeLast,
+} = require('ramda');
+
+const React = require('react');
+
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
+
+const r = require('r-dom');
+
+const { connect } = require('react-redux');
+
+const weakmapId = require('../../utils/weakmap-id');
+
+class Log extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			removedErrors: [],
+		};
+	}
+
+	removeError(error) {
+		this.setState({
+			removedErrors: takeLast(10, this.state.removedErrors.concat(weakmapId(error))),
+		});
+	}
+
+	shouldShowError(error) {
+		return !this.state.removedErrors.includes(weakmapId(error));
+	}
+
+	componentDidUpdate(prevProps) {
+		const newErrors = differenceWith((a, b) => a === b, this.props.log.errors, prevProps.log.errors);
+		newErrors.forEach(error => setTimeout(() => {
+			this.removeError(error);
+		}, this.props.itemLifetime));
+	}
+
+	render() {
+		return r.div({
+			className: 'log',
+		}, r(ReactCSSTransitionGroup, {
+			transitionName: 'log-item-transition',
+			transitionEnterTimeout: 300,
+			transitionLeaveTimeout: 2000,
+		}, compose(
+			map(e => r.div({
+				key: weakmapId(e),
+				className: 'log-item-error',
+			}, `${e.name}: ${e.message}`)),
+			filter(e => this.shouldShowError(e)),
+		)(this.props.log.errors)));
+	}
+}
+
+Log.defaultProps = {
+	itemLifetime: 5000,
+};
+
+module.exports = connect(
+	state => ({
+		log: state.pulse.log,
+	}),
+)(Log);

index.css

@@ -172,6 +172,35 @@ div[tabindex="-1"]:focus {
 	opacity: 1;
 }
 
+.log {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	padding: 1rem;
+	overflow: auto;
+	pointer-events: none;
+}
+
+.log-item-error {
+	color: var(--errorColor);
+}
+
+.log-item-transition-enter {
+	opacity: 0.01;
+}
+.log-item-transition-enter.log-item-transition-enter-active {
+	opacity: 1;
+	transition: opacity .3s ease-in;
+}
+
+.log-item-transition-leave {
+	opacity: 1;
+}
+.log-item-transition-leave.log-item-transition-leave-active {
+	opacity: 0.01;
+	transition: opacity 2s ease-out;
+}
+
 .panel {
 	position: absolute;
 	top: 0;

package.json

@@ -33,6 +33,7 @@
     "r-dom": "^2.4.0",
     "ramda": "^0.25.0",
     "react": "^16.6.0",
+    "react-addons-css-transition-group": "^15.6.2",
     "react-digraph": "^5.1.3",
     "react-dom": "^16.6.0",
     "react-hotkeys": "^1.1.4",

reducers/pulse.js

@@ -7,6 +7,7 @@ const {
 	map,
 	pick,
 	equals,
+	takeLast,
 } = require('ramda');
 
 const { combineReducers } = require('redux');
@@ -22,6 +23,8 @@ const initialState = {
 
 	objects: fromPairs(map(({ key }) => [ key, {} ], things)),
 	infos: fromPairs(map(({ key }) => [ key, {} ], things)),
+
+	log: { errors: [] },
 };
 
 const reducer = combineReducers({
@@ -94,6 +97,12 @@ const reducer = combineReducers({
 		},
 		[pulse.close]: () => initialState.objects[key],
 	}, initialState.infos[key]) ], things))),
+
+	log: combineReducers({
+		errors: handleActions({
+			[pulse.error]: (state, { payload }) => takeLast(3, state.concat(payload)),
+		}, initialState.log.errors),
+	}),
 });
 
 module.exports = {

renderer.js

@@ -11,6 +11,7 @@ const createStore = require('./store');
 const Graph = require('./components/graph');
 const Cards = require('./components/cards');
 const Preferences = require('./components/preferences');
+const Log = require('./components/log');
 const { HotKeys } = require('./components/hot-keys');
 const { MenuProvider } = require('./components/menu');
 
@@ -22,6 +23,7 @@ const Root = () => r(ReduxProvider, {
 	r(Graph, { ref: graphRef }),
 	r(Cards, { ref: cardsRef }),
 	r(Preferences, { ref: preferencesRef }),
+	r(Log),
 ])));
 
 Object.entries(theme.colors).forEach(([ key, value ]) => {

store/pulse-middleware.js

@@ -134,90 +134,94 @@ module.exports = store => {
 
 	reconnect();
 
-	const rethrow = error => {
+	const handleError = error => {
-		if (error) {
+		if (!error) {
-			throw error;
+			return;
 		}
+
+		console.error(error);
+
+		store.dispatch(pulseActions.error(error));
 	};
 
 	const handlePulseActions = handleActions({
 		[pulseActions.moveSinkInput]: (state, { payload: { sinkInputIndex, destSinkIndex } }) => {
-			pa.moveSinkInput(sinkInputIndex, destSinkIndex, rethrow);
+			pa.moveSinkInput(sinkInputIndex, destSinkIndex, handleError);
 			return state;
 		},
 		[pulseActions.moveSourceOutput]: (state, { payload: { sourceOutputIndex, destSourceIndex } }) => {
-			pa.moveSourceOutput(sourceOutputIndex, destSourceIndex, rethrow);
+			pa.moveSourceOutput(sourceOutputIndex, destSourceIndex, handleError);
 			return state;
 		},
 
 		[pulseActions.killClientByIndex]: (state, { payload: { clientIndex } }) => {
-			pa.killClientByIndex(clientIndex, rethrow);
+			pa.killClientByIndex(clientIndex, handleError);
 			return state;
 		},
 
 		[pulseActions.killSinkInputByIndex]: (state, { payload: { sinkInputIndex } }) => {
-			pa.killSinkInputByIndex(sinkInputIndex, rethrow);
+			pa.killSinkInputByIndex(sinkInputIndex, handleError);
 			return state;
 		},
 		[pulseActions.killSourceOutputByIndex]: (state, { payload: { sourceOutputIndex } }) => {
-			pa.killSourceOutputByIndex(sourceOutputIndex, rethrow);
+			pa.killSourceOutputByIndex(sourceOutputIndex, handleError);
 			return state;
 		},
 
 		[pulseActions.unloadModuleByIndex]: (state, { payload: { moduleIndex } }) => {
-			pa.unloadModuleByIndex(moduleIndex, rethrow);
+			pa.unloadModuleByIndex(moduleIndex, handleError);
 			return state;
 		},
 
 		[pulseActions.setSinkVolumes]: (state, { payload: { index, channelVolumes } }) => {
-			pa.setSinkVolumes(index, channelVolumes, rethrow);
+			pa.setSinkVolumes(index, channelVolumes, handleError);
 			return state;
 		},
 		[pulseActions.setSourceVolumes]: (state, { payload: { index, channelVolumes } }) => {
-			pa.setSourceVolumes(index, channelVolumes, rethrow);
+			pa.setSourceVolumes(index, channelVolumes, handleError);
 			return state;
 		},
 		[pulseActions.setSinkInputVolumes]: (state, { payload: { index, channelVolumes } }) => {
-			pa.setSinkInputVolumesByIndex(index, channelVolumes, rethrow);
+			pa.setSinkInputVolumesByIndex(index, channelVolumes, handleError);
 			return state;
 		},
 		[pulseActions.setSourceOutputVolumes]: (state, { payload: { index, channelVolumes } }) => {
-			pa.setSourceOutputVolumesByIndex(index, channelVolumes, rethrow);
+			pa.setSourceOutputVolumesByIndex(index, channelVolumes, handleError);
 			return state;
 		},
 
 		[pulseActions.setSinkChannelVolume]: (state, { payload: { index, channelIndex, volume } }) => {
-			return setSinkChannelVolume(pa, store, index, channelIndex, volume, rethrow);
+			return setSinkChannelVolume(pa, store, index, channelIndex, volume, handleError);
 		},
 		[pulseActions.setSourceChannelVolume]: (state, { payload: { index, channelIndex, volume } }) => {
-			return setSourceChannelVolume(pa, store, index, channelIndex, volume, rethrow);
+			return setSourceChannelVolume(pa, store, index, channelIndex, volume, handleError);
 		},
 		[pulseActions.setSinkInputChannelVolume]: (state, { payload: { index, channelIndex, volume } }) => {
-			return setSinkInputChannelVolume(pa, store, index, channelIndex, volume, rethrow);
+			return setSinkInputChannelVolume(pa, store, index, channelIndex, volume, handleError);
 		},
 		[pulseActions.setSourceOutputChannelVolume]: (state, { payload: { index, channelIndex, volume } }) => {
-			return setSourceOutputChannelVolume(pa, store, index, channelIndex, volume, rethrow);
+			return setSourceOutputChannelVolume(pa, store, index, channelIndex, volume, handleError);
 		},
 
 		[pulseActions.setCardProfile]: (state, { payload: { index, profileName } }) => {
-			pa.setCardProfile(index, profileName, rethrow);
+			pa.setCardProfile(index, profileName, handleError);
 			return state;
 		},
 
 		[pulseActions.setSinkMute]: (state, { payload: { index, muted } }) => {
-			pa.setSinkMute(index, muted, rethrow);
+			pa.setSinkMute(index, muted, handleError);
 			return state;
 		},
 		[pulseActions.setSourceMute]: (state, { payload: { index, muted } }) => {
-			pa.setSourceMute(index, muted, rethrow);
+			pa.setSourceMute(index, muted, handleError);
 			return state;
 		},
 		[pulseActions.setSinkInputMuteByIndex]: (state, { payload: { index, muted } }) => {
-			pa.setSinkInputMuteByIndex(index, muted, rethrow);
+			pa.setSinkInputMuteByIndex(index, muted, handleError);
 			return state;
 		},
 		[pulseActions.setSourceOutputMuteByIndex]: (state, { payload: { index, muted } }) => {
-			pa.setSourceOutputMuteByIndex(index, muted, rethrow);
+			pa.setSourceOutputMuteByIndex(index, muted, handleError);
 			return state;
 		},
 	}, null);

utils/memoize.js

@@ -3,13 +3,7 @@ const {
 	memoizeWith,
 } = require('ramda');
 
-const weakmapId_ = new WeakMap();
+const weakmapId = require('./weakmap-id');
-const weakmapId = o => {
-	if (!weakmapId_.has(o)) {
-		weakmapId_.set(o, String(Math.random()));
-	}
-	return weakmapId_.get(o);
-};
 
 const memoize = memoizeWith(weakmapId);
 

utils/weakmap-id.js

@@ -0,0 +1,11 @@
+
+let counter = 0;
+const weakmap = new WeakMap();
+const weakmapId = o => {
+	if (!weakmap.has(o)) {
+		weakmap.set(o, String(counter++));
+	}
+	return weakmap.get(o);
+};
+
+module.exports = weakmapId;

yarn.lock

@@ -1042,6 +1042,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+chain-function@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
+  integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==
+
 chalk@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
@@ -1889,6 +1894,13 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dot-prop@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -4932,7 +4944,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -5036,6 +5048,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-css-transition-group@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.6.2.tgz#9e4376bcf40b5217d14ec68553081cee4b08a6d6"
+  integrity sha1-nkN2vPQLUhfRTsaFUwgc7ksIptY=
+  dependencies:
+    react-transition-group "^1.2.0"
+
 react-digraph@^5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/react-digraph/-/react-digraph-5.1.3.tgz#79882a07e821f101a59d6214a381502351705788"
@@ -5118,6 +5137,17 @@ react-test-renderer@^15.4.2:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
+react-transition-group@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+  integrity sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==
+  dependencies:
+    chain-function "^1.0.0"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.6"
+    warning "^3.0.0"
+
 react@^15.4.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
@@ -6595,6 +6625,13 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
 well-known-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/well-known-symbols/-/well-known-symbols-1.0.0.tgz#73c78ae81a7726a8fa598e2880801c8b16225518"