prevent initially rendering non-sync romaji generated lyrics on karaoke lyrics

This commit is contained in:
jeffvli
2026-07-11 18:50:03 -07:00
parent bafc14b55a
commit 0270e9e9e5
4 changed files with 39 additions and 17 deletions
@@ -193,11 +193,13 @@ export const KaraokeLyricLine = memo(
[fontSize, alignment],
);
const hasSyncedRomaji = romajiCueLines != null;
const hasSyncedRomajiOverlay = romajiCueLines !== undefined;
const hasSyncedPronunciation = hasSyncedOverlayCueLines(pronunciationCueLines);
const hasSyncedTranslation = hasSyncedOverlayCueLines(translationCueLines);
const pronunciationFallbackText =
!hasSyncedRomaji && !hasSyncedPronunciation ? (pronunciationText ?? romajiText) : null;
!hasSyncedRomajiOverlay && !hasSyncedPronunciation
? (pronunciationText ?? romajiText)
: null;
return (
<Box
+22 -10
View File
@@ -136,7 +136,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
}, [data, indexToUse, preferLocalLyrics]);
const { data: furiganaConvertedLyrics } = useFuriganaLyrics(lyrics?.lyrics, !!enableFurigana);
const { data: romajiConvertedLyrics } = useRomajiLyrics(lyrics?.lyrics, !!enableRomaji);
const { data: romajiConvertedLyrics, isFetching: isFetchingRomaji } = useRomajiLyrics(
lyrics?.lyrics,
!!enableRomaji,
);
const rawSyncedLyrics = useMemo(() => {
if (!synced || !lyrics || !('lyrics' in lyrics) || !Array.isArray(lyrics.lyrics)) {
@@ -226,12 +229,15 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
const displayOffsetMs = isLyricsDisabled ? 0 : currentOffsetMs;
const useServerPronunciation = !!pronunciationLyricsOverlay;
const { data: syncedRomajiLyrics } = useSyncedRomajiLyrics(
rawSyncedLyrics,
const shouldGenerateSyncedRomaji =
!!enableRomaji &&
!!rawSyncedLyrics &&
lyricsHasWordCues(rawSyncedLyrics) &&
!useServerPronunciation,
!!rawSyncedLyrics &&
lyricsHasWordCues(rawSyncedLyrics) &&
!useServerPronunciation;
const { data: syncedRomajiLyrics, isFetching: isFetchingSyncedRomaji } = useSyncedRomajiLyrics(
rawSyncedLyrics,
shouldGenerateSyncedRomaji,
);
const isKaraoke = useMemo(() => {
@@ -253,12 +259,11 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
offsetMs: displayOffsetMs,
pronunciationLyrics: pronunciationLyricsOverlay,
romajiLyrics:
enableRomaji && !useServerPronunciation
enableRomaji && !useServerPronunciation && !shouldGenerateSyncedRomaji
? (romajiConvertedLyrics as SynchronizedLyricsProps['romajiLyrics'])
: null,
settingsKey,
syncedRomajiLyrics:
enableRomaji && !useServerPronunciation ? (syncedRomajiLyrics ?? null) : null,
syncedRomajiLyrics: shouldGenerateSyncedRomaji ? (syncedRomajiLyrics ?? null) : null,
translatedLyrics:
showTranslation && !translationLyricsOverlay ? translatedLyrics : null,
translationLyrics: translationLyricsOverlay,
@@ -271,6 +276,7 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
isKaraoke,
pronunciationLyricsOverlay,
romajiConvertedLyrics,
shouldGenerateSyncedRomaji,
syncedRomajiLyrics,
settingsKey,
showTranslation,
@@ -428,8 +434,14 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
return [];
}, [data?.local]);
const isWaitingForRomaji =
!!enableRomaji &&
!!lyrics &&
(isFetchingRomaji || (shouldGenerateSyncedRomaji && isFetchingSyncedRomaji));
const isLoadingLyrics =
shouldFetchLyrics && (isWaitingToFetchLyrics || isLoading || isRefetching);
shouldFetchLyrics &&
(isWaitingToFetchLyrics || isLoading || isRefetching || isWaitingForRomaji);
const hasNoLyrics = !displayLyrics;
const [shouldFadeOut, setShouldFadeOut] = useState(false);
@@ -68,17 +68,17 @@
}
.karaoke-word.karaoke-overlay-pronunciation {
font-size: 0.8em;
font-size: inherit;
font-weight: 600;
}
.karaoke-word.karaoke-overlay-translation {
font-size: 0.85em;
font-size: inherit;
font-weight: 500;
}
.karaoke-word.karaoke-overlay-generic {
font-size: 0.8em;
font-size: inherit;
font-weight: 500;
}
@@ -360,11 +360,15 @@ export const SynchronizedKaraokeLyrics = ({
lineStartMs,
idx,
);
const lineLevelRomaji =
syncedRomajiLyrics == null && romajiLyrics?.[idx]
? getLyricLineText(romajiLyrics[idx])
: undefined;
const pronunciationText = getOverlayText(
pronunciationLyrics,
lineStartMs,
idx,
romajiLyrics?.[idx] ? getLyricLineText(romajiLyrics[idx]) : undefined,
lineLevelRomaji,
);
const translationText = getOverlayText(
translationLyrics,
@@ -407,7 +411,11 @@ export const SynchronizedKaraokeLyrics = ({
lineIndex={idx}
pronunciationCueLines={pronunciationCueLines}
pronunciationText={pronunciationText}
romajiCueLines={syncedRomajiLyrics?.[idx] ?? null}
romajiCueLines={
syncedRomajiLyrics != null
? (syncedRomajiLyrics[idx] ?? null)
: undefined
}
translatedText={translationText}
translationCueLines={translationCueLines}
/>