完成播放功能/歌词展示等

Author: coderwhy

src/assets/css/base.css

@@ -84,6 +84,10 @@ body, textarea, select, input, button {
   background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/sprite_icon2.png) no-repeat 0 9999px;
 }
 
+.sprite_icon3 {
+  background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/sprite_icon3.png) no-repeat 0 9999px;
+}
+
 .sprite_button {
   background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/sprite_button.png) no-repeat 0 9999px;
 }
@@ -96,6 +100,14 @@ body, textarea, select, input, button {
   background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/sprite_table.png) no-repeat 0 9999px;
 }
 
+.sprite_playbar {
+  background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/playbar_sprite.png) no-repeat 0 9999px;
+}
+
+.sprite_playlist {
+  background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/playlist_sprite.png) no-repeat 0 9999px;
+}
+
 .image_cover {
   position: absolute;
   left: 0;
@@ -105,3 +117,13 @@ body, textarea, select, input, button {
   text-indent: -9999px;
   background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/sprite_cover.png) no-repeat -145px -57px;
 }
+
+
+.ant-message .ant-message-notice-content {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 60px;
+  background-color: rgba(0, 0, 0, .5);
+  color: #fff;
+}

src/assets/img/playbar_sprite.png

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+
+import { Pagination } from 'antd';
+import { PaginationWrapper } from './style';
+
+export default memo(function HYPagination(props) {
+  const { currentPage, total, onPageChange } = props;
+
+  // render function
+  function itemRender(current, type, originalElement) {
+    if (type === 'prev') {
+      return <button className="control prev"> &lt; 上一页</button>;
+    }
+    if (type === 'next') {
+      return <button className="control next">上一页 &gt;</button>;
+    }
+    return originalElement;
+  }
+
+  return (
+    <PaginationWrapper>
+      <Pagination className="pagination"
+        size="small"
+        current={currentPage}
+        defaultCurrent={1}
+        total={total}
+        pageSize={35}
+        showSizeChanger={false}
+        itemRender={itemRender}
+        onChange={onPageChange} />
+    </PaginationWrapper>
+  )
+})

src/assets/img/playlist_sprite.png

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const PaginationWrapper = styled.div`
+  .pagination {
+    margin: 30px 0;
+    text-align: center;
+
+    .control {
+      width: 69px;
+      height: 24px;
+      line-height: 22px;
+      text-align: center;
+      border: 1px solid #ccc;
+      border-radius: 2px;
+      margin: 0 5px;
+      color: #333;
+
+      &:disabled {
+        color: #999;
+      }
+    }
+
+    .ant-pagination-item {
+      border: 1px solid #ccc !important;
+      margin: 0 5px;
+      border-radius: 3px;
+
+      a {
+        font-size: 12px;
+      }
+
+      &.ant-pagination-item-active {
+        background-color: #c20c0c;
+        border-color: #A2161B;
+        a {
+          color: #fff;
+        }
+      }
+    }
+  }
+`

src/assets/img/playpanel_bg.png

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+
+import { OperationBarWrapper } from './style';
+
+export default memo(function HYSongOperationBar(props) {
+  const { favorTitle, shareTitle, downloadTitle, commentTitle } = props;
+
+  return (
+    <OperationBarWrapper>
+      <span className="play">
+        <a href="/abc" className="play-icon sprite_button">
+          <span className="play sprite_button">
+            <i className="sprite_button"></i>
+            <span>播放</span>
+          </span>
+        </a>
+        <a href="/abc" className="add-icon sprite_button">+</a>
+      </span>
+      <a href="/abc" className="item sprite_button">
+        <i className="icon favor-icon sprite_button">{favorTitle}</i>
+      </a>
+      <a href="/abc" className="item sprite_button">
+        <i className="icon share-icon sprite_button">{shareTitle}</i>
+      </a>
+      <a href="/abc" className="item sprite_button">
+        <i className="icon download-icon sprite_button">{downloadTitle}</i>
+      </a>
+      <a href="/abc" className="item sprite_button">
+        <i className="icon comment-icon sprite_button">{commentTitle}</i>
+      </a>
+    </OperationBarWrapper>
+  )
+})

