diff --git a/src/api/api.ts b/src/api/api.ts index 7053144..bafdfe8 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -352,6 +352,17 @@ export const unstar = async (id: string, type: string) => { return data; }; +export const setRating = async (id: string, rating: number) => { + const { data } = await api.get(`/setRating`, { + params: { + id, + rating, + }, + }); + + return data; +}; + export const getSimilarSongs = async ( id: string, count: number, diff --git a/src/components/settings/ListViewColumns.ts b/src/components/settings/ListViewColumns.ts index 9256a86..70fee9a 100644 --- a/src/components/settings/ListViewColumns.ts +++ b/src/components/settings/ListViewColumns.ts @@ -83,7 +83,7 @@ export const songColumnList = [ dataKey: 'starred', alignment: 'center', resizable: true, - width: 60, + width: 100, label: 'Favorite', }, }, @@ -109,6 +109,17 @@ export const songColumnList = [ label: 'Play Count', }, }, + { + label: 'Rating', + value: { + id: 'Rate', + dataKey: 'userRating', + alignment: 'center', + resizable: true, + width: 150, + label: 'Rating', + }, + }, { label: 'Title', value: { @@ -155,6 +166,7 @@ export const songColumnPicker = [ { label: 'Favorite' }, { label: 'Path' }, { label: 'Play Count' }, + { label: 'Rating' }, { label: 'Title' }, { label: 'Title (Combined)' }, { label: 'Year' }, @@ -223,7 +235,7 @@ export const albumColumnList = [ dataKey: 'starred', alignment: 'center', resizable: true, - width: 60, + width: 100, label: 'Favorite', }, }, diff --git a/src/components/shared/setDefaultSettings.ts b/src/components/shared/setDefaultSettings.ts index a35ae34..39db8c6 100644 --- a/src/components/shared/setDefaultSettings.ts +++ b/src/components/shared/setDefaultSettings.ts @@ -105,14 +105,30 @@ const setDefaultSettings = (force: boolean) => { width: 100, label: 'Duration', }, + { + id: 'Bitrate', + dataKey: 'bitRate', + alignment: 'left', + resizable: true, + width: 100, + label: 'Bitrate', + }, { id: 'Fav', dataKey: 'starred', alignment: 'center', resizable: true, - width: 60, + width: 100, label: 'Favorite', }, + { + id: 'Rate', + dataKey: 'userRating', + alignment: 'center', + resizable: true, + width: 150, + label: 'Rating', + }, ]); } diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx index a62df0e..bdc5db1 100644 --- a/src/components/viewtypes/ListViewTable.tsx +++ b/src/components/viewtypes/ListViewTable.tsx @@ -5,7 +5,7 @@ import path from 'path'; import settings from 'electron-settings'; import { useQueryClient } from 'react-query'; import { nanoid } from 'nanoid'; -import { Table, Grid, Row, Col, Icon } from 'rsuite'; +import { Table, Grid, Row, Col, Icon, Rate } from 'rsuite'; import { useHistory } from 'react-router'; import { LazyLoadImage } from 'react-lazy-load-image-component'; import { RsuiteLinkButton } from './styled'; @@ -16,7 +16,7 @@ import { formatDate, } from '../../shared/utils'; import cacheImage from '../shared/cacheImage'; -import { star, unstar } from '../../api/api'; +import { setRating, star, unstar } from '../../api/api'; import { useAppDispatch } from '../../redux/hooks'; import { setStar } from '../../redux/playQueueSlice'; @@ -69,6 +69,10 @@ const ListViewTable = ({ }); }; + const handleRating = (rowData: any, e: number) => { + setRating(rowData.id, e); + }; + return ( { - history.push( - `/library/artist/${rowData.artistId}` - ); + if (rowData.artistId) { + history.push( + `/library/artist/${rowData.artistId}` + ); + } }} style={{ fontSize: `${fontSize}px`, @@ -349,18 +355,30 @@ const ListViewTable = ({ {(rowData: any, rowIndex: any) => { return (
- handleRowClick(e, { - ...rowData, - rowIndex, - }) - } - onDoubleClick={() => - handleRowDoubleClick({ - ...rowData, - rowIndex, - }) - } + onClick={(e: any) => { + if ( + !column.dataKey?.match( + /starred|songCount|duration|userRating/ + ) + ) { + handleRowClick(e, { + ...rowData, + rowIndex, + }); + } + }} + onDoubleClick={() => { + if ( + !column.dataKey?.match( + /starred|songCount|duration|userRating/ + ) + ) { + handleRowDoubleClick({ + ...rowData, + rowIndex, + }); + } + }} className={ rowData.id === playQueue?.currentSongId && (column.dataKey === 'title' || @@ -389,23 +407,28 @@ const ListViewTable = ({ whiteSpace: 'nowrap', overflow: 'hidden', paddingRight: !column.dataKey?.match( - /starred|songCount|duration/ + /starred|songCount|duration|userRating/ ) ? '10px' : undefined, }} > - {column.dataKey === 'album' || - column.dataKey === 'artist' ? ( + {column.dataKey.match(/album|artist/) ? ( { if (column.dataKey === 'album') { - history.push(`/library/album/${rowData.albumId}`); + if (rowData.albumId) { + history.push( + `/library/album/${rowData.albumId}` + ); + } } else if (column.dataKey === 'artist') { - history.push( - `/library/artist/${rowData.artistId}` - ); + if (rowData.artistId) { + history.push( + `/library/artist/${rowData.artistId}` + ); + } } }} style={{ @@ -431,6 +454,15 @@ const ListViewTable = ({ }} onClick={() => handleFavorite(rowData)} /> + ) : column.dataKey === 'userRating' ? ( + handleRating(rowData, e)} + /> ) : ( rowData[column.dataKey] )}