Add localization support (#333)

* Add updated i18n config and en locale
This commit is contained in:
Jeff
2023-10-30 19:22:45 -07:00
committed by GitHub
parent 11863fd4c1
commit 8430b1ec95
90 changed files with 2679 additions and 908 deletions
@@ -3,6 +3,7 @@ import { useHotkeys } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query';
import formatDuration from 'format-duration';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { IoIosPause } from 'react-icons/io';
import {
RiMenuAddFill,
@@ -92,6 +93,7 @@ const ControlsContainer = styled.div`
`;
export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const [isSeeking, setIsSeeking] = useState(false);
const currentSong = useCurrentSong();
@@ -171,7 +173,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<PlayerButton
icon={<RiStopFill size={15} />}
tooltip={{
label: 'Stop',
label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="tertiary"
@@ -183,10 +185,11 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
tooltip={{
label:
shuffle === PlayerShuffle.NONE
? 'Shuffle disabled'
: shuffle === PlayerShuffle.TRACK
? 'Shuffle tracks'
: 'Shuffle albums',
? t('player.shuffle', {
context: 'off',
postProcess: 'sentenceCase',
})
: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="tertiary"
@@ -194,7 +197,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
/>
<PlayerButton
icon={<RiSkipBackFill size={15} />}
tooltip={{ label: 'Previous track', openDelay: 500 }}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="secondary"
onClick={handlePrevTrack}
/>
@@ -202,7 +208,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<PlayerButton
icon={<RiRewindFill size={15} />}
tooltip={{
label: `Skip backwards ${skip?.skipBackwardSeconds} seconds`,
label: t('player.skip', {
context: 'back',
postProcess: 'sentenceCase',
}),
openDelay: 500,
}}
variant="secondary"
@@ -218,7 +227,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
)
}
tooltip={{
label: status === PlayerStatus.PAUSED ? 'Play' : 'Pause',
label:
status === PlayerStatus.PAUSED
? t('player.play', { postProcess: 'sentenceCase' })
: t('player.pause', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="main"
@@ -228,7 +240,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<PlayerButton
icon={<RiSpeedFill size={15} />}
tooltip={{
label: `Skip forwards ${skip?.skipForwardSeconds} seconds`,
label: t('player.stop', {
context: 'forward',
postProcess: 'sentenceCase',
}),
openDelay: 500,
}}
variant="secondary"
@@ -237,7 +252,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
)}
<PlayerButton
icon={<RiSkipForwardFill size={15} />}
tooltip={{ label: 'Next track', openDelay: 500 }}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="secondary"
onClick={handleNextTrack}
/>
@@ -253,10 +271,19 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
tooltip={{
label: `${
repeat === PlayerRepeat.NONE
? 'Repeat disabled'
? t('player.repeat', {
context: 'off',
postProcess: 'sentenceCase',
})
: repeat === PlayerRepeat.ALL
? 'Repeat all'
: 'Repeat one'
? t('player.repeat', {
context: 'all',
postProcess: 'sentenceCase',
})
: t('player.repeat', {
context: 'one',
postProcess: 'sentenceCase',
})
}`,
openDelay: 500,
}}
@@ -267,7 +294,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<PlayerButton
icon={<RiMenuAddFill size={15} />}
tooltip={{
label: 'Shuffle all',
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="tertiary"