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,72 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import Chip from '@material-ui/core/Chip'
+import config from '../config'
+import { makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
+import { calculateGain } from '../utils/calculateReplayGain'
+
+const llFormats = new Set(config.losslessFormats.split(','))
+const placeholder = 'N/A'
+
+const useStyle = makeStyles(
+  (theme) => ({
+    chip: {
+      transform: 'scale(0.8)',
+    },
+  }),
+  {
+    name: 'NDQualityInfo',
+  },
+)
+
+export const QualityInfo = ({ record, size, gainMode, preAmp, className }) => {
+  const classes = useStyle()
+  let { suffix, bitRate, rgAlbumGain, rgAlbumPeak, rgTrackGain, rgTrackPeak } =
+    record
+  let info = placeholder
+
+  if (suffix) {
+    suffix = suffix.toUpperCase()
+    info = suffix
+    if (!llFormats.has(suffix) && bitRate > 0) {
+      info += ' ' + bitRate
+    }
+  }
+
+  const extra = useMemo(() => {
+    if (gainMode !== 'none') {
+      const gainValue = calculateGain(
+        { gainMode, preAmp },
+        { rgAlbumGain, rgAlbumPeak, rgTrackGain, rgTrackPeak },
+      )
+      // convert normalized gain (after peak) back to dB
+      const toDb = (Math.log10(gainValue) * 20).toFixed(2)
+      return ` (${toDb} dB)`
+    }
+
+    return ''
+  }, [gainMode, preAmp, rgAlbumGain, rgAlbumPeak, rgTrackGain, rgTrackPeak])
+
+  return (
+    <Chip
+      className={clsx(classes.chip, className)}
+      variant="outlined"
+      size={size}
+      label={`${info}${extra}`}
+    />
+  )
+}
+
+QualityInfo.propTypes = {
+  record: PropTypes.object.isRequired,
+  size: PropTypes.string,
+  className: PropTypes.string,
+  gainMode: PropTypes.string,
+}
+
+QualityInfo.defaultProps = {
+  record: {},
+  size: 'small',
+  gainMode: 'none',
+}