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,71 @@
+import React from 'react'
+import { useMediaQuery } from '@material-ui/core'
+import { Link } from 'react-router-dom'
+import clsx from 'clsx'
+import { QualityInfo } from '../common'
+import useStyle from './styles'
+
+const AudioTitle = React.memo(({ audioInfo, gainInfo, isMobile }) => {
+  const classes = useStyle()
+  const className = classes.audioTitle
+  const isDesktop = useMediaQuery('(min-width:810px)')
+
+  if (!audioInfo.song) {
+    return ''
+  }
+
+  const song = audioInfo.song
+  const qi = {
+    suffix: song.suffix,
+    bitRate: song.bitRate,
+    rgAlbumGain: song.rgAlbumGain,
+    rgAlbumPeak: song.rgAlbumPeak,
+    rgTrackGain: song.rgTrackGain,
+    rgTrackPeak: song.rgTrackPeak,
+  }
+
+  return (
+    <Link
+      to={
+        audioInfo.isRadio
+          ? `/radio/${audioInfo.trackId}/show`
+          : `/album/${song.albumId}/show`
+      }
+      className={className}
+    >
+      <span>
+        <span className={clsx(classes.songTitle, 'songTitle')}>
+          {song.title}
+        </span>
+        {isDesktop && (
+          <QualityInfo
+            record={qi}
+            className={classes.qualityInfo}
+            {...gainInfo}
+          />
+        )}
+      </span>
+      {isMobile ? (
+        <>
+          <span className={classes.songInfo}>
+            <span className={'songArtist'}>{song.artist}</span>
+          </span>
+          <span className={clsx(classes.songInfo, classes.songAlbum)}>
+            <span className={'songAlbum'}>{song.album}</span>
+            {song.year ? ` - ${song.year}` : ''}
+          </span>
+        </>
+      ) : (
+        <span className={classes.songInfo}>
+          <span className={'songArtist'}>{song.artist}</span> -{' '}
+          <span className={'songAlbum'}>{song.album}</span>
+          {song.year ? ` - ${song.year}` : ''}
+        </span>
+      )}
+    </Link>
+  )
+})
+
+AudioTitle.displayName = 'AudioTitle'
+
+export default AudioTitle