feat: 优化歌词页面样式 添加歌词进度显示 优化歌曲及列表加载方式 大幅提升歌曲歌词播放速度

This commit is contained in:
alger
2024-10-18 18:37:53 +08:00
parent 7abc087d70
commit 06bffe7618
16 changed files with 466 additions and 266 deletions
+6 -56
View File
@@ -1,11 +1,8 @@
import { createStore } from 'vuex';
import { getMusicUrl, getParsingMusicUrl } from '@/api/music';
import { useMusicHistory } from '@/hooks/MusicHistoryHook';
import { useMusicListHook } from '@/hooks/MusicListHook';
import homeRouter from '@/router/home';
import type { SongResult } from '@/type/music';
import { getImgUrl, getMusicProxyUrl } from '@/utils';
import { getImageLinearBackground } from '@/utils/linearColor';
interface State {
menus: any[];
@@ -38,17 +35,16 @@ const state: State = {
searchValue: '',
searchType: 1,
};
const windowData = window as any;
const musicHistory = useMusicHistory();
const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
const mutations = {
setMenus(state: State, menus: any[]) {
state.menus = menus;
},
async setPlay(state: State, playMusic: SongResult) {
await getSongDetail(state, playMusic);
await handlePlayMusic(state, playMusic);
},
setIsPlay(state: State, isPlay: boolean) {
state.isPlay = isPlay;
@@ -61,63 +57,17 @@ const mutations = {
state.playList = playList;
},
async nextPlay(state: State) {
if (state.playList.length === 0) {
state.play = true;
return;
}
const playListIndex = (state.playListIndex + 1) % state.playList.length;
await getSongDetail(state, state.playList[playListIndex]);
await nextPlay(state);
},
async prevPlay(state: State) {
if (state.playList.length === 0) {
state.play = true;
return;
}
const playListIndex = (state.playListIndex - 1 + state.playList.length) % state.playList.length;
await getSongDetail(state, state.playList[playListIndex]);
await prevPlay(state);
},
async setSetData(state: State, setData: any) {
state.setData = setData;
windowData.electron.ipcRenderer.setStoreValue('set', JSON.parse(JSON.stringify(setData)));
window.electron && window.electron.ipcRenderer.setStoreValue('set', JSON.parse(JSON.stringify(setData)));
},
};
const getSongUrl = async (id: number) => {
const { data } = await getMusicUrl(id);
let url = '';
try {
if (data.data[0].freeTrialInfo || !data.data[0].url) {
const res = await getParsingMusicUrl(id);
url = res.data.data.url;
}
} catch (error) {
console.error('error', error);
}
url = url || data.data[0].url;
return getMusicProxyUrl(url);
};
const updatePlayMusic = async (state: State) => {
state.playMusic = state.playList[state.playListIndex];
state.playMusicUrl = await getSongUrl(state.playMusic.id);
state.play = true;
musicHistory.addMusic(state.playMusic);
};
const getSongDetail = async (state: State, playMusic: SongResult) => {
state.playMusic.playLoading = true;
state.playMusicUrl = await getSongUrl(playMusic.id);
const backgroundColor = playMusic.backgroundColor
? playMusic.backgroundColor
: await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
state.playMusic = { ...playMusic, backgroundColor };
// state.playMusic = { ...playMusic };
state.play = true;
musicHistory.addMusic(playMusic);
state.playListIndex = state.playList.findIndex((item) => item.id === playMusic.id);
state.playMusic.playLoading = false;
};
const store = createStore({
state,
mutations,