150 lyrics - make scroll smooth - code cleanup

src/g-player-react/src/Components/playlist/PlaylistPageHeader.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { COMMON_POPUP_ERROR_MSG, DELETE, DELETE_LABEL, DELETE_PLAYLIST_CONF_TEXT, DELETE_PLAYLIST_LABEL, INPUT, PLAYLIST, PLAY_ALL_LABEL, REMOVE, REMOVE_LABEL, RENAME, RENAME_LABEL, RENAME_PLAYLIST_INP, RENAME_PLAYLIST_LABEL, TEXT, TRACKS_LABEL } from "../redux/GPActionTypes";
+import { COMMON_POPUP_ERROR_MSG, DELETE_LABEL, INPUT, PLAYLIST, PLAY_ALL_LABEL, RENAME, RENAME_LABEL, 
+    RENAME_PLAYLIST_INP, RENAME_PLAYLIST_LABEL, TRACKS_LABEL } from "../redux/GPActionTypes";
 import { FaPlay } from "react-icons/fa";
 import { RiDeleteBin6Line } from "react-icons/ri";
 import { BiRename } from "react-icons/bi";
@@ -9,7 +10,7 @@ import { setCommonPopupObj } from "../redux/library/LibraryActions";
 import { deltePlaylist, renamePlaylist } from "../redux/playlist/PlaylistActions";
 import { PLAYLIST_DELETE_PLAYLIST_SUCCESS, PLAYLIST_RENAME_PLAYLIST_SUCCESS } from "../redux/playlist/PlaylistActionTypes";
 import { PlaylistImg } from "./PlaylistImg";
-import { Lyrics } from "../screen/lyrics/Lyrics";
+import { Lyrics } from "../screen/lyrics/LyricsV2";
 import { getCookieValue } from "../utilities/util";
 import { getShowDeletePlaylistPopup } from "./PlalistUtil";
 
@@ -93,6 +94,7 @@ export const PlaylistPageHeader = ({albumNames, songsCount, playAll}) => {
             navigate(`/playlist/${playlistName}/${playlistId}`);
             dispatch(setCommonPopupObj({showPopup:false}));
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[plPhase]);
 
     return(

src/g-player-react/src/Components/screen/genre/GenrePage.js

@@ -2,11 +2,12 @@ import React, { useEffect, useState } from "react";
 import { GroupedThumbImg4 } from "../../GroupedThumbImg4";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import { ALBUMS, A_TO_Z, A_TO_Z_DESC, CURRENT_PAGE, GENRE, MULTI_LINGUAL, PLAY_ALL_LABEL, SORT_ALBUM, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_LYRICS_AVAILABLE, SORT_MULTI_LINGUAL, SORT_YEAR, TRACKS, TRACKS_LABEL, TRACK_LIST } from "../../redux/GPActionTypes";
+import { ALBUMS, CURRENT_PAGE, GENRE, PLAY_ALL_LABEL, SORT_ALBUM, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, 
+    SORT_LYRICS_AVAILABLE, SORT_MULTI_LINGUAL, SORT_YEAR, TRACKS, TRACKS_LABEL, TRACK_LIST } from "../../redux/GPActionTypes";
 import { fetchAlbumsByGenre, fetchGenreDetails, fetchSongsByGenre } from "../../redux/library/LibraryActions";
 import { TrackList } from "../track/TrackList";
 import { FaPlay } from "react-icons/fa";
-import { Lyrics } from "../lyrics/Lyrics";
+import { Lyrics } from "../lyrics/LyricsV2";
 import { camelize, setCookies } from "../../utilities/util";
 import { MdOutlineArtTrack } from "react-icons/md";
 import { IoAlbums } from "react-icons/io5";
@@ -36,15 +37,14 @@ export const GenrePage = () => {
             dispatch(fetchGenreDetails());
         }
         setCookies(CURRENT_PAGE, JSON.stringify({type:GENRE}));
-    },[genre]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    },[genre,dispatch]);
 
     useEffect(() => {
         if(genre && viewType === ALBUMS){
             dispatch(fetchAlbumsByGenre(genre));
         }
-
-
-    },[viewType]);
+    },[viewType, genre, dispatch]);
 
     useEffect(()=>{
         if(genreAlbums && genreAlbums.length > 0){
@@ -65,7 +65,7 @@ export const GenrePage = () => {
             }
             setAlbumListInp(tempAlbumListInp);
         }
-    },[genreAlbums])
+    },[genreAlbums, albumListInp])
 
     useEffect(()=>{
         if(genreDetails){
@@ -111,9 +111,8 @@ export const GenrePage = () => {
                 }
             }
         }
-
         setTrackListInp(tempTrackListInp);
-    },[genreSongList]);
+    },[genreSongList, genre]);
 
     const playAll = () => {
         const tracks = document.getElementById(TRACK_LIST);
@@ -159,7 +158,6 @@ export const GenrePage = () => {
             {viewType === ALBUMS && genreAlbums.length > 0 && Object.keys(albumListInp).length > 0 &&
                 <AlbumList albums={genreAlbums} albumListInp={albumListInp} />
             }
-
         </div>
     );
 }

