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,81 @@
+import { makeStyles } from '@material-ui/core/styles'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { FunctionField } from 'react-admin'
+import { useTheme } from '@material-ui/core/styles'
+import PlayingLight from '../icons/playing-light.gif'
+import PlayingDark from '../icons/playing-dark.gif'
+import PausedLight from '../icons/paused-light.png'
+import PausedDark from '../icons/paused-dark.png'
+
+const useStyles = makeStyles({
+  icon: {
+    width: '32px',
+    height: '32px',
+    verticalAlign: 'text-top',
+    marginLeft: '-8px',
+    marginTop: '-7px',
+    paddingRight: '3px',
+  },
+  text: {
+    verticalAlign: 'text-top',
+  },
+})
+
+export const SongTitleField = ({ showTrackNumbers, ...props }) => {
+  const theme = useTheme()
+  const classes = useStyles()
+  const { record } = props
+  const currentTrack = useSelector((state) => state?.player?.current || {})
+  const currentId = currentTrack.trackId
+  const paused = currentTrack.paused
+  const isCurrent =
+    currentId && (currentId === record.id || currentId === record.mediaFileId)
+
+  const trackName = (r) => {
+    const name = r.title
+    if (r.trackNumber && showTrackNumbers) {
+      return r.trackNumber.toString().padStart(2, '0') + ' ' + name
+    }
+    return name
+  }
+
+  const Icon = () => {
+    let icon
+    if (paused) {
+      icon = theme.palette.type === 'light' ? PausedLight : PausedDark
+    } else {
+      icon = theme.palette.type === 'light' ? PlayingLight : PlayingDark
+    }
+    return (
+      <img
+        src={icon}
+        className={classes.icon}
+        alt={paused ? 'paused' : 'playing'}
+      />
+    )
+  }
+
+  return (
+    <>
+      {isCurrent && <Icon />}
+      <FunctionField
+        {...props}
+        source="title"
+        render={trackName}
+        className={classes.text}
+      />
+    </>
+  )
+}
+
+SongTitleField.propTypes = {
+  record: PropTypes.object,
+  showTrackNumbers: PropTypes.bool,
+}
+
+SongTitleField.defaultProps = {
+  record: {},
+  showTrackNumbers: false,
+}