diff --git a/actions/pulse.js b/actions/pulse.js index 2b5e7dc..9db3112 100644 --- a/actions/pulse.js +++ b/actions/pulse.js @@ -6,6 +6,8 @@ module.exports = createActionCreators({ READY: null, CLOSE: null, + ERROR: null, + NEW: null, CHANGE: null, REMOVE: null, diff --git a/components/log/index.js b/components/log/index.js new file mode 100644 index 0000000..4a6f675 --- /dev/null +++ b/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); diff --git a/index.css b/index.css index 0e251ac..a315f8a 100644 --- a/index.css +++ b/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; diff --git a/package.json b/package.json index 001c7dc..f785c49 100644 --- a/package.json +++ b/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", diff --git a/reducers/pulse.js b/reducers/pulse.js index 4261057..d01abb1 100644 --- a/reducers/pulse.js +++ b/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 = { diff --git a/renderer.js b/renderer.js index 78ae18b..5f4865d 100644 --- a/renderer.js +++ b/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 ]) => { diff --git a/store/pulse-middleware.js b/store/pulse-middleware.js index 0a01b55..03272af 100644 --- a/store/pulse-middleware.js +++ b/store/pulse-middleware.js @@ -134,90 +134,94 @@ module.exports = store => { reconnect(); - const rethrow = error => { - if (error) { - throw error; + const handleError = error => { + if (!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); diff --git a/utils/memoize.js b/utils/memoize.js index a9e920c..c4ffdc6 100644 --- a/utils/memoize.js +++ b/utils/memoize.js @@ -3,13 +3,7 @@ const { memoizeWith, } = require('ramda'); -const weakmapId_ = new WeakMap(); -const weakmapId = o => { - if (!weakmapId_.has(o)) { - weakmapId_.set(o, String(Math.random())); - } - return weakmapId_.get(o); -}; +const weakmapId = require('./weakmap-id'); const memoize = memoizeWith(weakmapId); diff --git a/utils/weakmap-id.js b/utils/weakmap-id.js new file mode 100644 index 0000000..97fbc4e --- /dev/null +++ b/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; diff --git a/yarn.lock b/yarn.lock index 397d2ff..0cdfa12 100644 --- a/yarn.lock +++ b/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"