From 9c8dded8df0fc756ce9ada18c875d63e09bc3b8d Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Fri, 17 May 2024 21:51:55 +0200
Subject: [PATCH] Reset lyrics view scroll position for new song

---
 packages/app/app/actions/lyrics.ts               |  2 ++
 packages/app/app/components/LyricsView/index.tsx | 11 +++++++++--
 packages/app/app/reducers/lyrics.ts              |  6 +++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/app/app/actions/lyrics.ts b/packages/app/app/actions/lyrics.ts
index adcbd324ba..2f1e2391fb 100644
--- a/packages/app/app/actions/lyrics.ts
+++ b/packages/app/app/actions/lyrics.ts
@@ -13,9 +13,11 @@ export const lyricsSearchSuccess = createStandardAction(Lyrics.LYRICS_SEARCH_SUC
   };
 });
 
+export const lyricsResetScroll = createStandardAction(Lyrics.LYRICS_RESET_SCROLL)();
 
 export function lyricsSearch(track: Track) {
   return (dispatch, getState) => {
+    dispatch(lyricsResetScroll());
     dispatch(lyricsSearchStart(true));
     const providers = getState().plugin.plugins.lyricsProviders;
     const selectedProvider = getState().plugin.selected.lyricsProviders;
diff --git a/packages/app/app/components/LyricsView/index.tsx b/packages/app/app/components/LyricsView/index.tsx
index 0e27629dfe..87d248faf7 100644
--- a/packages/app/app/components/LyricsView/index.tsx
+++ b/packages/app/app/components/LyricsView/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Icon } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,8 +18,15 @@ export const LyricsView: React.FC<LyricsViewProps> = ({
   track
 }) => {
   const { t } = useTranslation('lyrics');
+  const lyricsRef = useRef<HTMLDivElement>(null);
 
-  return <div className={styles.lyrics_view}>
+  useEffect(() => {
+    if (lyricsRef.current) {
+      lyricsRef.current.scrollTop = 0;
+    }
+  }, [lyricsSearchResult]);
+
+  return <div className={styles.lyrics_view} ref={lyricsRef}>
     {
       !track &&
       <div className={styles.empty_state}>
diff --git a/packages/app/app/reducers/lyrics.ts b/packages/app/app/reducers/lyrics.ts
index ad1fe75d2b..d9c22a648e 100644
--- a/packages/app/app/reducers/lyrics.ts
+++ b/packages/app/app/reducers/lyrics.ts
@@ -17,12 +17,16 @@ export default function LyricsReducer (state = initialState, action: LyricsActio
   switch (action.type) {
   case getType(LyricsActions.lyricsSearchStart):
     return Object.assign({}, state, {
-      playbackStreamLoading: action.payload
+      lyricsSearchStarted: true
     });
   case getType(LyricsActions.lyricsSearchSuccess):
     return Object.assign({}, state, {
       lyricsSearchResult: action.payload
     });
+  case getType(LyricsActions.lyricsResetScroll):
+    return Object.assign({}, state, {
+      lyricsSearchResult: ''
+    });
   default:
     return state;
   }