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,66 @@
+import ReactJkMusicPlayer from 'navidrome-music-player'
+import config, { shareInfo } from '../config'
+import { shareCoverUrl, shareDownloadUrl, shareStreamUrl } from '../utils'
+
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyle = makeStyles({
+  player: {
+    '& .group .next-audio': {
+      pointerEvents: (props) => props.single && 'none',
+      opacity: (props) => props.single && 0.65,
+    },
+    '@media (min-width: 768px)': {
+      '& .react-jinke-music-player-mobile > div': {
+        width: 768,
+        margin: 'auto',
+      },
+      '& .react-jinke-music-player-mobile-cover': {
+        width: 'auto !important',
+      },
+    },
+  },
+})
+
+const SharePlayer = () => {
+  const classes = useStyle({ single: shareInfo?.tracks.length === 1 })
+
+  const list = shareInfo?.tracks.map((s) => {
+    return {
+      name: s.title,
+      musicSrc: shareStreamUrl(s.id),
+      cover: shareCoverUrl(s.id),
+      singer: s.artist,
+      duration: s.duration,
+    }
+  })
+  const onBeforeAudioDownload = () => {
+    return Promise.resolve({
+      src: shareDownloadUrl(shareInfo?.id),
+    })
+  }
+  const options = {
+    audioLists: list,
+    mode: 'full',
+    toggleMode: false,
+    mobileMediaQuery: '',
+    showDownload: shareInfo?.downloadable && config.enableDownloads,
+    showReload: false,
+    showMediaSession: true,
+    theme: 'auto',
+    showThemeSwitch: false,
+    restartCurrentOnPrev: true,
+    remove: false,
+    spaceBar: true,
+    volumeFade: { fadeIn: 200, fadeOut: 200 },
+  }
+  return (
+    <ReactJkMusicPlayer
+      {...options}
+      className={classes.player}
+      onBeforeAudioDownload={onBeforeAudioDownload}
+    />
+  )
+}
+
+export default SharePlayer