diff --git a/ui/src/i18nProvider/en.json b/ui/src/i18nProvider/en.json index ea6fca0f9..99dda9786 100644 --- a/ui/src/i18nProvider/en.json +++ b/ui/src/i18nProvider/en.json @@ -6,7 +6,7 @@ "fields": { "albumArtist": "Album Artist", "duration": "Time", - "trackNumber": "Track #", + "trackNumber": "#", "playCount": "Plays", "title": "Title", "artist": "Artist", @@ -19,9 +19,7 @@ "updatedAt": "Uploaded at" }, "actions": { - "addToQueue": "Play Later" - }, - "action": { + "addToQueue": "Play Later", "playNow": "Play Now" } }, diff --git a/ui/src/i18nProvider/index.js b/ui/src/i18nProvider/index.js index 107a5da89..23af9267d 100644 --- a/ui/src/i18nProvider/index.js +++ b/ui/src/i18nProvider/index.js @@ -1,28 +1,61 @@ import polyglotI18nProvider from 'ra-i18n-polyglot' +import { useGetList } from 'react-admin' +import deepmerge from 'deepmerge' import dataProvider from '../dataProvider' import en from './en.json' +// Only returns current selected locale if its translations are found in localStorage const defaultLocale = function () { const locale = localStorage.getItem('locale') - const current = JSON.parse(localStorage.getItem('translation')) + const current = localStorage.getItem('translation') if (current && current.id === locale) { return locale } return 'en' } +const prepareLanguage = (lang) => { + // Make "albumSongs" resource use the same translations as "song" + lang.resources.albumSong = lang.resources.song + // ra.boolean.null should always be empty + lang.ra.boolean.null = '' + // Fallback to english translations + return deepmerge(en, lang) +} + const i18nProvider = polyglotI18nProvider((locale) => { + // English is bundled if (locale === 'en') { - return en + return prepareLanguage(en) } + // If the requested locale is in already loaded, return it const current = JSON.parse(localStorage.getItem('translation')) if (current && current.id === locale) { - return JSON.parse(current.data) + return prepareLanguage(JSON.parse(current.data)) } + // If not, get it from the server, and store it in localStorage return dataProvider.getOne('translation', { id: locale }).then((res) => { localStorage.setItem('translation', JSON.stringify(res.data)) - return JSON.parse(res.data.data) + return prepareLanguage(JSON.parse(res.data.data)) }) }, defaultLocale()) export default i18nProvider + +// React Hook to get a list of all languages available. English is hardcoded +export const useGetLanguageChoices = () => { + const { ids, data, loaded, loading } = useGetList( + 'translation', + { page: 1, perPage: -1 }, + { field: '', order: '' }, + {} + ) + + const choices = [{ id: 'en', name: 'English' }] + if (loaded) { + ids.forEach((id) => choices.push({ id: id, name: data[id].name })) + } + choices.sort((a, b) => a.name.localeCompare(b.name)) + + return { choices, loaded, loading } +} diff --git a/ui/src/personal/Personal.js b/ui/src/personal/Personal.js index d13cb088a..ea6d12d14 100644 --- a/ui/src/personal/Personal.js +++ b/ui/src/personal/Personal.js @@ -5,7 +5,6 @@ import { SelectInput, SimpleForm, Title, - useGetList, useLocale, useSetLocale, useTranslate, @@ -15,6 +14,7 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline' import { changeTheme } from './actions' import themes from '../themes' import { docsUrl } from '../utils/docsUrl' +import { useGetLanguageChoices } from '../i18nProvider' const useStyles = makeStyles({ root: { marginTop: '1em' }, @@ -35,23 +35,12 @@ const HelpMsg = ({ caption }) => ( ) const SelectLanguage = (props) => { - const { ids, data, loaded } = useGetList( - 'translation', - { page: 1, perPage: -1 }, - { field: '', order: '' }, - {} - ) - const translate = useTranslate() const setLocale = useSetLocale() const locale = useLocale() + const { choices } = useGetLanguageChoices() - const langChoices = [{ id: 'en', name: 'English' }] - if (loaded) { - ids.forEach((id) => langChoices.push({ id: id, name: data[id].name })) - } - langChoices.sort((a, b) => a.name.localeCompare(b.name)) - langChoices.push({ + choices.push({ id: helpKey, name: , }) @@ -62,7 +51,7 @@ const SelectLanguage = (props) => { source="language" label={translate('menu.personal.options.language')} defaultValue={locale} - choices={langChoices} + choices={choices} translateChoice={false} onChange={(event) => { if (event.target.value === helpKey) {