-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5af43b2
commit 1c3b99e
Showing
6 changed files
with
130 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,17 @@ | ||
| import React, { memo } from 'react' | ||
|
|
||
|
|
||
| import { SongsCoverWrapper } from './style'; | ||
| import React, { memo } from "react"; | ||
|
|
||
| import { SongsCoverWrapper } from "./style"; | ||
|
|
||
| export default memo(function SongCover(props) { | ||
| const { info } = props; | ||
| const { info } = props; | ||
|
|
||
| return ( | ||
| <SongsCoverWrapper> | ||
| <div className="cover-top"> | ||
| <img src={info.picUrl} width="140" alt="" /> | ||
| </div> | ||
| <div className="cover-bottom text-nowrap"> | ||
| {info.name} | ||
| </div> | ||
| <div className="cover-source text-nowrap"> | ||
| by {info.copywriter || info.creator.nickname} | ||
| </div> | ||
| </SongsCoverWrapper> | ||
| ) | ||
| }) | ||
| return ( | ||
| <SongsCoverWrapper> | ||
| <div className="cover-top"> | ||
| <img src={info.picUrl} width="140" alt="" /> | ||
| </div> | ||
| <div className="cover-bottom text-nowrap">{info.name}</div> | ||
| <div className="cover-source text-nowrap">by {info.copywriter}</div> | ||
| </SongsCoverWrapper> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,102 @@ | ||
| import { getSongDetail, getLyric } from '@/servies/player'; | ||
| import { getSongDetail, getLyric } from "@/servies/player"; | ||
| import { parseLyric } from "../../../untils/lrc-parse"; | ||
|
|
||
| const changeCurrentSongAction = currentSong => ({ | ||
| type: "changeCurrentSong", | ||
| currentSong, | ||
| }) | ||
| const changeCurrentSongIndexAction = currentSongIndex => ({ | ||
| type: "changeCurrentSongIndex", | ||
| currentSongIndex, | ||
| }) | ||
| const changePlayListAction = playList => ({ | ||
| type: "changePlayList", | ||
| playList, | ||
| }) | ||
| const changeCurrentSongAction = (currentSong) => ({ | ||
| type: "changeCurrentSong", | ||
| currentSong, | ||
| }); | ||
| const changeCurrentSongIndexAction = (currentSongIndex) => ({ | ||
| type: "changeCurrentSongIndex", | ||
| currentSongIndex, | ||
| }); | ||
| const changePlayListAction = (playList) => ({ | ||
| type: "changePlayList", | ||
| playList, | ||
| }); | ||
|
|
||
| export const changeSequenceAction = sequence => ({ | ||
| type: "changeSequence", | ||
| sequence, | ||
| }) | ||
| export const changeLyricListAction = lyricList => ({ | ||
| type: "changeLyricList", | ||
| lyricList, | ||
| }) | ||
| export const changeLyricListIndexAction = currentLyricIndex => ({ | ||
| type: "changeCurrentLyricIndex", | ||
| currentLyricIndex, | ||
| }) | ||
| export const changeSequenceAction = (sequence) => ({ | ||
| type: "changeSequence", | ||
| sequence, | ||
| }); | ||
| export const changeLyricListAction = (lyricList) => ({ | ||
| type: "changeLyricList", | ||
| lyricList, | ||
| }); | ||
| export const changeLyricListIndexAction = (currentLyricIndex) => ({ | ||
| type: "changeCurrentLyricIndex", | ||
| currentLyricIndex, | ||
| }); | ||
|
|
||
| export const changePlaySongAction = (tag) => { | ||
| return (dispatch, getState) => { | ||
| let playList = getState().getIn(["player", "playList"]) | ||
| let sequence = getState().getIn(["player", "sequence"]) | ||
| let currentSongIndex = getState().getIn(["player", "currentSongIndex"]) | ||
| switch (sequence) { | ||
| case 1: | ||
| let random = Math.floor(Math.random() * playList.length) | ||
| while (random === currentSongIndex) { | ||
| random = Math.floor(Math.random() * playList.length) | ||
| } | ||
| currentSongIndex = random; | ||
| break; | ||
| default: | ||
| if (tag === -1) { | ||
| // 上一首 | ||
| currentSongIndex = currentSongIndex == 0 ? playList.length - 1 : currentSongIndex - 1 | ||
| } else { | ||
| // 下一首 | ||
| currentSongIndex = currentSongIndex == playList.length - 1 ? 0 : currentSongIndex + 1 | ||
| } | ||
| return (dispatch, getState) => { | ||
| let playList = getState().getIn(["player", "playList"]); | ||
| let sequence = getState().getIn(["player", "sequence"]); | ||
| let currentSongIndex = getState().getIn(["player", "currentSongIndex"]); | ||
| switch (sequence) { | ||
| case 1: | ||
| let random = Math.floor(Math.random() * playList.length); | ||
| while (random === currentSongIndex) { | ||
| random = Math.floor(Math.random() * playList.length); | ||
| } | ||
| const currentSong = playList[currentSongIndex]; | ||
| dispatch(changeCurrentSongAction(playList[currentSongIndex])) | ||
| dispatch(changeCurrentSongIndexAction(currentSongIndex)) | ||
|
|
||
| dispatch(getLyricAction(currentSong.id)) | ||
|
|
||
| } | ||
| } | ||
|
|
||
| export const getSongDetailAction = ids => { | ||
| console.log('object') | ||
| return (dispatch, getState) => { | ||
| const playList = getState().getIn(["player", "playList"]) | ||
| const currentIndex = playList.findIndex(song => song.id == ids) | ||
|
|
||
| if (currentIndex !== -1) { | ||
| console.log('找到歌曲') | ||
| // 在播放列表里找到歌曲 | ||
| dispatch(changeCurrentSongIndexAction(currentIndex)) | ||
| const currentSong = playList[currentIndex] | ||
| dispatch(changeCurrentSongAction(currentSong)) | ||
| currentSongIndex = random; | ||
| break; | ||
| default: | ||
| if (tag === -1) { | ||
| // 上一首 | ||
| currentSongIndex = | ||
| currentSongIndex == 0 ? playList.length - 1 : currentSongIndex - 1; | ||
| } else { | ||
| console.log('没有找到歌曲') | ||
| // 在播放列表里没有找到歌曲 | ||
| getSongDetail(ids).then(res => { | ||
| const song = res.songs && res.songs[0] | ||
| if (!song) return | ||
| const newPlayList = [...playList] | ||
| newPlayList.push(song) | ||
| dispatch(changePlayListAction(newPlayList)) | ||
| dispatch(changeCurrentSongIndexAction(newPlayList.length - 1)) | ||
| dispatch(changeCurrentSongAction(song)) | ||
| }) | ||
| // 下一首 | ||
| currentSongIndex = | ||
| currentSongIndex == playList.length - 1 ? 0 : currentSongIndex + 1; | ||
| } | ||
| } | ||
| const currentSong = playList[currentSongIndex]; | ||
| dispatch(changeCurrentSongAction(playList[currentSongIndex])); | ||
| dispatch(changeCurrentSongIndexAction(currentSongIndex)); | ||
|
|
||
| // 获取当前的歌词,并且解析 | ||
| dispatch(getLyricAction(ids)) | ||
| // getLyric(ids).then(res => { | ||
| // const lrcString = res.lrc.lyric; | ||
| // const lyrics = parseLyric(lrcString); | ||
| // dispatch(changeLyricsAction(lyrics)); | ||
| // }); | ||
| dispatch(getLyricAction(currentSong.id)); | ||
| }; | ||
| }; | ||
|
|
||
| } | ||
| } | ||
| export const getSongDetailAction = (ids) => { | ||
| return (dispatch, getState) => { | ||
| const playList = getState().getIn(["player", "playList"]); | ||
| const currentIndex = playList.findIndex((song) => song.id == ids); | ||
|
|
||
| export const getLyricAction = ids => { | ||
| console.log(ids, 'index') | ||
| return (dispatch, getState) => { | ||
| getLyric(ids).then(res => { | ||
| const lrcList = parseLyric(res.lrc.lyric) | ||
| dispatch(changeLyricListAction(lrcList)) | ||
| }) | ||
| if (currentIndex !== -1) { | ||
| // 在播放列表里找到歌曲 | ||
| dispatch(changeCurrentSongIndexAction(currentIndex)); | ||
| const currentSong = playList[currentIndex]; | ||
| dispatch(changeCurrentSongAction(currentSong)); | ||
| } else { | ||
| // 在播放列表里没有找到歌曲 | ||
| getSongDetail(ids).then((res) => { | ||
| const song = res.songs && res.songs[0]; | ||
| if (!song) return; | ||
| const newPlayList = [...playList]; | ||
| newPlayList.push(song); | ||
| dispatch(changePlayListAction(newPlayList)); | ||
| dispatch(changeCurrentSongIndexAction(newPlayList.length - 1)); | ||
| dispatch(changeCurrentSongAction(song)); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| // 获取当前的歌词,并且解析 | ||
| dispatch(getLyricAction(ids)); | ||
| // getLyric(ids).then(res => { | ||
| // const lrcString = res.lrc.lyric; | ||
| // const lyrics = parseLyric(lrcString); | ||
| // dispatch(changeLyricsAction(lyrics)); | ||
| // }); | ||
| }; | ||
| }; | ||
|
|
||
| export const getLyricAction = (ids) => { | ||
| return (dispatch, getState) => { | ||
| getLyric(ids).then((res) => { | ||
| const lrcList = parseLyric(res.lrc.lyric); | ||
| dispatch(changeLyricListAction(lrcList)); | ||
| }); | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters