favorite and user-center

lz-lee · Feb 28, 2018 · 7ed3a8f · 7ed3a8f
1 parent aff1002
commit 7ed3a8f
Show file tree

Hide file tree

Showing 12 changed files with 309 additions and 108 deletions.
diff --git a/src/common/js/cache.js b/src/common/js/cache.js
@@ -49,6 +49,28 @@ export function loadPlay() {
   return storage.get(PLAY_KEY, [])
 }
 
+export function saveFavorite(song) {
+  let songs = storage.get(FAVORITE_KEY, [])
+  insertArr(songs, song, (item) => {
+    return song.id === item.id
+  }, FAVORITE_MAX_LEN)
+  storage.set(FAVORITE_KEY, songs)
+  return songs
+}
+
+export function deleteFavorite(song) {
+  let songs = storage.get(FAVORITE_KEY, [])
+  deleteFromArr(songs, (item) => {
+    return item.id === song.id
+  })
+  storage.set(FAVORITE_KEY, songs)
+  return songs
+}
+
+export function loadFavorite() {
+  return storage.get(FAVORITE_KEY, [])
+}
+
 function insertArr(arr, val, compare, maxLen) {
   const index = arr.findIndex(compare)
   if (index === 0) return

diff --git a/src/common/js/mixin.js b/src/common/js/mixin.js
@@ -8,7 +8,7 @@ import {
   set_playList
 } from 'store/action-creator'
 
-import {saveSearchHistory, deleteSearchHistory} from 'store/action'
+import {saveSearchHistory, deleteSearchHistory, saveFavoriteList, deleteFavoriteList} from 'store/action'
 
 import {playMode} from 'common/js/config'
 import {shuffle, debounce} from 'common/js/util'
@@ -20,16 +20,18 @@ export const playListHoc = (WrapperComponent) => {
       this.state = {}
       this.changeMode = this.changeMode.bind(this)
       this.show = this.show.bind(this)
+      this.toggleFavorite = this.toggleFavorite.bind(this)
+      this.getFavoriteIcon = this.getFavoriteIcon.bind(this)
     }
 
     changeMode() {
-      const mode = (this.props.mode + 1) % 3
+      const mode = (this.props.player.mode + 1) % 3
       this.props.set_playMode(mode)
       let list = null
       if (mode === playMode.random) {
-        list = shuffle(this.props.sequenceList)
+        list = shuffle(this.props.player.sequenceList)
       } else {
-        list = this.props.sequenceList
+        list = this.props.player.sequenceList
       }
       // set list 需要在前，需要根据下一个list来设置currentSong
       this.props.set_playList(list)
@@ -38,7 +40,7 @@ export const playListHoc = (WrapperComponent) => {
 
     resetCurrentIndex(list) {
       let index = list.findIndex(v => {
-        return v.id === this.props.currentSong.id
+        return v.id === this.props.player.currentSong.id
       })
       this.props.set_currentIndex(index)
     }
@@ -48,23 +50,50 @@ export const playListHoc = (WrapperComponent) => {
       instance && instance.show()
     }
 
+    toggleFavorite(song) {
+      if (this.isFavorite(song)) {
+        this.props.deleteFavoriteList(song)
+      } else {
+        this.props.saveFavoriteList(song)
+      }
+    }
+
+    getFavoriteIcon(song) {
+      return this.isFavorite(song) ? 'icon icon-favorite' : 'icon icon-not-favorite'
+    }
+
+    isFavorite(song) {
+      const index = this.props.favoriteList.findIndex((item) => {
+        return item.id === song.id
+      })
+      return index > -1
+    }
+
     render() {
-      const {mode} = this.props
+      const {player: {mode}} = this.props
       const modeIcon = mode === playMode.sequence ? 'icon-sequence' : mode === playMode.loop ? 'icon-loop' : 'icon-random'
       let props ={
         ...this.props,
+        ...this.props.player,
         modeIcon
       }
       return (
-        <WrapperComponent {...props} changeMode={this.changeMode} ref="wrapperComponent"/>
+        <WrapperComponent
+          {...props}
+          changeMode={this.changeMode}
+          toggleFavorite={this.toggleFavorite}
+          getFavoriteIcon={this.getFavoriteIcon}
+          ref="wrapperComponent"/>
       )
     }
   }
-  return connect(state => state.player, {
+  return connect(state => state, {
     set_playing,
     set_currentIndex,
     set_playMode,
-    set_playList
+    set_playList,
+    saveFavoriteList,
+    deleteFavoriteList
   }, null, {withRef: true})(PlayHoc)
 }
 

diff --git a/src/components/addSong/addSong.js b/src/components/addSong/addSong.js
@@ -2,8 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
-import {CSSTransition} from 'react-transition-group'
-
 import SearchBox from 'base/searchBox/searchBox'
 import Suggest from 'components/suggest/suggest'
 import Switch from 'base/switch/switch'
@@ -55,21 +53,11 @@ class AddSong extends React.Component {
     }
   }
 
-
   hide(e) {
     e.stopPropagation()
     this.props.hide()
   }
 
-  exit(el) {
-    // hack 由于render的style直接改变为none，导致动画无效
-    el.style.display = 'block'
-  }
-
-  exited(el) {
-    el.style.display = 'none'
-  }
-
   switch(i) {
     this.setState({
       currentIndex: i
@@ -102,82 +90,74 @@ class AddSong extends React.Component {
   render() {
     const {playHistory, searchHistory} = this.props
     return (
-      <CSSTransition
-        in={this.props.showFlag}
-        timeout={200}
-        classNames="fade"
-        onExit={(el) => this.exit(el)}
-        onExited={(el) => this.exited(el)}>
-        <div
-          className="add-song"
-          style={{'display': this.props.showFlag ? 'block' : 'none'}}
-          onClick={(e) => e.stopPropagation()}>
-          <div className="header">
-            <h1 className="title">添加歌曲到列表</h1>
-            <div className="close" onClick={this.hide}>
-              <i className="icon-close"></i>
-            </div>
+      <div
+        className={"add-song " + (this.props.showFlag ? 'fade' : '')}
+        onClick={(e) => e.stopPropagation()}>
+        <div className="header">
+          <h1 className="title">添加歌曲到列表</h1>
+          <div className="close" onClick={this.hide}>
+            <i className="icon-close"></i>
           </div>
-          <div className="search-box-wrapper">
-            <SearchBox
-              ref={this.props.searchRef}
-              placeHolder="搜索歌曲"
-              onInput={this.props.onQueryChange}></SearchBox>
-          </div>
-          <div className="shortcut" style={{"display": !this.props.query ? '' : 'none'}}>
-            <Switch
-              switches={this.state.switches}
-              currentIndex={this.state.currentIndex}
-              switch={this.switch}
-            ></Switch>
-            <div className="list-wrapper">
-              {
-                this.state.currentIndex === 0
-                ?
-                  <Scroll
-                    ref="songList"
-                    probeType={3}
-                    className="list-scroll"
-                    data={playHistory}
-                  >
-                    <div className="list-inner">
-                      <SongList songs={playHistory} select={this.selectSong}></SongList>
-                    </div>
-                  </Scroll>
-                :
-                  <Scroll
-                    ref="searchList"
-                    probeType={3}
-                    className="list-scroll"
-                    data={searchHistory}
-                  >
-                    <div className="list-inner">
-                      <SearchList
-                        deleteOne={this.props.deleteSearchHistory}
-                        selectItem={this.props.addQuery}
-                        searches={searchHistory}></SearchList>
-                    </div>
-                  </Scroll>
-              }
-            </div>
-          </div>
-          <div className="search-result" style={{'display': this.props.query ? '' : 'none'}}>
-            <Suggest
-              query={this.props.query}
-              showSinger={false}
-              selectItem={this.selectSuggest}
-              onBeforeScroll={this.props.blurInput}></Suggest>
+        </div>
+        <div className="search-box-wrapper">
+          <SearchBox
+            ref={this.props.searchRef}
+            placeHolder="搜索歌曲"
+            onInput={this.props.onQueryChange}></SearchBox>
+        </div>
+        <div className="shortcut" style={{"display": !this.props.query ? '' : 'none'}}>
+          <Switch
+            switches={this.state.switches}
+            currentIndex={this.state.currentIndex}
+            switch={this.switch}
+          ></Switch>
+          <div className="list-wrapper">
+            {
+              this.state.currentIndex === 0
+              ?
+                <Scroll
+                  ref="songList"
+                  probeType={3}
+                  className="list-scroll"
+                  data={playHistory}
+                >
+                  <div className="list-inner">
+                    <SongList songs={playHistory} select={this.selectSong}></SongList>
+                  </div>
+                </Scroll>
+              :
+                <Scroll
+                  ref="searchList"
+                  probeType={3}
+                  className="list-scroll"
+                  data={searchHistory}
+                >
+                  <div className="list-inner">
+                    <SearchList
+                      deleteOne={this.props.deleteSearchHistory}
+                      selectItem={this.props.addQuery}
+                      searches={searchHistory}></SearchList>
+                  </div>
+                </Scroll>
+            }
           </div>
-          <TopTip
-            ref="topTip"
-          >
-            <div className="tip-title">
-              <i className="icon-ok"></i>
-              <span className="text">1首歌曲已经添加到播放列表</span>
-            </div>
-          </TopTip>
         </div>
-      </CSSTransition>
+        <div className="search-result" style={{'display': this.props.query ? '' : 'none'}}>
+          <Suggest
+            query={this.props.query}
+            showSinger={false}
+            selectItem={this.selectSuggest}
+            onBeforeScroll={this.props.blurInput}></Suggest>
+        </div>
+        <TopTip
+          ref="topTip"
+        >
+          <div className="tip-title">
+            <i className="icon-ok"></i>
+            <span className="text">1首歌曲已经添加到播放列表</span>
+          </div>
+        </TopTip>
+      </div>
     )
   }
 }

diff --git a/src/components/addSong/addSong.styl b/src/components/addSong/addSong.styl
@@ -8,6 +8,10 @@
   width: 100%
   z-index: 200
   background: $color-background
+  transform translate3d(100%, 0, 0)
+  transition all 0.3s
+  &.fade
+    transform translate3d(0, 0, 0)
   .header
     position: relative
     height: 44px

diff --git a/src/components/playList/playList.js b/src/components/playList/playList.js
@@ -37,13 +37,13 @@ class PlayList extends React.Component{
   }
 
   shouldComponentUpdate(nextProps, nextState) {
+    const oldSong = this.props.currentSong
     const newSong = nextProps.currentSong
     const sequenceList = nextProps.sequenceList
 
-    // if (!nextState.showFlag || newSong.id === oldSong.id) {
-    //   return false
-    // }
-    this.scrollToCurrent(newSong, sequenceList)
+    if (newSong.id !== oldSong.id) {
+      this.scrollToCurrent(newSong, sequenceList)
+    }
     return true
   }
 
@@ -100,6 +100,10 @@ class PlayList extends React.Component{
     }, 200)
   }
 
+  toggleFavorite(v, e) {
+    e.stopPropagation()
+    this.props.toggleFavorite(v)
+  }
   showConfirm() {
     this.refs.confirm.show()
   }
@@ -164,8 +168,8 @@ class PlayList extends React.Component{
                         <li className="item" onClick={() => this.selectItem(v, i)}>
                           <i className={"current " + (currentSong.id === v.id ? 'icon-play' : '')}></i>
                           <span className="text">{v.name}</span>
-                          <span className="like">
-                            <i className="icon-not-favorite"></i>
+                          <span className="like" onClick={(e) => this.toggleFavorite(v, e)}>
+                            <i className={this.props.getFavoriteIcon(v)}></i>
                           </span>
                           <span className="delete" onClick={(e) => this.deleteOne(v, e)}>
                             <i className="icon-delete"></i>

diff --git a/src/components/player/player.js b/src/components/player/player.js
@@ -545,7 +545,7 @@ class Player extends React.Component{
                   <i className="icon-next" onClick={this.next}></i>
                 </div>
                 <div className="icon i-right">
-                  <i className="icon icon-not-favorite"></i>
+                  <i className={this.props.getFavoriteIcon(currentSong)} onClick={() => this.props.toggleFavorite(currentSong)}></i>
                 </div>
               </div>
             </div>