vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 20:40:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

add sync status to lrclib lyrics (#1568)

Browse Source
This commit is contained in:
jeffvli
2026-01-18 15:47:07 -08:00
parent c3d4f6cacd
commit 7f1c4a4d18
7 changed files with 184 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/features/core/lyrics/genius.ts
+1
View File
@@ -150,6 +150,7 @@ export async function getSearchResults(
return {
artist: song.artist_names,
id: song.url,
isSync: null,
name: song.full_title,
source: LyricSource.GENIUS,
};
src/main/features/core/lyrics/lrclib.ts
+5
View File
@@ -17,8 +17,12 @@ const TIMEOUT_MS = 5000;
export interface LrcLibSearchResponse {
albumName: string;
artistName: string;
duration?: number;
id: number;
instrumental?: boolean;
name: string;
plainLyrics: null | string;
syncedLyrics: null | string;
}
export interface LrcLibTrackResponse {
@@ -75,6 +79,7 @@ export async function getSearchResults(
return {
artist: song.artistName,
id: String(song.id),
isSync: song.syncedLyrics ? true : false,
name: song.name,
source: LyricSource.LRCLIB,
};
src/main/features/core/lyrics/netease.ts
+1
View File
@@ -128,6 +128,7 @@ export async function getSearchResults(
return {
artist,
id: String(song.id),
isSync: null,
name: song.name,
source: LyricSource.NETEASE,
};
src/main/features/core/lyrics/shared.ts
+69 -8
View File
@@ -1,4 +1,4 @@
import Fuse, { IFuseOptions } from 'fuse.js';
import Fuse, { FuseResult, IFuseOptions } from 'fuse.js';
import {
InternetProviderLyricSearchResponse,
@@ -15,20 +15,81 @@ export const orderSearchResults = (args: {
fieldNormWeight: 1,
includeScore: true,
keys: [
{ getFn: (song) => song.name, name: 'name', weight: 3 },
{ getFn: (song) => song.artist, name: 'artist' },
{ getFn: (song) => song.name, name: 'name', weight: 2 },
{ getFn: (song) => song.artist, name: 'artist', weight: 2 },
],
threshold: 1.0,
threshold: 0.6,
};
const fuse = new Fuse(results, options);
const searchResults = fuse.search<InternetProviderLyricSearchResponse>({
...(params.artist && { artist: params.artist }),
...(params.name && { name: params.name }),
let searchResults: Array<FuseResult<InternetProviderLyricSearchResponse>>;
if (params.artist && params.name) {
const artistFuse = new Fuse(results, {
includeScore: true,
keys: [{ getFn: (song) => song.artist, name: 'artist' }],
threshold: 0.6,
});
const nameFuse = new Fuse(results, {
includeScore: true,
keys: [{ getFn: (song) => song.name, name: 'name' }],
threshold: 0.6,
});
const artistResults = artistFuse.search(params.artist);
const nameResults = nameFuse.search(params.name);
const artistScores = new Map(artistResults.map((r) => [r.item.id, r.score ?? 1]));
const nameScores = new Map(nameResults.map((r) => [r.item.id, r.score ?? 1]));
const combinedResults = new Map<string, FuseResult<InternetProviderLyricSearchResponse>>();
artistResults.forEach((result) => {
const nameScore = nameScores.get(result.item.id);
if (nameScore !== undefined) {
const combinedScore = Math.max(result.score ?? 1, nameScore);
combinedResults.set(result.item.id, {
...result,
score: combinedScore,
});
}
});
nameResults.forEach((result) => {
if (!combinedResults.has(result.item.id)) {
const artistScore = artistScores.get(result.item.id);
if (artistScore !== undefined) {
const combinedScore = Math.max(result.score ?? 1, artistScore);
combinedResults.set(result.item.id, {
...result,
score: combinedScore,
});
}
}
});
searchResults = Array.from(combinedResults.values());
} else {
searchResults = fuse.search<InternetProviderLyricSearchResponse>({
...(params.artist && { artist: params.artist }),
...(params.name && { name: params.name }),
});
}
const sortedResults = searchResults.sort((a, b) => {
const aIsSync = a.item.isSync === true ? 1 : 0;
const bIsSync = b.item.isSync === true ? 1 : 0;
if (aIsSync !== bIsSync) {
return bIsSync - aIsSync;
}
return (a.score || 0) - (b.score || 0);
});
return searchResults.map((result) => ({
return sortedResults.map((result) => ({
...result.item,
score: result.score,
}));
src/renderer/features/lyrics/components/lyrics-search-form.module.css
+19
View File
@@ -33,3 +33,22 @@
}
}
}
.lyrics-preview {
:global(.synchronized-lyrics) {
height: auto !important;
padding: 1rem 0 !important;
overflow: visible !important;
transform: none !important;
}
}
.lyrics-content-wrapper {
:global(> div) {
height: auto !important;
max-height: none !important;
padding: 1rem 0 !important;
overflow: visible !important;
transform: none !important;
}
}
src/renderer/features/lyrics/components/lyrics-search-form.tsx
+88 -38
View File
@@ -19,6 +19,7 @@ import {
UnsynchronizedLyricsProps,
} from '/@/renderer/features/lyrics/unsynchronized-lyrics';
import { usePlayerSong } from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Center } from '/@/shared/components/center/center';
import { Divider } from '/@/shared/components/divider/divider';
@@ -43,7 +44,8 @@ interface SearchResultProps {
onClick?: () => void;
}
const SearchResult = ({ data, isSelected, onClick }: SearchResultProps) => {
const { artist, id, name, score, source } = data;
const { t } = useTranslation();
const { artist, id, isSync, name, score, source } = data;
const percentageScore = useMemo(() => {
if (!score) return 0;
@@ -53,6 +55,21 @@ const SearchResult = ({ data, isSelected, onClick }: SearchResultProps) => {
const cleanId =
source === LyricSource.GENIUS ? id.replace(/^((http[s]?|ftp):\/)?\/?([^:/\s]+)/g, '') : id;
const syncStatus = useMemo(() => {
if (isSync === true) {
return t('page.fullscreenPlayer.config.synchronized', {
postProcess: 'sentenceCase',
});
}
if (isSync === false) {
return t('page.fullscreenPlayer.config.unsynchronized', {
postProcess: 'sentenceCase',
});
}
return t('common.unknown', { postProcess: 'titleCase' });
}, [isSync, t]);
return (
<button
className={clsx(styles.searchItem, {
@@ -68,7 +85,7 @@ const SearchResult = ({ data, isSelected, onClick }: SearchResultProps) => {
<Text isMuted>{artist}</Text>
<Group gap="sm" wrap="nowrap">
<Text isMuted size="sm">
{[source, cleanId].join(' — ')}
{[source, cleanId, syncStatus].join(' — ')}
</Text>
</Group>
</Stack>
@@ -171,6 +188,16 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
context: 'name',
postProcess: 'titleCase',
})}
rightSection={
form.values.name ? (
<ActionIcon
icon="x"
onClick={() => form.setFieldValue('name', '')}
size="sm"
variant="transparent"
/>
) : null
}
{...form.getInputProps('name')}
/>
<TextInput
@@ -178,13 +205,23 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
context: 'artist',
postProcess: 'titleCase',
})}
rightSection={
form.values.artist ? (
<ActionIcon
icon="x"
onClick={() => form.setFieldValue('artist', '')}
size="sm"
variant="transparent"
/>
) : null
}
{...form.getInputProps('artist')}
/>
</Group>
</form>
<Divider />
<Group align="flex-start" grow style={{ flex: 1, minHeight: 0 }}>
<Stack style={{ flex: 1, height: '100%', minHeight: 0 }}>
<Group align="flex-start" grow style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
<Stack style={{ flex: 1, height: '100%', minHeight: 0, overflow: 'hidden' }}>
<ScrollArea
style={{
height: '100%',
@@ -211,41 +248,54 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
</ScrollArea>
</Stack>
{selectedResult && (
<Stack style={{ flex: 1, height: '100%', minHeight: 0 }}>
{isPreviewLoading ? (
<Spinner container />
) : previewData ? (
Array.isArray(previewData) ? (
<SynchronizedLyrics
style={{ padding: 0 }}
{...({
artist: selectedResult.artist,
lyrics: previewData,
name: selectedResult.name,
remote: true,
source: selectedResult.source,
} as SynchronizedLyricsProps)}
/>
<Stack style={{ flex: 1, height: '100%', minHeight: 0, overflow: 'hidden' }}>
<ScrollArea
className={styles['lyrics-preview']}
style={{
height: '100%',
paddingRight: '1rem',
}}
>
{isPreviewLoading ? (
<Spinner container />
) : previewData ? (
<div
className={styles['lyrics-content-wrapper']}
style={{ width: '100%' }}
>
{Array.isArray(previewData) ? (
<SynchronizedLyrics
style={{ padding: 0 }}
{...({
artist: selectedResult.artist,
lyrics: previewData,
name: selectedResult.name,
remote: true,
source: selectedResult.source,
} as SynchronizedLyricsProps)}
/>
) : (
<UnsynchronizedLyrics
{...({
artist: selectedResult.artist,
lyrics: previewData,
name: selectedResult.name,
remote: true,
source: selectedResult.source,
} as UnsynchronizedLyricsProps)}
/>
)}
</div>
) : (
<UnsynchronizedLyrics
{...({
artist: selectedResult.artist,
lyrics: previewData,
name: selectedResult.name,
remote: true,
source: selectedResult.source,
} as UnsynchronizedLyricsProps)}
/>
)
) : (
<Center>
<Text isMuted>
{t('page.fullscreenPlayer.noLyrics', {
postProcess: 'sentenceCase',
})}
</Text>
</Center>
)}
<Center>
<Text isMuted>
{t('page.fullscreenPlayer.noLyrics', {
postProcess: 'sentenceCase',
})}
</Text>
</Center>
)}
</ScrollArea>
</Stack>
)}
</Group>
src/shared/types/domain-types.ts
+1
View File
@@ -1200,6 +1200,7 @@ export type InternetProviderLyricResponse = {
export type InternetProviderLyricSearchResponse = {
artist: string;
id: string;
isSync: boolean | null;
name: string;
score?: number;
source: LyricSource;