antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add localization support (#333)

Browse source 
* 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
90 changed files with 2679 additions and 908 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -2,6 +2,7 @@ import { useLayoutEffect, useRef } from 'react';
import { Divider, Group } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { Variants, motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { RiArrowDownSLine, RiSettings3Line } from 'react-icons/ri';
import { useLocation } from 'react-router';
import styled from 'styled-components';
@ -70,6 +71,7 @@ const BackgroundImageOverlay = styled.div`
`;
const Controls = () => {
const { t } = useTranslation();
const { dynamicBackground, expanded, opacity, useImageAspectRatio } =
useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
@ -104,7 +106,7 @@ const Controls = () => {
<Button
compact
size="sm"
tooltip={{ label: 'Minimize' }}
tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }}
variant="subtle"
onClick={handleToggleFullScreenPlayer}
>
@ -115,7 +117,7 @@ const Controls = () => {
<Button
compact
size="sm"
tooltip={{ label: 'Configure' }}
tooltip={{ label: t('common.configure', { postProcess: 'titleCase' }) }}
variant="subtle"
>
<RiSettings3Line size="1.5rem" />
@ -123,7 +125,11 @@ const Controls = () => {
</Popover.Target>
<Popover.Dropdown>
<Option>
<Option.Label>Dynamic Background</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.dynamicBackground', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Switch
defaultChecked={dynamicBackground}
@ -137,7 +143,11 @@ const Controls = () => {
</Option>
{dynamicBackground && (
<Option>
<Option.Label>Opacity</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.opacity', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Slider
defaultValue={opacity}
@ -151,7 +161,11 @@ const Controls = () => {
</Option>
)}
<Option>
<Option.Label>Use image aspect ratio</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.useImageAspectRatio', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Switch
checked={useImageAspectRatio}
@ -165,7 +179,11 @@ const Controls = () => {
</Option>
<Divider my="sm" />
<Option>
<Option.Label>Follow current lyrics</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.followCurrentLyric', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Switch
checked={lyricConfig.follow}
@ -176,7 +194,11 @@ const Controls = () => {
</Option.Control>
</Option>
<Option>
<Option.Label>Show lyrics provider</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.showLyricProvider', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Switch
checked={lyricConfig.showProvider}
@ -187,7 +209,11 @@ const Controls = () => {
</Option.Control>
</Option>
<Option>
<Option.Label>Show lyrics match</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.showLyricMatch', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Switch
checked={lyricConfig.showMatch}
@ -198,7 +224,11 @@ const Controls = () => {
</Option.Control>
</Option>
<Option>
<Option.Label>Lyrics size</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.lyric', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Group
noWrap
@ -206,7 +236,11 @@ const Controls = () => {
>
<Slider
defaultValue={lyricConfig.fontSize}
label={(e) => `Synchronized: ${e}px`}
label={(e) =>
`${t('page.fullscreenPlayer.synchronized', {
postProcess: 'titleCase',
})}: ${e}px`
}
max={72}
min={8}
w="100%"
@ -214,7 +248,11 @@ const Controls = () => {
/>
<Slider
defaultValue={lyricConfig.fontSize}
label={(e) => `Unsynchronized: ${e}px`}
label={(e) =>
`${t('page.fullscreenPlayer.unsynchronized', {
postProcess: 'sentenceCase',
})}: ${e}px`
}
max={72}
min={8}
w="100%"
@ -226,7 +264,11 @@ const Controls = () => {
</Option.Control>
</Option>
<Option>
<Option.Label>Lyrics gap</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.lyricGap', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Group
noWrap
@ -254,13 +296,32 @@ const Controls = () => {
</Option.Control>
</Option>
<Option>
<Option.Label>Lyrics alignment</Option.Label>
<Option.Label>
{t('page.fullscreenPlayer.lyricAlignment', {
postProcess: 'sentenceCase',
})}
</Option.Label>
<Option.Control>
<Select
data={[
{ label: 'Left', value: 'left' },
{ label: 'Center', value: 'center' },
{ label: 'Right', value: 'right' },
{
label: t('common.left', {
postProcess: 'titleCase',
}),
value: 'left',
},
{
label: t('common.center', {
postProcess: 'titleCase',
}),
value: 'center',
},
{
label: t('common.right', {
postProcess: 'titleCase',
}),
value: 'right',
},
]}
value={lyricConfig.alignment}
onChange={(e) => handleLyricsSettings('alignment', e)}