diff --git a/src/components/Layout/Footer/PlayOperations/index.tsx b/src/components/Layout/Footer/PlayOperations/index.tsx
index 3ee4c4a..e232734 100644
--- a/src/components/Layout/Footer/PlayOperations/index.tsx
+++ b/src/components/Layout/Footer/PlayOperations/index.tsx
@@ -2,15 +2,18 @@ import React from 'react'
import { Icon } from '@blueprintjs/core'
import { PlayMusicStateContext, PlayMusicDispatchContext, AudioContext, ACTIONS } from 'reducers/playMusic'
+import { playList as playListLocalStorage } from 'helpers/play'
import styles from './style.module.css'
-const { useContext } = React
+const { useContext, useMemo } = React
const PlayOperations = () => {
const audioInfo = useContext(AudioContext)
const state = useContext(PlayMusicStateContext)
const dispatch = useContext(PlayMusicDispatchContext)
- const { musicId, playList } = state
+ const { musicId } = state
+
+ const playList = useMemo(() => playListLocalStorage.getItem(), [musicId])
const togglePlayStatus = () => {
if (audioInfo.state?.paused) {
diff --git a/src/components/Layout/Footer/PlayRecord/PlayHistory/index.tsx b/src/components/Layout/Footer/PlayRecord/PlayHistory/index.tsx
index a5e9d50..97e9d50 100644
--- a/src/components/Layout/Footer/PlayRecord/PlayHistory/index.tsx
+++ b/src/components/Layout/Footer/PlayRecord/PlayHistory/index.tsx
@@ -2,13 +2,14 @@ import React from 'react'
import List from '../List'
import { IMyMusic } from 'apis/types/business'
-import { PlayMusicStateContext, PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { playHistory as playHistoryLocalStorage } from 'helpers/play'
const { useContext } = React
const PlayHistory = () => {
- const state = useContext(PlayMusicStateContext)
const dispatch = useContext(PlayMusicDispatchContext)
+ const playHistory = playHistoryLocalStorage.getItem()
const handleDoubleClick = (item: IMyMusic) => {
dispatch({
@@ -29,7 +30,7 @@ const PlayHistory = () => {
return (
diff --git a/src/components/Layout/Footer/PlayRecord/PlayList/index.tsx b/src/components/Layout/Footer/PlayRecord/PlayList/index.tsx
index 6c2d32b..7d120ce 100644
--- a/src/components/Layout/Footer/PlayRecord/PlayList/index.tsx
+++ b/src/components/Layout/Footer/PlayRecord/PlayList/index.tsx
@@ -2,13 +2,14 @@ import React from 'react'
import List from '../List'
import { IMyMusic } from 'apis/types/business'
-import { PlayMusicStateContext, PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { playList as playListLocalStorage } from 'helpers/play'
const { useContext } = React
const PlayHistory = () => {
- const state = useContext(PlayMusicStateContext)
const dispatch = useContext(PlayMusicDispatchContext)
+ const playList = playListLocalStorage.getItem()
const handleDoubleClick = (item: IMyMusic) => {
dispatch({
@@ -24,7 +25,7 @@ const PlayHistory = () => {
return (
diff --git a/src/components/Layout/Footer/index.tsx b/src/components/Layout/Footer/index.tsx
index 26b6d47..332cecc 100644
--- a/src/components/Layout/Footer/index.tsx
+++ b/src/components/Layout/Footer/index.tsx
@@ -83,10 +83,12 @@ const Footer = () => {
- setShowPlayRecord(false)}
- />
+ {showPlayRecord && (
+ setShowPlayRecord(false)}
+ />
+ )}
)
}
diff --git a/src/components/Layout/Sidebar/MusicDetail/Comments/index.tsx b/src/components/Layout/Sidebar/MusicDetail/Comments/index.tsx
index eb107ac..91e0459 100644
--- a/src/components/Layout/Sidebar/MusicDetail/Comments/index.tsx
+++ b/src/components/Layout/Sidebar/MusicDetail/Comments/index.tsx
@@ -72,7 +72,7 @@ const Comments = () => {
) : (
diff --git a/src/components/Layout/Sidebar/MusicDetail/Lyric/index.tsx b/src/components/Layout/Sidebar/MusicDetail/Lyric/index.tsx
index 6229c6a..87023d0 100644
--- a/src/components/Layout/Sidebar/MusicDetail/Lyric/index.tsx
+++ b/src/components/Layout/Sidebar/MusicDetail/Lyric/index.tsx
@@ -19,16 +19,16 @@ const Lyric = () => {
const audioInfo = useContext(AudioContext)
const state = useContext(PlayMusicStateContext)
- const { musicId } = state
+ const { musicId, showLyric } = state
const [lyricState, getLyricFn] = useAsyncFn(songApis.getLyric)
const lines = formatLyric(lyricState.value?.lyric)
useEffect(() => {
- if (musicId) {
+ if (musicId && showLyric) {
getLyricFn(musicId)
}
- }, [musicId])
+ }, [musicId, showLyric])
useEffect(() => {
if (!audioInfo.state?.paused) {
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index d5d1498..4c69e68 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import useAudio from 'hooks/useAudio'
-import { MODE } from 'helpers/play'
+import { MODE, playList as playListLocalStorage } from 'helpers/play'
import playMusicReducer, { initialState, PlayMusicStateContext, PlayMusicDispatchContext, AudioContext, ACTIONS } from 'reducers/playMusic'
import logReducer, { initialState as logInitialState, LogStateContext, LogDispatchContext } from 'reducers/log'
import { IMyMusic } from 'apis/types/business'
@@ -19,9 +19,12 @@ const SonglistDetail = lazy(() => import('./SonglistDetail'))
const App = () => {
const [logState, logDispath] = useReducer(logReducer, logInitialState)
const [state, dispatch] = useReducer(playMusicReducer, initialState)
+ const { musicId, musicUrl, playMode } = state
+
+ const playList = useMemo(() => playListLocalStorage.getItem(), [musicId])
const [audio, audioState, audioControls, audioRef] = useAudio({
- src: state.musicUrl,
+ src: musicUrl,
autoPlay: true,
onEnded: () => onRadioEnded()
})
@@ -33,23 +36,25 @@ const App = () => {
controls: audioControls,
ref: audioRef
}
- }, [state.musicUrl, audio, audioState, audioControls, audioRef])
+ }, [musicUrl, audio, audioState, audioControls, audioRef])
- const onRadioEnded = useCallback(() => {
- const { playMode, playList, musicId } = state
+ const playMusic = useCallback((index: number) => {
+ dispatch({
+ type: ACTIONS.PLAY,
+ payload: {
+ musicId: playList[index].id,
+ music: playList[index]
+ }
+ })
+ }, [playList])
+ const onRadioEnded = useCallback(() => {
switch (playMode) {
case MODE.PLAY_IN_ORDER: {
const idx = playList.findIndex(({ id }: IMyMusic) => id === musicId)
if (playList.length) {
const nextIdx = idx > -1 ? (idx + 1) % playList.length : 0
- dispatch({
- type: ACTIONS.PLAY,
- payload: {
- musicId: playList[nextIdx].id,
- music: playList[nextIdx]
- }
- })
+ playMusic(nextIdx)
}
return
}
@@ -60,20 +65,14 @@ const App = () => {
case MODE.SHUFFLE_PLAYBACK: {
if (playList.length) {
const randomIdx = Math.floor(Math.random() * playList.length)
- dispatch({
- type: ACTIONS.PLAY,
- payload: {
- musicId: playList[randomIdx].id,
- music: playList[randomIdx]
- }
- })
+ playMusic(randomIdx)
}
return
}
default:
return
}
- }, [state.musicId, state.playList, state.playMode, audioControls])
+ }, [musicId, playMode, audioControls, playList])
return (<>
{audio}
diff --git a/src/reducers/playMusic.ts b/src/reducers/playMusic.ts
index 1c015fe..14df6fe 100644
--- a/src/reducers/playMusic.ts
+++ b/src/reducers/playMusic.ts
@@ -36,8 +36,6 @@ export interface IState {
musicId: number,
musicUrl: string,
music?: IMyMusic,
- playList: IMyMusic[],
- playHistory: IMyMusic[],
playMode: MODE,
showLyric: boolean
}
@@ -45,8 +43,6 @@ export interface IState {
export const initialState = {
musicId: 0,
musicUrl: '',
- playList: playListLocalStorage.getItem(),
- playHistory: playHistoryLocalStorage.getItem(),
playMode: playModeLocalStorage.getItem(),
showLyric: false
}
@@ -63,26 +59,17 @@ const playMusicReducer = (state: IState, { type, payload }: IAction) => {
...state,
musicId: payload?.musicId,
musicUrl: getMusicUrl(payload?.musicId),
- music: payload?.music,
- playHistory: !payload?.keepOrder ? playHistory : state.playHistory
+ music: payload?.music
}
}
case ACTIONS.SET_PLAY_LIST: {
const playList = payload?.playList || []
playListLocalStorage.setItem(playList)
-
- return {
- ...state,
- playList
- }
+ return state
}
case ACTIONS.CLEAR_PLAY_LIST: {
playListLocalStorage.removeItem()
-
- return {
- ...state,
- playList: []
- }
+ return state
}
case ACTIONS.SET_PLAY_MODE: {
playModeLocalStorage.setItem(payload?.playMode)
@@ -106,11 +93,7 @@ const playMusicReducer = (state: IState, { type, payload }: IAction) => {
}
case ACTIONS.CLEAR_PLAY_HISTORY: {
playHistoryLocalStorage.removeItem()
-
- return {
- ...state,
- playHistory: []
- }
+ return state
}
default:
return state