Merge pull request #140 from mgireesha/137-add-new-sort-option-to-tra…

…cks-section-most-played-songs

137 add new sort option to tracks section most played songs

pom.xml

@@ -10,7 +10,7 @@
 	</parent>
 	<groupId>com.gmt</groupId>
 	<artifactId>g-player</artifactId>
-	<version>2.4.5</version>
+	<version>2.4.6</version>
 	<name>G-Player-SB</name>
 	<description>G-Player-SB</description>
 	<properties>

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

@@ -101,6 +101,7 @@ export const NONE_LABEL = 'None';
 
 export const PLAYLIST_ALBUMS = 'PLAYLIST_ALBUMS';
 export const PLAY_ALL_LABEL = 'Play all';
+export const PLAY_COUNT = 'PLAY_COUNT';
 export const PLAYER = 'PLAYER';
 export const PLAYLIST = 'PLAYLIST';
 export const PLAYLIST_SELECTOR = 'PLAYLIST_SELECTOR';
@@ -142,6 +143,7 @@ export const SORT_LANGUAGE = 'SORT_LANGUAGE';
 export const SORT_LYRICS_AVAILABLE = 'SORT_LYRICS_AVAILABLE';
 export const SORT_MULTI_LINGUAL = 'SORT_MULTI_LINGUAL';
 export const SORT_NONE = 'SORT_NONE';
+export const SORT_PLAY_COUNT = 'SORT_PLAY_COUNT';
 export const SORT_TRACK_NUMBER = 'SORT_TRACK_NUMBER';
 export const SORT_YEAR = 'SORT_YEAR';
 export const SORT_CREATED_DATE_NEW = 'SORT_CREATED_DATE_NEW';
