Merge pull request #153 from mgireesha/123-add-sorting-on-genres-page

Code cleanu and issue fixes

src/g-player-react/src/Components/main.scss

@@ -1791,7 +1791,7 @@ a.disabled-click{
     flex-direction: column;
     row-gap: 5px;
     margin-right: 1.5em;
-    background: #253434;
+    background: #560C53;
     box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 9%) 0px -3px 5px;
     position: relative;
     overflow: hidden;
@@ -2988,6 +2988,7 @@ a.disabled-click{
                 }
 
                 .row.song-path{
+                    >label{width: 150px;}
                     grid-column: span 2;
                     display: flex;
                     flex-direction: row;

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

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { PlaylistImg } from "./PlaylistImg";
 import { ImportExportPlaylistBtn } from "./ImportExportPlaylistBtn";
-import { CURRENT_PAGE, DELETE_LABEL, DELETE_PLAYLIST_CONF_TEXT, DELETE_PLAYLIST_LABEL, PLAYLISTS, REMOVE, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS, SORT_CREATED_DATE_NEW, SORT_CREATED_DATE_OLD, TEXT } from "../redux/GPActionTypes";
+import { CURRENT_PAGE, PLAYLISTS, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS, SORT_CREATED_DATE_NEW, SORT_CREATED_DATE_OLD, SORT_UPDATED_DATE_NEW, SORT_UPDATED_DATE_OLD } from "../redux/GPActionTypes";
 import { setCookies } from "../utilities/util";
 import { SortingContainer } from "../screen/SortingContainer";
 import { ThumbnailActionBtn } from "../ThumbnailActionBtn";
@@ -19,7 +19,7 @@ export const Playlists = () => {
     const playlistAlbums = useSelector(state => state.playlist.playlistAlbums);
     const playlistSongsCount = useSelector(state => state.playlist.playlistSongsCount);
 
-    const [sortBy, setSortBy] = useState(SORT_CREATED_DATE_NEW);
+    const [sortBy, setSortBy] = useState(SORT_UPDATED_DATE_NEW);
 
     const globalFilterText = useSelector(state => state.library.globalFilterText);
 
@@ -40,6 +40,10 @@ export const Playlists = () => {
             tempPlaylists = tempPlaylists.sort((a,b)=>{return new Date(a.createdDate)>new Date(b.createdDate)?-1:1});
         }else if(sortBy === SORT_CREATED_DATE_OLD){
             tempPlaylists = tempPlaylists.sort((a,b)=>{return new Date(a.createdDate)>new Date(b.createdDate)?1:-1});
+        }else if(sortBy === SORT_UPDATED_DATE_NEW){
+            tempPlaylists = tempPlaylists.sort((a,b)=>{return new Date(a.lastUpdated)>new Date(b.lastUpdated)?-1:1});
+        }else if(sortBy === SORT_UPDATED_DATE_OLD){
+            tempPlaylists = tempPlaylists.sort((a,b)=>{return new Date(a.lastUpdated)>new Date(b.lastUpdated)?1:-1});
         }else if(sortBy === SORT_COUNT_TRACKS){
             tempPlaylists = tempPlaylists.sort((a,b)=>{return playlistSongsCount[a.id]>playlistSongsCount[b.id]?-1:1})
         }
@@ -77,8 +81,9 @@ export const Playlists = () => {
                         showLKey={false} 
                         sortSelectors={
                             [
+                                SORT_UPDATED_DATE_NEW,
                                 SORT_CREATED_DATE_NEW,
-                                SORT_CREATED_DATE_OLD,
+                                SORT_UPDATED_DATE_OLD,
                                 SORT_COUNT_TRACKS,
                                 SORT_A_TO_Z,
                                 SORT_A_TO_Z_DESC,

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

@@ -16,6 +16,11 @@ export const PlaylistSelector = () => {
 
     const [styles, setStyles] = useState({display:'none'});
     const [obj, setobj] = useState(null);
+    const [displayPlaylists, setDisplayPlaylists] = useState([]);
+
+    useEffect(()=>{
+        setDisplayPlaylists(playLists?.sort((a,b)=>a.name>b.name?1:-1))
+    },[playLists])
 
     useEffect(()=>{
         if(contextObj.type === TRACK){
@@ -126,7 +131,7 @@ export const PlaylistSelector = () => {
                 {obj && obj.title+" - "+obj.album}
             </div>
 
-            {playLists && playLists.map(playlist =>
+            {displayPlaylists && displayPlaylists.map(playlist =>
                 <div className={assignedPlaylists.includes(playlist.name) ? "selected row" : "row"} onClick={()=>handleOnPlaylistClick(playlist.id,playlist.name)} title={playlist.name}>
                     <label>{playlist.name}</label>
                 </div>

src/g-player-react/src/Components/redux/GPActionTypes.js

@@ -151,6 +151,8 @@ export const SORT_TRACK_NUMBER = 'SORT_TRACK_NUMBER';
 export const SORT_YEAR = 'SORT_YEAR';
 export const SORT_CREATED_DATE_NEW = 'SORT_CREATED_DATE_NEW';
 export const SORT_CREATED_DATE_OLD = 'SORT_CREATED_DATE_OLD';
+export const SORT_UPDATED_DATE_NEW = 'SORT_UPDATED_DATE_NEW';
+export const SORT_UPDATED_DATE_OLD = 'SORT_UPDATED_DATE_OLD';
 export const SUCCESS = 'SUCCESS';
 
 export const THIS_MONTH_COUNT = 'THIS_MONTH_COUNT';
@@ -245,7 +247,19 @@ export const GP_SORT_SELECTOR_LABEL_MAPPING = {
     SORT_NONE : 'None',
     SORT_YEAR : "Year",
     SORT_TRACK_NUMBER: 'Track Number',
-    SORT_CREATED_DATE_NEW: 'Latest',
+    SORT_CREATED_DATE_NEW: 'New',
     SORT_CREATED_DATE_OLD: 'Old',
+    SORT_UPDATED_DATE_NEW: 'Last Modified',
+    SORT_UPDATED_DATE_OLD: 'First Modified',
     SORT_PLAY_COUNT: 'Play Count'
+}
+
+export const GP_SORTING_KEY_MAPPING = {
+    SORT_A_TO_Z:1,
+    SORT_A_TO_Z_DESC:-1,
+    SORT_COUNT_TRACKS:-1,
+    SORT_CREATED_DATE_NEW:1,
+    SORT_CREATED_DATE_OLD:-1,
+    SORT_UPDATED_DATE_NEW:1,
+    SORT_UPDATED_DATE_OLD:-1
 }

src/g-player-react/src/Components/screen/GroupBand.js

@@ -51,7 +51,7 @@ export const GroupBand = () => {
             <div className={selectedBand===LANGUAGES?"band languages-band group-band-highlight":"band languages-band"}>
                 <Link to="/music/languages"><h3>{LANGUAGES_LABEL}</h3></Link>
             </div>
-            {[TRACKS, ALBUMS].includes(selectedBand) && <FilterComp isSetToStore={true} placeHolder={selectedBand} />}
+            {[TRACKS, ALBUMS, ARTISTS].includes(selectedBand) && <FilterComp isSetToStore={true} placeHolder={selectedBand} />}
         </div>
     );
 }

src/g-player-react/src/Components/screen/album/AlbumList.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { A_TO_Z_DESC, CURRENT_PAGE, GP_ALBUMS_SORT_FIELD_MAPPING, LANGUAGE, MULTI_LINGUAL, NONE, NO_SORT, SOME_PAGE, SORT_ARTIST, SORT_NONE, SORT_YEAR } from "../../redux/GPActionTypes";
-import { fetchAllAlbums } from "../../redux/library/LibraryActions";
+import { useSelector } from "react-redux";
+import { CURRENT_PAGE, GP_ALBUMS_SORT_FIELD_MAPPING, NO_SORT, SOME_PAGE, SORT_YEAR } from "../../redux/GPActionTypes";
 import { replace_AndCamelize, setCookies, sortGroupByField } from "../../utilities/util";
 import { AlbumThumb } from "./AlbumThumb";
 import { SortingContainer } from "../SortingContainer";
+import { filterAlbums, sortAlbumKeys } from "./albumUtil";
 
 export const AlbumList = ({albums, albumListInp}) => {
 
@@ -20,47 +20,27 @@ export const AlbumList = ({albums, albumListInp}) => {
         setCookies(CURRENT_PAGE, JSON.stringify({type:SOME_PAGE}));
     },[]);
 
+    useEffect(()=>{
+        albumListInp && albumListInp.selectedSortBy ? setSortBy(albumListInp.selectedSortBy) : setSortBy(NO_SORT);
+    },[albumListInp]);
+
     useEffect(()=>{
         if(sortBy && albums.length>0){
             setAlbumListKeys([]);
             setSortedAlbums(sortGroupByField(albums,GP_ALBUMS_SORT_FIELD_MAPPING[sortBy]))
         }
     },[sortBy]);
 
-    useEffect(()=>{
-        albumListInp && albumListInp.selectedSortBy ? setSortBy(albumListInp.selectedSortBy) : setSortBy(NO_SORT);
-    },[albumListInp])
-
     useEffect(()=>{
         if(Object.keys(sortedAlbums).length>0){
-            let tempAlbumListKeys = Object.keys(sortedAlbums);
-            if(sortBy===SORT_YEAR || sortBy===A_TO_Z_DESC){
-                tempAlbumListKeys = tempAlbumListKeys.sort((a,b)=>{return a>b?-1:1});
-            }
-            if(sortBy===SORT_ARTIST){
-                tempAlbumListKeys = tempAlbumListKeys.sort((a,b)=>{return a>b?1:-1});
-            }
-            setAlbumListKeys(tempAlbumListKeys);
+            setAlbumListKeys(sortAlbumKeys(sortBy, sortedAlbums));
             setFilteredAlbums(sortedAlbums);
         }
-    },[sortedAlbums])
+    },[sortedAlbums]);
 
     useEffect(() => {
-        //console.log("globalFilterText",globalFilterText)
         if (globalFilterText && globalFilterText.length > 2) {
-            let tempFilteredAlbums = [];
-            let filteredAlbums = {};
-            albumListKeys.forEach(lKey =>{
-                tempFilteredAlbums = sortedAlbums[lKey];
-                tempFilteredAlbums = tempFilteredAlbums.filter(album => {
-                    return album.albumName.toLowerCase().includes(globalFilterText)
-                        || album.year === globalFilterText
-                        || album.genre.toLowerCase().includes(globalFilterText)
-                        || album.albumArtist.toLowerCase().includes(globalFilterText)
-                });
-                filteredAlbums[lKey] = tempFilteredAlbums;
-            })
-            setFilteredAlbums(filteredAlbums);
+            setFilteredAlbums(filterAlbums(globalFilterText, sortedAlbums, albumListKeys));
             setFilterActive(true);
         } else {
             setFilteredAlbums(sortedAlbums)
@@ -71,9 +51,9 @@ export const AlbumList = ({albums, albumListInp}) => {
         <div className="album-list">
             {albumListInp.showSort && !isFilterActive && <SortingContainer sortListKeys={albumListKeys} showLKey={albumListInp.showLKey} setSortBy={setSortBy} sortBy={sortBy} sortSelectors={albumListInp.sortSelectors} showSortByLabel={albumListInp.showSortByLabel} />}
             <div className="albums" style={albumListInp.styles?albumListInp.styles:{}}>
-                {albumListKeys !== undefined && albumListKeys.length > 0 && albumListKeys.map((lKey, index) =>
+                {albumListKeys && albumListKeys.length > 0 && albumListKeys.map((lKey, index) =>
                         <>
-                            {!isFilterActive && albumListInp.showLKey && <label id={"lKey" + lKey} className="album-lKey">{replace_AndCamelize(lKey)}</label>}
+                            {!isFilterActive && albumListInp.showLKey && <label id={"lKey" + lKey} className="album-lKey" key={index}>{replace_AndCamelize(lKey)}</label>}
                             {filteredAlbums[lKey] !== undefined && filteredAlbums[lKey].length > 0 && filteredAlbums[lKey].map((album, albumIndex) =>
                                 <AlbumThumb album={album} key={albumIndex} />
                             )}

src/g-player-react/src/Components/screen/album/Albums.js

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { A_TO_Z, A_TO_Z_DESC, CURRENT_PAGE, GP_ALBUMS_SORT_FIELD_MAPPING, LANGUAGE, MULTI_LINGUAL, SOME_PAGE, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_LANGUAGE, SORT_MULTI_LINGUAL, SORT_YEAR } from "../../redux/GPActionTypes";
+import { CURRENT_PAGE, SOME_PAGE, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_LANGUAGE, SORT_MULTI_LINGUAL, SORT_YEAR } from "../../redux/GPActionTypes";
 import { fetchAllAlbums } from "../../redux/library/LibraryActions";
-import { camelize, replace_AndCamelize, setCookies, sortGroupByField } from "../../utilities/util";
-import { AlbumThumb } from "./AlbumThumb";
-import { SortingContainer } from "../SortingContainer";
+import { setCookies } from "../../utilities/util";
 import { Spinner } from "../../utilities/Spinner";
 import { AlbumList } from "./AlbumList";
 

src/g-player-react/src/Components/screen/album/albumUtil.js

@@ -0,0 +1,28 @@
+import { A_TO_Z_DESC, SORT_ARTIST, SORT_YEAR } from "../../redux/GPActionTypes";
+
+export const filterAlbums = (globalFilterText, sortedAlbums, albumListKeys) => {
+    let tempFilteredAlbums = [];
+    let filteredAlbums = {};
+    albumListKeys.forEach(lKey =>{
+        tempFilteredAlbums = sortedAlbums[lKey];
+        tempFilteredAlbums = tempFilteredAlbums.filter(album => {
+            return album.albumName.toLowerCase().includes(globalFilterText)
+                || album.year === globalFilterText
+                || album.genre.toLowerCase().includes(globalFilterText)
+                || album.albumArtist.toLowerCase().includes(globalFilterText)
+        });
+        filteredAlbums[lKey] = tempFilteredAlbums;
+    })
+    return filteredAlbums;
+}
+
+export const sortAlbumKeys = (sortBy, sortedAlbums) => {
+    let tempAlbumListKeys = Object.keys(sortedAlbums);
+    if (sortBy === SORT_YEAR || sortBy === A_TO_Z_DESC) {
+        tempAlbumListKeys =  tempAlbumListKeys.sort((a, b) => { return a > b ? -1 : 1 });
+    }
+    if (sortBy === SORT_ARTIST) {
+        tempAlbumListKeys =  tempAlbumListKeys.sort((a, b) => { return a > b ? 1 : -1 });
+    }
+    return tempAlbumListKeys;
+}

src/g-player-react/src/Components/screen/artist/ArtistsList.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { ARTIST, ARTISTS, A_TO_Z, A_TO_Z_DESC, CURRENT_PAGE, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS } from "../../redux/GPActionTypes";
+import { ARTIST, ARTISTS, CURRENT_PAGE, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS } from "../../redux/GPActionTypes";
 import { fetchAllArtistsDtls } from "../../redux/library/LibraryActions";
 import { setCookies, sortGroupByField } from "../../utilities/util";
 import { SortingContainer } from "../SortingContainer";
@@ -27,8 +27,6 @@ export const ArtistsList = () => {
             if(sortBy===SORT_COUNT_TRACKS){
                 let tempArtistsDetails = [...artistsDetailsFS];
                 tempArtistsDetails = tempArtistsDetails.sort((a, b)=>a.count > b.count?-1:1);
-                //tempArtistsDetails = tempArtistsDetails.sort((a, b)=>b.imgAvl?1:-1);
-                //tempArtistsDetails = tempArtistsDetails.filter(artist => {return artist.imgAvl || artist.count>1})
                 setAlbumArtistsDetails(tempArtistsDetails);
             }
         }
@@ -48,13 +46,13 @@ export const ArtistsList = () => {
         <>
             <SortingContainer sortListKeys={artistsDetailsListKeys} setSortBy={setSortBy} sortBy={sortBy} sortSelectors={[SORT_A_TO_Z,SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS]} showSortByLabel={true} />
             <div className="artists-list">
-                {sortBy === SORT_COUNT_TRACKS && artistsDetails!==null && artistsDetails!==undefined && artistsDetails.length>0 && artistsDetails.map((artist, index) =>
+                {sortBy === SORT_COUNT_TRACKS && artistsDetails?.map((artist, index) =>
                     <ArtistThumb artist={artist} key={index} />
                 )}
-                {sortBy!==SORT_COUNT_TRACKS && artistsDetailsListKeys !== undefined && artistsDetailsListKeys.length > 0 && artistsDetailsListKeys.map((lKey, index) =>
+                {sortBy!==SORT_COUNT_TRACKS && artistsDetailsListKeys?.map((lKey, index) =>
                     <>
-                        <label id={"lKey" + lKey} className="artists-lKey">{lKey}</label>
-                        {artistsDetailsList[lKey] !== undefined && artistsDetailsList[lKey].length > 0 && artistsDetailsList[lKey].map((artist, artistIndex) =>
+                        <label id={"lKey" + lKey} className="artists-lKey" key={index}>{lKey}</label>
+                        {artistsDetailsList[lKey]?.map((artist, artistIndex) =>
                             <ArtistThumb artist={artist} key={artistIndex} />
                         )}
                     </>

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchGenreDetails } from "../../redux/library/LibraryActions";
 import { Link } from "react-router-dom";
 import { GroupedThumbImg4 } from "../../GroupedThumbImg4";
-import { CURRENT_PAGE, GENRE, GENRES, GENRE_LABEL, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS, TRACKS_LABEL } from "../../redux/GPActionTypes";
+import { CURRENT_PAGE, GENRE, GENRES, GENRE_LABEL, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS, TRACKS_LABEL } from "../../redux/GPActionTypes";
 import { ThumbnailActionBtn } from "../../ThumbnailActionBtn";
 import { camelize, setCookies } from "../../utilities/util";
 import { SortingContainer } from "../SortingContainer";

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

@@ -3,9 +3,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchLanguageDetails } from "../../redux/library/LibraryActions";
 import { Link } from "react-router-dom";
 import { GroupedThumbImg4 } from "../../GroupedThumbImg4";
-import { CURRENT_PAGE, LANGUAGE, LANGUAGES, LANGUAGE_LABEL, TRACKS_LABEL } from "../../redux/GPActionTypes";
+import { CURRENT_PAGE, LANGUAGE, LANGUAGES, LANGUAGE_LABEL, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS, TRACKS_LABEL } from "../../redux/GPActionTypes";
 import { ThumbnailActionBtn } from "../../ThumbnailActionBtn";
-import { camelize, setCookies } from "../../utilities/util";
+import { camelize, setCookies, sortByKey } from "../../utilities/util";
+import { SortingContainer } from "../SortingContainer";
 
 export const Languages = () => {
     const dispatch = useDispatch();
@@ -15,6 +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);
 
     useEffect(()=>{
         if(!languageDetails || (languageDetails && !languageDetails.LANGUAGE_SONG_COUNT)){
@@ -37,8 +39,36 @@ export const Languages = () => {
         }
     },[languageDetails]);
 
+    useEffect(()=>{
+        if(languages && languages.length>0){
+            let sortedLanguages = [...languages];
+            if(sortBy === SORT_A_TO_Z){
+                sortedLanguages = sortedLanguages.sort((a,b)=>{return a>b?1:-1});
+            }
+            if(sortBy === SORT_A_TO_Z_DESC){
+                sortedLanguages = sortedLanguages.sort((a,b)=>{return a>b?-1:1});
+            }
+            if(sortBy === SORT_COUNT_TRACKS){
+                sortedLanguages = sortedLanguages.sort((a,b)=>{return languageSongCount[a]>languageSongCount[b]?-1:1});
+            }
+            setLanguages(sortedLanguages);
+        }
+    },[sortBy, languages])
+
     return(
         <div className="languages">
+            <SortingContainer
+                setSortBy={setSortBy} 
+                sortBy={sortBy} 
+                showLKey={false} 
+                sortSelectors={
+                    [
+                        SORT_COUNT_TRACKS,
+                        SORT_A_TO_Z,
+                        SORT_A_TO_Z_DESC,
+                    ]
+                } 
+            />
             <div className="language-list">
                 {languages.length > 0 && languages.map(language =>
                     <div className="language-thumb">

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

@@ -16,6 +16,7 @@ import { MdOutlineCancelPresentation } from "react-icons/md";
 import { FaHourglassStart } from "react-icons/fa6";
 import { IoMdDownload } from "react-icons/io";
 import { RiDeleteBin6Line } from "react-icons/ri";
+import { TbWriting } from "react-icons/tb";
 
 export const Lyrics = () => {
     const dispatch = useDispatch();
@@ -253,7 +254,7 @@ export const Lyrics = () => {
         </div>
         {songPlaying!==null &&  songPlaying.lyricist!==null && 
             <div className="lyrics-written-by-div">
-                <span title={songPlaying.lyricist}>Lyricist: {songPlaying.lyricist}</span>
+                <span title={`Lyrics :${songPlaying.lyricist}`} style={{display:'flex',alignItems:'center', justifyContent:'flex-end'}}><TbWriting style={{fontSize:20}}  /><span>&nbsp;: {songPlaying.lyricist}</span></span>
             </div>
         }
     </div>}