diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index d0107406e3..d4c54af1e7 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -5,7 +5,9 @@ import { appRouter } from '../components/router/appRouter'; import layoutManager from 'components/layoutManager'; import { playbackManager } from '../components/playback/playbackmanager'; import ServerConnections from '../components/ServerConnections'; +import scrollManager from 'components/scrollManager'; +import keyboardNavigation from 'scripts/keyboardNavigation'; import globalize from '../scripts/globalize'; import LibraryMenu from '../scripts/libraryMenu'; import Events from '../utils/events.ts'; @@ -17,6 +19,7 @@ let currentItem; let savedLyrics; let isDynamicLyric = false; +let autoScroll = true; function dynamicLyricHtmlReducer(htmlAccumulator, lyric, index) { if (layoutManager.tv) { @@ -69,6 +72,9 @@ export default function (view) { if (lyric) { lyric.classList.remove('pastLyric'); lyric.classList.remove('futureLyric'); + if (autoScroll) { + scrollManager.scrollToElement(lyric, true); + } } } @@ -178,6 +184,7 @@ export default function (view) { } function onLyricClick(lyricTime) { + autoScroll = true; playbackManager.seek(lyricTime); if (playbackManager.paused()) { playbackManager.playPause(currentPlayer); @@ -234,8 +241,22 @@ export default function (view) { } } + function onWheel() { + autoScroll = false; + } + + function onKeyDown(e) { + const key = keyboardNavigation.getKeyName(e); + if (key === 'ArrowUp' || key === 'ArrowDown') { + autoScroll = false; + } + } + view.addEventListener('viewshow', function () { Events.on(playbackManager, 'playerchange', onPlayerChange); + autoScroll = true; + document.addEventListener('wheel', onWheel); + document.addEventListener('keydown', onKeyDown); try { onLoad(); } catch (e) { @@ -245,6 +266,8 @@ export default function (view) { view.addEventListener('viewbeforehide', function () { Events.off(playbackManager, 'playerchange', onPlayerChange); + document.removeEventListener('wheel', onWheel); + document.removeEventListener('keydown', onKeyDown); releaseCurrentPlayer(); }); }