build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)
* feat: create vite project * feat: it's alive! * feat: `make dev` working! * feat: replace custom serviceWorker with vite plugin * test: replace Jest with Vitest * fix: run prettier * fix: skip eslint for now. * chore: remove ui.old folder * refactor: replace lodash.pick with simple destructuring * fix: eslint errors (wip) * fix: eslint errors (wip) * fix: display-name eslint errors (wip) * fix: no-console eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: build * fix: pwa manifest * refactor: pwa manifest * refactor: simplify PORT configuration * refactor: rename simple JS files * test: cover playlistUtils * fix: react-image-lightbox * feat(ui): add sourcemaps to help debug issues
This commit is contained in:
Deluan Quintão
@@ -0,0 +1,203 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import {
|
||||
BulkActionsToolbar,
|
||||
FunctionField,
|
||||
ListToolbar,
|
||||
NumberField,
|
||||
TextField,
|
||||
useListContext,
|
||||
useVersion,
|
||||
} from 'react-admin'
|
||||
import clsx from 'clsx'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { Card, useMediaQuery } from '@material-ui/core'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
import { playTracks } from '../actions'
|
||||
import {
|
||||
ArtistLinkField,
|
||||
DateField,
|
||||
DurationField,
|
||||
QualityInfo,
|
||||
RatingField,
|
||||
SizeField,
|
||||
SongBulkActions,
|
||||
SongContextMenu,
|
||||
SongDatagrid,
|
||||
SongInfo,
|
||||
SongTitleField,
|
||||
useResourceRefresh,
|
||||
useSelectedFields,
|
||||
} from '../common'
|
||||
import config from '../config'
|
||||
import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
|
||||
import { removeAlbumCommentsFromSongs } from './utils.js'
|
||||
|
||||
const useStyles = makeStyles(
|
||||
(theme) => ({
|
||||
root: {},
|
||||
main: {
|
||||
display: 'flex',
|
||||
},
|
||||
content: {
|
||||
marginTop: 0,
|
||||
transition: theme.transitions.create('margin-top'),
|
||||
position: 'relative',
|
||||
flex: '1 1 auto',
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
bulkActionsDisplayed: {
|
||||
marginTop: -theme.spacing(8),
|
||||
transition: theme.transitions.create('margin-top'),
|
||||
},
|
||||
actions: {
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
noResults: { padding: 20 },
|
||||
columnIcon: {
|
||||
marginLeft: '3px',
|
||||
marginTop: '-2px',
|
||||
verticalAlign: 'text-top',
|
||||
},
|
||||
toolbar: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
row: {
|
||||
'&:hover': {
|
||||
'& $contextMenu': {
|
||||
visibility: 'visible',
|
||||
},
|
||||
'& $ratingField': {
|
||||
visibility: 'visible',
|
||||
},
|
||||
},
|
||||
},
|
||||
contextMenu: {
|
||||
visibility: (props) => (props.isDesktop ? 'hidden' : 'visible'),
|
||||
},
|
||||
ratingField: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
}),
|
||||
{ name: 'RaList' },
|
||||
)
|
||||
|
||||
const AlbumSongs = (props) => {
|
||||
const { data, ids } = props
|
||||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
||||
const classes = useStyles({ isDesktop })
|
||||
const dispatch = useDispatch()
|
||||
const version = useVersion()
|
||||
useResourceRefresh('song', 'album')
|
||||
|
||||
const toggleableFields = useMemo(() => {
|
||||
return {
|
||||
trackNumber: isDesktop && (
|
||||
<TextField source="trackNumber" label="#" sortable={false} />
|
||||
),
|
||||
title: (
|
||||
<SongTitleField
|
||||
source="title"
|
||||
sortable={false}
|
||||
showTrackNumbers={!isDesktop}
|
||||
/>
|
||||
),
|
||||
artist: isDesktop && <ArtistLinkField source="artist" />,
|
||||
duration: <DurationField source="duration" sortable={false} />,
|
||||
year: isDesktop && (
|
||||
<FunctionField
|
||||
source="year"
|
||||
render={(r) => r.year || ''}
|
||||
sortByOrder={'DESC'}
|
||||
/>
|
||||
),
|
||||
playCount: isDesktop && (
|
||||
<NumberField source="playCount" sortable={false} />
|
||||
),
|
||||
playDate: <DateField source="playDate" sortable={false} showTime />,
|
||||
quality: isDesktop && <QualityInfo source="quality" sortable={false} />,
|
||||
size: isDesktop && <SizeField source="size" sortable={false} />,
|
||||
channels: isDesktop && <NumberField source="channels" sortable={false} />,
|
||||
bpm: isDesktop && <NumberField source="bpm" sortable={false} />,
|
||||
rating: isDesktop && config.enableStarRating && (
|
||||
<RatingField
|
||||
resource={'song'}
|
||||
source="rating"
|
||||
sortable={false}
|
||||
className={classes.ratingField}
|
||||
/>
|
||||
),
|
||||
}
|
||||
}, [isDesktop, classes.ratingField])
|
||||
|
||||
const columns = useSelectedFields({
|
||||
resource: 'albumSong',
|
||||
columns: toggleableFields,
|
||||
omittedColumns: ['title'],
|
||||
defaultOff: ['channels', 'bpm', 'year', 'playCount', 'playDate', 'size'],
|
||||
})
|
||||
|
||||
const bulkActionsLabel = isDesktop
|
||||
? 'ra.action.bulk_actions'
|
||||
: 'ra.action.bulk_actions_mobile'
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListToolbar
|
||||
classes={{ toolbar: classes.toolbar }}
|
||||
actions={props.actions}
|
||||
{...props}
|
||||
/>
|
||||
<div className={classes.main}>
|
||||
<Card
|
||||
className={clsx(classes.content, {
|
||||
[classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
|
||||
})}
|
||||
key={version}
|
||||
>
|
||||
<BulkActionsToolbar {...props} label={bulkActionsLabel}>
|
||||
<SongBulkActions />
|
||||
</BulkActionsToolbar>
|
||||
<SongDatagrid
|
||||
rowClick={(id) => dispatch(playTracks(data, ids, id))}
|
||||
{...props}
|
||||
hasBulkActions={true}
|
||||
showDiscSubtitles={true}
|
||||
showReleaseDivider={true}
|
||||
contextAlwaysVisible={!isDesktop}
|
||||
classes={{ row: classes.row }}
|
||||
>
|
||||
{columns}
|
||||
<SongContextMenu
|
||||
source={'starred'}
|
||||
sortable={false}
|
||||
className={classes.contextMenu}
|
||||
label={
|
||||
config.enableFavourites && (
|
||||
<FavoriteBorderIcon
|
||||
fontSize={'small'}
|
||||
className={classes.columnIcon}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</SongDatagrid>
|
||||
</Card>
|
||||
</div>
|
||||
<ExpandInfoDialog content={<SongInfo />} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const SanitizedAlbumSongs = (props) => {
|
||||
removeAlbumCommentsFromSongs(props)
|
||||
const { loaded, loading, total, ...rest } = useListContext(props)
|
||||
return <>{loaded && <AlbumSongs {...rest} actions={props.actions} />}</>
|
||||
}
|
||||
|
||||
export default SanitizedAlbumSongs
|
||||
Reference in New Issue
Block a user