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,154 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+import { useTranslate } from 'react-admin'
+import { IconButton, Menu, MenuItem } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import clsx from 'clsx'
+import {
+  playNext,
+  addTracks,
+  setTrack,
+  openAddToPlaylist,
+  openExtendedInfoDialog,
+  openDownloadMenu,
+  DOWNLOAD_MENU_SONG,
+  openShareMenu,
+} from '../actions'
+import { LoveButton } from './LoveButton'
+import config from '../config'
+import { formatBytes } from '../utils'
+
+const useStyles = makeStyles({
+  noWrap: {
+    whiteSpace: 'nowrap',
+  },
+})
+
+export const SongContextMenu = ({
+  resource,
+  record,
+  showLove,
+  onAddToPlaylist,
+  className,
+}) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const [anchorEl, setAnchorEl] = useState(null)
+  const options = {
+    playNow: {
+      enabled: true,
+      label: translate('resources.song.actions.playNow'),
+      action: (record) => dispatch(setTrack(record)),
+    },
+    playNext: {
+      enabled: true,
+      label: translate('resources.song.actions.playNext'),
+      action: (record) => dispatch(playNext({ [record.id]: record })),
+    },
+    addToQueue: {
+      enabled: true,
+      label: translate('resources.song.actions.addToQueue'),
+      action: (record) => dispatch(addTracks({ [record.id]: record })),
+    },
+    addToPlaylist: {
+      enabled: true,
+      label: translate('resources.song.actions.addToPlaylist'),
+      action: (record) =>
+        dispatch(
+          openAddToPlaylist({
+            selectedIds: [record.mediaFileId || record.id],
+            onSuccess: (id) => onAddToPlaylist(id),
+          }),
+        ),
+    },
+    share: {
+      enabled: config.enableSharing,
+      label: translate('ra.action.share'),
+      action: (record) =>
+        dispatch(
+          openShareMenu(
+            [record.mediaFileId || record.id],
+            'song',
+            record.title,
+          ),
+        ),
+    },
+    download: {
+      enabled: config.enableDownloads,
+      label: `${translate('ra.action.download')} (${formatBytes(record.size)})`,
+      action: (record) =>
+        dispatch(openDownloadMenu(record, DOWNLOAD_MENU_SONG)),
+    },
+    info: {
+      enabled: true,
+      label: translate('resources.song.actions.info'),
+      action: (record) => dispatch(openExtendedInfoDialog(record)),
+    },
+  }
+
+  const handleClick = (e) => {
+    setAnchorEl(e.currentTarget)
+    e.stopPropagation()
+  }
+
+  const handleClose = (e) => {
+    setAnchorEl(null)
+    e.stopPropagation()
+  }
+
+  const handleItemClick = (e) => {
+    e.preventDefault()
+    setAnchorEl(null)
+    const key = e.target.getAttribute('value')
+    options[key].action(record)
+    e.stopPropagation()
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <span className={clsx(classes.noWrap, className)}>
+      <LoveButton
+        record={record}
+        resource={resource}
+        visible={config.enableFavourites && showLove}
+      />
+      <IconButton onClick={handleClick} size={'small'}>
+        <MoreVertIcon fontSize={'small'} />
+      </IconButton>
+      <Menu
+        id={'menu' + record.id}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        {Object.keys(options).map(
+          (key) =>
+            options[key].enabled && (
+              <MenuItem value={key} key={key} onClick={handleItemClick}>
+                {options[key].label}
+              </MenuItem>
+            ),
+        )}
+      </Menu>
+    </span>
+  )
+}
+
+SongContextMenu.propTypes = {
+  resource: PropTypes.string.isRequired,
+  record: PropTypes.object.isRequired,
+  onAddToPlaylist: PropTypes.func,
+  showLove: PropTypes.bool,
+}
+
+SongContextMenu.defaultProps = {
+  onAddToPlaylist: () => {},
+  record: {},
+  resource: 'song',
+  showLove: true,
+  addLabel: true,
+}