Merge pull request #1607 from nukeop/feature.reset-lyrics-scroll

Reset lyrics view scroll position for new song

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;

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}>

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;
   }