mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-14 22:50:26 +02:00
prevent initially rendering non-sync romaji generated lyrics on karaoke lyrics
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user