Merge pull request #2 from Unique111/fix/bugs-in-1.0.0

Fix/bugs in 1.0.0

Author: uniquemo

.vscode/settings.json

@@ -1,2 +1,18 @@
 {
+  "editor.tabSize": 2,
+  "javascript.validate.enable": true,
+  "javascript.format.enable": true,
+  "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
+  "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
+  "[javascriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
+  "[typescriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
+  "typescript.validate.enable": true,
+  "typescript.format.enable": true,
+  "eslint.format.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "javascriptreact",
+    "typescriptreact"
+  ]
 }

CHAGELOG.md

@@ -0,0 +1,69 @@
+# 1.0.0 (2020-05-17)
+
+
+### Bug Fixes
+
+* file letter case in linux ([e994528](https://github.com/Unique111/react-netease-music/commit/e994528fda5ef62675525b6ac37613c96c5b802d))
+* lyric scrollbar ui ([98058df](https://github.com/Unique111/react-netease-music/commit/98058dfe8bc4a5b0b79070617d674df3790ae69a))
+* number, add github address ([a560127](https://github.com/Unique111/react-netease-music/commit/a56012777819790c0455701b3754570e3f50bd1c))
+* play progress bar ([d05d444](https://github.com/Unique111/react-netease-music/commit/d05d4448dcabd03d84523b3fb203485d5012cc68))
+* remove heart like button in music list ([8dfe6b7](https://github.com/Unique111/react-netease-music/commit/8dfe6b70cc2441da730217548947802a96e0a344))
+* remove lazy import for layout ([53702d7](https://github.com/Unique111/react-netease-music/commit/53702d7ab49774421473a7ad4480a8ff75232b47))
+* search input controlled to uncontrolled warning ([d894774](https://github.com/Unique111/react-netease-music/commit/d89477468540a55db235f03d24da204773e7d32d))
+* typo ([17ff938](https://github.com/Unique111/react-netease-music/commit/17ff9389be556f4ad0914f9b0eaadb4b28e2a53e))
+* when remove play history, ui does not update ([622a1b3](https://github.com/Unique111/react-netease-music/commit/622a1b388f08f7be32a66d0a9f02b8f82bf27128))
+
+
+### Features
+
+* add @babel/plugin-transform-runtime to babelrc to enable async/await grammer ([6b3c8c1](https://github.com/Unique111/react-netease-music/commit/6b3c8c15b9b6f5345ea02267d9fc73ceb309967f))
+* add api address ([03aef4a](https://github.com/Unique111/react-netease-music/commit/03aef4a13b28e27e9df1560ea32df48f0221f821))
+* add axios error toaster ([e695ed6](https://github.com/Unique111/react-netease-music/commit/e695ed6eeb074e2f0327d197858375a2cd794679))
+* add banner click event, play music ([58b76a1](https://github.com/Unique111/react-netease-music/commit/58b76a107dcf747212b989aac090ea16ff07fe7d))
+* add constants.module.css ([9336c03](https://github.com/Unique111/react-netease-music/commit/9336c031f96d6efc8a183d69dace1fbde57efff4))
+* add docker and nginx config file ([3f11b0c](https://github.com/Unique111/react-netease-music/commit/3f11b0c085484c877f8bf843584d376ed7a17efd))
+* add Header Searcher UI and logic ([e0010aa](https://github.com/Unique111/react-netease-music/commit/e0010aa5575d93becc2bfd4cbcbbaf1e668743ad))
+* add LatestMusic Page UI and logic ([2a12151](https://github.com/Unique111/react-netease-music/commit/2a12151e82b6537426eb920d2275d915fdfa086d))
+* add Layout, postcss-loader, react-router-dom ([5ab34ee](https://github.com/Unique111/react-netease-music/commit/5ab34ee07d0154f1f8d176d0358d273ec3e070c1))
+* add localStorage helper ([41f57e4](https://github.com/Unique111/react-netease-music/commit/41f57e49e719c267f0e85ad78b41b9b7331bd723))
+* add login dialog ([95ea239](https://github.com/Unique111/react-netease-music/commit/95ea239fb943d6f9300acb8690f6a11640c48778))
+* add login logic, including apis ([1f22155](https://github.com/Unique111/react-netease-music/commit/1f22155be29a416d9fba0257c74aedf9557a546a))
+* add logout logic ([d4e22d4](https://github.com/Unique111/react-netease-music/commit/d4e22d429533dbfc9b1ac9a7236fca66a4f4c78b))
+* add logReducer, modify login/logout logic ([80de017](https://github.com/Unique111/react-netease-music/commit/80de0174a525acd4311892d438f0e002933491ed))
+* add lyric logic ([192be24](https://github.com/Unique111/react-netease-music/commit/192be24d6097676d9a5c4669709a312daac1d814))
+* add menu nav logic, favicon etc ([a0d3d01](https://github.com/Unique111/react-netease-music/commit/a0d3d01b93dffa5165ae2a90b4f02fd68e27296f))
+* add MusciDetail component, comment, simi songlist, simi songs logic ([a8e11bd](https://github.com/Unique111/react-netease-music/commit/a8e11bdf5e360fd7a630a2536a4fcf912dde7f33))
+* add Pagination component ([640815e](https://github.com/Unique111/react-netease-music/commit/640815e0885044414c1723432b109f233d336415))
+* add play list logic ([bb29b1e](https://github.com/Unique111/react-netease-music/commit/bb29b1eca27e980f58c88e3b120f21c590fd1c2c))
+* add play recode api and ui logic ([2300f9d](https://github.com/Unique111/react-netease-music/commit/2300f9d99e38ef045dfd0eed8604f7f42f232d18))
+* add PlayMode, PlayVolume and play logic ([a4d1c1d](https://github.com/Unique111/react-netease-music/commit/a4d1c1d2c1436ff52900d9911c9229f413cb28e5))
+* add playMusic reducer, context etc ([599dd16](https://github.com/Unique111/react-netease-music/commit/599dd167ee1013127838dc48e2cb578951455601))
+* add ProgressBar ([07d511a](https://github.com/Unique111/react-netease-music/commit/07d511acb67ef33cfc4fd93df6f926b1aa50460c))
+* add Recommendation, Banner logic ([5c01f03](https://github.com/Unique111/react-netease-music/commit/5c01f03df4d73afa156530aaaac76aac25fb45f7))
+* add Recommendation, Latest music logic ([1e8fbcd](https://github.com/Unique111/react-netease-music/commit/1e8fbcd486f804ec6ad580d96b62d81470f5179a))
+* add Recommendation, MV logic ([a5b9210](https://github.com/Unique111/react-netease-music/commit/a5b9210b359c11530ed7a93235d08f2c5c9deb46))
+* add Recommendation, Song List logic ([8816f23](https://github.com/Unique111/react-netease-music/commit/8816f238653a2da0d34108f5e140bfdb9f70b622))
+* add RecommendDaily page ui and logic ([715b7c5](https://github.com/Unique111/react-netease-music/commit/715b7c5ff2b2fb820e3ee47e368981038dab2900))
+* add search Result Page ([f2cf52f](https://github.com/Unique111/react-netease-music/commit/f2cf52f9be4c3d5b4808c6795dd6ef1abf03db68))
+* add Search Result Page logic, play music logic ([4f6bf44](https://github.com/Unique111/react-netease-music/commit/4f6bf44b4cd92992fbd4644fd342d3005cf8892b))
+* add songlist detail page ui and logic ([2af8d01](https://github.com/Unique111/react-netease-music/commit/2af8d017e6b942eb37d5151bf40828a238cbb5f6))
+* add Songlists Page UI and logic ([df9dcce](https://github.com/Unique111/react-netease-music/commit/df9dcceb451403c6a524b9379d1656377ef0cc14))
+* add use songlist ui and logic ([0fbe910](https://github.com/Unique111/react-netease-music/commit/0fbe910d1027fdc7b3f7bc0fcc4be5587ee03fa5))
+* add useAsyncFn hook ([35eaf2f](https://github.com/Unique111/react-netease-music/commit/35eaf2fd7392faa835e43d04503572087105f887))
+* add useAudio hook, refactor playMusic reducer, add audioContext ([a7172a4](https://github.com/Unique111/react-netease-music/commit/a7172a4018855ca59263df23d36328afe855a104))
+* add vscode setting ([b48dd4f](https://github.com/Unique111/react-netease-music/commit/b48dd4f3d197ec31139f13af02cb6a3265867252))
+* change site title ([be03b7d](https://github.com/Unique111/react-netease-music/commit/be03b7df7d3068f1296d24dc2562d6508d515600))
+* initialize project ([2502bc9](https://github.com/Unique111/react-netease-music/commit/2502bc90735dbb84b5b8efc19776167db769828f))
+* introduce blueprints react component library ([44fdcdb](https://github.com/Unique111/react-netease-music/commit/44fdcdbe6ce476b63c887b08aa707f6102404707))
+* optimize search result ui interaction, play music logic ([46a17ff](https://github.com/Unique111/react-netease-music/commit/46a17ff89d9cbd7e061e29f926297b58688abe63))
+* update gitignore ([fe9faac](https://github.com/Unique111/react-netease-music/commit/fe9faac6957f74ad8c26a090eedfe5b07d8789fa))
+
+
+### Performance Improvements
+
+* optimize webpack bundle size, and build speed, including extract css file, lazy loading etc ([176d8bd](https://github.com/Unique111/react-netease-music/commit/176d8bd2a46df4d69cf301369a58ade9cd8ceab6))
+* remove playlist playhistory from reducer state ([96b7f33](https://github.com/Unique111/react-netease-music/commit/96b7f33c1a5bc54a811c21a01d326f6723969480))
+* use hook for Layout Footer, add requestAnimationFrame ([3c50e82](https://github.com/Unique111/react-netease-music/commit/3c50e82a5576a07e853ca0d243a272ca63eaec58))
+
+
+

deploy/bash.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# Author: unique.mo
+
+echo "Start to deploy react-netease-music"
+
+yarn build
+cp -r ./dist/** /usr/share/nginx/html
+
+echo "Successfully deploy react-netease-music"

package.json

@@ -1,13 +1,15 @@
 {
   "name": "react-netease-music",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "基于React、TypeScript的高仿网易云mac客户端播放器",
   "main": "index.js",
   "scripts": {
     "dev": "webpack-dev-server --mode=development",
     "build": "webpack --mode=production",
     "type-check": "tsc --watch",
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "changelog-gen": "conventional-changelog -p angular -i CHAGELOG.md -s",
+    "release": "./deploy/bash.sh"
   },
   "repository": {
     "type": "git",
@@ -48,6 +50,7 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.13.0",
     "clean-webpack-plugin": "^3.0.0",
+    "conventional-changelog-cli": "^2.0.34",
     "css-loader": "^3.5.2",
     "cssnano": "^4.1.10",
     "eslint": "^6.8.0",

src/components/Layout/Footer/PlayVolume/index.tsx

@@ -15,8 +15,9 @@ const PlayVolume = () => {
     controls?.volume(percent)
   }, [controls])
 
-  const donePercent = useMemo(() => {
-    return Number((state?.volume || 0).toFixed(2))
+  const originDonePercent = useMemo(() => {
+    const volume = Number((state?.volume || 0).toFixed(2))
+    return Math.floor(volume * 100)
   }, [state?.volume])
 
   return (
@@ -25,7 +26,7 @@ const PlayVolume = () => {
       <div className={styles.progress}>
         <ProgressBar
           className={styles.bar}
-          donePercent={donePercent}
+          originDonePercent={originDonePercent}
           onBarClick={handleBarClick}
         />
       </div>

src/components/MusicList/index.tsx

@@ -26,7 +26,7 @@ const MusicList: React.FC<IProps> = ({ data, onPlayAll }) => {
     {
       title: '',
       key: 'name',
-      width: '100px',
+      width: '80px',
       render: (name: string, record: IMusic, index?: number) => {
         return (
           <div className={styles.operations}>
@@ -39,7 +39,6 @@ const MusicList: React.FC<IProps> = ({ data, onPlayAll }) => {
                 {(index || 0) + 1}
               </span>
             )}
-            <Icon icon='heart' iconSize={14} />
             <Icon icon='import' iconSize={14} />
           </div>
         )

src/components/MusicList/style.module.css

@@ -26,7 +26,7 @@
     color: red;
   }
 
-  span:nth-child(2), span:nth-child(3) {
+  span:nth-child(2) {
     cursor: pointer;
 
     &:hover {

src/components/ProgressBar/index.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import cn from 'classnames'
 
+import { isNumber } from 'helpers/is'
 import styles from './style.module.css'
 
 interface IProps {
   className?: string,
-  donePercent: number,
+  donePercent?: number,
+  originDonePercent?: number,
   renderLabel?: () => string,
   onBarClick: (donePercent: number) => void
 }
 
 const { useRef, useCallback, useMemo } = React
 
-const ProgressBar: React.FC<IProps> = ({ donePercent, renderLabel, onBarClick, className }) => {
+const ProgressBar: React.FC<IProps> = ({ donePercent = 0, originDonePercent, renderLabel, onBarClick, className }) => {
   const barRef = useRef<HTMLDivElement | null>()
   const dotRef = useRef<HTMLDivElement | null>()
 
@@ -32,7 +34,9 @@ const ProgressBar: React.FC<IProps> = ({ donePercent, renderLabel, onBarClick, c
     onBarClick(percent)
   }, [getPercent, onBarClick])
 
-  const width = useMemo(() => `${Math.floor(donePercent * 100)}%`, [donePercent])
+  const width = useMemo(() => {
+    return `${isNumber(originDonePercent) ? originDonePercent : donePercent * 100}%`
+  }, [donePercent, originDonePercent])
 
   return (
     <div

src/helpers/is.ts

@@ -0,0 +1 @@
+export const isNumber = (value: any): boolean => typeof value === 'number'

src/pages/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
 
+import Layout from 'components/Layout'
 import useAudio from 'hooks/useAudio'
 import { MODE, playList as playListLocalStorage } from 'helpers/play'
 import playMusicReducer, { initialState, PlayMusicStateContext, PlayMusicDispatchContext, AudioContext, ACTIONS } from 'reducers/playMusic'
@@ -10,7 +11,6 @@ import ROUTES from 'constants/routes'
 
 const { useReducer, useMemo, useCallback, lazy, Suspense } = React
 
-const Layout = lazy(() => import('components/Layout'))
 const Discovery = lazy(() => import('./Discovery'))
 const Videos = lazy(() => import('./Videos'))
 const Search = lazy(() => import('./Search'))
@@ -74,32 +74,32 @@ const App = () => {
     }
   }, [musicId, playMode, audioControls, playList])
 
-  return (<>
-    {audio}
-    <Suspense fallback={null}>
-      <BrowserRouter>
-        <LogDispatchContext.Provider value={logDispath}>
-          <LogStateContext.Provider value={logState}>
-            <PlayMusicDispatchContext.Provider value={dispatch}>
-              <PlayMusicStateContext.Provider value={state}>
-                <AudioContext.Provider value={audioInfo}>
-                  <Layout>
+  return (
+    <BrowserRouter>
+      <LogDispatchContext.Provider value={logDispath}>
+        <LogStateContext.Provider value={logState}>
+          <PlayMusicDispatchContext.Provider value={dispatch}>
+            <PlayMusicStateContext.Provider value={state}>
+              <AudioContext.Provider value={audioInfo}>
+                <Layout>
+                  {audio}
+                  <Suspense fallback={null}>
                     <Switch>
                       <Route path={ROUTES.DISCOVERY} component={Discovery} />
                       <Route path={ROUTES.VIDEOS} component={Videos} />
                       <Route exact path={ROUTES.SEARCH} component={Search} />
                       <Route exact path={ROUTES.SONG_LIST_DETAIL} component={SonglistDetail} />
                       <Redirect from={ROUTES.ROOT} to={ROUTES.DEFAULT_ROUTE} />
                     </Switch>
-                  </Layout>
-                </AudioContext.Provider>
-              </PlayMusicStateContext.Provider>
-            </PlayMusicDispatchContext.Provider>
-          </LogStateContext.Provider>
-        </LogDispatchContext.Provider>
-      </BrowserRouter>
-    </Suspense>
-  </>)
+                  </Suspense>
+                </Layout>
+              </AudioContext.Provider>
+            </PlayMusicStateContext.Provider>
+          </PlayMusicDispatchContext.Provider>
+        </LogStateContext.Provider>
+      </LogDispatchContext.Provider>
+    </BrowserRouter>
+  )
 }
 
 export default App