mirror of
https://github.com/navidrome/navidrome.git
synced 2025-04-16 12:10:36 +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 { 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 />
|
||||
{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
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 './formatters'
|
||||
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