From fa9b0e6c87d22995b2fc7c97b2f31e2370b75de1 Mon Sep 17 00:00:00 2001 From: LJQ Date: Wed, 22 May 2024 12:45:50 +0800 Subject: [PATCH 1/9] Add lyrics auto scroll --- src/controllers/lyrics.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index d0107406e38..d4c54af1e7c 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(); }); } From a4c88e59eb1011c977356177595766c727f06bb4 Mon Sep 17 00:00:00 2001 From: LJQ Date: Thu, 23 May 2024 20:48:50 +0800 Subject: [PATCH 2/9] Disable autoscroll on touchmove --- src/controllers/lyrics.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index d4c54af1e7c..499931f73e9 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -241,7 +241,7 @@ export default function (view) { } } - function onWheel() { + function onWheelOrTouchMove() { autoScroll = false; } @@ -255,7 +255,8 @@ export default function (view) { view.addEventListener('viewshow', function () { Events.on(playbackManager, 'playerchange', onPlayerChange); autoScroll = true; - document.addEventListener('wheel', onWheel); + document.addEventListener('wheel', onWheelOrTouchMove); + document.addEventListener('touchmove', onWheelOrTouchMove); document.addEventListener('keydown', onKeyDown); try { onLoad(); @@ -266,7 +267,8 @@ export default function (view) { view.addEventListener('viewbeforehide', function () { Events.off(playbackManager, 'playerchange', onPlayerChange); - document.removeEventListener('wheel', onWheel); + document.removeEventListener('wheel', onWheelOrTouchMove); + document.removeEventListener('touchmove', onWheelOrTouchMove); document.removeEventListener('keydown', onKeyDown); releaseCurrentPlayer(); }); From cfcfbe934b34dca05e3cc8f612753e606215de0f Mon Sep 17 00:00:00 2001 From: LJQ Date: Thu, 23 May 2024 21:40:31 +0800 Subject: [PATCH 3/9] Instant scroll when enter webview. Enums to determine --- src/controllers/lyrics.js | 18 ++++++++++++------ src/controllers/lyrics.types.ts | 5 +++++ 2 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 src/controllers/lyrics.types.ts diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index 499931f73e9..c84fb9007b3 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -13,13 +13,14 @@ import LibraryMenu from '../scripts/libraryMenu'; import Events from '../utils/events.ts'; import '../styles/lyrics.scss'; +import { AutoScrollType } from './lyrics.types'; let currentPlayer; let currentItem; let savedLyrics; let isDynamicLyric = false; -let autoScroll = true; +let autoScroll = AutoScrollType.Smooth; function dynamicLyricHtmlReducer(htmlAccumulator, lyric, index) { if (layoutManager.tv) { @@ -72,9 +73,14 @@ export default function (view) { if (lyric) { lyric.classList.remove('pastLyric'); lyric.classList.remove('futureLyric'); - if (autoScroll) { + if (autoScroll === AutoScrollType.Smooth) { scrollManager.scrollToElement(lyric, true); } + if (autoScroll === AutoScrollType.Instant) { + // instant scroll is used when the view is first loaded + scrollManager.scrollToElement(lyric, false); + autoScroll = AutoScrollType.Smooth; + } } } @@ -184,7 +190,7 @@ export default function (view) { } function onLyricClick(lyricTime) { - autoScroll = true; + autoScroll = AutoScrollType.Smooth; playbackManager.seek(lyricTime); if (playbackManager.paused()) { playbackManager.playPause(currentPlayer); @@ -242,19 +248,19 @@ export default function (view) { } function onWheelOrTouchMove() { - autoScroll = false; + autoScroll = AutoScrollType.None; } function onKeyDown(e) { const key = keyboardNavigation.getKeyName(e); if (key === 'ArrowUp' || key === 'ArrowDown') { - autoScroll = false; + autoScroll = AutoScrollType.None; } } view.addEventListener('viewshow', function () { Events.on(playbackManager, 'playerchange', onPlayerChange); - autoScroll = true; + autoScroll = AutoScrollType.Instant; document.addEventListener('wheel', onWheelOrTouchMove); document.addEventListener('touchmove', onWheelOrTouchMove); document.addEventListener('keydown', onKeyDown); diff --git a/src/controllers/lyrics.types.ts b/src/controllers/lyrics.types.ts new file mode 100644 index 00000000000..88593104de5 --- /dev/null +++ b/src/controllers/lyrics.types.ts @@ -0,0 +1,5 @@ +export enum AutoScrollType { + None = 0, + Smooth = 1, + Instant = 2 +} From 65550e07c3c5079b1aa371c4f0abc9fefc6ae67d Mon Sep 17 00:00:00 2001 From: LJQ Date: Thu, 23 May 2024 21:48:13 +0800 Subject: [PATCH 4/9] Rename None to NoScroll --- src/controllers/lyrics.js | 4 ++-- src/controllers/lyrics.types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index c84fb9007b3..f0627f6e102 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -248,13 +248,13 @@ export default function (view) { } function onWheelOrTouchMove() { - autoScroll = AutoScrollType.None; + autoScroll = AutoScrollType.NoScroll; } function onKeyDown(e) { const key = keyboardNavigation.getKeyName(e); if (key === 'ArrowUp' || key === 'ArrowDown') { - autoScroll = AutoScrollType.None; + autoScroll = AutoScrollType.NoScroll; } } diff --git a/src/controllers/lyrics.types.ts b/src/controllers/lyrics.types.ts index 88593104de5..d3b23b93d85 100644 --- a/src/controllers/lyrics.types.ts +++ b/src/controllers/lyrics.types.ts @@ -1,5 +1,5 @@ export enum AutoScrollType { - None = 0, + NoScroll = 0, Smooth = 1, Instant = 2 } From 8c829fde46f8873a2ddfb9a0bbaadfc8438c36bd Mon Sep 17 00:00:00 2001 From: scampower3 <81431263+scampower3@users.noreply.github.com> Date: Thu, 23 May 2024 22:01:07 +0800 Subject: [PATCH 5/9] Update src/controllers/lyrics.js Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com> --- src/controllers/lyrics.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index f0627f6e102..7953d0f8e8f 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -73,12 +73,9 @@ export default function (view) { if (lyric) { lyric.classList.remove('pastLyric'); lyric.classList.remove('futureLyric'); - if (autoScroll === AutoScrollType.Smooth) { - scrollManager.scrollToElement(lyric, true); - } - if (autoScroll === AutoScrollType.Instant) { + if (autoScroll !== AutoScrollType.NoScroll) { // instant scroll is used when the view is first loaded - scrollManager.scrollToElement(lyric, false); + scrollManager.scrollToElement(lyric, autoScroll === AutoScrollType.Smooth); autoScroll = AutoScrollType.Smooth; } } From 15e35fa45ffc928a2832277923a538d8b235fc9e Mon Sep 17 00:00:00 2001 From: scampower3 <81431263+scampower3@users.noreply.github.com> Date: Thu, 23 May 2024 22:02:11 +0800 Subject: [PATCH 6/9] Update src/controllers/lyrics.js Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com> --- src/controllers/lyrics.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index 7953d0f8e8f..bb075da7097 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -20,7 +20,7 @@ let currentItem; let savedLyrics; let isDynamicLyric = false; -let autoScroll = AutoScrollType.Smooth; +let autoScroll = AutoScrollType.Instant; function dynamicLyricHtmlReducer(htmlAccumulator, lyric, index) { if (layoutManager.tv) { From 2d2ca357c1bbc306112038ddf3daa7eeba7bb5f8 Mon Sep 17 00:00:00 2001 From: LJQ Date: Fri, 24 May 2024 21:32:20 +0800 Subject: [PATCH 7/9] Sync focus with current playing lyrics --- src/controllers/lyrics.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index bb075da7097..b652b63f83f 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -14,6 +14,7 @@ import Events from '../utils/events.ts'; import '../styles/lyrics.scss'; import { AutoScrollType } from './lyrics.types'; +import focusManager from 'components/focusManager'; let currentPlayer; let currentItem; @@ -76,6 +77,7 @@ export default function (view) { if (autoScroll !== AutoScrollType.NoScroll) { // instant scroll is used when the view is first loaded scrollManager.scrollToElement(lyric, autoScroll === AutoScrollType.Smooth); + focusManager.focus(lyric); autoScroll = AutoScrollType.Smooth; } } From a75338e3d226e34decc4f84e32313470575ed850 Mon Sep 17 00:00:00 2001 From: LJQ Date: Fri, 24 May 2024 21:33:18 +0800 Subject: [PATCH 8/9] Group component imports together --- src/controllers/lyrics.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index b652b63f83f..29246973f37 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -6,6 +6,7 @@ import layoutManager from 'components/layoutManager'; import { playbackManager } from '../components/playback/playbackmanager'; import ServerConnections from '../components/ServerConnections'; import scrollManager from 'components/scrollManager'; +import focusManager from 'components/focusManager'; import keyboardNavigation from 'scripts/keyboardNavigation'; import globalize from '../scripts/globalize'; @@ -14,7 +15,6 @@ import Events from '../utils/events.ts'; import '../styles/lyrics.scss'; import { AutoScrollType } from './lyrics.types'; -import focusManager from 'components/focusManager'; let currentPlayer; let currentItem; From 7b765b77852d61a41bc9e8db2d3877b5049955ce Mon Sep 17 00:00:00 2001 From: LJQ Date: Sun, 9 Jun 2024 13:03:07 +0800 Subject: [PATCH 9/9] Update Enum --- src/controllers/lyrics.js | 18 +++++++++--------- src/controllers/lyrics.types.ts | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js index 29246973f37..c362c4949fa 100644 --- a/src/controllers/lyrics.js +++ b/src/controllers/lyrics.js @@ -14,14 +14,14 @@ import LibraryMenu from '../scripts/libraryMenu'; import Events from '../utils/events.ts'; import '../styles/lyrics.scss'; -import { AutoScrollType } from './lyrics.types'; +import { AutoScroll } from './lyrics.types'; let currentPlayer; let currentItem; let savedLyrics; let isDynamicLyric = false; -let autoScroll = AutoScrollType.Instant; +let autoScroll = AutoScroll.Instant; function dynamicLyricHtmlReducer(htmlAccumulator, lyric, index) { if (layoutManager.tv) { @@ -74,11 +74,11 @@ export default function (view) { if (lyric) { lyric.classList.remove('pastLyric'); lyric.classList.remove('futureLyric'); - if (autoScroll !== AutoScrollType.NoScroll) { + if (autoScroll !== AutoScroll.NoScroll) { // instant scroll is used when the view is first loaded - scrollManager.scrollToElement(lyric, autoScroll === AutoScrollType.Smooth); + scrollManager.scrollToElement(lyric, autoScroll === AutoScroll.Smooth); focusManager.focus(lyric); - autoScroll = AutoScrollType.Smooth; + autoScroll = AutoScroll.Smooth; } } } @@ -189,7 +189,7 @@ export default function (view) { } function onLyricClick(lyricTime) { - autoScroll = AutoScrollType.Smooth; + autoScroll = AutoScroll.Smooth; playbackManager.seek(lyricTime); if (playbackManager.paused()) { playbackManager.playPause(currentPlayer); @@ -247,19 +247,19 @@ export default function (view) { } function onWheelOrTouchMove() { - autoScroll = AutoScrollType.NoScroll; + autoScroll = AutoScroll.NoScroll; } function onKeyDown(e) { const key = keyboardNavigation.getKeyName(e); if (key === 'ArrowUp' || key === 'ArrowDown') { - autoScroll = AutoScrollType.NoScroll; + autoScroll = AutoScroll.NoScroll; } } view.addEventListener('viewshow', function () { Events.on(playbackManager, 'playerchange', onPlayerChange); - autoScroll = AutoScrollType.Instant; + autoScroll = AutoScroll.Instant; document.addEventListener('wheel', onWheelOrTouchMove); document.addEventListener('touchmove', onWheelOrTouchMove); document.addEventListener('keydown', onKeyDown); diff --git a/src/controllers/lyrics.types.ts b/src/controllers/lyrics.types.ts index d3b23b93d85..b0870fe124c 100644 --- a/src/controllers/lyrics.types.ts +++ b/src/controllers/lyrics.types.ts @@ -1,4 +1,4 @@ -export enum AutoScrollType { +export enum AutoScroll { NoScroll = 0, Smooth = 1, Instant = 2