add rating

- add column
- add api call
- add to default columns

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,

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',
     },
   },

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',
+      },
     ]);
   }
 

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 (
     <Table
       ref={tableRef}
@@ -275,9 +279,11 @@ const ListViewTable = ({
                                 subtitle="true"
                                 appearance="link"
                                 onClick={() => {
-                                  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 (
                   <div
-                    onClick={(e: any) =>
-                      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/) ? (
                         <RsuiteLinkButton
                           appearance="link"
                           onClick={() => {
                             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' ? (
+                        <Rate
+                          size="xs"
+                          readOnly={false}
+                          defaultValue={
+                            rowData?.userRating ? rowData.userRating : 0
+                          }
+                          onChange={(e: any) => handleRating(rowData, e)}
+                        />
                       ) : (
                         rowData[column.dataKey]
                       )}