mirror of
https://github.com/navidrome/navidrome.git
synced 2025-06-13 05:42:24 +03:00
Refactor for readability
This commit is contained in:
Deluan
parent
7f85ecd515
commit
2afb2db7ef
8
ui/src/personal/HelpMsg.js
Normal file
8
ui/src/personal/HelpMsg.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
|
||||||
|
|
||||||
|
export const HelpMsg = ({ caption }) => (
|
||||||
|
<>
|
||||||
|
<HelpOutlineIcon />
|
||||||
|
{caption}
|
||||||
|
</>
|
||||||
|
)
|
||||||
64
ui/src/personal/NotificationsToggle.js
Normal file
64
ui/src/personal/NotificationsToggle.js
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,196 +1,15 @@
|
|||||||
import React from 'react'
|
import { SimpleForm, Title, useTranslate } from 'react-admin'
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import { Card } from '@material-ui/core'
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
FormControl,
|
|
||||||
FormHelperText,
|
|
||||||
FormControlLabel,
|
|
||||||
Switch,
|
|
||||||
} from '@material-ui/core'
|
|
||||||
import {
|
|
||||||
SelectInput,
|
|
||||||
SimpleForm,
|
|
||||||
Title,
|
|
||||||
useLocale,
|
|
||||||
useNotify,
|
|
||||||
useSetLocale,
|
|
||||||
useTranslate,
|
|
||||||
} from 'react-admin'
|
|
||||||
import { makeStyles } from '@material-ui/core/styles'
|
import { makeStyles } from '@material-ui/core/styles'
|
||||||
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
|
import { SelectLanguage } from './SelectLanguage'
|
||||||
import { changeTheme, setNotificationsState } from '../actions'
|
import { SelectTheme } from './SelectTheme'
|
||||||
import themes from '../themes'
|
import { SelectDefaultView } from './SelectDefaultView'
|
||||||
import { docsUrl } from '../utils'
|
import { NotificationsToggle } from './NotificationsToggle'
|
||||||
import { useGetLanguageChoices } from '../i18n'
|
|
||||||
import albumLists, { defaultAlbumList } from '../album/albumLists'
|
|
||||||
import { AUTO_THEME_ID } from '../consts'
|
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles({
|
||||||
root: { marginTop: '1em' },
|
root: { marginTop: '1em' },
|
||||||
})
|
})
|
||||||
|
|
||||||
const helpKey = '_help'
|
|
||||||
|
|
||||||
function openInNewTab(url) {
|
|
||||||
const win = window.open(url, '_blank')
|
|
||||||
win.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
const HelpMsg = ({ caption }) => (
|
|
||||||
<>
|
|
||||||
<HelpOutlineIcon />
|
|
||||||
{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 Personal = () => {
|
||||||
const translate = useTranslate()
|
const translate = useTranslate()
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
|
|||||||
25
ui/src/personal/SelectDefaultView.js
Normal file
25
ui/src/personal/SelectDefaultView.js
Normal 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
38
ui/src/personal/SelectLanguage.js
Normal 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
47
ui/src/personal/SelectTheme.js
Normal 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))
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -2,3 +2,4 @@ export * from './baseUrl'
|
|||||||
export * from './docsUrl'
|
export * from './docsUrl'
|
||||||
export * from './formatters'
|
export * from './formatters'
|
||||||
export * from './notifications'
|
export * from './notifications'
|
||||||
|
export * from './openInNewTab'
|
||||||
|
|||||||
4
ui/src/utils/openInNewTab.js
Normal file
4
ui/src/utils/openInNewTab.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export const openInNewTab = (url) => {
|
||||||
|
const win = window.open(url, '_blank')
|
||||||
|
win.focus()
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user