├── .gitignore
├── README.md
├── craco.config.js
├── package.json
├── public
├── favicon.ico
└── index.html
├── src
├── App.js
├── assets
│ ├── css
│ │ └── base.css
│ └── img
│ │ ├── banner-control-left.png
│ │ ├── banner-control-right.png
│ │ ├── banner_sprite.png
│ │ ├── download.png
│ │ ├── friend_sprite.jpg
│ │ ├── mine_sprite.png
│ │ ├── playbar_sprite.png
│ │ ├── playlist_sprite.png
│ │ ├── playpanel_bg.png
│ │ ├── progress_bar.png
│ │ ├── radio_slide.png
│ │ ├── recommend-top-bg.png
│ │ ├── singer_sprite.png
│ │ ├── sprite_01.png
│ │ ├── sprite_02.png
│ │ ├── sprite_button.png
│ │ ├── sprite_button2.png
│ │ ├── sprite_cover.png
│ │ ├── sprite_footer_01.png
│ │ ├── sprite_footer_02.png
│ │ ├── sprite_icon.png
│ │ ├── sprite_icon2.png
│ │ ├── sprite_icon3.png
│ │ ├── sprite_table.png
│ │ └── wrap-bg.png
├── common
│ └── global-style.js
├── components
│ ├── album-cover
│ │ ├── index.js
│ │ └── style.js
│ ├── app-footer
│ │ ├── index.js
│ │ └── style.js
│ ├── app-header
│ │ ├── index.js
│ │ └── style.js
│ ├── pagination
│ │ ├── index.js
│ │ └── style.js
│ ├── radio-ranking-cover
│ │ ├── index.js
│ │ └── style.js
│ ├── radio-recommend-cover
│ │ ├── index.js
│ │ └── style.js
│ ├── song-operation-bar
│ │ ├── index.js
│ │ └── style.js
│ ├── theme-cover
│ │ ├── index.js
│ │ └── style.js
│ ├── theme-header-normal
│ │ ├── index.js
│ │ └── style.js
│ ├── theme-header-player
│ │ ├── index.js
│ │ └── style.js
│ ├── theme-header-rcm
│ │ ├── index.js
│ │ └── style.js
│ ├── theme-header-small
│ │ ├── index.js
│ │ └── style.js
│ ├── theme-header-song
│ │ ├── index.js
│ │ └── style.js
│ └── top-ranking
│ │ ├── index.js
│ │ └── style.js
├── index.js
├── pages
│ ├── discover
│ │ ├── c-pages
│ │ │ ├── album
│ │ │ │ ├── c-cpns
│ │ │ │ │ ├── hot-album
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ └── top-album
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ ├── index.js
│ │ │ │ ├── store
│ │ │ │ │ ├── actionCreators.js
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── reducer.js
│ │ │ │ └── style.js
│ │ │ ├── artist
│ │ │ │ ├── c-cpns
│ │ │ │ │ ├── artist-category
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ └── artist-list
│ │ │ │ │ │ ├── c-cpns
│ │ │ │ │ │ ├── alpha-list
│ │ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ │ └── style.js
│ │ │ │ │ │ └── artist-item
│ │ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ │ └── style.js
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ ├── index.js
│ │ │ │ ├── store
│ │ │ │ │ ├── actionCreators.js
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── reducer.js
│ │ │ │ └── style.js
│ │ │ ├── djradio
│ │ │ │ ├── c-cpns
│ │ │ │ │ ├── radio-category
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── radio-ranking
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ └── radio-recommend
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ ├── index.js
│ │ │ │ ├── store
│ │ │ │ │ ├── actionCreators.js
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── reducer.js
│ │ │ │ └── style.js
│ │ │ ├── ranking
│ │ │ │ ├── c-cpns
│ │ │ │ │ ├── ranking-header
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── ranking-list
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ └── top-ranking
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ ├── index.js
│ │ │ │ ├── store
│ │ │ │ │ ├── actionCreators.js
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── reducer.js
│ │ │ │ └── style.js
│ │ │ ├── recommend
│ │ │ │ ├── c-cpns
│ │ │ │ │ ├── hot-radio
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── hot-recommend
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── new-album
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── ranking-list
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── settle-singer
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ ├── top-banner
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ │ └── user-login
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── style.js
│ │ │ │ ├── index.js
│ │ │ │ ├── store
│ │ │ │ │ ├── actionCreators.js
│ │ │ │ │ ├── constants.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── reducer.js
│ │ │ │ └── style.js
│ │ │ └── songs
│ │ │ │ ├── c-cpns
│ │ │ │ ├── songs-category
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── style.js
│ │ │ │ ├── songs-header
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── style.js
│ │ │ │ └── songs-list
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── style.js
│ │ │ │ ├── index.js
│ │ │ │ ├── store
│ │ │ │ ├── actionCreators.js
│ │ │ │ ├── constants.js
│ │ │ │ ├── index.js
│ │ │ │ └── reducer.js
│ │ │ │ └── style.js
│ │ ├── index.js
│ │ └── style.js
│ ├── friend
│ │ ├── index.js
│ │ └── style.js
│ ├── main
│ │ └── index.js
│ ├── mine
│ │ ├── index.js
│ │ └── style.js
│ └── player
│ │ ├── app-play-bar
│ │ ├── index.js
│ │ └── style.js
│ │ ├── app-play-panel
│ │ ├── c-cpns
│ │ │ ├── lyric-panel
│ │ │ │ ├── index.js
│ │ │ │ └── style.js
│ │ │ ├── play-header
│ │ │ │ ├── index.js
│ │ │ │ └── style.js
│ │ │ └── play-list
│ │ │ │ ├── index.js
│ │ │ │ └── style.js
│ │ ├── index.js
│ │ └── style.js
│ │ ├── c-cpns
│ │ ├── player-comment
│ │ │ └── index.js
│ │ ├── player-info
│ │ │ ├── index.js
│ │ │ └── style.js
│ │ ├── player-relevant
│ │ │ ├── index.js
│ │ │ └── style.js
│ │ └── player-songs
│ │ │ ├── index.js
│ │ │ └── style.js
│ │ ├── index.js
│ │ ├── store
│ │ ├── actionCreators.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ └── reducer.js
│ │ └── style.js
├── router
│ └── index.js
├── services
│ ├── album.js
│ ├── artist.js
│ ├── axios.js
│ ├── djradio.js
│ ├── local-data.js
│ ├── player.js
│ ├── ranking.js
│ ├── recommend.js
│ └── songs.js
├── store
│ ├── index.js
│ └── reducer.js
└── utils
│ ├── format-utils.js
│ ├── handle-data.js
│ ├── lrc-parse.js
│ └── ui-helper.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React实战之云音乐项目
2 |
3 | > 如果觉得不错，或者对你有帮助，点一个star~ coderwhy
4 |
5 | ### 1.1. 项目简介
6 |
7 | 使用React编写的云音乐PC Web项目，接口来源于开源的接口，自己已经做了部署。
8 |
9 | 项目已经完成功能如下：（你可以下载下来自己体验一下）
10 |
11 | 推荐页面：
12 |
13 | * 轮播图
14 | * 热门推荐
15 | * 新碟上架
16 | * 榜单
17 | * 等等
18 |
19 | 
20 |
21 | 
22 |
23 | 歌曲播放：
24 |
25 | * 目前做了榜单中歌曲的点击播放；
26 | * 事实上其他页面只要将歌曲的id传入到redux中就可以，整个逻辑已经打通；
27 | * 做了歌曲的各种控制（暂停、播放、上一首、下一首、进度改变）；
28 | * 做了播放循序切换：顺序播放、随机播放、单曲循环；
29 | * 做了歌词的解析、展示、滚动；
30 |
31 | 
32 |
33 | 排行榜页面：
34 |
35 | * 各种榜单的切换；
36 |
37 | 
38 |
39 | 歌单页面：
40 |
41 | * 选择分类、选择分类后根据分类切换歌单；
42 | * 根据分类，歌单列表的展示；
43 | * 分页功能；
44 |
45 | 
46 |
47 | 主播电台：
48 |
49 | * 电台分类的展示、滚动；
50 | * 不同分类展示不同的数据；
51 | * 电台排行榜展示、分页；
52 |
53 | 
54 |
55 | 歌手页面：
56 |
57 | * 各种歌手分类（没找到接口，还自定义了一些数据）
58 | * 歌手字母分类、对应歌手展示；
59 |
60 | 
61 |
62 | 新碟上架页面：
63 |
64 | * 热门新碟；
65 | * 全部新碟、分页展示；
66 |
67 | 
68 |
69 |
70 |
71 | ### 1.2. 项目规范
72 |
73 | **项目规范：项目中有一些开发规范和代码风格**
74 |
75 | * 1.文件夹、文件名称统一小写、多个单词以连接符（-）连接；
76 | * 2.JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰；
77 | * 3.CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS、局部采用styled-component）;
78 | * 4.整个项目不再使用class组件，统一使用函数式组件，并且全面使用Hooks；
79 | * 5.所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；
80 | * 6.组件内部的状态，使用useState、useReducer；业务数据全部放在redux中管理；
81 | * 7.函数组件内部基本按照如下顺序编写代码：
82 | * 组件内部state管理；
83 | * redux的hooks代码；
84 | * 其他组件hooks代码；
85 | * 其他逻辑代码；
86 | * 返回JSX代码；
87 | * 8.redux代码规范如下：
88 | * redux结合ImmutableJS
89 | * 每个模块有自己独立的reducer，通过combineReducer进行合并；
90 | * 异步请求代码使用redux-thunk，并且写在actionCreators中；
91 | * redux直接采用redux hooks方式编写，不再使用connect；
92 | * 9.网络请求采用axios
93 | * 对axios进行二次封装；
94 | * 所有的模块请求会放到一个请求文件中单独管理；
95 | * 10.项目使用AntDesign
96 | * 项目中某些AntDesign中的组件会被拿过来使用；
97 | * 但是多部分组件还是自己进行编写；
98 | * 其他规范在项目中根据实际情况决定和编写；
99 |
100 |
101 |
102 | ### 1.3. 项目运行
103 |
104 | clone项目：
105 |
106 | ```
107 | git clone https://github.com/coderwhy/hy-react-web-music.git
108 | ```
109 |
110 | 安装项目依赖：
111 |
112 | ```shell
113 | yarn install
114 | ```
115 |
116 | 项目运行：
117 |
118 | ```shell
119 | yarn start
120 | ```
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const resolve = dir => path.resolve(__dirname, dir);
4 |
5 | module.exports = {
6 | webpack: {
7 | alias: {
8 | '@': resolve("src"),
9 | 'components': resolve("src/components")
10 | }
11 | }
12 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hy-react-music",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@craco/craco": "^5.6.4",
7 | "@testing-library/jest-dom": "^4.2.4",
8 | "@testing-library/react": "^9.3.2",
9 | "@testing-library/user-event": "^7.1.2",
10 | "antd": "^4.2.4",
11 | "axios": "^0.19.2",
12 | "classnames": "^2.2.6",
13 | "immutable": "^4.0.0-rc.12",
14 | "normalize.css": "^8.0.1",
15 | "react": "^16.13.1",
16 | "react-dom": "^16.13.1",
17 | "react-redux": "^7.2.0",
18 | "react-router-config": "^5.1.1",
19 | "react-router-dom": "^5.2.0",
20 | "react-scripts": "3.4.1",
21 | "redux": "^4.0.5",
22 | "redux-immutable": "^4.0.0",
23 | "redux-thunk": "^2.3.0",
24 | "styled-components": "^5.1.0"
25 | },
26 | "scripts": {
27 | "start": "craco start",
28 | "build": "craco build",
29 | "test": "craco test",
30 | "eject": "react-scripts eject"
31 | },
32 | "eslintConfig": {
33 | "extends": "react-app"
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 | coderwhy music
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Provider } from "react-redux";
4 | import store from "./store";
5 |
6 | import HYMain from './pages/main';
7 |
8 | function App() {
9 | return (
10 |
11 |
12 |
13 | );
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/assets/css/base.css:
--------------------------------------------------------------------------------
1 | @import '~antd/dist/antd.css';
2 | @import "~normalize.css";
3 |
4 | /* 样式的重置 */
5 | body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
6 | padding: 0;
7 | margin: 0;
8 | }
9 |
10 | ul, ol, li {
11 | list-style: none;
12 | }
13 |
14 | a {
15 | text-decoration: none;
16 | color: #666;
17 | }
18 |
19 | a:hover {
20 | color: #666;
21 | text-decoration: underline;
22 | }
23 |
24 | i, em {
25 | font-style: normal;
26 | }
27 |
28 | input, textarea, button, select, a {
29 | outline: none;
30 | border: none;
31 | }
32 |
33 | table {
34 | border-collapse: collapse;
35 | border-spacing: 0;
36 | }
37 |
38 | img {
39 | border: none;
40 | vertical-align: middle;
41 | }
42 |
43 | /* 全局样式 */
44 | body, textarea, select, input, button {
45 | font-size: 12px;
46 | color: #333;
47 | font-family: Arial, Helvetica, sans-serif;
48 | background-color: #f5f5f5;
49 | }
50 |
51 | .text-nowrap {
52 | white-space: nowrap;
53 | text-overflow: ellipsis;
54 | overflow: hidden;
55 | }
56 |
57 | .wrap-v1 {
58 | width: 1100px;
59 | margin: 0 auto;
60 | }
61 |
62 | .wrap-v2 {
63 | width: 980px;
64 | margin: 0 auto;
65 | }
66 |
67 | .sprite_01 {
68 | background: url(../img/sprite_01.png) no-repeat 0 9999px;
69 | }
70 |
71 | .sprite_02 {
72 | background: url(../img/sprite_02.png) no-repeat 0 9999px;
73 | }
74 |
75 | .sprite_covor {
76 | background: url(../img/sprite_cover.png) no-repeat 0 9999px;
77 | }
78 |
79 | .sprite_icon {
80 | background: url(../img/sprite_icon.png) no-repeat 0 9999px;
81 | }
82 |
83 | .sprite_icon2 {
84 | background: url(../img/sprite_icon2.png) no-repeat 0 9999px;
85 | }
86 |
87 | .sprite_icon3 {
88 | background: url(../img/sprite_icon3.png) no-repeat 0 9999px;
89 | }
90 |
91 | .sprite_button {
92 | background: url(../img/sprite_button.png) no-repeat 0 9999px;
93 | }
94 |
95 | .sprite_button2 {
96 | background: url(../img/sprite_button2.png) no-repeat 0 9999px;
97 | }
98 |
99 | .sprite_table {
100 | background: url(../img/sprite_table.png) no-repeat 0 9999px;
101 | }
102 |
103 | .sprite_playbar {
104 | background: url(../img/playbar_sprite.png) no-repeat 0 9999px;
105 | }
106 |
107 | .sprite_playlist {
108 | background: url(../img/playlist_sprite.png) no-repeat 0 9999px;
109 | }
110 |
111 | .image_cover {
112 | position: absolute;
113 | left: 0;
114 | right: 0;
115 | top: 0;
116 | bottom: 0;
117 | text-indent: -9999px;
118 | background: url(../img/sprite_cover.png) no-repeat -145px -57px;
119 | }
120 |
121 |
122 | .ant-message .ant-message-notice-content {
123 | position: fixed;
124 | left: 50%;
125 | transform: translateX(-50%);
126 | bottom: 60px;
127 | background-color: rgba(0, 0, 0, .5);
128 | color: #fff;
129 | }
130 |
131 | span:hover.link {
132 | text-decoration: underline;
133 | cursor: pointer;
134 | }
135 |
--------------------------------------------------------------------------------
/src/assets/img/banner-control-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/banner-control-left.png
--------------------------------------------------------------------------------
/src/assets/img/banner-control-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/banner-control-right.png
--------------------------------------------------------------------------------
/src/assets/img/banner_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/banner_sprite.png
--------------------------------------------------------------------------------
/src/assets/img/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/download.png
--------------------------------------------------------------------------------
/src/assets/img/friend_sprite.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/friend_sprite.jpg
--------------------------------------------------------------------------------
/src/assets/img/mine_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/mine_sprite.png
--------------------------------------------------------------------------------
/src/assets/img/playbar_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/playbar_sprite.png
--------------------------------------------------------------------------------
/src/assets/img/playlist_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/playlist_sprite.png
--------------------------------------------------------------------------------
/src/assets/img/playpanel_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/playpanel_bg.png
--------------------------------------------------------------------------------
/src/assets/img/progress_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/progress_bar.png
--------------------------------------------------------------------------------
/src/assets/img/radio_slide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/radio_slide.png
--------------------------------------------------------------------------------
/src/assets/img/recommend-top-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/recommend-top-bg.png
--------------------------------------------------------------------------------
/src/assets/img/singer_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/singer_sprite.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_01.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_02.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_button.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_button2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_button2.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_cover.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_footer_01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_footer_01.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_footer_02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_footer_02.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_icon.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_icon2.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_icon3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_icon3.png
--------------------------------------------------------------------------------
/src/assets/img/sprite_table.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/sprite_table.png
--------------------------------------------------------------------------------
/src/assets/img/wrap-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coderwhy/hy-react-web-music/0e1c3ad58d1a34277f7b34c4ea4656e3240f2017/src/assets/img/wrap-bg.png
--------------------------------------------------------------------------------
/src/common/global-style.js:
--------------------------------------------------------------------------------
1 | // 扩大可点击区域
2 | const extendClick = () => {
3 | return `
4 | position: relative;
5 | &:before {
6 | content: '';
7 | position: absolute;
8 | top: -10px; bottom: -10px; left: -10px; right: -10px;
9 | };
10 | `
11 | }
12 | // 一行文字溢出部分用... 代替
13 | const noWrap = () => {
14 | return `
15 | text-overflow: ellipsis;
16 | overflow: hidden;
17 | white-space: nowrap;
18 | `
19 | }
20 |
21 | export default {
22 | 'theme-color': '#C20C0C',
23 | 'theme-color-shadow': 'rgba(212, 68, 57, .5)',
24 | 'font-color-light': '#f1f1f1',
25 | 'font-color-desc': '#2E3030',
26 | 'font-color-desc-v2': '#bba8a8',// 略淡
27 | 'font-size-s': '12px',
28 | 'font-size-n': '14px',
29 | 'font-size-l': '16px',
30 | 'font-size-ll': '20px',
31 | "border-color": '#e4e4e4',
32 | 'background-color': '#f2f3f4',
33 | 'background-color-shadow': 'rgba(0, 0, 0, 0.3)',
34 | 'highlight-background-color': '#fff',
35 | extendClick,
36 | noWrap
37 | }
--------------------------------------------------------------------------------
/src/components/album-cover/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import {
4 | getSizeImage
5 | } from "@/utils/format-utils";
6 |
7 | import {
8 | AlbumWrapper
9 | } from "./style";
10 |
11 |
12 | export default memo(function HYAlbumCover(props) {
13 | const { info, size = "100px", width = "118px", bgp = "-570px" } = props;
14 |
15 | return (
16 |
17 |
21 |
22 |
{info.name}
23 |
{info.artist.name}
24 |
18 |
19 |
20 | {
21 | footerLinks.map(item => {
22 | return (
23 |
24 | {item.title}
25 | |
26 |
27 | )
28 | })
29 | }
30 |
39 |
违法和不良信息举报电话：0571-89853516
40 |
41 | 举报邮箱：
42 | ncm5990@163.com
43 |
44 |
52 |
53 | {
54 | footerImages.map((item, index) => {
55 | return (
56 |
57 |
58 | {item.title}
59 |
60 | )
61 | })
62 | }
63 |
64 |
34 |
35 | 网易云音乐
36 |
37 | {
38 | headerLinks.map((item, index) => {
39 | return (
40 |
41 | {showItem(item, index)}
42 |
43 | )
44 | })
45 | }
46 |
48 |
49 | } />
50 | 创作者中心
51 | 登录
52 |
53 |
16 |
17 |
18 |
{radio.name}
19 |
20 |
21 | {radio.dj.nickname}
22 |
23 |
24 | 共{radio.programCount}期
25 | 订阅{radio.subCount}次
26 |
27 |
16 |
17 | {info.name}
18 | {info.desc}
19 |
20 | )
21 | })
22 |
--------------------------------------------------------------------------------
/src/components/radio-recommend-cover/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CoverWrapper = styled.div`
4 | display: flex;
5 | flex-direction: column;
6 | width: 150px;
7 |
8 | .name {
9 | font-size: 14px;
10 | color: #333;
11 | margin: 5px 0;
12 | }
13 |
14 | img {
15 | width: 150px;
16 | height: 150px;
17 | }
18 |
19 | p {
20 | color: #666;
21 | }
22 | `
--------------------------------------------------------------------------------
/src/components/song-operation-bar/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import { OperationBarWrapper } from './style';
4 |
5 | export default memo(function HYSongOperationBar(props) {
6 | const { favorTitle, shareTitle, downloadTitle, commentTitle } = props;
7 |
8 | return (
9 |
10 |
11 |
12 |
13 |
14 | 播放
15 |
16 |
17 | +
18 |
19 |
20 | {favorTitle}
21 |
22 |
23 | {shareTitle}
24 |
25 |
26 | {downloadTitle}
27 |
28 |
29 | {commentTitle}
30 |
31 |
32 | )
33 | })
34 |
--------------------------------------------------------------------------------
/src/components/song-operation-bar/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const OperationBarWrapper = styled.div`
4 | display: flex;
5 | align-items: center;
6 |
7 | .play {
8 | display: flex;
9 | align-items: center;
10 | margin-right: 5px;
11 |
12 | .play-icon {
13 | display: inline-block;
14 | height: 31px;
15 | line-height: 31px;
16 | background-position: right -428px;
17 |
18 | .play {
19 | color: #fff;
20 | display: flex;
21 | align-items: center;
22 | padding: 0 7px 0 8px;
23 | background-position: 0 -387px;
24 |
25 | i {
26 | display: inline-block;
27 | width: 20px;
28 | height: 18px;
29 | margin: -2px 2px 0;
30 | background-position: 0 -1622px;
31 | }
32 | }
33 | }
34 |
35 | .add-icon {
36 | display: inline-block;
37 | width: 31px;
38 | height: 31px;
39 | margin-left: -3px;
40 | padding-right: 0;
41 | background-position: 0 -1588px;
42 | text-indent: -9999px;
43 | }
44 | }
45 |
46 | .item {
47 | display: inline-block;
48 | height: 31px;
49 | margin-right: 6px;
50 | padding-right: 5px;
51 | background-position: right -1020px;
52 |
53 | .icon {
54 | display: inline-block;
55 | height: 31px;
56 | line-height: 31px;
57 | padding: 0 7px 0 28px;
58 | font-family: simsun;
59 | }
60 |
61 | .favor-icon {
62 | background-position: 0 -977px;
63 | }
64 |
65 | .share-icon {
66 | background-position: 0 -1225px;
67 | }
68 |
69 | .download-icon {
70 | background-position: 0 -2761px;
71 | }
72 |
73 | .comment-icon {
74 | background-position: 0 -1465px;
75 | }
76 | }
77 | `
--------------------------------------------------------------------------------
/src/components/theme-cover/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import {
4 | getSizeImage,
5 | getCount
6 | } from "@/utils/format-utils";
7 |
8 | import {
9 | ThemeCoverWrapper
10 | } from "./style";
11 |
12 | export default memo(function HYThemeCover(props) {
13 | const { info, right } = props;
14 |
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | {getCount(info.playCount)}
24 |
25 |
26 |
27 |
28 |
30 | {info.name}
31 |
32 | {/*
33 | by {info.copywriter || info.creator.nickname}
34 |
*/}
35 |
36 | )
37 | })
38 |
--------------------------------------------------------------------------------
/src/components/theme-cover/style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const ThemeCoverWrapper = styled.div`
4 | width: 140px;
5 | margin: 20px ${props => (props.right || 0)} 20px 0;
6 |
7 | .cover-top {
8 | position: relative;
9 |
10 | &>img {
11 | width: 140px;
12 | height: 140px;
13 | }
14 |
15 | .cover {
16 | position: absolute;
17 | top: 0;
18 | left: 0;
19 | width: 100%;
20 | height: 100%;
21 | background-position: 0 0;
22 |
23 | .info {
24 | display: flex;
25 | justify-content: space-between;
26 | align-items: center;
27 | padding: 0 10px;
28 | position: absolute;
29 | bottom: 0;
30 | left: 0;
31 | right: 0;
32 | background-position: 0 -537px;
33 | color: #ccc;
34 | height: 27px;
35 |
36 | .erji {
37 | margin-right: 5px;
38 | display: inline-block;
39 | width: 14px;
40 | height: 11px;
41 | background-position: 0 -24px;
42 | }
43 |
44 | .play {
45 | display: inline-block;
46 | width: 16px;
47 | height: 17px;
48 | background-position: 0 0;
49 | }
50 | }
51 | }
52 | }
53 |
54 | .cover-bottom {
55 | font-size: 14px;
56 | color: #000;
57 | margin-top: 5px;
58 | }
59 |
60 | .cover-source {
61 | color: #666;
62 | }
63 | `
--------------------------------------------------------------------------------
/src/components/theme-header-normal/index.js:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react';
2 |
3 | import {
4 | HeaderWrapper
5 | } from "./style";
6 |
7 | export default memo(function HYThemeHeaderNormal(props) {
8 | const { title, rightSlot } = props;
9 |
10 | return (
11 |
12 | {title}
13 |
14 | {rightSlot}
15 |
16 |
17 | )
18 | })
19 |
--------------------------------------------------------------------------------
/src/components/theme-header-normal/style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const HeaderWrapper = styled.div`
4 | display: flex;
5 | padding-bottom: 5px;
6 | border-bottom: 2px solid #c20c0c;
7 | font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
8 | font-size: 24px;
9 | `
10 |
--------------------------------------------------------------------------------
/src/components/theme-header-player/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import { HeaderWrapper } from './style';
4 |
5 | export default memo(function HYThemeHeaderPlayer(props) {
6 | const { title } = props;
7 |
8 | return (
9 |
10 | {title}
11 |
12 | )
13 | })
14 |
--------------------------------------------------------------------------------
/src/components/theme-header-player/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HeaderWrapper = styled.div`
4 | h3 {
5 | height: 23px;
6 | margin-bottom: 20px;
7 | border-bottom: 1px solid #ccc;
8 | font-size: 12px;
9 | font-weight: 700;
10 | color: #333;
11 | }
12 | `
--------------------------------------------------------------------------------
/src/components/theme-header-rcm/index.js:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react';
2 | import PropTypes from "prop-types";
3 |
4 | import { Link } from 'react-router-dom';
5 | import {
6 | HeaderWrapper
7 | } from "./style";
8 |
9 | const HYThemeHeaderRCM = memo(function(props) {
10 | const { title, keywords, moreLink, keywordClick } = props;
11 |
12 | return (
13 |
14 |
15 |
{title}
16 |
17 | {
18 | keywords.map((item, index) => {
19 | return (
20 |
21 | keywordClick(item)}>{item}
22 | |
23 |
24 | )
25 | })
26 | }
27 |
28 |
30 | 更多
31 |
32 |
33 |
34 | )
35 | })
36 |
37 | HYThemeHeaderRCM.defaultProps = {
38 | keywords: []
39 | }
40 |
41 | HYThemeHeaderRCM.propTypes = {
42 | title: PropTypes.string.isRequired,
43 | keywords: PropTypes.array
44 | }
45 |
46 | export default HYThemeHeaderRCM;
47 |
--------------------------------------------------------------------------------
/src/components/theme-header-rcm/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HeaderWrapper = styled.div`
4 | height: 33px;
5 | border-bottom: 2px solid #C10D0C;
6 | padding: 0 10px 4px 34px;
7 | background-position: -225px -156px;
8 |
9 | display: flex;
10 | justify-content: space-between;
11 | align-items: center;
12 |
13 | .left {
14 | display: flex;
15 | align-items: center;
16 |
17 | .title {
18 | font-size: 20px;
19 | font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
20 | margin-right: 20px;
21 | }
22 |
23 | .keyword {
24 | display: flex;
25 |
26 | .item {
27 | .divider {
28 | margin: 0 15px;
29 | color: #ccc;
30 | }
31 | }
32 | }
33 | }
34 |
35 | .right {
36 | display: flex;
37 | align-items: center;
38 | .icon {
39 | display: inline-block;
40 | width: 12px;
41 | height: 12px;
42 | margin-left: 4px;
43 | background-position: 0 -240px;
44 | }
45 | }
46 | `
--------------------------------------------------------------------------------
/src/components/theme-header-small/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import {
5 | HeaderWrapper
6 | } from "./style";
7 |
8 | const HYThemeHeaderSmall = memo(function (props) {
9 | const { title, more } = props;
10 |
11 | return (
12 |
13 | {title}
14 | {more}
15 |
16 | )
17 | })
18 |
19 | HYThemeHeaderSmall.defaultProps = {
20 |
21 | }
22 |
23 | HYThemeHeaderSmall.propTypes = {
24 | title: PropTypes.string.isRequired,
25 | more: PropTypes.string
26 | }
27 |
28 | export default HYThemeHeaderSmall;
29 |
--------------------------------------------------------------------------------
/src/components/theme-header-small/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HeaderWrapper = styled.div`
4 | display: flex;
5 | justify-content: space-between;
6 | align-items: flex-end;
7 | padding-bottom: 5px;
8 | border-bottom: 1px solid #ccc;
9 |
10 | h3 {
11 | font-size: 12px;
12 | }
13 | `
14 |
15 |
--------------------------------------------------------------------------------
/src/components/theme-header-song/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector, shallowEqual } from "react-redux";
3 |
4 | import {
5 | HeaderWrapper
6 | } from "./style"
7 | import { memo } from 'react';
8 |
9 | export default memo(function HYThemeHeaderSong() {
10 | // redux
11 | const state = useSelector(state => ({
12 | playList: state.getIn(["ranking", "playList"])
13 | }), shallowEqual)
14 |
15 | return (
16 |
17 |
18 |
歌曲列表
19 |
{state.playList.trackCount}首歌
20 |
22 | 播放：
23 | {state.playList.playCount}
24 | 次
25 |
26 |
27 | )
28 | })
29 |
--------------------------------------------------------------------------------
/src/components/theme-header-song/style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const HeaderWrapper = styled.div`
4 | display: flex;
5 | justify-content: space-between;
6 | align-items: center;
7 | padding-bottom: 5px;
8 | border-bottom: 2px solid #c20c0c;
9 |
10 | .left {
11 | display: flex;
12 | align-items: flex-end;
13 |
14 | .title {
15 | font-size: 20px;
16 | font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
17 | }
18 |
19 | .count {
20 | margin-bottom: 5px;
21 | margin-left: 20px;
22 | }
23 | }
24 |
25 | .right {
26 | .count {
27 | color: #c20c0c;
28 | }
29 | }
30 | `
31 |
--------------------------------------------------------------------------------
/src/components/top-ranking/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { useDispatch } from 'react-redux';
3 |
4 | import { getSizeImage } from '@/utils/format-utils';
5 | import { getSongDetailAction } from '@/pages/player/store';
6 |
7 | import { TopRankingWrapper } from './style';
8 |
9 | export default memo(function HYTopRanking(props) {
10 | // props and state
11 | const { info } = props;
12 | const { tracks = [] } = info;
13 |
14 | // redux hooks
15 | const dispatch = useDispatch();
16 |
17 | // other handle
18 | const playMusic = (item) => {
19 | dispatch(getSongDetailAction(item.id));
20 | }
21 |
22 | return (
23 |
24 |
37 |
38 | {
39 | tracks.slice(0, 10).map((item, index) => {
40 | return (
41 |
42 |
{index + 1}
43 |
44 |
{item.name}
45 |
46 |
48 |
49 |
50 |
51 |
52 |
53 | )
54 | })
55 | }
56 |
27 | {
28 | hotAlbums.slice(0, 10).map((item, index) => {
29 | return
34 | })
35 | }
36 |
37 |
38 | )
39 | });
40 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/c-cpns/hot-album/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HotAlbumWrapper = styled.div`
4 | .album-list {
5 | display: flex;
6 | flex-wrap: wrap;
7 | justify-content: space-between;
8 | }
9 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/c-cpns/top-album/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo, useEffect, useState } from 'react';
2 | import { useDispatch, useSelector, shallowEqual } from 'react-redux';
3 |
4 | import { getTopAlbumsAction } from '../../store/actionCreators';
5 |
6 | import HYThemeHeaderNormal from "@/components/theme-header-normal";
7 | import HYAlbumCover from "@/components/album-cover";
8 | import HYPagination from '@/components/pagination';
9 | import {
10 | TopAlbumWrapper
11 | } from './style';
12 |
13 | export default memo(function HYTopAlbum() {
14 | const [currentPage, setCurrentPage] = useState(1);
15 |
16 | const { topAlbums, total } = useSelector(state => ({
17 | topAlbums: state.getIn(["album", "topAlbums"]),
18 | total: state.getIn(["album", "topTotal"])
19 | }), shallowEqual);
20 | const dispatch = useDispatch();
21 |
22 | useEffect(() => {
23 | dispatch(getTopAlbumsAction(1));
24 | }, [dispatch]);
25 |
26 |
27 | const onPageChange = (page, pageSize) => {
28 | setCurrentPage(page);
29 | dispatch(getTopAlbumsAction(page))
30 | }
31 |
32 | return (
33 |
34 |
35 |
36 | {
37 | topAlbums.map((item, index) => {
38 | return
43 | })
44 | }
45 |
46 |
50 |
51 | )
52 | })
53 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/c-cpns/top-album/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const TopAlbumWrapper = styled.div`
4 | margin-top: 30px;
5 | .album-list {
6 | display: flex;
7 | flex-wrap: wrap;
8 | justify-content: space-between;
9 | }
10 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import HYHotAlbum from './c-cpns/hot-album';
4 | import HYTopAlbum from './c-cpns/top-album';
5 | import {
6 | AblumWrapper
7 | } from './style';
8 |
9 | export default memo(function HYAlbum() {
10 | return (
11 |
12 |
13 |
14 |
15 | )
16 | })
17 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/store/actionCreators.js:
--------------------------------------------------------------------------------
1 | import * as actionTypes from './constants';
2 |
3 | import {
4 | getHotAlbums,
5 | getTopAlbums
6 | } from '@/services/album.js';
7 |
8 | const changeHotAlbumsAction = (res) => ({
9 | type: actionTypes.CHANGE_HOT_ALBUMS,
10 | hotAlbums: res.albums
11 | })
12 |
13 | const changeTopAlbumAction = (res) => ({
14 | type: actionTypes.CHANGE_TOP_ALBUMS,
15 | topAlbums: res.albums
16 | })
17 |
18 | const changeTopTotalAction = (total) => ({
19 | type: actionTypes.CHANGE_TOP_TOTAL,
20 | total: total
21 | })
22 |
23 | export const getHotAlbumsAction = () => {
24 | return dispatch => {
25 | getHotAlbums().then(res => {
26 | dispatch(changeHotAlbumsAction(res));
27 | })
28 | }
29 | }
30 |
31 | export const getTopAlbumsAction = (page) => {
32 | return dispatch => {
33 | getTopAlbums(30, (page-1) * 30).then(res => {
34 | dispatch(changeTopAlbumAction(res));
35 | dispatch(changeTopTotalAction(res.total));
36 |
37 | console.log(res)
38 | })
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/store/constants.js:
--------------------------------------------------------------------------------
1 | export const CHANGE_HOT_ALBUMS = "ablum/CHANGE_HOT_ALBUMS";
2 | export const CHANGE_TOP_ALBUMS = "album/CHANGE_TOP_ALBUMS";
3 | export const CHANGE_TOP_TOTAL = "album/CHANGE_TOP_TOTAL";
4 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/store/index.js:
--------------------------------------------------------------------------------
1 | import reducer from './reducer';
2 |
3 | export {
4 | reducer
5 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/store/reducer.js:
--------------------------------------------------------------------------------
1 | import { Map } from 'immutable';
2 |
3 | import * as actionTypes from './constants';
4 |
5 | const defaultState = Map({
6 | hotAlbums: [],
7 | topAlbums: [],
8 | topTotal: 0
9 | })
10 |
11 | export default function reducer(state = defaultState, action) {
12 | switch (action.type) {
13 | case actionTypes.CHANGE_HOT_ALBUMS:
14 | return state.set("hotAlbums", action.hotAlbums);
15 | case actionTypes.CHANGE_TOP_ALBUMS:
16 | return state.set("topAlbums", action.topAlbums);
17 | case actionTypes.CHANGE_TOP_TOTAL:
18 | return state.set("topTotal", action.total);
19 | default:
20 | return state;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/album/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const AblumWrapper = styled.div`
4 | padding: 40px;
5 | background-color: #fff;
6 | border: 1px solid #d3d3d3;
7 | border-width: 0 1px;
8 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-category/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { useDispatch, useSelector, shallowEqual } from 'react-redux';
3 | import classNames from 'classnames';
4 |
5 | import { artistCategories } from '@/services/local-data';
6 |
7 | import { CategoryWrapper, CategoryItem } from './style';
8 | import { changeCurrentAreaAction, changeCurrentTypeAction } from '../../store/actionCreators';
9 |
10 | export default memo(function HYArtistCategory(props) {
11 |
12 | // redux hooks
13 | const {currentArea, currentType} = useSelector(state => ({
14 | currentArea: state.getIn(["artist", "currentArea"]),
15 | currentType: state.getIn(["artist", "currentType"])
16 | }), shallowEqual);
17 | const dispatch = useDispatch();
18 |
19 | // handle function
20 | const selectArtist = (area, type) => {
21 | dispatch(changeCurrentAreaAction(area));
22 | dispatch(changeCurrentTypeAction(type));
23 | }
24 |
25 | // render jsx
26 | const renderArtist = (artists, area) => {
27 | return (
28 |
29 | {
30 | artists.map((item, index) => {
31 | const isSelect = currentArea === area && currentType.type === item.type;
32 | return (
33 |
35 | selectArtist(area, item)}>{item.name}
36 |
37 | )
38 | })
39 | }
40 |
41 | )
42 | }
43 |
44 | return (
45 |
46 | {
47 | artistCategories.map((item, index) => {
48 | return (
49 |
50 |
{item.title}
51 | {renderArtist(item.artists, item.area)}
52 |
53 | )
54 | })
55 | }
56 |
57 | )
58 | })
59 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-category/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CategoryWrapper = styled.div`
4 | width: 180px;
5 | padding: 50px 10px 40px;
6 | border: 1px solid #d3d3d3;
7 | border-width: 0 1px;
8 |
9 | background-color: #fafafa;
10 |
11 | .section {
12 | border-bottom: 1px solid #d3d3d3;
13 | padding: 10px 0;
14 |
15 | &:last-of-type {
16 | border-bottom: none;
17 | }
18 |
19 | .title {
20 | height: 25px;
21 | padding-left: 14px;
22 | font-size: 16px;
23 | margin-bottom: 5px;
24 | font-family: "Microsoft Yahei";
25 | }
26 | }
27 |
28 |
29 | `
30 |
31 | export const CategoryItem = styled.div`
32 | width: 160px;
33 | color: #333;
34 | height: 29px;
35 | line-height: 29px;
36 | margin-bottom: 2px;
37 | cursor: pointer;
38 |
39 | &.active {
40 | span {
41 | color: red;
42 | background-position: 0 0;
43 | }
44 | }
45 |
46 | span {
47 | display: inline-block;
48 | width: 160px;
49 | padding-left: 27px;
50 | background: url(${require("@/assets/img/singer_sprite.png")}) no-repeat 0 -30px;
51 | cursor: pointer;
52 |
53 | &:hover {
54 | text-decoration: underline;
55 | }
56 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/alpha-list/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo, useState, useEffect } from 'react';
2 | import { useSelector, shallowEqual, useDispatch } from 'react-redux';
3 | import classNames from 'classnames';
4 |
5 | import { singerAlphas } from '@/utils/handle-data';
6 | import { getArtistListAction } from '../../../../store/actionCreators';
7 |
8 | import {
9 | AlphaListWrapper
10 | } from './style';
11 |
12 | export default memo(function HYAlphaList() {
13 | const [currentAlpha, setCurrentAlpha] = useState("-1");
14 |
15 | const { currentType, currentArea } = useSelector(state => ({
16 | currentType: state.getIn(["artist", "currentType"]),
17 | currentArea: state.getIn(["artist", "currentArea"])
18 | }), shallowEqual);
19 | const dispatch = useDispatch();
20 |
21 | useEffect(() => {
22 | setCurrentAlpha("-1");
23 | }, [currentType, currentArea]);
24 | useEffect(() => {
25 | dispatch(getArtistListAction(currentArea, currentType.type, currentAlpha));
26 | }, [currentAlpha, currentType, currentArea, dispatch]);
27 |
28 | return (
29 |
30 | {
31 | currentArea !== -1 && singerAlphas.map((item, index) => {
32 | const isActive = currentAlpha === item;
33 | if (item === "0") item = "其他";
34 | if (item === "-1") item = "热门";
35 | return (
36 |
38 | setCurrentAlpha(item)}>{item.toUpperCase()}
39 |
40 | )
41 | })
42 | }
43 |
44 | )
45 | })
46 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/alpha-list/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const AlphaListWrapper = styled.div`
4 | display: flex;
5 | justify-content: space-between;
6 | margin-top: ${props => props.hasTop ? "20px": 0};
7 |
8 | .item {
9 | padding: 1px 4px;
10 | border-radius: 3px;
11 | span {
12 | font-size: 14px;
13 | color: #333;
14 | cursor: pointer;
15 | }
16 |
17 | span:hover {
18 | text-decoration: underline;
19 | }
20 | }
21 |
22 | .active {
23 | background-color: #c20c0c;
24 | span {
25 | color: #fff;
26 | }
27 | }
28 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/artist-item/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import { getSizeImage } from '@/utils/format-utils';
4 |
5 | import { ItemWrapper } from './style';
6 |
7 | export default memo(function HYArtistItemV1(props) {
8 | const { info, index } = props;
9 |
10 | return (
11 |
12 | {
13 | index < 10 && (
14 |
15 |
16 |
20 | {info.name}
21 |
22 |
23 |
24 | )
25 | })
26 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-list/c-cpns/artist-item/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ItemWrapper = styled.div`
4 | width: 130px;
5 | margin-top: 15px;
6 |
7 | .image {
8 | img {
9 | width: 130px;
10 | height: 130px;
11 | }
12 | }
13 |
14 | .info {
15 | margin: 10px 0;
16 | display: flex;
17 | justify-content: space-between;
18 |
19 | .name {
20 | cursor: pointer;
21 |
22 | &:hover {
23 | color: red;
24 | text-decoration: underline;
25 | }
26 | }
27 |
28 | .icon {
29 | display: inline-block;
30 | width: 17px;
31 | height: 18px;
32 | background-position: 0 -740px;
33 | }
34 | }
35 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-list/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { useSelector, shallowEqual } from 'react-redux';
3 |
4 |
5 | import HYThemeHeaderNormal from '@/components/theme-header-normal';
6 | import HYAlphaList from './c-cpns/alpha-list';
7 | import HYArtistItem from './c-cpns/artist-item';
8 | import {
9 | ArtistListWrapper
10 | } from './style';
11 |
12 | export default memo(function HYArtistList() {
13 | // redux hooks
14 | const { currentType, artistList } = useSelector(state => ({
15 | currentType: state.getIn(["artist", "currentType"]),
16 | artistList: state.getIn(["artist", "artistList"])
17 | }), shallowEqual);
18 |
19 | return (
20 |
21 |
22 |
23 |
24 | {
25 | artistList.map((item, index) => {
26 | return
27 | })
28 | }
29 |
30 |
31 | )
32 | })
33 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/c-cpns/artist-list/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ArtistListWrapper = styled.div`
4 | flex: 1;
5 | padding: 40px;
6 |
7 | .artist-list {
8 | display: flex;
9 | flex-wrap: wrap;
10 | justify-content: space-between;
11 |
12 | padding: 5px 0 40px;
13 | }
14 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import HYArtistCategory from './c-cpns/artist-category';
4 | import HYArtistList from './c-cpns/artist-list';
5 | import { HYArtistWrapper } from './style';
6 |
7 | export default memo(function HYArtist() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 | })
17 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/store/actionCreators.js:
--------------------------------------------------------------------------------
1 | import * as actionTypes from './constants';
2 |
3 | import { getArtistList } from '@/services/artist';
4 |
5 | const changeArtistListAction = (artistList) => ({
6 | type: actionTypes.CHANGE_ARTIST_LIST,
7 | artistList
8 | })
9 |
10 | export const changeCurrentAreaAction = (area) => ({
11 | type: actionTypes.CHANGE_CURRENT_AREA,
12 | currentArea: area
13 | });
14 |
15 | export const changeCurrentTypeAction = (type) => ({
16 | type: actionTypes.CHANGE_CURRENT_TYPE,
17 | currentType: type
18 | });
19 |
20 | export const getArtistListAction = (area, type, alpha) => {
21 | return dispatch => {
22 | getArtistList(area, type, alpha).then(res => {
23 | console.log(res);
24 | dispatch(changeArtistListAction(res.artists))
25 | })
26 | }
27 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/store/constants.js:
--------------------------------------------------------------------------------
1 | export const CHANGE_CURRENT_AREA = "artist/CHANGE_CURRENT_AREA";
2 | export const CHANGE_CURRENT_TYPE = "artist/CHANGE_CURRENT_TYPE";
3 |
4 | export const CHANGE_ARTIST_LIST = "artist/CHANGE_ARTIST_LIST";
5 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/store/index.js:
--------------------------------------------------------------------------------
1 | import reducer from './reducer';
2 |
3 | export {
4 | reducer
5 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/store/reducer.js:
--------------------------------------------------------------------------------
1 | import { Map } from 'immutable';
2 |
3 | import * as actionTypes from './constants';
4 |
5 | const defaultState = Map({
6 | currentArea: 7,
7 | currentType: {
8 | name: "推荐歌手",
9 | type: 1
10 | },
11 | artistList: []
12 | });
13 |
14 | function reducer(state = defaultState, action) {
15 | switch(action.type) {
16 | case actionTypes.CHANGE_CURRENT_AREA:
17 | return state.set("currentArea", action.currentArea);
18 | case actionTypes.CHANGE_CURRENT_TYPE:
19 | return state.set("currentType", action.currentType);
20 | case actionTypes.CHANGE_ARTIST_LIST:
21 | return state.set("artistList", action.artistList);
22 | default:
23 | return state;
24 | }
25 | }
26 |
27 | export default reducer;
28 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/artist/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HYArtistWrapper = styled.div`
4 | .content {
5 | display: flex;
6 | background-color: #fff;
7 | }
8 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/c-cpns/radio-category/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, memo } from 'react';
2 | import { useSelector, useDispatch, shallowEqual } from 'react-redux';
3 | import classnames from 'classnames';
4 |
5 | import {
6 | getRadioCategories,
7 | changeCurrentIdActio
8 | } from "../../store/actionCreators";
9 |
10 | import { Carousel } from 'antd';
11 | import {
12 | CategoryWrapper,
13 | CategoryContent,
14 | CategoryItemImage
15 | } from "./style";
16 |
17 | const PAGE_SIZE = 16;
18 |
19 | export default memo(function HYRadioCategory() {
20 | // redux
21 | const dispatch = useDispatch();
22 | const { categories, currentId } = useSelector(state => ({
23 | categories: state.getIn(["djradio", "categories"]),
24 | currentId: state.getIn(["djradio", "currentId"])
25 | }), shallowEqual);
26 |
27 | // data handle
28 | const page = Math.ceil(categories.length / PAGE_SIZE) || 1;
29 |
30 | // hooks
31 | useEffect(() => {
32 | dispatch(getRadioCategories());
33 | }, [dispatch]);
34 | const carouselRef = useRef();
35 |
36 | // handle function
37 | function getSize(index) {
38 | return index * PAGE_SIZE > categories.length ? index * PAGE_SIZE : categories.length;
39 | }
40 |
41 | return (
42 |
43 | carouselRef.current.prev()}>
44 |
45 |
46 | {
47 | Array(page).fill(0).map((_, index) => {
48 | return (
49 |
50 | {
51 | categories.slice(index * PAGE_SIZE, getSize(index + 1)).map((item, indey) => {
52 | return (
53 |
dispatch(changeCurrentIdActio(item.id))}
55 | className={classnames("category-item", {"active": currentId === item.id})}>
56 |
57 | {item.name}
58 |
59 | )
60 | })
61 | }
62 |
carouselRef.current.next()}>
69 |
70 | )
71 | })
72 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/c-cpns/radio-category/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CategoryWrapper = styled.div`
4 | display: flex;
5 | align-items: center;
6 | margin: 0 -40px;
7 |
8 | .arrow {
9 | width: 20px;
10 | height: 30px;
11 | background-image: url(${require("@/assets/img/radio_slide.png")});
12 | cursor: pointer;
13 | }
14 |
15 | .arrow-left {
16 | margin-left: 15px;
17 | background-position: 0 -30px;
18 | }
19 |
20 | .arrow-right {
21 | margin-right: 15px;
22 | background-position: -30px -30px;
23 | }
24 | `
25 |
26 | export const CategoryContent = styled.div`
27 | flex: 1;
28 | width: 900px;
29 |
30 | .category-page {
31 | display: flex !important;
32 | flex-wrap: wrap;
33 | padding-bottom: 20px;
34 |
35 | .category-item {
36 | display: flex;
37 | flex-direction: column;
38 | align-items: center;
39 | margin: 10px;
40 | width: 70px;
41 | height: 70px;
42 | font-size: 12px;
43 | cursor: pointer;
44 | border-radius: 5px;
45 | text-align: center;
46 | border: 2px solid transparent;
47 |
48 | :hover {
49 | background-color: #eee;
50 | }
51 |
52 | &.active {
53 | color: #C20C0C;
54 | border: 2px solid #d35757;
55 |
56 | .image {
57 | background-position: -48px 0;
58 | }
59 | }
60 | }
61 | }
62 |
63 | .dots {
64 | bottom: 5px;
65 | li {
66 | width: 20px;
67 | height: 20px;
68 | display: flex;
69 | align-items: center;
70 |
71 | button {
72 | width: 6px;
73 | height: 6px;
74 | border-radius: 50%;
75 | background-color: #aaa;
76 | }
77 | }
78 |
79 | li.slick-active {
80 | width: 20px;
81 | button {
82 | background-color: #C20C0C;
83 | }
84 | }
85 | }
86 | `
87 |
88 | export const CategoryItemImage = styled.div`
89 | width: 48px;
90 | height: 48px;
91 | background-image: url(${props => props.imgUrl});
92 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/c-cpns/radio-ranking/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, memo } from 'react';
2 | import { useSelector, useDispatch, shallowEqual } from 'react-redux'
3 |
4 | import {
5 | getRadios
6 | } from "../../store/actionCreators";
7 |
8 | import HYThemeHeaderNormal from '@/components/theme-header-normal';
9 | import HYRadioRankingCover from '@/components/radio-ranking-cover';
10 | import HYPagination from '@/components/pagination';
11 | import {
12 | RankingWraper
13 | } from "./style";
14 | import { useState } from 'react';
15 |
16 | export default memo(function HYRadioRanking() {
17 | // state
18 | const [currentPage, setCurrentPage] = useState(1);
19 |
20 | // redux
21 | const { currentId, radios } = useSelector(state => ({
22 | currentId: state.getIn(["djradio", "currentId"]),
23 | radios: state.getIn(["djradio", "radios"])
24 | }), shallowEqual)
25 | const dispatch = useDispatch();
26 |
27 | // hooks
28 | useEffect(() => {
29 | if (currentId === 0) return;
30 | dispatch(getRadios(currentId, 0))
31 | }, [dispatch, currentId]);
32 |
33 | // hanlde function
34 | const onPageChange = (page, pageSize) => {
35 | setCurrentPage(page);
36 | dispatch(getRadios(currentId, page * 30));
37 | }
38 |
39 | return (
40 |
41 |
42 |
43 | {
44 | radios.map((item, index) => {
45 | return ()
46 | })
47 | }
48 |
49 |
53 |
54 | )
55 | })
56 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/c-cpns/radio-ranking/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const RankingWraper = styled.div`
4 | .ranking-list {
5 | display: flex;
6 | justify-content: space-between;
7 | flex-wrap: wrap;
8 | }
9 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/c-cpns/radio-recommend/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, memo } from 'react';
2 | import { useSelector, useDispatch, shallowEqual } from 'react-redux';
3 |
4 | import {
5 | getRadioRecommend
6 | } from "../../store/actionCreators";
7 |
8 | import HYThemeHeaderNormal from '@/components/theme-header-normal';
9 | import HYRadioRecomendCover from '@/components/radio-recommend-cover';
10 | import {
11 | RecommendWrapper
12 | } from "./style";
13 |
14 | export default memo(function HYRadioRecommend() {
15 | // redux
16 | const { currentId, recommends } = useSelector(state => ({
17 | currentId: state.getIn(["djradio", "currentId"]),
18 | recommends: state.getIn(["djradio", "recommends"])
19 | }), shallowEqual);
20 | const dispatch = useDispatch();
21 |
22 | // hooks
23 | useEffect(() => {
24 | if (currentId === 0) return;
25 | dispatch(getRadioRecommend(currentId));
26 | }, [dispatch, currentId])
27 |
28 | return (
29 |
30 |
31 |
32 | {
33 | recommends.slice(0, 5).map((item) => {
34 | return ()
35 | })
36 | }
37 |
38 |
39 | )
40 | })
41 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/c-cpns/radio-recommend/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const RecommendWrapper = styled.div`
4 | .radio-list {
5 | margin: 20px 0 40px;
6 | display: flex;
7 | justify-content: space-between;
8 | }
9 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import HYRadioCategory from './c-cpns/radio-category';
4 | import HYRadioRecommend from './c-cpns/radio-recommend';
5 | import HYRadioRanking from './c-cpns/radio-ranking';
6 | import {
7 | DjRadioWrapper
8 | } from "./style";
9 |
10 | export default memo(function HYDjradio() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 | )
18 | })
19 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/store/actionCreators.js:
--------------------------------------------------------------------------------
1 | import {
2 | getDjRadioCatelist,
3 | getDjRadioRecommend,
4 | getDjRadios
5 | } from "@/services/djradio";
6 | import * as actionTypes from './constants';
7 |
8 | const changeCategoryAction = (res) => ({
9 | type: actionTypes.CHANGE_RADIO_CATEGORY,
10 | categories: res.categories
11 | })
12 |
13 | const changeRecommendsAction = (res) => ({
14 | type: actionTypes.CHANGE_RECOMMENDS,
15 | recommends: res.djRadios
16 | })
17 |
18 | const changeRadiosAction = (res) => ({
19 | type: actionTypes.CHANGE_RADIOS,
20 | radios: res.djRadios
21 | })
22 |
23 | export const changeCurrentIdActio = (id) => ({
24 | type: actionTypes.CHANGE_CURRENT_ID,
25 | currentId: id
26 | })
27 |
28 | export const getRadioCategories = () => {
29 | return dispatch => {
30 | getDjRadioCatelist().then(res => {
31 | dispatch(changeCategoryAction(res));
32 | const currentId = res.categories[0].id;
33 | dispatch(changeCurrentIdActio(currentId));
34 | })
35 | }
36 | }
37 |
38 | export const getRadioRecommend = (currentId) => {
39 | return dispatch => {
40 | getDjRadioRecommend(currentId).then(res => {
41 | dispatch(changeRecommendsAction(res));
42 | })
43 | }
44 | }
45 |
46 | export const getRadios = (currentId, offset) => {
47 | return dispatch => {
48 | getDjRadios(currentId, 30, offset).then(res => {
49 | dispatch(changeRadiosAction(res));
50 | })
51 | }
52 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/store/constants.js:
--------------------------------------------------------------------------------
1 | export const CHANGE_RADIO_CATEGORY = "djradio/CHANGE_RADIO_CATEGORY";
2 | export const CHANGE_CURRENT_ID = "djradio/CHANGE_CURRENT_ID";
3 | export const CHANGE_RECOMMENDS = "djradio/CHANGE_RECOMMENDS";
4 | export const CHANGE_RADIOS = "djradio/CHANGE_RADIOS";
5 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/store/index.js:
--------------------------------------------------------------------------------
1 | import reducer from './reducer';
2 |
3 | export {
4 | reducer
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/store/reducer.js:
--------------------------------------------------------------------------------
1 | import { Map } from "immutable";
2 | import * as actionTypes from './constants';
3 |
4 | const defaultState = Map({
5 | categories: [],
6 | currentId: 0,
7 | recommends: [],
8 | radios: []
9 | })
10 |
11 | export default (state = defaultState, action) => {
12 | switch(action.type) {
13 | case actionTypes.CHANGE_RADIO_CATEGORY:
14 | return state.set("categories", action.categories);
15 | case actionTypes.CHANGE_CURRENT_ID:
16 | return state.set("currentId", action.currentId);
17 | case actionTypes.CHANGE_RECOMMENDS:
18 | return state.set("recommends", action.recommends);
19 | case actionTypes.CHANGE_RADIOS:
20 | return state.set("radios", action.radios);
21 | default:
22 | return state;
23 | }
24 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/djradio/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const DjRadioWrapper = styled.div`
4 | border: 1px solid #d3d3d3;
5 | border-width: 0 1px;
6 | background-color: #fff;
7 | padding: 40px;
8 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/ranking/c-cpns/ranking-header/index.js:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react';
2 | import { useSelector, shallowEqual } from "react-redux";
3 |
4 | import { formatMonthDay } from "@/utils/format-utils";
5 |
6 | import HYSongOperationBar from '@/components/song-operation-bar';
7 | import {
8 | RankingHeaderWrapper
9 | } from './style';
10 |
11 | export default memo(function HYRankingHeader() {
12 | // redux
13 | const state = useSelector(state => ({
14 | playList: state.getIn(["ranking", "playList"]),
15 | }), shallowEqual);
16 | const topInfo = state.playList;
17 |
18 | return (
19 |
20 |
21 |
22 |
封面
23 |
25 |
{topInfo.name}
26 |
27 |
28 |
最近更新：{formatMonthDay(topInfo.updateTime)}
29 |
（{"每日更新:TODO"}）
30 |
31 |
35 |
24 |
25 |
26 |
27 | |
28 | 标题 |
29 | 时长 |
30 | 歌手 |
31 |
32 |
33 |
34 | {
35 | tracks.map((item, index) => {
36 | return (
37 |
38 | |
39 |
40 | {index + 1}
41 |
42 |
43 | |
44 |
45 |
46 | {
47 | index < 3 ?
48 | (  ) : null
49 | }
50 |
51 | {item.name}
52 | |
54 | {formatMinuteSecond(item.dt)} |
55 | {item.ar[0].name} |
56 |
57 | )
58 | })
59 | }
60 |
61 |
62 |
{index === 0 ? "云音乐特色榜" : "全球媒体榜"}
45 | }
46 | return (
47 |
48 | {header}
49 |
hanldeItemClick(index)}>
51 |
52 |
53 |
{item.name}
54 |
{item.updateFrequency}
55 |
56 |
57 |
17 | {
18 | hotRadios.map((item, index) => {
19 | return (
20 |
21 |
22 | 
23 |
24 |
25 |
{item.name}
26 |
{item.position}
27 |
28 |
29 | )
30 | })
31 | }
32 |
39 | {
40 | state.recommends.slice(0, 8).map((item, index) => {
41 | return (
42 |
43 | )
44 | })
45 | }
46 |
47 |
48 | )
49 | })
50 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/hot-recommend/style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const RecommendWrapper = styled.div`
4 | .recommend-list {
5 | display: flex;
6 | flex-wrap: wrap;
7 | justify-content: space-between;
8 | }
9 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/new-album/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, memo } from 'react';
2 | import { useSelector, useDispatch, shallowEqual } from 'react-redux';
3 |
4 | import {
5 | getAlbum
6 | } from "../../store/actionCreators";
7 |
8 | import { Carousel } from 'antd';
9 | import HYThemeHeaderRCM from '@/components/theme-header-rcm';
10 | import HYAlbumCover from "@/components/album-cover";
11 | import {
12 | AlbumWrapper
13 | } from "./style";
14 |
15 | export default memo(function HYNewAlbum(props) {
16 | // redux
17 | const state = useSelector(state => ({
18 | newAlbum: state.getIn(["recommend", "newAlbum"])
19 | }), shallowEqual);
20 | const dispatch = useDispatch();
21 |
22 | // hooks
23 | const carouselRef = useRef();
24 | useEffect(() => {
25 | dispatch(getAlbum());
26 | }, [dispatch]);
27 |
28 | return (
29 |
30 |
31 |
32 |
carouselRef.current.prev()}>
34 |
35 |
36 | {
37 | [0, 1].map(item => {
38 | return (
39 |
40 | {
41 | state.newAlbum.slice(item*5, (item+1)*5).map(item => {
42 | return (
43 |
44 | )
45 | })
46 | }
47 |
48 | )
49 | })
50 | }
51 |
52 |
53 |
carouselRef.current.next()}>
55 |
34 |
35 |
36 |
37 |
38 |
39 | )
40 | })
41 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/ranking-list/style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const RankingWrapper = styled.div`
4 | .tops {
5 | margin: 30px 0;
6 | display: flex;
7 | background-image: url(${require("@/assets/img/recommend-top-bg.png")});
8 | height: 472px;
9 | }
10 | `
11 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/settle-singer/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, memo } from 'react';
2 | import { useDispatch, useSelector, shallowEqual } from 'react-redux';
3 |
4 | import {
5 | getSettleSingers
6 | } from "../../store/actionCreators";
7 | import {
8 | getSizeImage
9 | } from "@/utils/format-utils";
10 |
11 | import HYThemeHeaderSmall from '@/components/theme-header-small';
12 | import {
13 | SetterSongerWrapper
14 | } from "./style";
15 |
16 | export default memo(function HYSettleSinger() {
17 | // redux
18 | const dispatch = useDispatch();
19 | const state = useSelector((state) => ({
20 | settleSings: state.getIn(["recommend", "settleSings"])
21 | }), shallowEqual);
22 |
23 | // hooks
24 | useEffect(() => {
25 | dispatch(getSettleSingers());
26 | }, [dispatch])
27 |
28 | return (
29 |
30 |
31 |
46 |
49 |
50 | )
51 | })
52 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/settle-singer/style.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const SetterSongerWrapper = styled.div`
4 | padding: 20px;
5 |
6 | .singer-list {
7 | .item {
8 | display: flex;
9 | height: 62px;
10 | margin-top: 14px;
11 | background-color: #fafafa;
12 | text-decoration: none;
13 |
14 | :hover {
15 | background-color: #f4f4f4;
16 | }
17 |
18 | img {
19 | width: 62px;
20 | height: 62px;
21 | }
22 |
23 | .info {
24 | margin: 8px 0 0 10px;
25 | .title {
26 | color: #333;
27 | font-size: 14px;
28 | font-weight: 700;
29 | }
30 |
31 | .name {
32 | margin-top: 5px;
33 | }
34 | }
35 | }
36 | }
37 |
38 | .apply-for {
39 | margin-top: 12px;
40 | a {
41 | color: #333;
42 | font-weight: 700;
43 | text-align: center;
44 | display: block;
45 | height: 31px;
46 | line-height: 31px;
47 | border-radius: 4px;
48 | background-color: #fafafa;
49 | border: 1px solid #c3c3c3;
50 | text-decoration: none;
51 | }
52 | }
53 | `
54 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/top-banner/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo, useEffect, useCallback, useState, useRef } from 'react';
2 | import { useDispatch, useSelector, shallowEqual } from 'react-redux';
3 |
4 | import {
5 | getBanner
6 | } from '../../store/actionCreators';
7 |
8 | import { Carousel } from 'antd';
9 | import {
10 | BannerWrapper,
11 | BannerLeft,
12 | BannerRight,
13 | BannerControl
14 | } from './style';
15 |
16 | export default memo(function HYTopBanner() {
17 | const [currentIndex, setCurrentIndex] = useState(0);
18 |
19 | const dispatch = useDispatch();
20 | const state = useSelector(state => ({
21 | banners: state.getIn(["recommend", "topBanners"])
22 | }), shallowEqual)
23 |
24 | const bannerRef = useRef();
25 | useEffect(() => {
26 | dispatch(getBanner());
27 | }, [dispatch]);
28 |
29 | const bannerChange = useCallback((from, to) => {
30 | setTimeout(() => {
31 | setCurrentIndex(from);
32 | }, 0);
33 | }, []);
34 |
35 | const bgImage = state.banners[currentIndex] && (state.banners[currentIndex].imageUrl + "?imageView&blur=40x20")
36 |
37 | return (
38 |
39 |
40 |
41 |
42 | {
43 | state.banners.map((item, index) => {
44 | return (
45 |
46 |
47 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
11 | 用户登录
12 |
13 | )
14 | })
15 |
16 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/c-cpns/user-login/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const UserLoginWrapper = styled.div`
4 | height: 126px;
5 | background-position: 0 0;
6 | padding: 16px 22px;
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 |
11 | p {
12 | line-height: 25px;
13 | }
14 |
15 | a {
16 | margin-top: 10px;
17 | display: inline-block;
18 | width: 100px;
19 | height: 31px;
20 | line-height: 31px;
21 | text-align: center;
22 | color: #fff;
23 | text-decoration: none;
24 | background-position: 0 -195px;
25 | text-shadow: 0 1px 0 #8a060b;
26 |
27 | :hover {
28 | background-position: -110px -195px;
29 | }
30 | }
31 | `
32 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 |
3 | import HYTopBanner from './c-cpns/top-banner';
4 | import HYHotRecommend from './c-cpns/hot-recommend';
5 | import HYNewAlbum from './c-cpns/new-album';
6 | import HYRankingList from './c-cpns/ranking-list';
7 | import HYUserLogin from './c-cpns/user-login';
8 | import HYSettleSinger from './c-cpns/settle-singer';
9 | import HYHotRadio from './c-cpns/hot-radio';
10 | import {
11 | RecommendWraper,
12 | Content,
13 | RecommendLeft,
14 | RecommendRight
15 | } from "./style";
16 |
17 | export default memo(function HYRecommend() {
18 | return (
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | )
35 | })
36 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/store/actionCreators.js:
--------------------------------------------------------------------------------
1 | import * as actionTypes from "./constants";
2 |
3 | import {
4 | getTopBanner,
5 | getHotRecommend,
6 | getNewAlbum,
7 | getTopList,
8 | getArtistList
9 | } from "@/services/recommend";
10 |
11 | const changeBannerAction = (res) => ({
12 | type: actionTypes.CHANGE_TOP_BNNAER,
13 | banners: res.banners
14 | })
15 |
16 | const changeRecommendAction = (res) => ({
17 | type: actionTypes.CHANGE_HOT_RECOMMEND,
18 | recommends: res.result
19 | })
20 |
21 | const changeNewAlbumAction = (res) => ({
22 | type: actionTypes.CHANGE_NEW_ALBUM,
23 | newAlbum: res.albums
24 | })
25 |
26 | const changeUpListAction = (res) => ({
27 | type: actionTypes.CHANGE_UP_LIST,
28 | topUpList: res.playlist
29 | })
30 |
31 | const changeNewListAction = (res) => ({
32 | type: actionTypes.CHANGE_NEW_LIST,
33 | topNewList: res.playlist
34 | })
35 |
36 | const changeOriginListAction = (res) => ({
37 | type: actionTypes.CHANGE_ORIGIN_LIST,
38 | topOriginList: res.playlist
39 | })
40 |
41 | const changeSettleSingsAction = (res) => ({
42 | type: actionTypes.CHANGE_SETTLE_SONGER,
43 | settleSings: res.artists
44 | })
45 |
46 |
47 | export const getBanner = () => {
48 | return dispatch => {
49 | getTopBanner().then(res => {
50 | dispatch(changeBannerAction(res));
51 | })
52 | }
53 | }
54 |
55 | export const getRecommend = () => {
56 | return dispatch => {
57 | getHotRecommend().then(res => {
58 | dispatch(changeRecommendAction(res))
59 | })
60 | }
61 | }
62 |
63 | export const getAlbum = () => {
64 | return dispatch => {
65 | getNewAlbum(10, 0).then(res => {
66 | dispatch(changeNewAlbumAction(res))
67 | })
68 | }
69 | }
70 |
71 | export const getTopData = (idx) => {
72 | return dispatch => {
73 | getTopList(idx).then(res => {
74 | switch (idx) {
75 | case 19723756:
76 | dispatch(changeNewListAction(res));
77 | break;
78 | case 3779629:
79 | dispatch(changeOriginListAction(res));
80 | break;
81 | case 2884035:
82 | dispatch(changeUpListAction(res));
83 | break;
84 | default:
85 | console.log("其他数据处理");
86 | }
87 | })
88 | }
89 | }
90 |
91 | export const getSettleSingers = () => {
92 | return dispath => {
93 | getArtistList(5, 5001).then(res => {
94 | dispath(changeSettleSingsAction(res))
95 | })
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/store/constants.js:
--------------------------------------------------------------------------------
1 | export const CHANGE_TOP_BNNAER = "recommend/CHANGE_TOP_BNNAER";
2 | export const CHANGE_HOT_RECOMMEND = "recommend/CHANGE_HOT_RECOMMEND";
3 | export const CHANGE_NEW_ALBUM = "recommend/CHANGE_NEW_ALBUM";
4 | export const CHANGE_UP_LIST = "recommend/CHAGNE_UP_LIST";
5 | export const CHANGE_NEW_LIST = "recommend/CHANGE_NEW_LIST";
6 | export const CHANGE_ORIGIN_LIST = "recommend/CHANGE_ORIGIN_LIST";
7 |
8 | export const CHANGE_SETTLE_SONGER = "recommend/CHANGE_SETTLE_SONGER";
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/store/index.js:
--------------------------------------------------------------------------------
1 | import reducer from "./reducer";
2 |
3 | export {
4 | reducer
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/store/reducer.js:
--------------------------------------------------------------------------------
1 | import { Map } from "immutable";
2 | import * as actionTypes from './constants';
3 |
4 | const defaultState = Map({
5 | topBanners: [],
6 | hotRecommends: [],
7 | newAlbum: [],
8 | topUpList: {},
9 | topNewList: {},
10 | topOriginList: {},
11 |
12 | settleSings: [],
13 | })
14 |
15 | export default (state = defaultState, action) => {
16 | switch(action.type) {
17 | case actionTypes.CHANGE_TOP_BNNAER:
18 | return state.set("topBanners", action.banners);
19 | case actionTypes.CHANGE_HOT_RECOMMEND:
20 | return state.set("hotRecommends", action.recommends);
21 | case actionTypes.CHANGE_NEW_ALBUM:
22 | return state.set("newAlbum", action.newAlbum);
23 | case actionTypes.CHANGE_UP_LIST:
24 | return state.set("topUpList", action.topUpList);
25 | case actionTypes.CHANGE_NEW_LIST:
26 | return state.set("topNewList", action.topNewList);
27 | case actionTypes.CHANGE_ORIGIN_LIST:
28 | return state.set("topOriginList", action.topOriginList);
29 | case actionTypes.CHANGE_SETTLE_SONGER:
30 | return state.set("settleSings", action.settleSings)
31 | default:
32 | return state;
33 | }
34 | }
35 |
36 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/recommend/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const RecommendWraper = styled.div`
4 |
5 | `
6 |
7 | export const Content = styled.div`
8 | background-color: #fff;
9 | display: flex;
10 | `
11 |
12 | export const RecommendLeft = styled.div`
13 | padding: 20px;
14 | width: 729px;
15 | `
16 |
17 | export const RecommendRight = styled.div`
18 | width: 250px;
19 | border: 1px solid #d3d3d3;
20 | border-width: 0 1px;
21 | `
22 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/c-cpns/songs-category/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { useSelector, useDispatch, shallowEqual } from "react-redux";
3 |
4 | import {
5 | changeCurrentCategoryAction,
6 | getSongList
7 | } from "../../store/actionCreators";
8 |
9 | import {
10 | CategoryWrapper
11 | } from "./style";
12 |
13 | export default memo(function HYSongsCategory() {
14 | // redux
15 | const { category } = useSelector(state => ({
16 | category: state.getIn(["songs", "category"])
17 | }), shallowEqual);
18 | const dispatch = useDispatch();
19 |
20 | function selectCategory(name) {
21 | dispatch(changeCurrentCategoryAction(name));
22 | dispatch(getSongList(0));
23 | }
24 |
25 | return (
26 |
27 |
28 |
29 | selectCategory("全部")}>全部风格
30 |
31 |
32 | {
33 | category.map((item, index) => {
34 | return (
35 |
36 | -
37 |
38 | {item.name}
39 |
40 | -
41 | {
42 | item.subs.map(sItem => {
43 | return (
44 |
45 | selectCategory(sItem.name)}>{sItem.name}
46 | |
47 |
48 | )
49 | })
50 | }
51 |
52 |
53 | )
54 | })
55 | }
56 |
33 | {
34 | songList.map((item, index) => {
35 | return (
36 |
37 | )
38 | })
39 | }
40 |
41 |
45 |
46 | )
47 | })
48 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/c-cpns/songs-list/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const SongListWrapper = styled.div`
4 | .songs-list {
5 | display: flex;
6 | flex-wrap: wrap;
7 | justify-content: space-between;
8 | margin-right: -30px;
9 | }
10 | `
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, memo } from 'react';
2 | import { useDispatch } from "react-redux";
3 | import { useLocation } from 'react-router-dom';
4 |
5 | import {
6 | getCategory,
7 | getSongList,
8 | changeCurrentCategoryAction
9 | } from "./store/actionCreators";
10 |
11 | import HYSongsHeader from "./c-cpns/songs-header";
12 | import HYSongsList from './c-cpns/songs-list';
13 | import {
14 | SongsWrapper
15 | } from "./style"
16 |
17 | export default memo(function HYSongs() {
18 | // redux
19 | const dispatch = useDispatch();
20 | const cat = useLocation().cat;
21 |
22 | useEffect(() => {
23 | dispatch(changeCurrentCategoryAction(cat));
24 | }, [dispatch, cat]);
25 |
26 | // hooks
27 | useEffect(() => {
28 | dispatch(getCategory());
29 | dispatch(getSongList(0));
30 | }, [dispatch])
31 |
32 | return (
33 |
34 |
35 |
36 |
37 | )
38 | })
39 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/store/actionCreators.js:
--------------------------------------------------------------------------------
1 | import * as actionTypes from './constants';
2 | import { PER_PAGE_NUMBER } from './constants';
3 |
4 | import {
5 | getSongCategory,
6 | getSongCategoryList
7 | } from "@/services/songs";
8 | import {
9 | handleSongsCategory
10 | } from "@/utils/handle-data";
11 |
12 | const changeCategoryAction = (res) => ({
13 | type: actionTypes.CHANGE_CATEGORY,
14 | category: res
15 | })
16 |
17 | const changeSongListAction = (res) => ({
18 | type: actionTypes.CHANGE_CATEGORY_SONGS,
19 | categorySongs: res
20 | })
21 |
22 | export const changeCurrentCategoryAction = (name) => ({
23 | type: actionTypes.CHANGE_CURRENT_CATEGORY,
24 | currentCategory: name
25 | })
26 |
27 | export const getCategory = () => {
28 | return dispatch => {
29 | getSongCategory().then(res => {
30 | const categoryData = handleSongsCategory(res);
31 | dispatch(changeCategoryAction(categoryData))
32 | })
33 | }
34 | }
35 |
36 | export const getSongList = (page) => {
37 | return (dispatch, getState) => {
38 | // 1.获取currentCategory
39 | const name = getState().getIn(["songs", "currentCategory"]);
40 |
41 | // 2.获取数据
42 | getSongCategoryList(name, page * PER_PAGE_NUMBER).then(res => {
43 | dispatch(changeSongListAction(res));
44 | })
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/store/constants.js:
--------------------------------------------------------------------------------
1 | export const CHANGE_CATEGORY = "songs/CHANGE_CATEGORY";
2 | export const CHANGE_CURRENT_CATEGORY = "songs/CHANGE_CURRENT_CATEGORY";
3 | export const CHANGE_CATEGORY_SONGS = "songs/CHANGE_CATEGORY_SONGS";
4 |
5 | export const PER_PAGE_NUMBER = 35;
6 |
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/store/index.js:
--------------------------------------------------------------------------------
1 | import reducer from './reducer';
2 |
3 | export {
4 | reducer
5 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/store/reducer.js:
--------------------------------------------------------------------------------
1 | import { Map } from "immutable";
2 | import * as actionTypes from "./constants";
3 |
4 | const defaultState = Map({
5 | category: [],
6 | currentCategory: "全部",
7 | categorySongs: {}
8 | })
9 |
10 | export default (state = defaultState, action) => {
11 | switch(action.type) {
12 | case actionTypes.CHANGE_CATEGORY:
13 | return state.set("category", action.category);
14 | case actionTypes.CHANGE_CURRENT_CATEGORY:
15 | return state.set("currentCategory", action.currentCategory);
16 | case actionTypes.CHANGE_CATEGORY_SONGS:
17 | return state.set("categorySongs", action.categorySongs);
18 | default:
19 | return state;
20 | }
21 | }
--------------------------------------------------------------------------------
/src/pages/discover/c-pages/songs/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const SongsWrapper = styled.div`
4 | padding: 40px;
5 | border: 1px solid #d3d3d3;
6 | border-width: 0 1px;
7 | background-color: #fff;
8 | `
--------------------------------------------------------------------------------
/src/pages/discover/index.js:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react';
2 | import { NavLink } from "react-router-dom";
3 | import { renderRoutes } from "react-router-config";
4 |
5 | import {
6 | dicoverMenu
7 | } from "@/services/local-data";
8 |
9 | import {
10 | DiscoverWrapper,
11 | TopMenu
12 | } from "./style";
13 |
14 | export default memo(function HYDiscover(props) {
15 | const { route } = props;
16 |
17 | return (
18 |
19 |
20 |
21 | {
22 | dicoverMenu.map((item, index) => {
23 | return (
24 |
25 | {item.title}
26 |
27 | );
28 | })
29 | }
30 |
31 |
130 |
131 |
133 |
134 |
136 |
137 |
138 |
139 |
140 | 
141 |
142 |
144 |
145 | {currentSong.name}
146 | {currentSong.ar[0].name}
147 |
148 |
149 |
150 |
151 | {formatMinuteSecond(currentTime * 1000)}
152 | /
153 | {formatMinuteSecond(duration)}
154 |
155 |
156 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
167 |
171 |
172 |
173 |
25 | {
26 | currentLyrics.map((item, index) => {
27 | return (
28 |
30 | {item.content}
31 |
32 | )
33 | })
34 | }
35 |
播放列表({playList.length})
20 |
21 |
25 |
29 |
30 |
31 |
32 | {currentSong.name}
33 |
34 |
35 | )
36 | })
37 |
--------------------------------------------------------------------------------
/src/pages/player/app-play-panel/c-cpns/play-header/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HeaderWrapper = styled.div`
4 | display: flex;
5 | height: 41px;
6 | line-height: 41px;
7 | background: url(${require("@/assets/img/playpanel_bg.png")}) 0 0;
8 | `
9 |
10 | export const HeaderLeft = styled.div`
11 | display: flex;
12 | justify-content: space-between;
13 | width: 553px;
14 | padding: 0 25px;
15 |
16 | h3 {
17 | color: #e2e2e2;
18 | font-weight: 700;
19 | }
20 |
21 | .operator {
22 | color: #ccc;
23 |
24 | button {
25 | background-color: transparent;
26 | color: #ccc;
27 | }
28 |
29 | .icon {
30 | display: inline-block;
31 | width: 16px;
32 | height: 16px;
33 | position: relative;
34 | top: 4px;
35 | right: 2px;
36 | }
37 |
38 | .favor {
39 | background-position: -24px 0;
40 | }
41 |
42 | .remove {
43 | width: 13px;
44 | background-position: -51px 0;
45 | }
46 | }
47 | `
48 |
49 | export const HeaderRight = styled.div`
50 | flex: 1;
51 | text-align: center;
52 | color: #fff;
53 | font-size: 14px;
54 | `
55 |
--------------------------------------------------------------------------------
/src/pages/player/app-play-panel/c-cpns/play-list/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { useSelector, shallowEqual } from 'react-redux';
3 | import classNames from 'classnames';
4 |
5 | import { formatMinuteSecond } from '@/utils/format-utils';
6 |
7 | import { PlayListWrapper } from './style';
8 |
9 | export default memo(function HYPlayList() {
10 | const { playList, currentSongIndex } = useSelector(state => ({
11 | playList: state.getIn(["player", "playList"]),
12 | currentSongIndex: state.getIn(["player", "currentSongIndex"])
13 | }), shallowEqual);
14 |
15 | return (
16 |
17 | {
18 | playList.map((item, index) => {
19 | return (
20 |
22 |
{item.name}
23 |
24 | {item.ar[0].name}
25 | {formatMinuteSecond(item.dt)}
26 |
27 |
28 |
13 |
14 |
15 |
16 |
6 |
7 |
8 | )
9 | })
10 |
--------------------------------------------------------------------------------
/src/pages/player/c-cpns/player-info/index.js:
--------------------------------------------------------------------------------
1 | import React, { memo, useState } from 'react';
2 | import { useSelector, shallowEqual } from 'react-redux';
3 |
4 | import { getSizeImage } from '@/utils/format-utils';
5 |
6 | import HYSongOperationBar from '@/components/song-operation-bar';
7 | import {
8 | InfoWrapper,
9 | InfoLeft,
10 | InfoRight
11 | } from './style';
12 |
13 | export default memo(function HYPlayerInfo() {
14 | // props and hooks
15 | const [isSpread, setIsSpread] = useState(false);
16 |
17 | // redux hooks
18 | const { currentSong, currentLyrics } = useSelector(state => ({
19 | currentSong: state.getIn(["player", "currentSong"]),
20 | currentLyrics: state.getIn(["player", "currentLyrics"])
21 | }), shallowEqual);
22 |
23 | // handle code
24 | const totalLyricCount = isSpread ? currentLyrics.length : 13;
25 |
26 | return (
27 |
28 |
29 |
30 |
31 |
32 |
40 |
41 |
{currentSong.name}
42 |
43 |
47 |
51 |
52 |
56 |
57 |
58 |
59 | {
60 | currentLyrics.slice(0, totalLyricCount).map((item, index) => {
61 | return
{item.content}
62 | })
63 | }
64 |
65 |
70 |
23 | {
24 | simiSongs.map((item, index) => {
25 | return (
26 |
27 |
35 |
36 |
37 |
38 |
39 |
40 | )
41 | })
42 | }
43 |
27 | {
28 | simiPlaylist.map((item, index) => {
29 | return (
30 |
42 | )
43 | })
44 | }
45 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
})
27 | ranking
28 |