Merge branch 'feature/motion' into develop

package.json

@@ -134,6 +134,7 @@
     "react-dropdowns": "^0.2.1",
     "react-list": "^0.7.15",
     "react-modal": "^0.6.1",
+    "react-motion": "^0.4.2",
     "react-redux": "^4.0.5",
     "react-router": "^2.0.0",
     "react-router-redux": "^3.0.0",

src/components/PlayList/PlayList.js

@@ -0,0 +1,75 @@
+import React, { Component, PropTypes } from 'react';
+import ReactList from 'react-list';
+import { Motion, spring } from 'react-motion';
+import styles from './PlayList.scss';
+
+export default class PlayList extends Component {
+  static propTypes = {
+    playList: PropTypes.array.isRequired,
+    onJump: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = { expand: false };
+  }
+
+  handleCollapse = () => {
+    this.setState({ expand: !this.state.expand });
+  }
+
+  renderSongName = (index, key) => {
+    const renderSong = this.props.playList[index];
+
+    return (
+      <div className="songItem" key={key} onClick={this.props.onJump(renderSong)} >
+        {`${index + 1}. ${renderSong.name} - ${renderSong.artist}`}
+      </div>
+    );
+  }
+
+  renderContent = (expand, playList) => ({ top }) => {
+    const contentStyle = {
+      top: `${top}rem`
+    };
+
+    return (
+      <div className={styles.playList} style={contentStyle}>
+        <div className="listPanel">
+          <ReactList
+            itemRenderer={this.renderSongName}
+            length={playList.length}
+            updateWhenThisValueChanges={playList}
+          />
+        </div>
+        <div className="indicator" onClick={this.handleCollapse} >
+          <i className="material-icons" >
+            { expand ? 'eject' : 'play_for_work' }
+          </i>
+        </div>
+      </div>
+    );
+  }
+
+  renderStyles = (expand) => {
+    const defaultStyle = {
+      top: spring(-20, { damping: 14, stiffness: 120 }),
+    };
+    const motionStyle = {
+      top: spring(0, { damping: 14 })
+    };
+
+    return expand ? motionStyle : defaultStyle;
+  }
+
+  render() {
+    const { playList } = this.props;
+    const { expand } = this.state;
+    return (
+      <Motion style={this.renderStyles(expand)}>
+        {this.renderContent(expand, playList)}
+      </Motion>
+    );
+  }
+}

src/components/PlayList/PlayList.scss

@@ -0,0 +1,47 @@
+.playList {
+  position: fixed;
+  left: 0;
+  top: -20rem;
+  width: 100%;
+  height: 20rem;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0px 1px 3px #CCC;
+
+  :global {
+    .listPanel {
+      max-height: 18rem;
+      overflow: auto;
+
+      .songItem {
+        font-size: 0.8rem;
+        border: 0.1rem #CCC solid;
+        padding: 1rem 0.5rem;
+        margin: 0.4rem 0.8rem;
+        color: #9b9b9b;
+        font-weight: bold;
+        cursor: pointer;
+
+        &:hover {
+          background: #ceecd2;
+          color: #4a4a4a;
+          transition: .5s;
+        }
+      }
+    }
+    .indicator {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      width: 2rem;
+      height: 2rem;
+      background: #6bbd7a;
+      text-align: center;
+      line-height: 3rem;
+      border-radius: 100%;
+      color: white;
+      transform: translate(-50%, 50%);
+      box-shadow: 0px 1px 3px #CCC;
+      cursor: pointer;
+    }
+  }
+}

src/components/Player/Player.js

@@ -1,14 +1,13 @@
 import React, { Component, PropTypes } from 'react';
-import ReactList from 'react-list';
 import moment from 'moment';
+import PlayList from '../PlayList/PlayList';
 import Processbar from './Processbar/Processbar';
 import Buttonbar from './Buttonbar/Buttonbar';
 import styles from './Player.scss';
 
 export default class Player extends Component {
   static propTypes = {
     song: PropTypes.object.isRequired,
-    listTitle: PropTypes.string.isRequired,
     playList: PropTypes.array.isRequired,
     playing: PropTypes.bool.isRequired,
     onBan: PropTypes.func.isRequired,
@@ -54,41 +53,19 @@ export default class Player extends Component {
     if (this.state.playInterval) clearInterval(this.state.playInterval);
   }
 
-  renderSongName = (index, key) => {
-    const renderSong = this.props.playList[index];
-
-    return (
-      <div className="songName" key={key} onClick={this.props.onJump(renderSong)} >
-        {renderSong.name}
-      </div>
-    );
-  }
-
   render() {
     const { step, buffer } = this.state;
-    const { song, listTitle, playList, playing } = this.props;
+    const { song, playList, playing } = this.props;
 
     const remainTime = 1000.0 * (song.size - step);
 
     return (
       <div className={styles.player}>
+        <PlayList playList={playList} onJump={this.props.onJump} />
         <div className="songCover"
           style={{ backgroundImage: `url(${song.cover})` }}
         />
         <div className="songInfoBar" >
-          <div className="songNameList">
-            <div className="playListTitle">
-              <i className="material-icons" > details </i>
-              {listTitle}
-            </div>
-            <div className="playListPanel">
-              <ReactList
-                itemRenderer={this.renderSongName}
-                length={playList.length}
-                updateWhenThisValueChanges={playList}
-              />
-            </div>
-          </div>
           <h2 className="songNameTitle" > {song.name} </h2>
           <h4 className="artistName"> {song.artist} </h4>
           <span className="songTime">

src/components/Player/Player.scss

@@ -1,5 +1,3 @@
-@import '~sass-flex-mixin/flex';
-
 .player {
   max-width: 15rem;
 
@@ -18,56 +16,6 @@
       margin-bottom: 0.6rem;
     }
 
-    .songNameList {
-      height: 1rem;
-      text-align: center;
-      margin-top: 1.6rem;
-      margin-bottom: 1rem;
-      transition: .5s;
-
-      &:hover {
-        height: 4rem;
-
-        .playListPanel {
-          opacity: 1;
-        }
-      }
-
-      .playListTitle {
-        opacity: 0.3;
-        font-size: 0.6rem;
-        margin-bottom: 0.4rem;
-
-        > i {
-          font-size: 0.4rem;
-          margin-right: 0.2rem;
-        }
-      }
-
-      .playListPanel {
-        overflow: auto;
-        opacity: 0;
-        max-height: 4rem;
-        transition: .5s;
-      }
-
-    }
-
-    .songName {
-      font-size: 0.6rem;
-      color: #9b9b9b;
-      word-wrap: break-word;
-      cursor: pointer;
-      padding: 0.2rem;
-      transition: .3s;
-
-      &:hover {
-        color: #ceecd2;
-        padding: 0.4rem;
-        font-size: 0.8rem;
-      }
-    }
-
     .songNameTitle {
       color: #4a4a4a;
       font-size: 1.2rem;

src/components/index.js

@@ -1 +1,2 @@
 export Player from './Player/Player';
+export PlayList from './PlayList/PlayList';

src/containers/Channel/Channel.js

@@ -87,10 +87,9 @@ export default class Channel extends Component {
     const { song, playList, playing } = this.props;
 
     return (
-      <div className={styles.player}>
+      <div className={styles.content}>
         <Player
           song={song}
-          listTitle="听过的"
           playList={playList}
           playing={playing}
           onEnd={this.onNext('p')}

src/containers/Channel/Channel.scss

@@ -1,6 +1,6 @@
 @import '~sass-flex-mixin/flex';
 
-.player {
+.content {
   @extend %flexbox;
   @include justify-content(center);
   @include align-items(center);

src/containers/Daily/Daily.js

@@ -99,7 +99,6 @@ export default class Favorite extends Component {
           <div className="player">
             <Player
               song={song}
-              listTitle="每日歌单"
               playList={playList}
               playing={playing}
               onControl={this.onControl}

src/containers/Favorite/Favorite.js

@@ -99,7 +99,6 @@ export default class Favorite extends Component {
           <div className="player">
             <Player
               song={song}
-              listTitle="红心的"
               playList={playList}
               playing={playing}
               onControl={this.onControl}

src/containers/HomePage/HomePage.scss

@@ -4,7 +4,7 @@
   @extend %flexbox;
   @include justify-content(flex-end);
 
-  position: absolute;
+  position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;

src/containers/HomePage/Navbar/Navbar.scss

@@ -11,6 +11,7 @@
   @extend %flexbox;
   height: 3.5rem;
   padding: 0.6rem;
+  margin-top: 1rem;
   margin-bottom: 1rem;
 }