Merge pull request #155 from mgireesha/154-show-added-to-playlists-on…

…-hover-of-track 154 show added to playlists on hover of track
mgireesha · Oct 7, 2024 · 8208f0d · 8208f0d
2 parents 6f1c289 + 6878145
commit 8208f0d
Show file tree

Hide file tree

Showing 18 changed files with 340 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/g-player-react/package-lock.json b/src/g-player-react/package-lock.json
diff --git a/src/g-player-react/package.json b/src/g-player-react/package.json
@@ -9,11 +9,13 @@
     "axios": "^1.2.1",
     "rc-slider": "^10.1.0",
     "react": "^18.2.0",
+    "react-cookie": "^7.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.5.0",
     "react-scripts": "5.0.1",
+    "react-tooltip": "^5.28.0",
     "react-viewport-list": "^7.1.1",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",

diff --git a/src/g-player-react/src/App.js b/src/g-player-react/src/App.js
@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import store from './Components/redux/store';
 import { AppHeader } from './Components/AppHeading';
 import { HashRouter as Router } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 function App() {
   // useEffect(()=>{
@@ -20,12 +21,14 @@ function App() {
   // },[])
   return (
     <div className="App app-container">
-        <Provider store={store}>
+      <Provider store={store}>
+        <CookiesProvider>
           <AppHeader />
           <Router>
             <Home />
           </Router>
-        </Provider>
+        </CookiesProvider>
+      </Provider>
     </div>
   );
 }

diff --git a/src/g-player-react/src/Components/FilterComp.js b/src/g-player-react/src/Components/FilterComp.js
@@ -3,8 +3,10 @@ import {IoMdClose} from 'react-icons/io';
 import { useDispatch } from "react-redux";
 import { setGlobalFilterText } from "./redux/library/LibraryActions";
 import { camelize } from "./utilities/util";
+import { useLocation } from "react-router-dom";
 export const FilterComp = ({onSetFilterTxt, isSetToStore, placeHolder}) =>{
     const dispatch = useDispatch();
+    const locationL = useLocation();
 
     const [filterInputEvent, setFilterInputEvent] = useState(undefined);
 
@@ -15,6 +17,10 @@ export const FilterComp = ({onSetFilterTxt, isSetToStore, placeHolder}) =>{
         filterInpFld.blur();
     }
 
+    useEffect(()=>{
+        if(locationL.pathname)dispatch(setGlobalFilterText(""));
+    },[locationL.pathname]);
+
     useEffect(() => {
         if(filterInputEvent){
             const timeOutId = setTimeout(() => {

diff --git a/src/g-player-react/src/Components/Home.js b/src/g-player-react/src/Components/Home.js
@@ -18,9 +18,11 @@ import { CommonPopup } from "./CommnPopup";
 import { GPContexMenu } from "./screen/GPContextMenu";
 import { StatusMessage } from "./screen/StatusMessage";
 import { MetadataPopup } from "./screen/metadata/MetadataPopup";
+import { useCookies } from "react-cookie";
 
 export const Home = () => {
     const dispatch = useDispatch();
+    const [cookies] = useCookies();
     const showContextMenu = useSelector(state => state.library.showContextMenu);
     const showPlaylistSelector = useSelector(state => state.library.showPlaylistSelector);
     const showMetadataPopup = useSelector(state => state.library.metadataPopupObj.showMetadataPopup);
@@ -54,36 +56,29 @@ export const Home = () => {
     }
 
     const fetchTracks = () => {
-        let playedFromCookieValue = getCookieValue("playedFrom");
-        if(playedFromCookieValue){
-            playedFromCookieValue = JSON.parse(playedFromCookieValue);
-            if(playedFromCookieValue.pfKey!==undefined){
-                switch (playedFromCookieValue.pfKey) {
-                    case ALBUM:
-                        dispatch(fetchAlbumTacks(playedFromCookieValue.pfVal, undefined, true)); // sending true will set tracks to playertracks
-                        break;
-                    case ARTIST:
-                        dispatch(fetchSongsByArtist(playedFromCookieValue.pfVal,true));
-                        break;
-                    case RECENT_PLAYS:
-                        dispatch(fetchAllHistory(true));
-                        break;
-                    case PLAYLIST:
-                        dispatch(fetchSongsInPlaylist(playedFromCookieValue.pfVal,true));
-                        break;
-                    case GENRE:
-                        dispatch(fetchSongsByGenre(playedFromCookieValue.pfVal,true));
-                        break;
-                    case LANGUAGE:
-                        dispatch(fetchSongsByLanguage(playedFromCookieValue.pfVal,true));
-                        break;
-                    default:
-                        dispatch(fetchAllSongs(true));
-                        break;
-                }
-            }else{
+        let playedFrom = cookies.playedFrom;
+        switch (playedFrom?.pfKey) {
+            case ALBUM:
+                dispatch(fetchAlbumTacks(playedFrom.pfVal, undefined, true)); // sending true will set tracks to playertracks
+                break;
+            case ARTIST:
+                dispatch(fetchSongsByArtist(playedFrom.pfVal,true));
+                break;
+            case RECENT_PLAYS:
+                dispatch(fetchAllHistory(true));
+                break;
+            case PLAYLIST:
+                dispatch(fetchSongsInPlaylist(playedFrom.pfVal,true));
+                break;
+            case GENRE:
+                dispatch(fetchSongsByGenre(playedFrom.pfVal,true));
+                break;
+            case LANGUAGE:
+                dispatch(fetchSongsByLanguage(playedFrom.pfVal,true));
+                break;
+            default:
                 dispatch(fetchAllSongs(true));
-            }
+                break;
         }
     }
 

diff --git a/src/g-player-react/src/Components/library/LibraryV2.js b/src/g-player-react/src/Components/library/LibraryV2.js
@@ -9,6 +9,7 @@ import { setCookies } from "../utilities/util";
 import { ArtistImageDownload } from "./ArtistImageDownload";
 import { MusicLibraryPath } from "./MusicLibraryPath";
 import { BuildLibrary } from "./BuildLibrary";
+import { ShowAssignedPlaylists } from "./ShowAssignedPlaylists";
 
 export const Library = () => {
 
@@ -29,6 +30,7 @@ export const Library = () => {
                 <BuildLibrary />
                 <MusicLibraryPath />
                 <ArtistImageDownload />
+                <ShowAssignedPlaylists />
             </div>
         </div>
     );