src/g-player-react/src/Components/screen/language/LanguagePage.js

@@ -6,7 +6,7 @@ import { CURRENT_PAGE, LANGUAGE, PLAY_ALL_LABEL, SORT_ARTIST, SORT_A_TO_Z, SORT_
 import { fetchLanguageDetails, fetchSongsByLanguage } from "../../redux/library/LibraryActions";
 import { TrackList } from "../track/TrackList";
 import { FaPlay } from "react-icons/fa";
-import { Lyrics } from "../lyrics/Lyrics";
+import { Lyrics } from "../lyrics/LyricsV2";
 import { camelize, getCookieValue, setCookies } from "../../utilities/util";
 
 export const LanguagePage = () => {
@@ -34,6 +34,7 @@ export const LanguagePage = () => {
             dispatch(fetchLanguageDetails());
         }
         setCookies(CURRENT_PAGE, JSON.stringify({type:LANGUAGE}));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[language]);
 
     useEffect(()=>{
@@ -93,8 +94,8 @@ export const LanguagePage = () => {
                 }
             }
         }
-
         setTrackListInp(tempTrackListInp);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     },[languageSongList]);
 
     const playAll = () => {

src/g-player-react/src/Components/screen/lyrics/ShowLyrics.js

@@ -29,7 +29,7 @@ export const ShowLyrics = ({
         }
         if(songPlaying && songPlaying.lyrics){
             readLyrics(songPlaying.lyrics)
-        }
+        }else setLyricsObj(null)
     },[songPlaying])
 
     useEffect(()=>{

src/main/resources/gp_react/asset-manifest.json

@@ -1,18 +1,18 @@
 {
   "files": {
     "main.css": "/static/css/main.aa6a0d68.css",
-    "main.js": "/static/js/main.de34c794.js",
+    "main.js": "/static/js/main.eedd79c9.js",
     "static/js/787.09cba7e9.chunk.js": "/static/js/787.09cba7e9.chunk.js",
     "static/media/Loading.gif": "/static/media/Loading.757857ce13a4e4e598e4.gif",
     "static/media/def_album_art.png": "/static/media/def_album_art.8f703ea1e26cee1e8ebb.png",
     "static/media/g_player_icon.png": "/static/media/g_player_icon.afa3935b5fcf43d3e484.png",
     "index.html": "/index.html",
     "main.aa6a0d68.css.map": "/static/css/main.aa6a0d68.css.map",
-    "main.de34c794.js.map": "/static/js/main.de34c794.js.map",
+    "main.eedd79c9.js.map": "/static/js/main.eedd79c9.js.map",
     "787.09cba7e9.chunk.js.map": "/static/js/787.09cba7e9.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.aa6a0d68.css",
-    "static/js/main.de34c794.js"
+    "static/js/main.eedd79c9.js"
   ]
 }

src/main/resources/gp_react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/g-player-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/g-player-icon.png"/><link rel="manifest" href="/manifest.json"/><title>G player</title><script defer="defer" src="/static/js/main.de34c794.js"></script><link href="/static/css/main.aa6a0d68.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/g-player-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/g-player-icon.png"/><link rel="manifest" href="/manifest.json"/><title>G player</title><script defer="defer" src="/static/js/main.eedd79c9.js"></script><link href="/static/css/main.aa6a0d68.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>