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,163 @@
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useNotify, useTranslate } from 'react-admin'
+import {
+  Popover,
+  CircularProgress,
+  IconButton,
+  makeStyles,
+  Tooltip,
+  Card,
+  CardContent,
+  CardActions,
+  Divider,
+  Box,
+} from '@material-ui/core'
+import { FiActivity } from 'react-icons/fi'
+import { BiError } from 'react-icons/bi'
+import { VscSync } from 'react-icons/vsc'
+import { GiMagnifyingGlass } from 'react-icons/gi'
+import subsonic from '../subsonic'
+import { scanStatusUpdate } from '../actions'
+import { useInterval } from '../common'
+import { formatDuration } from '../utils'
+import config from '../config'
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    position: 'relative',
+    color: (props) => (props.up ? null : 'orange'),
+  },
+  progress: {
+    color: theme.palette.primary.light,
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    zIndex: 1,
+  },
+  button: {
+    color: 'inherit',
+    zIndex: 2,
+  },
+  counterStatus: {
+    minWidth: '15em',
+  },
+}))
+
+const getUptime = (serverStart) =>
+  formatDuration((Date.now() - serverStart.startTime) / 1000)
+
+const Uptime = () => {
+  const serverStart = useSelector((state) => state.activity.serverStart)
+  const [uptime, setUptime] = useState(getUptime(serverStart))
+  useInterval(() => {
+    setUptime(getUptime(serverStart))
+  }, 1000)
+  return <span>{uptime}</span>
+}
+
+const ActivityPanel = () => {
+  const serverStart = useSelector((state) => state.activity.serverStart)
+  const up = serverStart.startTime
+  const classes = useStyles({ up })
+  const translate = useTranslate()
+  const notify = useNotify()
+  const [anchorEl, setAnchorEl] = useState(null)
+  const open = Boolean(anchorEl)
+  const dispatch = useDispatch()
+  const scanStatus = useSelector((state) => state.activity.scanStatus)
+
+  const handleMenuOpen = (event) => setAnchorEl(event.currentTarget)
+  const handleMenuClose = () => setAnchorEl(null)
+  const triggerScan = (full) => () => subsonic.startScan({ fullScan: full })
+
+  // Get updated status on component mount
+  useEffect(() => {
+    subsonic
+      .getScanStatus()
+      .then((resp) => resp.json['subsonic-response'])
+      .then((data) => {
+        if (data.status === 'ok') {
+          dispatch(scanStatusUpdate(data.scanStatus))
+        }
+      })
+  }, [dispatch])
+
+  useEffect(() => {
+    if (serverStart.version && serverStart.version !== config.version) {
+      notify('ra.notification.new_version', 'info', {}, false, 604800000 * 50)
+    }
+  }, [serverStart, notify])
+
+  return (
+    <div className={classes.wrapper}>
+      <Tooltip title={translate('activity.title')}>
+        <IconButton className={classes.button} onClick={handleMenuOpen}>
+          {up ? <FiActivity size={'20'} /> : <BiError size={'20'} />}
+        </IconButton>
+      </Tooltip>
+      {scanStatus.scanning && (
+        <CircularProgress size={24} className={classes.progress} />
+      )}
+      <Popover
+        id="panel-activity"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={open}
+        onClose={handleMenuClose}
+      >
+        <Card>
+          <CardContent>
+            <Box display="flex" className={classes.counterStatus}>
+              <Box component="span" flex={2}>
+                {translate('activity.serverUptime')}:
+              </Box>
+              <Box component="span" flex={1}>
+                {up ? <Uptime /> : translate('activity.serverDown')}
+              </Box>
+            </Box>
+          </CardContent>
+          <Divider />
+          <CardContent>
+            <Box display="flex" className={classes.counterStatus}>
+              <Box component="span" flex={2}>
+                {translate('activity.totalScanned')}:
+              </Box>
+              <Box component="span" flex={1}>
+                {scanStatus.folderCount || '-'}
+              </Box>
+            </Box>
+          </CardContent>
+          <Divider />
+          <CardActions>
+            <Tooltip title={translate('activity.quickScan')}>
+              <IconButton
+                onClick={triggerScan(false)}
+                disabled={scanStatus.scanning}
+              >
+                <VscSync />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={translate('activity.fullScan')}>
+              <IconButton
+                onClick={triggerScan(true)}
+                disabled={scanStatus.scanning}
+              >
+                <GiMagnifyingGlass />
+              </IconButton>
+            </Tooltip>
+          </CardActions>
+        </Card>
+      </Popover>
+    </div>
+  )
+}
+
+export default ActivityPanel