Browse Source

Change styling for bitRate and size columns

master
jeffvli 3 years ago
parent
commit
b6e79e6f9a
  1. 12
      src/components/settings/ListViewColumns.ts
  2. 14
      src/components/viewtypes/ListViewTable.tsx
  3. 6
      src/shared/utils.ts

12
src/components/settings/ListViewColumns.ts

@ -139,7 +139,7 @@ export const songColumnList = [
alignment: 'center', alignment: 'center',
resizable: true, resizable: true,
width: 150, width: 150,
label: 'size', label: 'Size',
}, },
}, },
{ {
@ -301,6 +301,16 @@ export const songColumnListAuto = [
label: 'Rating', label: 'Rating',
}, },
}, },
{
label: 'Size',
value: {
id: 'Size',
dataKey: 'size',
alignment: 'center',
flexGrow: 1,
label: 'Size',
},
},
{ {
label: 'Track', label: 'Track',
value: { value: {

14
src/components/viewtypes/ListViewTable.tsx

@ -17,7 +17,13 @@ import {
StyledTableHeaderCell, StyledTableHeaderCell,
TableCellWrapper, TableCellWrapper,
} from './styled'; } from './styled';
import { formatSongDuration, isCached, getImageCachePath, formatDate } from '../../shared/utils'; import {
formatSongDuration,
isCached,
getImageCachePath,
formatDate,
convertByteToMegabyte,
} from '../../shared/utils';
import cacheImage from '../shared/cacheImage'; import cacheImage from '../shared/cacheImage';
import { setRating } from '../../api/api'; import { setRating } from '../../api/api';
import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { useAppDispatch, useAppSelector } from '../../redux/hooks';
@ -767,6 +773,8 @@ const ListViewTable = ({
formatSongDuration(rowData[column.dataKey]) formatSongDuration(rowData[column.dataKey])
) : column.dataKey === 'changed' || column.dataKey === 'created' ? ( ) : column.dataKey === 'changed' || column.dataKey === 'created' ? (
formatDate(rowData[column.dataKey]) formatDate(rowData[column.dataKey])
) : column.dataKey === 'size' ? (
`${convertByteToMegabyte(rowData[column.dataKey])} MB`
) : column.dataKey === 'starred' ? ( ) : column.dataKey === 'starred' ? (
<StyledIconToggle <StyledIconToggle
tabIndex={0} tabIndex={0}
@ -785,14 +793,14 @@ const ListViewTable = ({
/> />
) : column.dataKey === 'bitRate' ? ( ) : column.dataKey === 'bitRate' ? (
!rowData[column.dataKey] ? ( !rowData[column.dataKey] ? (
'N/a' ''
) : ( ) : (
`${rowData[column.dataKey]} kbps` `${rowData[column.dataKey]} kbps`
) )
) : rowData[column.dataKey] ? ( ) : rowData[column.dataKey] ? (
rowData[column.dataKey] rowData[column.dataKey]
) : ( ) : (
'N/a' ''
)} )}
</div> </div>
</TableCellWrapper> </TableCellWrapper>

6
src/shared/utils.ts

@ -115,7 +115,11 @@ export const formatSongDuration = (duration: number) => {
}; };
export const formatDate = (date: string) => { export const formatDate = (date: string) => {
return moment(date).format('L'); return moment(date).format('MMM D YYYY');
};
export const convertByteToMegabyte = (kb: number) => {
return (kb * 0.000001).toFixed(1);
}; };
// https://www.geeksforgeeks.org/check-if-array-elements-are-consecutive/ // https://www.geeksforgeeks.org/check-if-array-elements-are-consecutive/

Loading…
Cancel
Save