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
2024-09-28 11:54:36 -04:00
parent dd48a23f92
commit fcdd30ba8f
212 changed files with 6231 additions and 31060 deletions
@@ -0,0 +1,144 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+import {
+  Button,
+  sanitizeListRestProps,
+  TopToolbar,
+  useTranslate,
+} from 'react-admin'
+import { useMediaQuery, makeStyles } from '@material-ui/core'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import ShuffleIcon from '@material-ui/icons/Shuffle'
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
+import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
+import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+import ShareIcon from '@material-ui/icons/Share'
+import {
+  playNext,
+  addTracks,
+  playTracks,
+  shuffleTracks,
+  openAddToPlaylist,
+  openDownloadMenu,
+  DOWNLOAD_MENU_ALBUM,
+  openShareMenu,
+} from '../actions'
+import { formatBytes } from '../utils'
+import config from '../config'
+import { ToggleFieldsMenu } from '../common'
+
+const useStyles = makeStyles({
+  toolbar: { display: 'flex', justifyContent: 'space-between', width: '100%' },
+})
+
+const AlbumActions = ({
+  className,
+  ids,
+  data,
+  record,
+  permanentFilter,
+  ...rest
+}) => {
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const classes = useStyles()
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
+
+  const handlePlay = React.useCallback(() => {
+    dispatch(playTracks(data, ids))
+  }, [dispatch, data, ids])
+
+  const handlePlayNext = React.useCallback(() => {
+    dispatch(playNext(data, ids))
+  }, [dispatch, data, ids])
+
+  const handlePlayLater = React.useCallback(() => {
+    dispatch(addTracks(data, ids))
+  }, [dispatch, data, ids])
+
+  const handleShuffle = React.useCallback(() => {
+    dispatch(shuffleTracks(data, ids))
+  }, [dispatch, data, ids])
+
+  const handleAddToPlaylist = React.useCallback(() => {
+    dispatch(openAddToPlaylist({ selectedIds: ids }))
+  }, [dispatch, ids])
+
+  const handleShare = React.useCallback(() => {
+    dispatch(openShareMenu([record.id], 'album', record.name))
+  }, [dispatch, record])
+
+  const handleDownload = React.useCallback(() => {
+    dispatch(openDownloadMenu(record, DOWNLOAD_MENU_ALBUM))
+  }, [dispatch, record])
+
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      <div className={classes.toolbar}>
+        <div>
+          <Button
+            onClick={handlePlay}
+            label={translate('resources.album.actions.playAll')}
+          >
+            <PlayArrowIcon />
+          </Button>
+          <Button
+            onClick={handleShuffle}
+            label={translate('resources.album.actions.shuffle')}
+          >
+            <ShuffleIcon />
+          </Button>
+          <Button
+            onClick={handlePlayNext}
+            label={translate('resources.album.actions.playNext')}
+          >
+            <RiPlayList2Fill />
+          </Button>
+          <Button
+            onClick={handlePlayLater}
+            label={translate('resources.album.actions.addToQueue')}
+          >
+            <RiPlayListAddFill />
+          </Button>
+          <Button
+            onClick={handleAddToPlaylist}
+            label={translate('resources.album.actions.addToPlaylist')}
+          >
+            <PlaylistAddIcon />
+          </Button>
+          {config.enableSharing && (
+            <Button onClick={handleShare} label={translate('ra.action.share')}>
+              <ShareIcon />
+            </Button>
+          )}
+          {config.enableDownloads && (
+            <Button
+              onClick={handleDownload}
+              label={
+                translate('ra.action.download') +
+                (isDesktop ? ` (${formatBytes(record.size)})` : '')
+              }
+            >
+              <CloudDownloadOutlinedIcon />
+            </Button>
+          )}
+        </div>
+        <div>{isNotSmall && <ToggleFieldsMenu resource="albumSong" />}</div>
+      </div>
+    </TopToolbar>
+  )
+}
+
+AlbumActions.propTypes = {
+  record: PropTypes.object.isRequired,
+  selectedIds: PropTypes.arrayOf(PropTypes.number),
+}
+
+AlbumActions.defaultProps = {
+  record: {},
+  selectedIds: [],
+}
+
+export default AlbumActions