Idle and hovered state hooked up to Player Controls and Metadata

Author: likethemammal

package-lock.json

@@ -26,13 +26,17 @@
     "chroma-js": "^2.0.2",
     "gradient-color": "^2.0.1",
     "lodash": "^4.17.11",
+    "lodash.memoize": "^4.1.2",
+    "memoize": "^0.1.1",
     "randomcolor": "^0.5.3",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-icons-kit": "^1.2.1",
+    "react-idle-timer": "^4.2.1",
     "react-redux": "^6.0.0",
     "redux": "^4.0.1",
     "redux-saga": "^0.16.2",
+    "reselect": "^4.0.0",
     "visualizer-micro": "^0.1.0"
   }
 }

package.json

@@ -2,17 +2,13 @@ import {
     connect
 } from 'react-redux'
 
-import _ from 'lodash'
+import { select } from '../../units/utils/connect'
 
 import { actions } from './Audio.actions'
-
 import * as selectors from './Audio.selectors'
 
 export default (Component) => connect((state) => {
-    return _.mapValues(selectors, (selector, key) => {
-        const value = selector(state)
-        return value
-    })
+    return select(selectors, state)
 }, {
     ...actions,
 })(Component)

src/components/Audio/Audio.connect.js

@@ -6,6 +6,7 @@ import {
     _Audio,
     audio as _audio,
     paused as _paused,
+    playing as _playing,
     volume as _volume,
     fakeTriggered as _fakeTriggered,
     vm as _vm,
@@ -22,7 +23,6 @@ export const timestamp = createSelector(
     _timestamp,
 )
 
-
 export const audio = createSelector(
     _Audio,
     timestamp,
@@ -52,7 +52,7 @@ export const paused = createSelector(
 
 export const playing = createSelector(
     paused,
-    _paused,
+    _playing,
 )
 
 export const volume = createSelector(

src/components/Audio/Audio.selectors.js

@@ -1,13 +1,17 @@
 export const audio = ({ audio }) => audio
 export const volume = ({ volume }) => volume
-export const paused = ({ paused }) => paused
-export const playing = (paused)  => !paused
-export const duration = ({ duration }) => duration
+export const paused = ({ paused }) => {
+    return paused
+}
+export const duration = ({ duration }) => {
+    return duration
+}
 export const currentTime = ({ currentTime }) => currentTime
 export const fakeTriggered = ({ fakeTriggered }) => fakeTriggered
 export const vm = ({ vm }) => vm
 export const visualizerLoaded = ({ visualizerLoaded }) => visualizerLoaded
 export const timestamp = ({ timestamp }) => timestamp
+export const playing = (paused)  => !paused
 
 export const _Audio = ({ _Audio }) => _Audio || {}
 

src/components/Audio/Audio.units.js

@@ -4,8 +4,10 @@ const CONTROLS__RESET_COLORS = 'CONTROLS__RESET_COLORS'
 const CONTROLS__SET_COLORS = 'CONTROLS__SET_COLORS'
 const CONTROLS__SET_COLOR = 'CONTROLS__SET_COLOR'
 const CONTROLS__SET_NUM_COLORS = 'CONTROLS__SET_NUM_COLORS'
-
-import _ from 'lodash'
+const CONTROLS__SET_IDLE_INACTIVE = 'CONTROLS__SET_IDLE_INACTIVE'
+const CONTROLS__SET_IDLE_ACTIVE = 'CONTROLS__SET_IDLE_ACTIVE'
+const CONTROLS__SET_HOVER_ACTIVE = 'CONTROLS__SET_HOVER_ACTIVE'
+const CONTROLS__SET_HOVER_INACTIVE = 'CONTROLS__SET_HOVER_INACTIVE'
 
 export const types = {
     CONTROLS__SET_GENRE,
@@ -14,6 +16,10 @@ export const types = {
     CONTROLS__SET_NUM_COLORS,
     CONTROLS__RESET_COLORS,
     CONTROLS__SET_COLOR,
+    CONTROLS__SET_IDLE_INACTIVE,
+    CONTROLS__SET_IDLE_ACTIVE,
+    CONTROLS__SET_HOVER_ACTIVE,
+    CONTROLS__SET_HOVER_INACTIVE,
 }
 
 const setGenre = (index) => {
@@ -45,8 +51,36 @@ const resetColors = (numColors) => {
     }
 }
 
+const setIdleActive = () => {
+    return {
+        type: types.CONTROLS__SET_IDLE_ACTIVE,
+    }
+}
+
+const setIdleInactive = () => {
+    return {
+        type: types.CONTROLS__SET_IDLE_INACTIVE,
+    }
+}
+
+const setHoverActive = () => {
+    return {
+        type: types.CONTROLS__SET_HOVER_ACTIVE,
+    }
+}
+
+const setHoverInactive = () => {
+    return {
+        type: types.CONTROLS__SET_HOVER_INACTIVE,
+    }
+}
+
 export const actions = {
     // setColors,
+    setHoverActive,
+    setHoverInactive,
+    setIdleActive,
+    setIdleInactive,
     setVisualizer,
     setGenre,
     setColor,

src/components/Player/Controls.actions.js

@@ -207,6 +207,8 @@ class Controls extends Component {
 
         return <div
                 style={styles.container}
+                onMouseOut={this.props.setHoverInactive}
+                onMouseOver={this.props.setHoverActive}
             >
             <div style={styles.row}>
                 <SimpleIcon icon={paused ? ic_play_arrow : ic_pause} onClick={this.props.onPlay}/>

src/components/Player/Controls.component.js

@@ -4,20 +4,21 @@ import {
 
 import _ from 'lodash'
 
+import { select } from '../../units/utils/connect'
+
 import { actions as actionsAudio } from '../Audio/Audio.actions'
 import { actions } from './Controls.actions'
 
 import * as selectorsAudio from '../Audio/Audio.selectors'
 import * as selectors from './Controls.selectors'
 
 export default (Component) => connect((state) => {
-    return _.mapValues({
+    const selected = select({
         ...selectorsAudio,
         ...selectors,
-    }, (selector, key) => {
-        const value = selector(state)
-        return value
-    })
+    }, state)
+
+    return selected
 }, {
     ...actionsAudio,
     ...actions,

src/components/Player/Controls.connect.js

@@ -6,6 +6,8 @@ export const initialState = {
     visualizerIndex: 0,
     numColors: 3,
     colors: [],
+    idle: false,
+    hovered: false,
 }
 
 export const reducer = {
@@ -41,5 +43,28 @@ export const reducer = {
             numColors,
         }
     },
-
+    [types.CONTROLS__SET_IDLE_ACTIVE]: (state, action) => {
+        return {
+            ...state,
+            idle: true,
+        }
+    },
+    [types.CONTROLS__SET_IDLE_INACTIVE]: (state, action) => {
+        return {
+            ...state,
+            idle: false,
+        }
+    },
+    [types.CONTROLS__SET_HOVER_ACTIVE]: (state, action) => {
+        return {
+            ...state,
+            hovered: true,
+        }
+    },
+    [types.CONTROLS__SET_HOVER_INACTIVE]: (state, action) => {
+        return {
+            ...state,
+            hovered: false,
+        }
+    },
 }

src/components/Player/Controls.reducer.js

@@ -11,13 +11,25 @@ import {
     color1 as _color1,
     color2 as _color2,
     color3 as _color3,
+    idle as _idle,
+    hovered as _hovered,
 } from './Controls.units'
 
+export const idle = createSelector(
+    Controls,
+    _idle,
+)
+
 export const colors = createSelector(
     Controls,
     _colors,
 )
 
+export const hovered = createSelector(
+    Controls,
+    _hovered,
+)
+
 export const visualizerIndex = createSelector(
     Controls,
     _visualizerIndex,

src/components/Player/Controls.selectors.js

@@ -2,6 +2,8 @@ export const colors = ({ colors }) => colors
 export const visualizerIndex = ({ visualizerIndex }) => visualizerIndex
 export const genreIndex = ({ genreIndex }) => genreIndex
 export const numColors = ({ numColors }) => numColors
+export const hovered = ({ hovered }) => hovered
+export const idle = ({ idle }) => idle
 export const color1 = (colors) => colors[0]
 export const color2 = (colors) => colors[1]
 export const color3 = (colors) => colors[2]

src/components/Player/Controls.units.js

@@ -26,6 +26,16 @@ class DurationChecker extends Component {
         }
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.props.playing && !prevProps.playing) {
+            this.setTimer()
+        }
+
+        if (this.props.paused && !prevProps.paused) {
+            this.clearTimer()
+        }
+    }
+
     render() {
         return <Fragment />
     }

src/components/Player/DurationChecker.component.js

@@ -77,6 +77,8 @@ class Metadata extends Component {
 
         return <div
                 style={styles.container}
+                onMouseOut={this.props.setHoverInactive}
+                onMouseOver={this.props.setHoverActive}
             >
                 <Duration percentComplete={percentComplete}/>