From ba69f292dafec868d8fff231392973a68c2ce563 Mon Sep 17 00:00:00 2001 From: Gireesh Date: Mon, 7 Oct 2024 01:31:39 +0530 Subject: [PATCH] Show added to playlists on hover of track --- package-lock.json | 6 - src/g-player-react/package-lock.json | 146 +++++++++++++++++- src/g-player-react/package.json | 2 + src/g-player-react/src/App.js | 7 +- src/g-player-react/src/Components/Home.js | 53 +++---- .../src/Components/library/LibraryV2.js | 2 + .../library/ShowAssignedPlaylists.js | 29 ++++ .../playlist/PlayllistSelectorV2.js | 2 +- .../src/Components/redux/GPActionTypes.js | 1 + .../src/Components/screen/genre/Genres.js | 2 +- .../Components/screen/language/Languages.js | 4 +- .../src/Components/screen/track/Track.js | 103 ++++++++---- .../com/gmt/gp/services/PlaylistService.java | 2 +- 13 files changed, 283 insertions(+), 76 deletions(-) delete mode 100644 package-lock.json create mode 100644 src/g-player-react/src/Components/library/ShowAssignedPlaylists.js diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 54b7d78..0000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "G-Player-SB", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} diff --git a/src/g-player-react/package-lock.json b/src/g-player-react/package-lock.json index f9c1621..e1362a1 100644 --- a/src/g-player-react/package-lock.json +++ b/src/g-player-react/package-lock.json @@ -14,11 +14,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", @@ -2338,6 +2340,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.7", "license": "Apache-2.0", @@ -3792,6 +3816,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/eslint": { "version": "8.4.10", "license": "MIT", @@ -3839,9 +3868,9 @@ } }, "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", - "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", "dependencies": { "@types/react": "*", "hoist-non-react-statics": "^3.3.0" @@ -13378,6 +13407,19 @@ "node": ">=14" } }, + "node_modules/react-cookie": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.0.tgz", + "integrity": "sha512-mqhPERUyfOljq5yJ4woDFI33bjEtigsl8JDJdPPeNhr0eSVZmBc/2Vdf8mFxOUktQxhxTR1T+uF0/FRTZyBEgw==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.2", + "universal-cookie": "^7.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "license": "MIT", @@ -13664,6 +13706,19 @@ } } }, + "node_modules/react-tooltip": { + "version": "5.28.0", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.28.0.tgz", + "integrity": "sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==", + "dependencies": { + "@floating-ui/dom": "^1.6.1", + "classnames": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/react-viewport-list": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/react-viewport-list/-/react-viewport-list-7.1.1.tgz", @@ -15277,6 +15332,23 @@ "node": ">=8" } }, + "node_modules/universal-cookie": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.0.tgz", + "integrity": "sha512-PvcyflJAYACJKr28HABxkGemML5vafHmiL4ICe3e+BEKXRMt0GaFLZhAwgv637kFFnnfiSJ8e6jknrKkMrU+PQ==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^0.6.0" + } + }, + "node_modules/universal-cookie/node_modules/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/universalify": { "version": "2.0.0", "license": "MIT", @@ -17738,6 +17810,28 @@ } } }, + "@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "requires": { + "@floating-ui/utils": "^0.2.8" + } + }, + "@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "requires": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "@humanwhocodes/config-array": { "version": "0.11.7", "requires": { @@ -18635,6 +18729,11 @@ "@types/node": "*" } }, + "@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "@types/eslint": { "version": "8.4.10", "requires": { @@ -18676,9 +18775,9 @@ } }, "@types/hoist-non-react-statics": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", - "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", "requires": { "@types/react": "*", "hoist-non-react-statics": "^3.3.0" @@ -24388,6 +24487,16 @@ "whatwg-fetch": "^3.6.2" } }, + "react-cookie": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.0.tgz", + "integrity": "sha512-mqhPERUyfOljq5yJ4woDFI33bjEtigsl8JDJdPPeNhr0eSVZmBc/2Vdf8mFxOUktQxhxTR1T+uF0/FRTZyBEgw==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.2", + "universal-cookie": "^7.0.0" + } + }, "react-dev-utils": { "version": "12.0.1", "requires": { @@ -24568,6 +24677,15 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-tooltip": { + "version": "5.28.0", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.28.0.tgz", + "integrity": "sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==", + "requires": { + "@floating-ui/dom": "^1.6.1", + "classnames": "^2.3.0" + } + }, "react-viewport-list": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/react-viewport-list/-/react-viewport-list-7.1.1.tgz", @@ -25598,6 +25716,22 @@ "crypto-random-string": "^2.0.0" } }, + "universal-cookie": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.0.tgz", + "integrity": "sha512-PvcyflJAYACJKr28HABxkGemML5vafHmiL4ICe3e+BEKXRMt0GaFLZhAwgv637kFFnnfiSJ8e6jknrKkMrU+PQ==", + "requires": { + "@types/cookie": "^0.6.0", + "cookie": "^0.6.0" + }, + "dependencies": { + "cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==" + } + } + }, "universalify": { "version": "2.0.0" }, diff --git a/src/g-player-react/package.json b/src/g-player-react/package.json index a3b9799..910f25c 100644 --- 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 index 05082a6..0b25ead 100644 --- 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 (
- + + - + +
); } diff --git a/src/g-player-react/src/Components/Home.js b/src/g-player-react/src/Components/Home.js index f317a09..b26ceb4 100644 --- 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 index 58f83ff..094712c 100644 --- 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 = () => { + ); diff --git a/src/g-player-react/src/Components/library/ShowAssignedPlaylists.js b/src/g-player-react/src/Components/library/ShowAssignedPlaylists.js new file mode 100644 index 0000000..8209411 --- /dev/null +++ b/src/g-player-react/src/Components/library/ShowAssignedPlaylists.js @@ -0,0 +1,29 @@ +import React, { useEffect, useState } from "react" +import { useCookies } from 'react-cookie'; +import { SHOW_ASSIGNED_PLAYLISTS } from "../redux/GPActionTypes"; +export const ShowAssignedPlaylists = () => { + const [checked, setChecked] = useState(false); + const [cookies, setCookie, removeCookie] = useCookies(); + useEffect(()=>{ + console.log(cookies.SHOW_ASSIGNED_PLAYLISTS) + setChecked(cookies.SHOW_ASSIGNED_PLAYLISTS??false) + },[]) + const handleChange = (event) => { + const checked = event.target.checked; + setChecked(checked); + if(checked){ + setCookie(SHOW_ASSIGNED_PLAYLISTS, true); + }else{ + removeCookie(SHOW_ASSIGNED_PLAYLISTS) + } + } + return( +
{/* used class library-artist-download only to utilized its styles*/} +

Show Assigned Playlists

+
+ handleChange(event)} /> + {checked?'Shown':'Hidden'} +
+
+ ); +} \ No newline at end of file diff --git a/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js b/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js index 04308f5..3cb62a7 100644 --- a/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js +++ b/src/g-player-react/src/Components/playlist/PlayllistSelectorV2.js @@ -13,7 +13,7 @@ export const PlaylistSelector = () => { const contextObj = useSelector(state => state.library.contextObj); const plPhase = useSelector(state => state.playlist.phase); const assignedPlaylists = useSelector(state => state.playlist.assignedPlaylists); - + console.log("PlaylistSelector assignedPlaylists: ",assignedPlaylists) const [styles, setStyles] = useState({display:'none'}); const [obj, setobj] = useState(null); const [displayPlaylists, setDisplayPlaylists] = useState([]); diff --git a/src/g-player-react/src/Components/redux/GPActionTypes.js b/src/g-player-react/src/Components/redux/GPActionTypes.js index 64f47fe..6c5ef10 100644 --- a/src/g-player-react/src/Components/redux/GPActionTypes.js +++ b/src/g-player-react/src/Components/redux/GPActionTypes.js @@ -134,6 +134,7 @@ export const RUNNING = 'RUNNING'; export const SAVE_LABEL = 'Save'; export const SEARCH_RESULTS_LABEL = 'Search Results'; +export const SHOW_ASSIGNED_PLAYLISTS = 'SHOW_ASSIGNED_PLAYLISTS'; export const SOME_PAGE = 'SOME_PAGE'; export const SORT_A_TO_Z = 'SORT_A_TO_Z'; export const SORT_A_TO_Z_DESC = 'SORT_A_TO_Z_DESC'; diff --git a/src/g-player-react/src/Components/screen/genre/Genres.js b/src/g-player-react/src/Components/screen/genre/Genres.js index 1a48890..e1228db 100644 --- a/src/g-player-react/src/Components/screen/genre/Genres.js +++ b/src/g-player-react/src/Components/screen/genre/Genres.js @@ -53,7 +53,7 @@ export const Genres = () => { } setGenres(sortedGenres); } - },[sortBy,genres]) + },[sortBy]) return(
diff --git a/src/g-player-react/src/Components/screen/language/Languages.js b/src/g-player-react/src/Components/screen/language/Languages.js index ebd31e2..16b81b3 100644 --- a/src/g-player-react/src/Components/screen/language/Languages.js +++ b/src/g-player-react/src/Components/screen/language/Languages.js @@ -16,7 +16,7 @@ export const Languages = () => { const [languageAlbums, setLanguageAlbums] = useState({}); const [languages, setLanguages] = useState([]); const [languageSongCount, setLanguageSongCount] = useState({}); - const [sortBy, setSortBy] = useState(SORT_A_TO_Z); + const [sortBy, setSortBy] = useState(SORT_COUNT_TRACKS); useEffect(()=>{ if(!languageDetails || (languageDetails && !languageDetails.LANGUAGE_SONG_COUNT)){ @@ -53,7 +53,7 @@ export const Languages = () => { } setLanguages(sortedLanguages); } - },[sortBy, languages]) + },[sortBy]) return(
diff --git a/src/g-player-react/src/Components/screen/track/Track.js b/src/g-player-react/src/Components/screen/track/Track.js index 37395b2..320ce10 100644 --- a/src/g-player-react/src/Components/screen/track/Track.js +++ b/src/g-player-react/src/Components/screen/track/Track.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Link } from "react-router-dom"; import { ALBUM, ARTIST, CURRENT_PAGE, EDIT_TRACK_INFO_LABEL, PLAYLIST, REMOVE_LABEL, TRACK, TRACK_MENU_BTN_CIRCLE } from "../../redux/GPActionTypes"; @@ -8,14 +8,19 @@ import { FaPlay } from "react-icons/fa"; import { setContextObj, setMetadataPopupObj, setShowContextMenu } from "../../redux/library/LibraryActions"; import { HiOutlineDotsVertical } from "react-icons/hi"; import { MdOutlineLyrics } from "react-icons/md"; -import { removeFromPlaylist } from "../../redux/playlist/PlaylistActions"; +import { fetchAssignedPlaylists, fetchAssignedPlaylistsSucc, removeFromPlaylist } from "../../redux/playlist/PlaylistActions"; import { SplitAndLink } from "../../utilities/SplitAndLink"; +import { Tooltip as ReactTooltip } from "react-tooltip"; +import { useCookies } from "react-cookie"; + export const Track = ({track, playedFrom, index, hideTrackNum}) => { const dispatch = useDispatch(); + const [cookies] = useCookies(); const songPlaying = useSelector(state => state.player.songPlaying); const currentVolume = useSelector(state => state.player.currentVolume); const currentPage = useSelector(state => state.library.currentPage); + const assignedPlaylists = useSelector(state => state.playlist.assignedPlaylists); const playSong = async(songId) => { if(songPlaying!==null && songId===songPlaying.songId){ @@ -66,34 +71,76 @@ export const Track = ({track, playedFrom, index, hideTrackNum}) => { dispatch(setMetadataPopupObj(metadataPopupObj)); } + const [clearTime, setClearTime] = useState(); + const handleMouseEnter = () => { + dispatch(fetchAssignedPlaylistsSucc([])) + let tempClearTime = setTimeout(() => { + dispatch(fetchAssignedPlaylists(TRACK,track.songId)) + }, 300) + setClearTime(tempClearTime) + } return( -
showCOntextMenu(event)}> - {!hideTrackNum && } - - - - - - - -