From 85a10c799a9b98da431cc101b4a285dfa2f40283 Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Sat, 3 Jun 2023 07:15:02 -0700 Subject: [PATCH] address comments --- src/main/features/core/lyrics/genius.ts | 6 ++-- src/main/features/core/lyrics/netease.ts | 2 ++ src/main/preload/lyrics.ts | 8 ++--- src/renderer/features/lyrics/lyrics.tsx | 31 +++++++++++-------- .../components/playback/lyric-settings.tsx | 3 +- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/src/main/features/core/lyrics/genius.ts b/src/main/features/core/lyrics/genius.ts index 41cf903e..4954a960 100644 --- a/src/main/features/core/lyrics/genius.ts +++ b/src/main/features/core/lyrics/genius.ts @@ -2,12 +2,14 @@ import axios, { AxiosResponse } from 'axios'; import { load } from 'cheerio'; import type { QueueSong } from '/@/renderer/api/types'; -const search_url = 'https://genius.com/api/search/song'; +const SEARCH_URL = 'https://genius.com/api/search/song'; + +// Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/genius.ts async function getSongURL(metadata: QueueSong) { let result: AxiosResponse; try { - result = await axios.get(search_url, { + result = await axios.get(SEARCH_URL, { params: { per_page: '1', q: `${metadata.artistName} ${metadata.name}`, diff --git a/src/main/features/core/lyrics/netease.ts b/src/main/features/core/lyrics/netease.ts index 4faeeb43..5232ce1b 100644 --- a/src/main/features/core/lyrics/netease.ts +++ b/src/main/features/core/lyrics/netease.ts @@ -4,6 +4,8 @@ import type { QueueSong } from '/@/renderer/api/types'; const SEARCH_URL = 'https://music.163.com/api/search/get'; const LYRICS_URL = 'https://music.163.com/api/song/lyric'; +// Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/netease.ts + async function getSongId(metadata: QueueSong) { let result: AxiosResponse; try { diff --git a/src/main/preload/lyrics.ts b/src/main/preload/lyrics.ts index 398d2e38..83147f69 100644 --- a/src/main/preload/lyrics.ts +++ b/src/main/preload/lyrics.ts @@ -1,17 +1,17 @@ import { IpcRendererEvent, ipcRenderer } from 'electron'; import { QueueSong } from '/@/renderer/api/types'; -const fetchLyrics = (song: QueueSong) => { +const fetchRemoteLyrics = (song: QueueSong) => { ipcRenderer.send('lyric-fetch', song); }; -const getLyrics = ( +const retrieveRemoteLyrics = ( cb: (event: IpcRendererEvent, songName: string, source: string, lyric: string) => void, ) => { ipcRenderer.on('lyric-get', cb); }; export const lyrics = { - fetchLyrics, - getLyrics, + fetchRemoteLyrics, + retrieveRemoteLyrics, }; diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx index a9698635..85e23c90 100644 --- a/src/renderer/features/lyrics/lyrics.tsx +++ b/src/renderer/features/lyrics/lyrics.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'; import isElectron from 'is-electron'; import { ErrorBoundary } from 'react-error-boundary'; import { ErrorFallback } from '/@/renderer/features/action-required'; -import { useCurrentServer, useCurrentSong } from '/@/renderer/store'; +import { getServerById, useCurrentServer, useCurrentSong } from '/@/renderer/store'; import { SynchronizedLyrics } from './synchronized-lyrics'; import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics'; import { LyricLine } from '/@/renderer/features/lyrics/lyric-line'; @@ -20,8 +20,8 @@ const ipc = isElectron() ? window.electron.ipc : null; const timeExp = /\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]([^\n]+)\n/g; export const Lyrics = () => { - const currentServer = useCurrentServer(); const currentSong = useCurrentSong(); + const currentServer = getServerById(currentSong?.serverId); const [override, setOverride] = useState(null); const [source, setSource] = useState(null); @@ -35,12 +35,14 @@ export const Lyrics = () => { const songRef = useRef(null); useEffect(() => { - lyrics?.getLyrics((_event: any, songName: string, lyricSource: string, lyric: string) => { - if (songName === songRef.current) { - setSource(lyricSource); - setOverride(lyric); - } - }); + lyrics?.retrieveRemoteLyrics( + (_event: any, songName: string, lyricSource: string, lyric: string) => { + if (songName === songRef.current) { + setSource(lyricSource); + setOverride(lyric); + } + }, + ); return () => { ipc?.removeAllListeners('lyric-get'); @@ -48,15 +50,19 @@ export const Lyrics = () => { }, []); useEffect(() => { - if (currentSong && !currentSong.lyrics && !remoteLyrics.isLoading && !remoteLyrics.data) { - lyrics?.fetchLyrics(currentSong); + const hasTaggedLyrics = currentSong && currentSong.lyrics; + const hasLyricsResponse = + !remoteLyrics.isLoading && remoteLyrics?.isSuccess && remoteLyrics?.data !== null; + + if (!hasTaggedLyrics && !hasLyricsResponse) { + lyrics?.fetchRemoteLyrics(currentSong); } songRef.current = currentSong?.name ?? null; setOverride(null); setSource(null); - }, [currentSong, remoteLyrics.isLoading, remoteLyrics.data]); + }, [currentSong, remoteLyrics.isLoading, remoteLyrics?.data, remoteLyrics?.isSuccess]); useEffect(() => { let lyrics: string | null = null; @@ -64,11 +70,10 @@ export const Lyrics = () => { if (currentSong?.lyrics) { lyrics = currentSong.lyrics; - setSource(currentServer?.name ?? 'music server'); + setSource(currentSong?.name ?? 'music server'); } else if (override) { lyrics = override; } else if (remoteLyrics.data) { - console.log(remoteLyrics.data); setSource(currentServer?.name ?? 'music server'); setSongLyrics(remoteLyrics.data); return; diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx index c495f322..fd6139b5 100644 --- a/src/renderer/features/settings/components/playback/lyric-settings.tsx +++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx @@ -1,10 +1,9 @@ -import { NumberInput, Switch } from '@mantine/core'; import { SettingOption, SettingsSection, } from '/@/renderer/features/settings/components/settings-section'; import { useLyricsSettings, useSettingsStoreActions } from '/@/renderer/store'; -import { MultiSelect, MultiSelectProps } from '/@/renderer/components'; +import { MultiSelect, MultiSelectProps, NumberInput, Switch } from '/@/renderer/components'; import isElectron from 'is-electron'; import styled from 'styled-components'; import { LyricSource } from '/@/renderer/types';