Help dialog with available hotkeys

ui/src/dialogs/AboutDialog.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from '@material-ui/core/Link'
+import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import TableContainer from '@material-ui/core/TableContainer'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
+import Paper from '@material-ui/core/Paper'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
+import inflection from 'inflection'
+import { useTranslate } from 'react-admin'
+import config from '../config'
+import { DialogTitle } from './DialogTitle'
+import { DialogContent } from './DialogContent'
+
+const links = {
+  homepage: 'navidrome.org',
+  reddit: 'reddit.com/r/Navidrome',
+  twitter: 'twitter.com/navidrome',
+  discord: 'discord.gg/xh7j7yF',
+  source: 'github.com/deluan/navidrome',
+  featureRequests: 'github.com/deluan/navidrome/issues',
+}
+
+const AboutDialog = ({ open, onClose }) => {
+  const translate = useTranslate()
+  return (
+    <Dialog
+      onClose={onClose}
+      onBackdropClick={onClose}
+      aria-labelledby="about-dialog-title"
+      open={open}
+    >
+      <DialogTitle id="about-dialog-title" onClose={onClose}>
+        Navidrome Music Server
+      </DialogTitle>
+      <DialogContent dividers>
+        <TableContainer component={Paper}>
+          <Table aria-label={translate('menu.about')} size="small">
+            <TableBody>
+              <TableRow>
+                <TableCell align="right" component="th" scope="row">
+                  {translate('menu.version')}:
+                </TableCell>
+                <TableCell align="left">{config.version}</TableCell>
+              </TableRow>
+              {Object.keys(links).map((key) => {
+                return (
+                  <TableRow key={key}>
+                    <TableCell align="right" component="th" scope="row">
+                      {translate(`about.links.${key}`, {
+                        _: inflection.humanize(inflection.underscore(key)),
+                      })}
+                      :
+                    </TableCell>
+                    <TableCell align="left">
+                      <Link
+                        href={`https://${links[key]}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {links[key]}
+                      </Link>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+              <TableRow>
+                <TableCell align="right" component="th" scope="row">
+                  <Link
+                    href={'https://github.com/sponsors/deluan'}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <IconButton size={'small'}>
+                      <FavoriteBorderIcon fontSize={'small'} />
+                    </IconButton>
+                  </Link>
+                </TableCell>
+                <TableCell align="left">
+                  <Link
+                    href={'https://ko-fi.com/deluan'}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ko-fi.com/deluan
+                  </Link>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+AboutDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+}
+
+export { AboutDialog }

ui/src/dialogs/AddToPlaylistDialog.js

@@ -14,9 +14,9 @@ import {
   DialogTitle,
 } from '@material-ui/core'
 import { closeAddToPlaylist } from '../actions'
-import SelectPlaylistInput from './SelectPlaylistInput'
+import { SelectPlaylistInput } from './SelectPlaylistInput'
 
-const AddToPlaylistDialog = () => {
+export const AddToPlaylistDialog = () => {
   const { open, selectedIds, onSuccess } = useSelector(
     (state) => state.addToPlaylistDialog
   )
@@ -96,5 +96,3 @@ const AddToPlaylistDialog = () => {
     </Dialog>
   )
 }
-
-export default AddToPlaylistDialog

ui/src/dialogs/DialogContent.js

@@ -0,0 +1,8 @@
+import { withStyles } from '@material-ui/core/styles'
+import MuiDialogContent from '@material-ui/core/DialogContent'
+
+export const DialogContent = withStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiDialogContent)

ui/src/dialogs/DialogTitle.js

@@ -0,0 +1,35 @@
+import { withStyles } from '@material-ui/core/styles'
+import MuiDialogTitle from '@material-ui/core/DialogTitle'
+import Typography from '@material-ui/core/Typography'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import React from 'react'
+
+const styles = (theme) => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(2),
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+})
+
+export const DialogTitle = withStyles(styles)((props) => {
+  const { children, classes, onClose, ...other } = props
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h5">{children}</Typography>
+      <IconButton
+        aria-label="close"
+        className={classes.closeButton}
+        onClick={onClose}
+      >
+        <CloseIcon />
+      </IconButton>
+    </MuiDialogTitle>
+  )
+})

ui/src/dialogs/HelpDialog.js

@@ -0,0 +1,78 @@
+import React, { useCallback, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { Dialog } from '@material-ui/core'
+import { getApplicationKeyMap, GlobalHotKeys } from 'react-hotkeys'
+import TableContainer from '@material-ui/core/TableContainer'
+import Paper from '@material-ui/core/Paper'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
+import { useTranslate } from 'react-admin'
+import inflection from 'inflection'
+import { keyMap } from '../hotkeys'
+import { DialogTitle } from './DialogTitle'
+import { DialogContent } from './DialogContent'
+
+const HelpTable = (props) => {
+  const keyMap = getApplicationKeyMap()
+  const translate = useTranslate()
+  return ReactDOM.createPortal(
+    <Dialog {...props}>
+      <DialogTitle onClose={props.onClose}>
+        {translate('help.title')}
+      </DialogTitle>
+      <DialogContent dividers>
+        <TableContainer component={Paper}>
+          <Table size="small">
+            <TableBody>
+              {Object.keys(keyMap).map((key) => {
+                const { sequences, name } = keyMap[key]
+                const description = translate(`help.hotkeys.${name}`, {
+                  _: inflection.humanize(name),
+                })
+                return (
+                  <TableRow key={key}>
+                    <TableCell align="right" component="th" scope="row">
+                      {description}
+                    </TableCell>
+                    <TableCell align="left">
+                      {sequences.map(({ sequence }) => (
+                        <span key={sequence}>{sequence}</span>
+                      ))}
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+    </Dialog>,
+    document.body
+  )
+}
+
+export const HelpDialog = (props) => {
+  const [open, setOpen] = useState(false)
+
+  const handleClickClose = (e) => {
+    setOpen(false)
+    e.stopPropagation()
+  }
+
+  const handlers = {
+    SHOW_HELP: useCallback(() => setOpen(true), [setOpen]),
+  }
+
+  return (
+    <>
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
+      <HelpTable
+        open={open}
+        onClose={handleClickClose}
+        onBackdropClick={handleClickClose}
+      />
+    </>
+  )
+}

ui/src/dialogs/SelectPlaylistInput.js

@@ -6,11 +6,11 @@ import Autocomplete, {
 } from '@material-ui/lab/Autocomplete'
 import { useGetList, useTranslate } from 'react-admin'
 import PropTypes from 'prop-types'
-import { isWritable } from '../common/Writable'
+import { isWritable } from '../common'
 
 const filter = createFilterOptions()
 
-const SelectPlaylistInput = ({ onChange }) => {
+export const SelectPlaylistInput = ({ onChange }) => {
   const translate = useTranslate()
   const { ids, data } = useGetList(
     'playlist',
@@ -94,5 +94,3 @@ const SelectPlaylistInput = ({ onChange }) => {
 SelectPlaylistInput.propTypes = {
   onChange: PropTypes.func.isRequired,
 }
-
-export default SelectPlaylistInput

ui/src/dialogs/index.js

@@ -0,0 +1,4 @@
+export * from './AboutDialog'
+export * from './AddToPlaylistDialog'
+export * from './SelectPlaylistInput'
+export * from './HelpDialog'