perf(synced-lyrics): virtual scrolling (#3162)

Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
Angelos Bouklis
2025-07-01 10:21:09 +03:00
committed by GitHub
parent 40ab32cbe7
commit 8fc9692ae4
15 changed files with 377 additions and 279 deletions

View File

@ -13,7 +13,7 @@ import { lazy } from 'lazy-var';
import { waitForElement } from '@/utils/wait-for-element';
import { LyricsRenderer, setIsVisible } from './renderer';
import type { LyricResult } from '@/plugins/synced-lyrics/types';
import { detect } from 'tinyld';
export const selectors = {
head: '#tabsContent > .tab-header:nth-of-type(2)',
@ -152,35 +152,41 @@ const hasJapanese = (lines: string[]) =>
const hasKorean = (lines: string[]) =>
lines.some((line) => /[ㄱ-ㅎㅏ-ㅣ가-힣]+/.test(line));
export const hasJapaneseInString = (lyric: LyricResult) => {
if (!lyric || (!lyric.lines && !lyric.lyrics)) return false;
const lines = Array.isArray(lyric.lines)
? lyric.lines.map(({ text }) => text)
: lyric.lyrics!.split('\n');
return hasJapanese(lines);
};
const hasChinese = (lines: string[]) =>
lines.some((line) => /[\u4E00-\u9FFF]+/.test(line));
export const hasKoreanInString = (lyric: LyricResult) => {
if (!lyric || (!lyric.lines && !lyric.lyrics)) return false;
export const romanize = async (line: string) => {
const lang = detect(line);
const lines = Array.isArray(lyric.lines)
? lyric.lines.map(({ text }) => text)
: lyric.lyrics!.split('\n');
const handlers: Record<string, (line: string) => Promise<string> | string> = {
ja: romanizeJapanese,
ko: romanizeHangul,
zh: romanizeChinese,
};
return hasKorean(lines);
const NO_OP = (l: string) => l;
const handler = handlers[lang] ?? NO_OP;
line = await handler(line);
if (hasJapanese([line])) line = await romanizeJapanese(line);
if (hasKorean([line])) line = romanizeHangul(line);
if (hasChinese([line])) line = romanizeChinese(line);
return line;
};
export const romanizeJapanese = async (line: string) =>
(await kuroshiro.get()).convert(line, {
to: 'romaji',
mode: 'spaced',
}) ?? '';
}) ?? line;
export const romanizeHangul = (line: string) =>
esHangulRomanize(hanja.translate(line, 'SUBSTITUTION'));
export const romanizeJapaneseOrHangul = async (line: string) =>
romanizeHangul(await romanizeJapanese(line));
export const romanizeChinese = (line: string) =>
pinyin.convertToPinyin(line, ' ', true);
export const romanizeChinese = (line: string) => {
return line.replaceAll(/[\u4E00-\u9FFF]+/g, (match) =>
pinyin.convertToPinyin(match, ' ', true),
);
};