🔨 Add music player

src/actions/musicPlayer.jsx

@@ -0,0 +1,11 @@
+export const MUSICPLAYER_PLAY = 'MUSICPLAYER_PLAY'
+export const MUSICPLAYER_STOP = 'MUSICPLAYER_STOP'
+export const MUSICPLAYER_PAUSE = 'MUSICPLAYER_PAUSE'
+
+export const musicPlayer_play = ()=>({
+    type: MUSICPLAYER_PLAY
+})
+
+export const musicPlayer_pause = ()=>({
+    type: MUSICPLAYER_PAUSE
+})

src/components/App.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 
 import Footer from './Footer'
 import Banner from './Banner/index'
+import MusicPlayer from './MusicPlayer'
 import MainWindow from './MainWindow'
 import Login from './Login'
 
@@ -13,6 +14,7 @@ class App extends Component {
             <div className={Style.app}>
                 <Footer/>
                 <MainWindow/>
+                <MusicPlayer/>
                 <Banner/>
                 <Login/>
             </div>

src/components/Footer/index.jsx

@@ -1,6 +1,12 @@
 import React, { Component } from 'react'
 import Style from './index.css'
 import cs from 'classnames'
+import { connect } from 'react-redux'
+import {
+    musicPlayer_play,
+    musicPlayer_pause
+} from '../../actions/musicPlayer.jsx'
+
 import {
     iconfont,
     icon_shangyiqu,
@@ -11,8 +17,17 @@ import {
     icon_iconfontttpodicon1eps
 } from 'iconfont.css'
 
+const selector = (state)=>({
+    playing: state.musicPlayer.playing
+})
+
 class Footer extends Component {
     render() {
+        const { dispatch } = this.props
+        const handlerPlay = ()=>{
+            dispatch(musicPlayer_play())
+        }
+
         return(
             <div className={Style.footer}>
                 <div>
@@ -22,6 +37,7 @@ class Footer extends Component {
                     />
                     <div
                         className={ cs(iconfont, icon_bofang, Style['button_play']) }
+                        onClick = { handlerPlay }
                         title="播放"
                     />
                     <div
@@ -49,4 +65,4 @@ class Footer extends Component {
     }
 }
 
-export default Footer
+export default connect(selector)(Footer)

src/components/MusicPlayer/index.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { withRouter } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+const selector = (state) => {
+    return {
+        musicPlayer: state.musicPlayer
+    }
+}
+
+class MusicPlayer extends Component {
+    render() {
+        const { musicPlayer={} } = this.props
+        const audio = document.getElementById('musicPlayer')
+        const {
+            src='',
+            playing
+        } = musicPlayer
+
+        if(audio&&playing) {
+            audio.play()
+        }else if(audio) {
+            audio.pause()
+        }
+
+        return (
+            <div>
+                <audio id="musicPlayer" src={ src }></audio>
+            </div>
+        )
+    }
+}
+
+export default withRouter(connect(selector)(MusicPlayer))

src/reducers/index.jsx

@@ -2,12 +2,14 @@ import list from './userSongList'
 import user from './login'
 import songList from './songList'
 import discoverMusic from './discoverMusic'
+import musicPlayer from './musicPlayer'
 
 const reducers = {
     list,
     user,
     songList,
-    discoverMusic
+    discoverMusic,
+    musicPlayer
 }
 
 export default reducers

src/reducers/musicPlayer.jsx

@@ -0,0 +1,22 @@
+import {
+    MUSICPLAYER_PLAY
+} from '../actions/musicPlayer.jsx'
+
+const _state = {
+    playing: false,
+    src: 'http://m10.music.126.net/20170928213730/a921719863a66fec83329a5b7f7b4b55/ymusic/f1ae/0bd1/31a9/5d64960d0cbebc0d089bc85a6ef54680.mp3'
+}
+
+const musicPlayer = (state = _state, action)=> {
+    switch (action.type) {
+        case MUSICPLAYER_PLAY:
+            return {
+                ...state,
+                playing: true
+            }
+        default:
+            return state
+    }
+}
+
+export default musicPlayer