@@ -222,7 +224,8 @@ export const GP_TRACKS_SORT_FIELD_MAPPING = {
     SORT_ALBUM: 'album',
     SORT_ARTIST : "albumArtist",
     SORT_MULTI_LINGUAL : "languageType",
-    SORT_NONE:'SORT_NONE'
+    SORT_NONE:'SORT_NONE',
+    SORT_PLAY_COUNT: 'SORT_PLAY_COUNT'
 }
 
 export const GP_SORT_SELECTOR_LABEL_MAPPING = {
@@ -240,5 +243,6 @@ export const GP_SORT_SELECTOR_LABEL_MAPPING = {
     SORT_YEAR : "Year",
     SORT_TRACK_NUMBER: 'Track Number',
     SORT_CREATED_DATE_NEW: 'Latest',
-    SORT_CREATED_DATE_OLD: 'Old'
+    SORT_CREATED_DATE_OLD: 'Old',
+    SORT_PLAY_COUNT: 'Play Count'
 }

src/g-player-react/src/Components/redux/library/LibraryReducer.js

@@ -5,6 +5,7 @@ import { FETCH_SONGS_START, FETCH_SONGS_SUCCESS, HISTORY_FETCH_ALL_HISTORY_START
 export const initialState = {
     tracks:[],
     trackIds:[],
+    tracksHistory:[],
     albumTracks:[],
     album:{},
     albums : [],
@@ -51,6 +52,7 @@ const libraryReducer = (state = initialState, action) => {
                 ...state,
                 tracks:action.tracks.SONGS.filter((track=>track.title!==null)),
                 trackIds:action.tracks.SONG_IDS,
+                tracksHistory: action.tracks.HISTORY,
                 phase:FETCH_SONGS_SUCCESS
             }
         case LIBRARY_FETCH_ALBUMS_START:

src/g-player-react/src/Components/screen/track/TrackList.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { SORT_YEAR, SORT_ARTIST, TRACK_LIST, TRACK_NUMBER, NO_SORT, SORT_A_TO_Z_DESC, SORT_LYRICS_AVAILABLE, SORT_A_TO_Z, SORT_NONE, GP_TRACKS_SORT_FIELD_MAPPING, SORT_TRACK_NUMBER } from "../../redux/GPActionTypes";
+import { SORT_YEAR, SORT_ARTIST, TRACK_LIST, NO_SORT, SORT_A_TO_Z_DESC, SORT_LYRICS_AVAILABLE, SORT_A_TO_Z, SORT_NONE, GP_TRACKS_SORT_FIELD_MAPPING, SORT_TRACK_NUMBER, SORT_PLAY_COUNT } from "../../redux/GPActionTypes";
 import { scrollToPlaying, sortGroupByField } from "../../utilities/util";
 import { SortingContainer } from "../SortingContainer";
 import { Spinner } from "../../utilities/Spinner";
@@ -9,7 +9,7 @@ import {ViewportList} from "react-viewport-list";
 import { useRef } from "react";
 
 
-export const TrackList = ({tracks, trackListInp}) => {
+export const TrackList = ({tracks, trackListInp, tracksHistory}) => {
     const ref = useRef(null);
     const [trackList, setTrackList] = useState({});
     const isPlaying = useSelector(state => state.player.isPlaying);
@@ -27,6 +27,8 @@ export const TrackList = ({tracks, trackListInp}) => {
 
             if(sortBy === SORT_YEAR || sortBy === SORT_A_TO_Z_DESC || sortBy === SORT_LYRICS_AVAILABLE){
                 tempTrakListKeys = tempTrakListKeys.sort((a,b)=>{return a>b?-1:1});
+            }if(sortBy === SORT_PLAY_COUNT){
+                tempTrakListKeys = tempTrakListKeys.reverse();
             }else if(sortBy === SORT_A_TO_Z || sortBy === SORT_ARTIST){
                 tempTrakListKeys = tempTrakListKeys.sort((a,b)=>{return a>b?1:-1});
             }
@@ -58,7 +60,7 @@ export const TrackList = ({tracks, trackListInp}) => {
             if(sortBy===SORT_ARTIST){
                 sortByArtist(tracks);
             }else{
-                setTrackList(sortGroupByField(tracks, GP_TRACKS_SORT_FIELD_MAPPING[sortBy]));
+                setTrackList(sortGroupByField(tracks, GP_TRACKS_SORT_FIELD_MAPPING[sortBy], tracksHistory));
             }
         }
     },[tracks, sortBy]);
@@ -105,7 +107,7 @@ export const TrackList = ({tracks, trackListInp}) => {
             <div className="track-list scroll-container" id={TRACK_LIST} style={trackListInp.traskListStyle?trackListInp.traskListStyle:{}} ref={ref}>
                  {trackListKeys && trackListKeys.length > 0 && trackListKeys.map((lKey, index) =>
                     <div key={index}>
-                        {trackListInp.showLKey && <label id={"lKey" + lKey} className="track-lKey" style={trackListInp.lKeyStyle?trackListInp.lKeyStyle:{}}>{lKey}</label>}
+                        {(trackListInp.showLKey) && <label id={"lKey" + lKey} className="track-lKey" style={trackListInp.lKeyStyle?trackListInp.lKeyStyle:{}}>{lKey}</label>}
                         {trackList[lKey] && trackList[lKey].length > 0 && Object.keys(trackIndex).length > 0 &&
                             <ViewportList viewportRef={ref} items={trackList[lKey]} itemMinSize={tracks ? tracks.length:50} margin={8}>
                                 {(track) => (

src/g-player-react/src/Components/screen/track/Tracks.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { TrackList } from "./TrackList";
 import { useDispatch, useSelector } from "react-redux";
-import { A_TO_Z, A_TO_Z_DESC, CURRENT_PAGE, GENRE, LANGUAGE, LYRICS_AVAILABLE, SORT_ALBUM, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_GENRE, SORT_LANGUAGE, SORT_LYRICS_AVAILABLE, SORT_YEAR, TRACKS } from "../../redux/GPActionTypes";
-import { hideElementById, hideElemetAfterSomeDelay, setCookies } from "../../utilities/util";
+import { CURRENT_PAGE, SORT_ALBUM, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_GENRE, SORT_LANGUAGE, SORT_LYRICS_AVAILABLE, SORT_PLAY_COUNT, SORT_YEAR, TRACKS } from "../../redux/GPActionTypes";
+import { setCookies } from "../../utilities/util";
 import { fetchAllSongs } from "../../redux/library/LibraryActions";
 
 export const Tracks = () => {
     const dispatch = useDispatch();
     const tracks = useSelector(state => state.library.tracks);
+    const tracksHistory = useSelector(state => state.library.tracksHistory);
     const globalFilterText = useSelector(state => state.library.globalFilterText);
     const [finalTracks, setFinalTracks] = useState([]);
     useEffect(()=>{
@@ -40,12 +41,12 @@ export const Tracks = () => {
     return(
         <>
             {finalTracks && finalTracks.length>0 &&
-                <TrackList tracks={finalTracks} 
+                <TrackList tracks={finalTracks} tracksHistory={tracksHistory}
                     trackListInp={
                         {showSort:true, showLKey:true, 
                             lKeyStyle : {position:'absolute',visibility:'hidden'},
                             playedFrom:{pfKey:TRACKS}, 
-                            sortSelectors:[SORT_A_TO_Z,SORT_A_TO_Z_DESC, SORT_YEAR, SORT_ARTIST, SORT_LANGUAGE, SORT_ALBUM,SORT_GENRE,SORT_LYRICS_AVAILABLE],
+                            sortSelectors:[SORT_A_TO_Z,SORT_A_TO_Z_DESC, SORT_YEAR, SORT_ARTIST, SORT_LANGUAGE, SORT_ALBUM,SORT_GENRE,SORT_LYRICS_AVAILABLE, SORT_PLAY_COUNT],
                             selectedSortBy:SORT_A_TO_Z,
                             showSortByLabel:true
                         }

src/g-player-react/src/Components/utilities/util.js

@@ -1,4 +1,4 @@
-import { NONE, SORT_NONE, WIKI_SUMMARY_URL } from "../redux/GPActionTypes";
+import { SORT_NONE, SORT_PLAY_COUNT, WIKI_SUMMARY_URL } from "../redux/GPActionTypes";
 
 export const getMins = (seconds) =>{
 
@@ -106,31 +106,45 @@ export const getCookieValue = (name) => {
     return cookieValue;
 }
 
-export const sortGroupByField = (entArr, field) => {
-    console.log("field",field)
+export const sortGroupByField = (entArr, field, histArr) => {
+    //console.log("field",field)
     if(!field || field === SORT_NONE){
         let tempEntObj = {};
         entArr.forEach((ent,i)=>{
             tempEntObj[i]=[ent];
         });
-        console.log("tempEntObj: ",tempEntObj)
+        //console.log("tempEntObj: ",tempEntObj)
         return tempEntObj;
     }
     let entListObj = {};
     let tempArr = [];
     let ind;
     let indArr;
-    console.log("117 entArr: ",entArr)
+    let count;
+    let maxCount = 0;
+    let countArr = [0,1];
+    //console.log("117 entArr: ",entArr)
+
+    if(field === SORT_PLAY_COUNT){
+        maxCount = histArr.map(ent=>ent[1]).reduce((a,c)=>a>c?a:c,0);
+        countArr = getCountArr(maxCount, countArr);
+        console.log("countArr: ",countArr)
+    }
+
     entArr.forEach((ent) => {
         indArr = []
-        if (ent[field] !== null && ent[field] !== undefined && ent[field] !== "") {
+        //if (ent[field] !== null && ent[field] !== undefined && ent[field] !== "") {
+        if (ent[field] || field === SORT_PLAY_COUNT) {
             if(field==='title' || field==='albumName' || field==='artistName'){
                 ind = ent[field].substring(0, 1).toUpperCase();
                 if (!isNaN(ind)) {
                     ind = '#';
                 }
             }else if(field === 'lyricsAvl'){
                 ind = ent.lyricsAvl ? 'Tracks with lyrics' : 'No Lyrics'
+            }else if(field === SORT_PLAY_COUNT){
+                count = histArr.filter(his=>his[0]===ent.songId)[0];
+                ind = count?getCountIndex(countArr,count[1]):0;
             }else{
                 ind = ent[field];
             }
@@ -168,6 +182,21 @@ export const sortGroupByField = (entArr, field) => {
 return entListObj;
 }
 
+export const getCountArr = (maxCount, countArr) => {
+    for(let i=5;i<maxCount;i+=5){
+        countArr.push(i);
+    }
+    return countArr.reverse();
+}
+
+export const getCountIndex = (countArr, count) => {
+    for(let i=0;i<countArr.length;i++){
+        if(count >= countArr[i]){
+            return countArr[i];
+        }
+    }
+}
+
 export const showHideSideBar = () => {
     if(!isMobile()){
         return;

src/main/java/com/gmt/gp/repositories/HistoryRepository.java

@@ -2,6 +2,7 @@
 
 import java.util.List;
 
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.data.repository.CrudRepository;
 
 import com.gmt.gp.model.History;
@@ -14,5 +15,6 @@ public interface HistoryRepository extends CrudRepository<History, Long>{
 
     List<History> findTop30ByOrderByLastPlayedTimeDesc();
 
-
+    @Query("Select h.songId, h.count from History h order by count desc")
+    List<Object[]> getSongIdAndCoundOrderByCountDesc();
 }

src/main/java/com/gmt/gp/services/HistoryService.java

@@ -203,4 +203,8 @@ public Map<String, Object> executeJDBCQuerySingleRow(String query) {
         }
         return objMap;
     }
+
+    public List<Object[]> getSongIdAndCoundOrderByCountDesc(){
+        return historyRepository.getSongIdAndCoundOrderByCountDesc();
+    }
 }

src/main/java/com/gmt/gp/services/LibraryService.java

@@ -623,6 +623,7 @@ public Map<String, Object> getAllSongsAndIds() {
         Map<String, Object> songs = new HashMap<String, Object>();
         songs.put("SONGS", libraryRepository.findAllByOrderByTitleAsc());
         songs.put("SONG_IDS", libraryRepository.getAllLibraryIds());
+        songs.put("HISTORY", historyService.getSongIdAndCoundOrderByCountDesc());
         return songs;
     }
 

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

@@ -1,18 +1,18 @@
 {
   "files": {
     "main.css": "/static/css/main.c04486e6.css",
-    "main.js": "/static/js/main.2881d323.js",
+    "main.js": "/static/js/main.013bb1db.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.c04486e6.css.map": "/static/css/main.c04486e6.css.map",
-    "main.2881d323.js.map": "/static/js/main.2881d323.js.map",
+    "main.013bb1db.js.map": "/static/js/main.013bb1db.js.map",
     "787.09cba7e9.chunk.js.map": "/static/js/787.09cba7e9.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.c04486e6.css",
-    "static/js/main.2881d323.js"
+    "static/js/main.013bb1db.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.2881d323.js"></script><link href="/static/css/main.c04486e6.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.013bb1db.js"></script><link href="/static/css/main.c04486e6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/main/resources/gp_react/static/js/main.013bb1db.js.LICENSE.txt

@@ -0,0 +1,119 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.1.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.5.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.5.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */