Merge branch 'feature/favorite-channel' into develop

app/components/Player/Buttonbar/Buttonbar.js

@@ -0,0 +1,60 @@
+import React, { Component, PropTypes } from 'react';
+import cx from 'classnames';
+import styles from './Buttonbar.scss';
+
+export default class Buttonbar extends Component {
+  static propTypes = {
+    onBan: PropTypes.func.isRequired,
+    onControl: PropTypes.func.isRequired,
+    onNext: PropTypes.func.isRequired,
+    onTaste: PropTypes.func.isRequired,
+    song: PropTypes.object.isRequired,
+    playing: PropTypes.bool,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  renderFavorite = (favorite, onClick) => {
+    const title = favorite ? '取消喜欢' : '喜欢';
+
+    return (
+      <button onClick={onClick} title={title} >
+        <i className={cx('material-icons', { favorite })} > favorite </i>
+      </button>
+    );
+  }
+
+  renderPlay = (playing, onClick) => {
+    const icon = playing ? 'pause' : 'play_arrow';
+    const title = playing ? '暂停' : '播放';
+
+    return (
+      <button onClick={onClick} title={title}>
+        <i className="material-icons" > {icon} </i>
+      </button>
+    );
+  }
+
+  render() {
+    const { song, playing } = this.props;
+
+    return (
+      <div className={styles.buttonBar}>
+        <div className="tasteButtonGroup">
+          {this.renderFavorite(song.favorite, this.props.onTaste)}
+          <button onClick={this.props.onBan} title="不再播放" >
+            <i className="material-icons" > cancel </i>
+          </button>
+        </div>
+        <div className="controlButtonGroup">
+          {this.renderPlay(playing, this.props.onControl)}
+          <button onClick={this.props.onNext} title="下一首" >
+            <i className="material-icons" > skip_next </i>
+          </button>
+        </div>
+      </div>
+    );
+  }
+}

app/containers/HomePage/Content/Content.scss → app/components/Player/Buttonbar/Buttonbar.scss

@@ -1,21 +1,16 @@
 @import '~sass-flex-mixin/flex';
 
-.player {
+.buttonBar {
   @extend %flexbox;
-  @include justify-content(center);
-  @include align-items(center);
-}
-
-.controlBar {
-  @extend %flexbox;
-  @include justify-content(between);
+  @include justify-content;
   @include align-items(center);
 
+  min-width: 15rem;
   :global {
     .tasteButtonGroup {
       @include flex-grow(1);
 
-      > a {
+      > button {
         color: black;
 
         > i {
@@ -31,16 +26,15 @@
     }
 
     .controlButtonGroup {
-    @include flex-grow(1);
-      text-align: right;
+      @include flex-basis(1);
 
-      > a {
+      > button {
         color: black;
 
         > i {
           font-size: 1.2rem;
           font-weight: 700;
-          margin: 1rem 0.5rem;
+          margin-left: 0.5rem;
         }
       }
     }

app/components/Player/Player.js

@@ -1,13 +1,21 @@
 import React, { Component, PropTypes } from 'react';
+import ReactList from 'react-list';
 import moment from 'moment';
 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,
+    playList: PropTypes.array.isRequired,
     playing: PropTypes.bool.isRequired,
-    onEnd: PropTypes.func,
+    onBan: PropTypes.func.isRequired,
+    onControl: PropTypes.func.isRequired,
+    onEnd: PropTypes.func.isRequired,
+    onNext: PropTypes.func.isRequired,
+    onTaste: PropTypes.func.isRequired,
+    onJump: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -45,10 +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 } = this.props;
+    const { song, playList, playing } = this.props;
 
     const remainTime = 1000.0 * (song.size - step);
 
@@ -58,7 +75,19 @@ export default class Player extends Component {
           style={{ backgroundImage: `url(${song.cover})` }}
         />
         <div className="songInfoBar" >
-          <h2 className="songName"> {song.name} </h2>
+          <div className="songNameList">
+            <div className="playListTitle">
+              <i className="material-icons" > details </i>
+              播放列表
+            </div>
+            <div className="playListPanel">
+              <ReactList
+                itemRenderer={this.renderSongName}
+                length={playList.length}
+              />
+            </div>
+          </div>
+          <h2 className="songNameTitle" > {song.name} </h2>
           <h4 className="artistName"> {song.artist} </h4>
           <span className="songTime">
             -{moment.utc(remainTime).format('mm:ss')}
@@ -71,6 +100,7 @@ export default class Player extends Component {
           onEnded={this.props.onEnd}
         />
         <Processbar total={song.size} step={step} buffer={buffer} />
+        <Buttonbar {...this.props } playing={playing} />
       </div>
     );
   }

app/components/Player/Player.scss

@@ -1,12 +1,14 @@
+@import '~sass-flex-mixin/flex';
+
 .player {
-  max-width: 20rem;
+  max-width: 15rem;
 
   :global {
     .songCover {
       background-repeat: no-repeat;
       background-size: cover !important;
       background-position: center;
-      height: 20rem;
+      height: 15rem;
       border: 0.1rem solid #ceecd2;
       border-radius: 100%;
       margin-top: 2rem;
@@ -16,12 +18,60 @@
       margin-bottom: 0.6rem;
     }
 
-    .songName {
-      font-size: 1.4rem;
-      font-weight: 500;
+    .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;
+      font-weight: 500;
     }
 
     .artistName {

app/components/Player/Processbar/Processbar.scss

@@ -11,7 +11,7 @@
 
 .processbar {
   position: relative;
-  width: 20rem;
+  width: 15rem;
 
   :global {
     .default {

app/containers/App/App.scss

@@ -2,3 +2,10 @@
 body {
   font-family: Helvetica, Arial, "Hiragino Sans GB", sans-serif;
 }
+
+button {
+  outline: none;
+  border: none;
+  padding: 0;
+  background: none;
+}

app/containers/Auth/Signin/Form.js

@@ -59,9 +59,9 @@ export default class Form extends Component {
         </div>
         <div className="captchaField">
           <input type="text" className="field" placeholder="验证码" {...captchaSolution } />
-          <a href="#" onClick={this.props.refreshCaptcha}>
+          <button onClick={this.props.refreshCaptcha}>
             { captchaCode && <img src={`http://douban.fm/misc/captcha?size=m&id=${captchaCode}`} /> }
-          </a>
+          </button>
         </div>
         <div className="toolbar">
           { this.renderErrorMessage() }

app/containers/Auth/Signin/Signin.js

@@ -62,15 +62,15 @@ export default class Signin extends Component {
     return (
       <Modal isOpen={show} style={modalStyle} >
         <div className={styles.signinModal}>
-          <a href="#" className="closeButton" onClick={this.hideModal}>X</a>
+          <button className="closeButton" onClick={this.hideModal}>X</button>
           <Form
             onSubmit={this.loginUser}
             hideModal={this.hideModal}
             captchaCode={captchaCode}
             refreshCaptcha={this.refreshCaptcha}
           />
           <div className="footer">
-            <a href="#" className="registerLink" onClick={this.goToRegister}>去豆瓣注册</a>
+            <button className="registerLink" onClick={this.goToRegister}>去豆瓣注册</button>
           </div>
         </div>
       </Modal>