{mainLines.map((line, idx) => {
const trLine = trByMainIndex[idx]
const prLine = prByMainIndex[idx]
+ const mainNextLineStart = mainLines[idx + 1]?.start ?? null
+ const highlightedMainLine = buildHighlightedMainLine(
+ line,
+ mainNextLineStart,
+ )
+ const highlightedTrLine = buildHighlightedAuxLine(
+ line,
+ trLine,
+ mainNextLineStart,
+ )
+ const highlightedPrLine = buildHighlightedAuxLine(
+ line,
+ prLine,
+ mainNextLineStart,
+ )
const showTr = shouldShowAuxLine(line, trLine)
const showPr = shouldShowAuxLine(line, prLine)
const lineStyle = getMainLineStyle(idx)
- const auxOpacity =
- lineStyle.opacity != null ? lineStyle.opacity * 0.85 : 1
- const trStyle = {
- opacity: auxOpacity,
- fontSize: lyricsSettings.tr.fontSize,
- color: getColorValue(lyricsSettings.tr.colorKey),
- }
- const prStyle = {
- opacity: auxOpacity,
- fontSize: lyricsSettings.pr.fontSize,
- color: getColorValue(lyricsSettings.pr.colorKey),
- }
+ const trStyle = getAuxLineStyle(idx, 'tr')
+ const prStyle = getAuxLineStyle(idx, 'pr')
return (
{
if (audioInstance && line.start != null) {
@@ -1190,33 +1511,35 @@ const KaraokeLyricsOverlay = ({
}
}}
>
- {showTr && (
-
- )}
{showPr && (
+ )}
+ {showTr && (
+
)}
diff --git a/ui/src/audioplayer/KaraokeLyricsOverlay.test.jsx b/ui/src/audioplayer/KaraokeLyricsOverlay.test.jsx
new file mode 100644
index 000000000..411116eae
--- /dev/null
+++ b/ui/src/audioplayer/KaraokeLyricsOverlay.test.jsx
@@ -0,0 +1,344 @@
+import React from 'react'
+import {
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from '@testing-library/react'
+import KaraokeLyricsOverlay from './KaraokeLyricsOverlay'
+
+const DEFAULT_LINE_HEIGHT_TEXT = '1.30'
+const NEXT_LINE_HEIGHT_TEXT = '1.32'
+
+const audioInstance = {
+ currentTime: 0,
+ paused: true,
+ seeking: false,
+ playbackRate: 1,
+}
+
+const buildLyric = (kind, lang, value) => ({
+ kind,
+ lang,
+ synced: true,
+ line: [{ start: 1000, value }],
+})
+
+const renderOverlay = (props = {}) =>
+ render(
+
{}}
+ onTogglePronunciation={() => {}}
+ audioInstance={audioInstance}
+ onClose={() => {}}
+ {...props}
+ />,
+ )
+
+describe(' behavior', () => {
+ beforeEach(() => {
+ localStorage.clear()
+ window.innerWidth = 1200
+ window.innerHeight = 900
+ vi.spyOn(window, 'requestAnimationFrame').mockImplementation(() => 1)
+ vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ cleanup()
+ })
+
+ it('shows tooltips for translation, pronunciation, and appearance controls', async () => {
+ renderOverlay()
+
+ fireEvent.mouseOver(screen.getByTestId('lyrics-toggle-translation'))
+ expect(await screen.findByText('Toggle translations')).toBeInTheDocument()
+
+ fireEvent.mouseOver(screen.getByTestId('lyrics-toggle-pronunciation'))
+ expect(await screen.findByText('Toggle pronunciations')).toBeInTheDocument()
+
+ fireEvent.mouseOver(screen.getByTestId('lyrics-settings-button'))
+ expect(await screen.findByText('Appearance')).toBeInTheDocument()
+ })
+
+ it('renders the appearance popup with Main label and default line height for older settings', async () => {
+ localStorage.setItem(
+ 'karaoke-lyrics-settings',
+ JSON.stringify({
+ tr: { fontSize: 16, colorKey: 'blue' },
+ main: { fontSize: 26, colorKey: 'white' },
+ pr: { fontSize: 15, colorKey: 'green' },
+ }),
+ )
+
+ renderOverlay()
+
+ fireEvent.click(screen.getByTestId('lyrics-settings-button'))
+
+ expect(await screen.findByText('Appearance')).toBeInTheDocument()
+ expect(screen.getByText('Main', { selector: 'div' })).toBeInTheDocument()
+ expect(screen.queryByText('Default')).not.toBeInTheDocument()
+ expect(screen.getByTestId('lyrics-reset-appearance')).toBeInTheDocument()
+ expect(screen.getByTestId('lyrics-line-height-value')).toHaveTextContent(
+ DEFAULT_LINE_HEIGHT_TEXT,
+ )
+ })
+
+ it('renders the lyric group in main, pronunciation, translation order with layer badges', () => {
+ renderOverlay({
+ showTranslation: true,
+ showPronunciation: true,
+ })
+
+ const mainLine = screen.getByText('こんにちは')
+ const pronunciationLine = screen.getByText('konnichiwa')
+ const translationLine = screen.getByText('Hello')
+
+ expect(
+ mainLine.compareDocumentPosition(pronunciationLine) &
+ Node.DOCUMENT_POSITION_FOLLOWING,
+ ).toBeTruthy()
+ expect(
+ pronunciationLine.compareDocumentPosition(translationLine) &
+ Node.DOCUMENT_POSITION_FOLLOWING,
+ ).toBeTruthy()
+
+ expect(screen.getByTestId('lyrics-language-badge-main')).toHaveTextContent(
+ 'Mainja',
+ )
+ expect(screen.getByTestId('lyrics-language-badge-pr')).toHaveTextContent(
+ 'PRja-Latn',
+ )
+ expect(screen.getByTestId('lyrics-language-badge-tr')).toHaveTextContent(
+ 'TRen',
+ )
+ })
+
+ it('renders line-timed rows as whole-line spans without synthetic token splits', () => {
+ renderOverlay({
+ mainLyric: {
+ kind: 'main',
+ lang: 'en',
+ synced: true,
+ line: [
+ { start: 1000, end: 2400, value: 'Batter up, batter up, batter up' },
+ ],
+ },
+ translationLyric: {
+ kind: 'translation',
+ lang: 'ja',
+ synced: true,
+ line: [
+ {
+ start: 1000,
+ end: 2400,
+ value: 'バッターアップ、バッターアップ、バッターアップ',
+ },
+ ],
+ },
+ pronunciationLyric: {
+ kind: 'pronunciation',
+ lang: 'ja-Latn',
+ synced: true,
+ line: [
+ {
+ start: 1000,
+ end: 2400,
+ value: 'Battaa appu, battaa appu, battaa appu',
+ },
+ ],
+ },
+ showTranslation: true,
+ showPronunciation: true,
+ })
+
+ const mainLine = screen.getByText(
+ 'Batter up, batter up, batter up',
+ ).parentElement
+ const pronunciationLine = screen.getByText(
+ 'Battaa appu, battaa appu, battaa appu',
+ ).parentElement
+ const translationLine = screen.getByText(
+ 'バッターアップ、バッターアップ、バッターアップ',
+ ).parentElement
+
+ expect(mainLine.querySelectorAll('span')).toHaveLength(1)
+ expect(pronunciationLine.querySelectorAll('span')).toHaveLength(1)
+ expect(translationLine.querySelectorAll('span')).toHaveLength(1)
+ })
+
+ it('highlights line-timed pronunciation and translation rows with the active main line', () => {
+ renderOverlay({
+ mainLyric: {
+ kind: 'main',
+ lang: 'en',
+ synced: true,
+ line: [
+ { start: 1000, end: 1800, value: 'Line one' },
+ { start: 2500, end: 3300, value: 'Line two' },
+ ],
+ },
+ translationLyric: {
+ kind: 'translation',
+ lang: 'ja',
+ synced: true,
+ line: [
+ { start: 1000, end: 1800, value: '一行目' },
+ { start: 2500, end: 3300, value: '二行目' },
+ ],
+ },
+ pronunciationLyric: {
+ kind: 'pronunciation',
+ lang: 'ja-Latn',
+ synced: true,
+ line: [
+ { start: 1000, end: 1800, value: 'ichigyoume' },
+ { start: 2500, end: 3300, value: 'nigyoume' },
+ ],
+ },
+ showTranslation: true,
+ showPronunciation: true,
+ audioInstance: {
+ ...audioInstance,
+ currentTime: 1.2,
+ },
+ })
+
+ const activePronunciation = screen.getByText('ichigyoume').parentElement
+ const inactivePronunciation = screen.getByText('nigyoume').parentElement
+ const activeTranslation = screen.getByText('一行目').parentElement
+ const inactiveTranslation = screen.getByText('二行目').parentElement
+
+ expect(parseFloat(activePronunciation.style.opacity)).toBeGreaterThan(
+ parseFloat(inactivePronunciation.style.opacity),
+ )
+ expect(parseFloat(activeTranslation.style.opacity)).toBeGreaterThan(
+ parseFloat(inactiveTranslation.style.opacity),
+ )
+ })
+
+ it('renders untimed text lyrics in manual reading mode without a pinned active line', () => {
+ renderOverlay({
+ mainLyric: {
+ kind: 'main',
+ lang: 'en',
+ synced: false,
+ line: [{ value: 'First plain line' }, { value: 'Second plain line' }],
+ },
+ translationLyric: null,
+ pronunciationLyric: null,
+ showTranslation: false,
+ showPronunciation: false,
+ translationEnabled: false,
+ pronunciationEnabled: false,
+ })
+
+ const firstLine = screen.getByText('First plain line').parentElement
+ const secondLine = screen.getByText('Second plain line').parentElement
+
+ expect(firstLine.style.opacity).toBe('1')
+ expect(secondLine.style.opacity).toBe('1')
+ expect(firstLine.style.color).toBe(secondLine.style.color)
+ })
+
+ it('persists line height changes, keeps aux line spacing fixed, and stores overlay height', async () => {
+ renderOverlay({
+ mainLyric: buildLyric('main', 'en', 'Hello world'),
+ translationLyric: buildLyric('translation', 'es', 'Hola'),
+ pronunciationLyric: buildLyric('pronunciation', 'en-Latn', 'heh-loh'),
+ showTranslation: true,
+ showPronunciation: true,
+ translationEnabled: true,
+ pronunciationEnabled: true,
+ })
+
+ const overlay = screen.getByTestId('karaoke-lyrics-overlay')
+ const mainLine = screen.getByText('Hello world').parentElement
+ const pronunciationLine = screen.getByText('heh-loh').parentElement
+ expect(mainLine).toHaveStyle(`line-height: ${DEFAULT_LINE_HEIGHT_TEXT}`)
+ expect(pronunciationLine).toHaveStyle('line-height: 1.2')
+
+ fireEvent.click(screen.getByTestId('lyrics-settings-button'))
+
+ const slider = screen.getByRole('slider', { name: 'Line height' })
+ slider.focus()
+ fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+ await waitFor(() =>
+ expect(screen.getByTestId('lyrics-line-height-value')).toHaveTextContent(
+ NEXT_LINE_HEIGHT_TEXT,
+ ),
+ )
+
+ await waitFor(() =>
+ expect(mainLine).toHaveStyle(`line-height: ${NEXT_LINE_HEIGHT_TEXT}`),
+ )
+ expect(pronunciationLine).toHaveStyle('line-height: 1.2')
+
+ fireEvent.mouseDown(screen.getByTestId('lyrics-resize-handle'), {
+ clientY: 400,
+ })
+ fireEvent.mouseMove(window, { clientY: 360 })
+ fireEvent.mouseUp(window)
+
+ await waitFor(() => expect(overlay).toHaveStyle('height: 340px'))
+
+ const stored = JSON.parse(localStorage.getItem('karaoke-lyrics-settings'))
+ expect(stored.lineHeight).toBeCloseTo(1.32, 2)
+ expect(stored.overlayHeight).toBe(340)
+ })
+
+ it('resets appearance back to the default spacing and overlay height', async () => {
+ localStorage.setItem(
+ 'karaoke-lyrics-settings',
+ JSON.stringify({
+ lineHeight: 1.8,
+ overlayHeight: 420,
+ tr: { fontSize: 16, colorKey: 'yellow' },
+ main: { fontSize: 28, colorKey: 'cyan' },
+ pr: { fontSize: 15, colorKey: 'pink' },
+ }),
+ )
+
+ renderOverlay({
+ mainLyric: buildLyric('main', 'en', 'Hello world'),
+ translationLyric: null,
+ pronunciationLyric: null,
+ showPronunciation: false,
+ translationEnabled: false,
+ pronunciationEnabled: false,
+ })
+
+ const overlay = screen.getByTestId('karaoke-lyrics-overlay')
+ const mainLine = screen.getByText('Hello world').parentElement
+ expect(overlay).toHaveStyle('height: 420px')
+ expect(mainLine).toHaveStyle('line-height: 1.8')
+
+ fireEvent.click(screen.getByTestId('lyrics-settings-button'))
+ fireEvent.click(screen.getByTestId('lyrics-reset-appearance'))
+
+ await waitFor(() =>
+ expect(screen.getByTestId('lyrics-line-height-value')).toHaveTextContent(
+ DEFAULT_LINE_HEIGHT_TEXT,
+ ),
+ )
+ await waitFor(() => expect(overlay).toHaveStyle('height: 300px'))
+ await waitFor(() =>
+ expect(mainLine).toHaveStyle(`line-height: ${DEFAULT_LINE_HEIGHT_TEXT}`),
+ )
+
+ const stored = JSON.parse(localStorage.getItem('karaoke-lyrics-settings'))
+ expect(stored.lineHeight).toBeCloseTo(1.3, 2)
+ expect(stored.overlayHeight).toBe(300)
+ })
+})
diff --git a/ui/src/audioplayer/Player.jsx b/ui/src/audioplayer/Player.jsx
index b8b33b6d5..c6e73c916 100644
--- a/ui/src/audioplayer/Player.jsx
+++ b/ui/src/audioplayer/Player.jsx
@@ -40,6 +40,10 @@ import {
selectLyricLayers,
structuredLyricToLrc,
} from './lyrics'
+import {
+ resolveLyricsOverlayState,
+ togglePronunciationPreference,
+} from './lyricsOverlayState'
import KaraokeLyricsOverlay from './KaraokeLyricsOverlay'
const emptyLyricLayers = {
@@ -143,11 +147,12 @@ const Player = () => {
const lyricCacheRef = useRef(new Map())
const lyricRequestIdRef = useRef(0)
const playerRef = useRef(null)
- const [karaokeVisible, setKaraokeVisible] = useState(false)
+ const [karaokeVisiblePreference, setKaraokeVisiblePreference] =
+ useState(false)
const [selectedLyricLayers, setSelectedLyricLayers] =
useState(emptyLyricLayers)
- const [showTranslation, setShowTranslation] = useState(false)
- const [showPronunciation, setShowPronunciation] = useState(false)
+ const [translationPreference, setTranslationPreference] = useState(false)
+ const [pronunciationPreference, setPronunciationPreference] = useState(null)
const currentTrackId = playerState.current?.trackId
const currentTrackIsRadio = playerState.current?.isRadio
const selectedStructuredLyric = selectedLyricLayers.main
@@ -158,6 +163,15 @@ const Player = () => {
const hasPronunciationLyric = hasStructuredLyricContent(
selectedLyricLayers.pronunciation,
)
+ const { karaokeVisible, showTranslation, showPronunciation } =
+ resolveLyricsOverlayState({
+ karaokeVisiblePreference,
+ translationPreference,
+ pronunciationPreference,
+ hasKaraokeLyric,
+ hasTranslationLyric,
+ hasPronunciationLyric,
+ })
const applyLyricToRuntimePlayer = useCallback((trackId, lyric) => {
if (!trackId) {
@@ -255,9 +269,6 @@ const Player = () => {
useEffect(() => {
if (!currentTrackId || currentTrackIsRadio) {
setSelectedLyricLayers(emptyLyricLayers)
- setShowTranslation(false)
- setShowPronunciation(false)
- setKaraokeVisible(false)
return
}
@@ -273,8 +284,6 @@ const Player = () => {
}
}
setSelectedLyricLayers(layers)
- setShowTranslation(false)
- setShowPronunciation(hasStructuredLyricContent(layers.pronunciation))
}, [currentTrackId, currentTrackIsRadio])
useEffect(() => {
@@ -297,10 +306,6 @@ const Player = () => {
: normalizeLyricLayers({ main: cached?.structuredLyric })
setSelectedLyricLayers(cachedLayers)
- setShowTranslation(false)
- setShowPronunciation(
- hasStructuredLyricContent(cachedLayers.pronunciation),
- )
if (cachedLyric) {
dispatch(updateQueueLyric(currentTrackId, cachedLyric))
applyLyricToRuntimePlayer(currentTrackId, cachedLyric)
@@ -327,8 +332,6 @@ const Player = () => {
layers,
})
setSelectedLyricLayers(layers)
- setShowTranslation(false)
- setShowPronunciation(hasStructuredLyricContent(layers.pronunciation))
if (lyric !== '') {
dispatch(updateQueueLyric(currentTrackId, lyric))
@@ -340,19 +343,11 @@ const Player = () => {
return
}
setSelectedLyricLayers(emptyLyricLayers)
- setShowTranslation(false)
- setShowPronunciation(false)
// Do not cache network/request failures as empty lyrics, so we can retry.
lyricCacheRef.current.delete(currentTrackId)
})
}, [dispatch, currentTrackId, currentTrackIsRadio, applyLyricToRuntimePlayer])
- useEffect(() => {
- if (!hasKaraokeLyric && karaokeVisible) {
- setKaraokeVisible(false)
- }
- }, [hasKaraokeLyric, karaokeVisible])
-
const defaultOptions = useMemo(
() => ({
theme: playerTheme,
@@ -404,7 +399,9 @@ const Player = () => {
setKaraokeVisible((visible) => !visible)}
+ onToggleLyrics={() =>
+ setKaraokeVisiblePreference((visible) => !visible)
+ }
lyricsActive={karaokeVisible}
lyricsDisabled={!hasKaraokeLyric}
/>
@@ -616,17 +613,17 @@ const Player = () => {
translationEnabled={hasTranslationLyric}
pronunciationEnabled={hasPronunciationLyric}
onToggleTranslation={() =>
- setShowTranslation((previous) =>
+ setTranslationPreference((previous) =>
hasTranslationLyric ? !previous : false,
)
}
onTogglePronunciation={() =>
- setShowPronunciation((previous) =>
- hasPronunciationLyric ? !previous : false,
+ setPronunciationPreference((previous) =>
+ togglePronunciationPreference(previous, hasPronunciationLyric),
)
}
audioInstance={audioInstance}
- onClose={() => setKaraokeVisible(false)}
+ onClose={() => setKaraokeVisiblePreference(false)}
/>
diff --git a/ui/src/audioplayer/Player.lyricsState.test.jsx b/ui/src/audioplayer/Player.lyricsState.test.jsx
new file mode 100644
index 000000000..c47abea76
--- /dev/null
+++ b/ui/src/audioplayer/Player.lyricsState.test.jsx
@@ -0,0 +1,77 @@
+import {
+ resolveLyricsOverlayState,
+ togglePronunciationPreference,
+} from './lyricsOverlayState'
+
+describe('Player lyrics state helpers', () => {
+ it('keeps the lyrics window preference across track changes in the session', () => {
+ const visibleOnCurrentTrack = resolveLyricsOverlayState({
+ karaokeVisiblePreference: true,
+ translationPreference: false,
+ pronunciationPreference: null,
+ hasKaraokeLyric: true,
+ hasTranslationLyric: true,
+ hasPronunciationLyric: true,
+ })
+ expect(visibleOnCurrentTrack.karaokeVisible).toBe(true)
+
+ const hiddenForTrackWithoutLyrics = resolveLyricsOverlayState({
+ karaokeVisiblePreference: true,
+ translationPreference: false,
+ pronunciationPreference: null,
+ hasKaraokeLyric: false,
+ hasTranslationLyric: false,
+ hasPronunciationLyric: false,
+ })
+ expect(hiddenForTrackWithoutLyrics.karaokeVisible).toBe(false)
+
+ const restoredOnNextLyricsTrack = resolveLyricsOverlayState({
+ karaokeVisiblePreference: true,
+ translationPreference: false,
+ pronunciationPreference: null,
+ hasKaraokeLyric: true,
+ hasTranslationLyric: false,
+ hasPronunciationLyric: false,
+ })
+ expect(restoredOnNextLyricsTrack.karaokeVisible).toBe(true)
+ })
+
+ it('restores translation and pronunciation preferences after tracks without those layers', () => {
+ const initialState = resolveLyricsOverlayState({
+ karaokeVisiblePreference: false,
+ translationPreference: false,
+ pronunciationPreference: null,
+ hasKaraokeLyric: true,
+ hasTranslationLyric: true,
+ hasPronunciationLyric: true,
+ })
+ expect(initialState.showTranslation).toBe(false)
+ expect(initialState.showPronunciation).toBe(true)
+
+ const translationPreference = true
+ const pronunciationPreference = togglePronunciationPreference(null, true)
+ expect(pronunciationPreference).toBe(false)
+
+ const hiddenOnTrackWithoutAuxLayers = resolveLyricsOverlayState({
+ karaokeVisiblePreference: false,
+ translationPreference,
+ pronunciationPreference,
+ hasKaraokeLyric: true,
+ hasTranslationLyric: false,
+ hasPronunciationLyric: false,
+ })
+ expect(hiddenOnTrackWithoutAuxLayers.showTranslation).toBe(false)
+ expect(hiddenOnTrackWithoutAuxLayers.showPronunciation).toBe(false)
+
+ const restoredOnTrackWithAuxLayers = resolveLyricsOverlayState({
+ karaokeVisiblePreference: false,
+ translationPreference,
+ pronunciationPreference,
+ hasKaraokeLyric: true,
+ hasTranslationLyric: true,
+ hasPronunciationLyric: true,
+ })
+ expect(restoredOnTrackWithAuxLayers.showTranslation).toBe(true)
+ expect(restoredOnTrackWithAuxLayers.showPronunciation).toBe(false)
+ })
+})
diff --git a/ui/src/audioplayer/lyrics.js b/ui/src/audioplayer/lyrics.js
index 87b218d05..e9cd16d5a 100644
--- a/ui/src/audioplayer/lyrics.js
+++ b/ui/src/audioplayer/lyrics.js
@@ -12,6 +12,9 @@ const padTime = (value) => {
}
const toTime = (value) => {
+ if (value == null || value === '') {
+ return null
+ }
const numeric = Number(value)
return Number.isFinite(numeric) ? numeric : null
}
@@ -179,64 +182,6 @@ const lineTimeWindow = (lines, index) => {
return { start, end }
}
-const buildSyntheticWordTokens = (line, token) => {
- const text = typeof line?.value === 'string' ? line.value : ''
- if (!text.trim()) {
- return null
- }
-
- const chunks = text.match(/\S+\s*/g) || []
- if (chunks.length < 2) {
- return null
- }
-
- const normalizedLine = text.replace(/\s+/g, ' ').trim().toLowerCase()
- const normalizedTokenValue = (token?.value || '')
- .replace(/\s+/g, ' ')
- .trim()
- .toLowerCase()
- if (!normalizedTokenValue || !normalizedLine) {
- return null
- }
-
- const compressedLine = normalizedLine.replace(/\s+/g, '')
- const compressedToken = normalizedTokenValue.replace(/\s+/g, '')
- const tokenLooksLikeWholeLine =
- compressedToken === compressedLine ||
- compressedToken.length >= Math.floor(compressedLine.length * 0.8)
- if (!tokenLooksLikeWholeLine) {
- return null
- }
-
- const tokenStart = toTime(token?.start)
- const tokenEnd = toTime(token?.end)
- const lineStart = toTime(line?.start)
- const lineEnd = toTime(line?.end)
-
- const baseStart = tokenStart ?? lineStart
- const baseEnd = tokenEnd ?? lineEnd
- if (
- baseStart == null ||
- baseEnd == null ||
- !Number.isFinite(baseStart) ||
- !Number.isFinite(baseEnd) ||
- baseEnd <= baseStart
- ) {
- return null
- }
-
- const duration = baseEnd - baseStart
- return chunks.map((chunk, idx) => ({
- start: baseStart + (duration * idx) / chunks.length,
- end: baseStart + (duration * (idx + 1)) / chunks.length,
- value: chunk,
- role: typeof token?.role === 'string' ? token.role : '',
- agentId: typeof token?.agentId === 'string' ? token.agentId : '',
- agentName: typeof token?.agentName === 'string' ? token.agentName : '',
- agentRole: typeof token?.agentRole === 'string' ? token.agentRole : '',
- }))
-}
-
export const hasCueTiming = (structuredLyric) =>
Boolean(
structuredLyric &&
@@ -449,19 +394,6 @@ export const buildKaraokeLines = (structuredLyric) => {
}
return a.index - b.index
})
- .map((line) => {
- const nextLine = { ...line }
- if (nextLine.tokens.length === 1) {
- const syntheticTokens = buildSyntheticWordTokens(
- nextLine,
- nextLine.tokens[0],
- )
- if (syntheticTokens) {
- nextLine.tokens = syntheticTokens
- }
- }
- return nextLine
- })
for (let i = 0; i < normalized.length; i += 1) {
if (normalized[i].end == null) {
@@ -628,6 +560,17 @@ export const getActiveKaraokeState = (lines, currentTimeMs) => {
return { lineIndex, tokenIndex }
}
+export const hasUsableKaraokeTiming = (lines) =>
+ Array.isArray(lines) &&
+ lines.some(
+ (line) =>
+ toTime(line?.start) != null ||
+ (Array.isArray(line?.tokens) &&
+ line.tokens.some(
+ (token) => toTime(token?.start) != null || toTime(token?.end) != null,
+ )),
+ )
+
export const findLayerLineIndexForMain = (mainLines, layerLines, mainIndex) => {
if (
!Array.isArray(mainLines) ||
@@ -692,3 +635,8 @@ export const resolveLayerLineForMain = (mainLines, layerLines, mainIndex) => {
line: index >= 0 ? layerLines[index] : null,
}
}
+
+export const buildHighlightedMainLine = (line) => line
+
+export const buildHighlightedAuxLine = (_referenceLine, auxiliaryLine) =>
+ auxiliaryLine ?? null
diff --git a/ui/src/audioplayer/lyrics.test.js b/ui/src/audioplayer/lyrics.test.js
index 3a5f83b2d..2fcf1df40 100644
--- a/ui/src/audioplayer/lyrics.test.js
+++ b/ui/src/audioplayer/lyrics.test.js
@@ -1,8 +1,11 @@
import {
+ buildHighlightedAuxLine,
+ buildHighlightedMainLine,
buildKaraokeLines,
findLayerLineIndexForMain,
getActiveKaraokeState,
getPreferredLyricLanguage,
+ hasUsableKaraokeTiming,
hasStructuredLyricContent,
pickStructuredLyric,
resolveKaraokeTokenWindow,
@@ -201,6 +204,110 @@ describe('lyrics helpers', () => {
)
})
+ it('keeps translation lines line-level when they do not have real cue timing', () => {
+ const mainLine = {
+ index: 0,
+ start: 1000,
+ end: 2200,
+ value: '불을 질러라',
+ tokens: [
+ { start: 1000, end: 1300, value: '불을 ' },
+ { start: 1300, end: 1650, value: '질' },
+ { start: 1650, end: 2200, value: '러라' },
+ ],
+ }
+ const translationLine = {
+ index: 0,
+ start: 1000,
+ end: 2200,
+ value: 'Set it on fire',
+ tokens: [],
+ }
+
+ const highlighted = buildHighlightedAuxLine(mainLine, translationLine, 2600)
+
+ expect(highlighted).toBe(translationLine)
+ expect(highlighted.tokens).toEqual([])
+ })
+
+ it('keeps pronunciation lines line-level when they do not have real cue timing', () => {
+ const mainLine = {
+ index: 0,
+ start: 1000,
+ end: 2200,
+ value: 'You もっと強く 素早く 吹き飛ばせ',
+ tokens: [],
+ }
+ const pronunciationLine = {
+ index: 0,
+ start: 1000,
+ end: 2200,
+ value: 'You motto tsuyoku subayaku fukitobase',
+ tokens: [],
+ }
+
+ const highlighted = buildHighlightedAuxLine(
+ mainLine,
+ pronunciationLine,
+ 2600,
+ )
+
+ expect(highlighted).toBe(pronunciationLine)
+ expect(highlighted.tokens).toEqual([])
+ })
+
+ it('keeps main lines line-level when they do not have real cue timing', () => {
+ const line = {
+ index: 0,
+ start: 1000,
+ end: 2200,
+ value: 'Youもっと強く 素早く 吹き飛ばせ',
+ tokens: [],
+ }
+
+ const highlighted = buildHighlightedMainLine(line, 2600)
+
+ expect(highlighted).toBe(line)
+ expect(highlighted.tokens).toEqual([])
+ })
+
+ it('keeps auxiliary lines line-level when end time is missing and they lack cues', () => {
+ const mainLine = {
+ index: 0,
+ start: 1000,
+ end: null,
+ value: 'Hello there',
+ tokens: [],
+ }
+ const translationLine = {
+ index: 0,
+ start: 1000,
+ end: null,
+ value: 'Bonjour toi',
+ tokens: [],
+ }
+
+ const highlighted = buildHighlightedAuxLine(mainLine, translationLine, 2400)
+
+ expect(highlighted).toBe(translationLine)
+ expect(highlighted.tokens).toEqual([])
+ })
+
+ it('keeps main lines line-level when end time is missing and they lack cues', () => {
+ const line = {
+ index: 0,
+ start: 1000,
+ end: null,
+ value: 'One more time',
+ tokens: [],
+ }
+
+ const highlighted = buildHighlightedMainLine(line, 2400)
+
+ expect(highlighted).toBe(line)
+ expect(highlighted.tokens).toEqual([])
+ })
+
it('returns no layer match when the nearest line is too far in time', () => {
const mainLines = [
{ index: 0, start: 1000, end: 1800, value: 'Line A', tokens: [] },
@@ -353,7 +460,7 @@ describe('lyrics helpers', () => {
])
})
- it('splits a single full-line token into synthetic word tokens', () => {
+ it('keeps a single full-line token unchanged instead of expanding it synthetically', () => {
const lines = buildKaraokeLines({
lang: 'ko-Latn',
synced: true,
@@ -371,17 +478,13 @@ describe('lyrics helpers', () => {
})
expect(lines).toHaveLength(1)
- expect(lines[0].tokens).toHaveLength(2)
- expect(lines[0].tokens[0].value).toBe('Da-la-lun, ')
- expect(lines[0].tokens[1].value).toBe('dun')
+ expect(lines[0].tokens).toHaveLength(1)
+ expect(lines[0].tokens[0].value).toBe('Da-la-lun, dun')
const firstWindow = resolveKaraokeTokenWindow(lines[0], 0)
- const secondWindow = resolveKaraokeTokenWindow(lines[0], 1)
expect(firstWindow.start).toBeCloseTo(1000)
- expect(firstWindow.end).toBeCloseTo(1500)
- expect(secondWindow.start).toBeCloseTo(1500)
- expect(secondWindow.end).toBeCloseTo(2000)
+ expect(firstWindow.end).toBeCloseTo(2000)
})
it('detects active line and token for karaoke timing', () => {
@@ -509,4 +612,19 @@ describe('lyrics helpers', () => {
}),
).toBe(true)
})
+
+ it('detects when built karaoke lines have no usable timing', () => {
+ expect(
+ hasUsableKaraokeTiming([
+ { index: 0, value: 'First line', tokens: [] },
+ { index: 1, value: 'Second line', tokens: [] },
+ ]),
+ ).toBe(false)
+
+ expect(
+ hasUsableKaraokeTiming([
+ { index: 0, start: 1000, value: 'Timed line', tokens: [] },
+ ]),
+ ).toBe(true)
+ })
})
diff --git a/ui/src/audioplayer/lyricsOverlayState.js b/ui/src/audioplayer/lyricsOverlayState.js
new file mode 100644
index 000000000..e8ff0e0a8
--- /dev/null
+++ b/ui/src/audioplayer/lyricsOverlayState.js
@@ -0,0 +1,27 @@
+export const resolveLyricsOverlayState = ({
+ karaokeVisiblePreference,
+ translationPreference,
+ pronunciationPreference,
+ hasKaraokeLyric,
+ hasTranslationLyric,
+ hasPronunciationLyric,
+}) => ({
+ karaokeVisible: karaokeVisiblePreference && hasKaraokeLyric,
+ showTranslation: translationPreference && hasTranslationLyric,
+ showPronunciation:
+ (pronunciationPreference == null
+ ? hasPronunciationLyric
+ : pronunciationPreference) && hasPronunciationLyric,
+})
+
+export const togglePronunciationPreference = (
+ previousPreference,
+ hasPronunciationLyric,
+) => {
+ if (!hasPronunciationLyric) {
+ return false
+ }
+ const currentPreference =
+ previousPreference == null ? hasPronunciationLyric : previousPreference
+ return !currentPreference
+}