mirrors
/
navidrome
mirror of https://github.com/navidrome/navidrome.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor for readability

This commit is contained in:
Deluan 2021-06-09 22:35:20 -04:00
parent 7f85ecd515
commit 2afb2db7ef
8 changed files with 193 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/personal/HelpMsg.js Normal file
View File

@ -0,0 +1,8 @@
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
export const HelpMsg = ({ caption }) => (
<>
<HelpOutlineIcon />
&nbsp;&nbsp; {caption}
</>
)

64
ui/src/personal/NotificationsToggle.js Normal file
View File

@ -0,0 +1,64 @@
import { useNotify, useTranslate } from 'react-admin'
import { useDispatch, useSelector } from 'react-redux'
import { setNotificationsState } from '../actions'
import {
FormControl,
FormControlLabel,
FormHelperText,
Switch,
} from '@material-ui/core'
export const NotificationsToggle = () => {
const translate = useTranslate()
const dispatch = useDispatch()
const notify = useNotify()
const currentSetting = useSelector((state) => state.settings.notifications)
const notAvailable = !('Notification' in window) || !window.isSecureContext
if (
(currentSetting && Notification.permission !== 'granted') ||
notAvailable
) {
dispatch(setNotificationsState(false))
}
const toggleNotifications = (event) => {
if (currentSetting && !event.target.checked) {
dispatch(setNotificationsState(false))
} else {
if (Notification.permission === 'denied') {
notify(translate('message.notifications_blocked'), 'warning')
} else {
Notification.requestPermission().then((permission) => {
dispatch(setNotificationsState(permission === 'granted'))
})
}
}
}
return (
<FormControl>
<FormControlLabel
control={
<Switch
id={'notifications'}
color="primary"
checked={currentSetting}
disabled={notAvailable}
onChange={toggleNotifications}
/>
}
label={
<span>
{translate('menu.personal.options.desktop_notifications')}
</span>
}
/>
{notAvailable && (
<FormHelperText id="notifications-disabled-helper-text">
{translate('message.notifications_not_available')}
</FormHelperText>
)}
</FormControl>
)
}

193
ui/src/personal/Personal.js
View File