src/assets/img/progress_bar.png

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+export const OperationBarWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  .play {
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+
+    .play-icon {
+      display: inline-block;
+      height: 31px;
+      line-height: 31px;
+      background-position: right -428px;
+
+      .play {
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 7px 0 8px;
+        background-position: 0 -387px;
+
+        i {
+          display: inline-block;
+          width: 20px;
+          height: 18px;
+          margin: -2px 2px 0;
+          background-position: 0 -1622px;
+        }
+      }
+    }
+
+    .add-icon {
+      display: inline-block;
+      width: 31px;
+      height: 31px;
+      margin-left: -3px;
+      padding-right: 0;
+      background-position: 0 -1588px;
+      text-indent: -9999px;
+    }
+  }
+
+  .item {
+    display: inline-block;
+    height: 31px;
+    margin-right: 6px;
+    padding-right: 5px;
+    background-position: right -1020px;
+    
+    .icon {
+      display: inline-block;
+      height: 31px;
+      line-height: 31px;
+      padding: 0 7px 0 28px;
+      font-family: simsun;
+    }
+
+    .favor-icon {
+      background-position: 0 -977px;
+    }
+
+    .share-icon {
+      background-position: 0 -1225px;
+    }
+
+    .download-icon {
+      background-position: 0 -2761px;
+    }
+
+    .comment-icon {
+      background-position: 0 -1465px;
+    }
+  }
+`

src/assets/img/singer_sprite.png

@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+
+import { HeaderWrapper } from './style';
+
+export default memo(function HYThemeHeaderPlayer(props) {
+  const { title } = props;
+
+  return (
+    <HeaderWrapper>
+      <h3>{title}</h3>
+    </HeaderWrapper>
+  )
+})

src/assets/img/sprite_icon3.png

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div`
+  h3 {
+    height: 23px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #ccc;
+    font-size: 12px;
+    font-weight: 700;
+    color: #333;
+  }
+`

src/assets/img/wrap-bg.png

@@ -1,4 +1,7 @@
 import React, { memo } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { getSongDetailAction } from '@/pages/player/store';
 
 import {
   getSizeImage
@@ -9,9 +12,18 @@ import {
 } from "./style";
 
 export default memo(function HYTopRanking(props) {
+  // props and state
   const { info } = props;
   const tracks = (info.tracks && info.tracks.slice(0, 10)) || [];
 
+  // redux hooks
+  const dispatch = useDispatch();
+
+  // handle code
+  const playItem = (id) => {
+    dispatch(getSongDetailAction(id));
+  };
+
   return (
     <TopRankingWrapper>
       <div className="header">
@@ -34,6 +46,11 @@ export default memo(function HYTopRanking(props) {
               <div key={item.id} className="list-item">
                 <div className="rank">{index + 1}</div>
                 <div className="name">{item.name}</div>
+                <div className="operate">
+                  <button className="sprite_02 btn play" onClick={e => playItem(item.id)}></button>
+                  <button className="sprite_icon2 btn addto"></button>
+                  <button className="sprite_02 btn favor"></button>
+                </div>
               </div>
             )
           })

src/components/pagination/index.js

@@ -43,6 +43,7 @@ export const TopRankingWrapper = styled.div`
 
   .list {
     .list-item {
+      position: relative;
       display: flex;
       align-items: center;
       height: 32px;
@@ -61,6 +62,41 @@ export const TopRankingWrapper = styled.div`
       .name {
         color: #000;
       }
+
+      .operate {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        right: 0;
+        display: none;
+
+        .btn {
+          width: 17px;
+          height: 17px;
+          margin-right: 8px;
+          cursor: pointer;
+        }
+
+        .play {
+          background-position: -267px -268px;
+        }
+
+        .addto {
+          position: relative;
+          top: 2px;
+          background-position: 0 -700px;
+        }
+
+        .favor {
+          background-position: -297px -268px;
+        }
+      }
+
+      &:hover {
+        .operate {
+          display: block;
+        }
+      }
     }
   }
 

src/components/pagination/style.js

@@ -1,24 +1,34 @@
-import React, { memo, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { memo, useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 
 import { getTopAlbumsAction } from '../../store/actionCreators';
 
 import HYThemeHeaderNormal from "@/components/theme-header-normal";
 import HYAlbumCover from "@/components/album-cover";
+import HYPagination from '@/components/pagination';
 import {
   TopAlbumWrapper
 } from './style';
 
 export default memo(function HYTopAlbum() {
-  const { topAlbums } = useSelector(state => ({
-    topAlbums: state.getIn(["album", "topAlbums"])
-  }))
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { topAlbums, total } = useSelector(state => ({
+    topAlbums: state.getIn(["album", "topAlbums"]),
+    total: state.getIn(["album", "topTotal"])
+  }), shallowEqual);
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(getTopAlbumsAction());
+    dispatch(getTopAlbumsAction(1));
   }, [dispatch]);
 
+
+  const onPageChange = (page, pageSize) => {
+    setCurrentPage(page);
+    dispatch(getTopAlbumsAction(page))
+  }
+
   return (
     <TopAlbumWrapper>
       <HYThemeHeaderNormal title="全部新碟" />
@@ -33,6 +43,10 @@ export default memo(function HYTopAlbum() {
           })
         }
       </div>
+      <HYPagination currentPage={currentPage} 
+                    total={total} 
+                    pageSize={30}
+                    onPageChange={onPageChange}/>
     </TopAlbumWrapper>
   )
 })