diff --git a/src/controllers/lyrics.html b/src/controllers/lyrics.html index d1e7b662c..79b923678 100644 --- a/src/controllers/lyrics.html +++ b/src/controllers/lyrics.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index 36ae408bc..79dab9832 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -23,21 +23,17 @@ let savedLyrics; let isDynamicLyric = false; let autoScroll = AutoScroll.Instant; -function dynamicLyricHtmlReducer(htmlAccumulator, lyric, index) { - if (layoutManager.tv) { - htmlAccumulator += ``; - } else { - htmlAccumulator += `
${escapeHtml(lyric.Text)}
`; - } - return htmlAccumulator; -} +function lyricHtmlReducer(htmlAccumulator, lyric, index) { + const elem = layoutManager.tv ? 'button' : 'div'; + const classes = []; + if (isDynamicLyric) classes.push('dynamicLyric'); + if (layoutManager.tv) classes.push('listItem', 'show-focus'); + const lyricTime = typeof lyric.Start !== 'undefined' ? `data-lyrictime="${lyric.Start}"` : ''; + + htmlAccumulator += `<${elem} class="lyricsLine ${classes.join(' ')}" id="lyricPosition${index}" ${lyricTime}> + ${escapeHtml(lyric.Text)} +`; -function staticLyricHtmlReducer(htmlAccumulator, lyric, index) { - if (layoutManager.tv) { - htmlAccumulator += ``; - } else { - htmlAccumulator += `
${escapeHtml(lyric.Text)}
`; - } return htmlAccumulator; } @@ -96,37 +92,31 @@ export default function (view) { } function renderNoLyricMessage() { - const itemsContainer = view.querySelector('.dynamicLyricsContainer'); + const itemsContainer = view.querySelector('.lyricsContainer'); if (itemsContainer) { - const html = `

${globalize.translate('HeaderNoLyrics')}

`; + const html = `

${globalize.translate('HeaderNoLyrics')}

`; itemsContainer.innerHTML = html; } autoFocuser.autoFocus(); } - function renderDynamicLyrics(lyrics) { - const itemsContainer = view.querySelector('.dynamicLyricsContainer'); + function renderLyrics(lyrics) { + const itemsContainer = view.querySelector('.lyricsContainer'); if (itemsContainer) { - const html = lyrics.reduce(dynamicLyricHtmlReducer, ''); + const html = lyrics.reduce(lyricHtmlReducer, ''); itemsContainer.innerHTML = html; } - const lyricLineArray = itemsContainer.querySelectorAll('.lyricsLine'); + if (isDynamicLyric) { + const lyricLineArray = itemsContainer.querySelectorAll('.lyricsLine'); - // attaches click event listener to change playtime to lyric start - lyricLineArray.forEach(element => { - element.addEventListener('click', () => onLyricClick(element.getAttribute('data-lyrictime'))); - }); + // attaches click event listener to change playtime to lyric start + lyricLineArray.forEach(element => { + element.addEventListener('click', () => onLyricClick(element.getAttribute('data-lyrictime'))); + }); - const currentIndex = getLyricIndex(getCurrentPlayTime(), lyrics); - updateAllLyricLines(currentIndex, savedLyrics); - } - - function renderStaticLyrics(lyrics) { - const itemsContainer = view.querySelector('.dynamicLyricsContainer'); - if (itemsContainer) { - const html = lyrics.reduce(staticLyricHtmlReducer, ''); - itemsContainer.innerHTML = html; + const currentIndex = getLyricIndex(getCurrentPlayTime(), lyrics); + updateAllLyricLines(currentIndex, savedLyrics); } } @@ -135,11 +125,7 @@ export default function (view) { isDynamicLyric = Object.prototype.hasOwnProperty.call(lyrics[0], 'Start'); - if (isDynamicLyric) { - renderDynamicLyrics(savedLyrics); - } else { - renderStaticLyrics(savedLyrics); - } + renderLyrics(savedLyrics); autoFocuser.autoFocus(view); } diff --git a/src/styles/lyrics.scss b/src/styles/lyrics.scss index 0adf81ebd..4e9a7128e 100644 --- a/src/styles/lyrics.scss +++ b/src/styles/lyrics.scss @@ -6,7 +6,7 @@ justify-content: center; } -.dynamicLyricsContainer { +.lyricsContainer { display: flex; flex-direction: column; }