@ -1,196 +1,15 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
Card,
FormControl,
FormHelperText,
FormControlLabel,
Switch,
} from '@material-ui/core'
import {
SelectInput,
SimpleForm,
Title,
useLocale,
useNotify,
useSetLocale,
useTranslate,
} from 'react-admin'
import { SimpleForm, Title, useTranslate } from 'react-admin'
import { Card } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
import { changeTheme, setNotificationsState } from '../actions'
import themes from '../themes'
import { docsUrl } from '../utils'
import { useGetLanguageChoices } from '../i18n'
import albumLists, { defaultAlbumList } from '../album/albumLists'
import { AUTO_THEME_ID } from '../consts'
import { SelectLanguage } from './SelectLanguage'
import { SelectTheme } from './SelectTheme'
import { SelectDefaultView } from './SelectDefaultView'
import { NotificationsToggle } from './NotificationsToggle'
const useStyles = makeStyles({
root: { marginTop: '1em' },
})
const helpKey = '_help'
function openInNewTab(url) {
const win = window.open(url, '_blank')
win.focus()
}
const HelpMsg = ({ caption }) => (
<>
<HelpOutlineIcon />
&nbsp;&nbsp; {caption}
</>
)
const SelectLanguage = (props) => {
const translate = useTranslate()
const setLocale = useSetLocale()
const locale = useLocale()
const { choices } = useGetLanguageChoices()
choices.push({
id: helpKey,
name: <HelpMsg caption={'Help to translate'} />,
})
return (
<SelectInput
{...props}
source="language"
label={translate('menu.personal.options.language')}
defaultValue={locale}
choices={choices}
translateChoice={false}
onChange={(event) => {
if (event.target.value === helpKey) {
openInNewTab(docsUrl('/docs/developers/translations/'))
return
}
setLocale(event.target.value).then(() => {
localStorage.setItem('locale', event.target.value)
})
}}
/>
)
}
const SelectTheme = (props) => {
const translate = useTranslate()
const dispatch = useDispatch()
const currentTheme = useSelector((state) => state.theme)
const themeChoices = [
{
id: AUTO_THEME_ID,
name: 'Auto',
},
]
themeChoices.push(
...Object.keys(themes).map((key) => {
return { id: key, name: themes[key].themeName }
})
)
themeChoices.push({
id: helpKey,
name: <HelpMsg caption={'Create your own'} />,
})
return (
<SelectInput
{...props}
source="theme"
label={translate('menu.personal.options.theme')}
defaultValue={currentTheme}
translateChoice={false}
choices={themeChoices}
onChange={(event) => {
if (event.target.value === helpKey) {
openInNewTab(docsUrl('/docs/developers/creating-themes/'))
return
}
dispatch(changeTheme(event.target.value))
}}
/>
)
}
const SelectDefaultView = (props) => {
const translate = useTranslate()
const current = localStorage.getItem('defaultView') || defaultAlbumList
const choices = Object.keys(albumLists).map((type) => ({
id: type,
name: translate(`resources.album.lists.${type}`),
}))
return (
<SelectInput
{...props}
source="defaultView"
label={translate('menu.personal.options.defaultView')}
defaultValue={current}
choices={choices}
translateChoice={false}
onChange={(event) => {
localStorage.setItem('defaultView', event.target.value)
}}
/>
)
}
const NotificationsToggle = () => {
const translate = useTranslate()
const dispatch = useDispatch()
const notify = useNotify()
const currentSetting = useSelector((state) => state.settings.notifications)
const notAvailable = !('Notification' in window) || !window.isSecureContext
if (
(currentSetting && Notification.permission !== 'granted') ||
notAvailable
) {
dispatch(setNotificationsState(false))
}
const toggleNotifications = (event) => {
if (currentSetting && !event.target.checked) {
dispatch(setNotificationsState(false))
} else {
if (Notification.permission === 'denied') {
notify(translate('message.notifications_blocked'), 'warning')
} else {
Notification.requestPermission().then((permission) => {
dispatch(setNotificationsState(permission === 'granted'))
})
}
}
}
return (
<FormControl>
<FormControlLabel
control={
<Switch
id={'notifications'}
color="primary"
checked={currentSetting}
disabled={notAvailable}
onChange={toggleNotifications}
/>
}
label={
<span>
{translate('menu.personal.options.desktop_notifications')}
</span>
}
/>
{notAvailable && (
<FormHelperText id="notifications-disabled-helper-text">
{translate('message.notifications_not_available')}
</FormHelperText>
)}
</FormControl>
)
}
const Personal = () => {
const translate = useTranslate()
const classes = useStyles()

25
ui/src/personal/SelectDefaultView.js Normal file
View File

@ -0,0 +1,25 @@
import { SelectInput, useTranslate } from 'react-admin'
import albumLists, { defaultAlbumList } from '../album/albumLists'
export const SelectDefaultView = (props) => {
const translate = useTranslate()
const current = localStorage.getItem('defaultView') || defaultAlbumList
const choices = Object.keys(albumLists).map((type) => ({
id: type,
name: translate(`resources.album.lists.${type}`),
}))
return (
<SelectInput
{...props}
source="defaultView"
label={translate('menu.personal.options.defaultView')}
defaultValue={current}
choices={choices}
translateChoice={false}
onChange={(event) => {
localStorage.setItem('defaultView', event.target.value)
}}
/>
)
}

38
ui/src/personal/SelectLanguage.js Normal file
View File

@ -0,0 +1,38 @@
import { SelectInput, useLocale, useSetLocale, useTranslate } from 'react-admin'
import { useGetLanguageChoices } from '../i18n'
import { HelpMsg } from './HelpMsg'
import { docsUrl, openInNewTab } from '../utils'
const helpKey = '_help'
export const SelectLanguage = (props) => {
const translate = useTranslate()
const setLocale = useSetLocale()
const locale = useLocale()
const { choices } = useGetLanguageChoices()
choices.push({
id: helpKey,
name: <HelpMsg caption={'Help to translate'} />,
})
return (
<SelectInput
{...props}
source="language"
label={translate('menu.personal.options.language')}
defaultValue={locale}
choices={choices}
translateChoice={false}
onChange={(event) => {
if (event.target.value === helpKey) {
openInNewTab(docsUrl('/docs/developers/translations/'))
return
}
setLocale(event.target.value).then(() => {
localStorage.setItem('locale', event.target.value)
})
}}
/>
)
}

47
ui/src/personal/SelectTheme.js Normal file
View File

@ -0,0 +1,47 @@
import { SelectInput, useTranslate } from 'react-admin'
import { useDispatch, useSelector } from 'react-redux'
import { AUTO_THEME_ID } from '../consts'
import themes from '../themes'
import { HelpMsg } from './HelpMsg'
import { docsUrl, openInNewTab } from '../utils'
import { changeTheme } from '../actions'
const helpKey = '_help'
export const SelectTheme = (props) => {
const translate = useTranslate()
const dispatch = useDispatch()
const currentTheme = useSelector((state) => state.theme)
const themeChoices = [
{
id: AUTO_THEME_ID,
name: 'Auto',
},
]
themeChoices.push(
...Object.keys(themes).map((key) => {
return { id: key, name: themes[key].themeName }
})
)
themeChoices.push({
id: helpKey,
name: <HelpMsg caption={'Create your own'} />,
})
return (
<SelectInput
{...props}
source="theme"
label={translate('menu.personal.options.theme')}
defaultValue={currentTheme}
translateChoice={false}
choices={themeChoices}
onChange={(event) => {
if (event.target.value === helpKey) {
openInNewTab(docsUrl('/docs/developers/creating-themes/'))
return
}
dispatch(changeTheme(event.target.value))
}}
/>
)
}

1
ui/src/utils/index.js
View File

@ -2,3 +2,4 @@ export * from './baseUrl'
export * from './docsUrl'
export * from './formatters'
export * from './notifications'
export * from './openInNewTab'

4
ui/src/utils/openInNewTab.js Normal file
View File

@ -0,0 +1,4 @@
export const openInNewTab = (url) => {
const win = window.open(url, '_blank')
win.focus()
}