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)}
+${elem}>`;
-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;
}