Migrate to lingui
Switch to "lingui" for better DX. Tried to persist existing languages as much as possible. Removed "vite-plugin-node-polyfills" because it's incompatible with "lingui"
This commit is contained in:
schroda
@@ -7,10 +7,10 @@
|
||||
*/
|
||||
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Button from '@mui/material/Button';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { memo } from 'react';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx';
|
||||
import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx';
|
||||
import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
|
||||
@@ -21,7 +21,7 @@ import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/set
|
||||
import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
|
||||
|
||||
const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useLingui();
|
||||
const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
|
||||
useReaderSettingsStore((state) => ({
|
||||
readingMode: state.settings.readingMode,
|
||||
@@ -71,7 +71,7 @@ const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBa
|
||||
variant="contained"
|
||||
startIcon={<SettingsIcon />}
|
||||
>
|
||||
{t('settings.title')}
|
||||
{t`Settings`}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Button from '@mui/material/Button';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { OffsetDoubleSpreadIcon } from '@/assets/icons/svg/OffsetDoubleSpreadIcon.tsx';
|
||||
import { IReaderSettings } from '@/features/reader/Reader.types.ts';
|
||||
import { isOffsetDoubleSpreadPagesEditable } from '@/features/reader/settings/ReaderSettings.utils.tsx';
|
||||
@@ -19,7 +19,7 @@ export const ReaderNavBarDesktopOffsetDoubleSpread = ({
|
||||
}: Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads'> & {
|
||||
setShouldOffsetDoubleSpreads: (offset: boolean) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useLingui();
|
||||
|
||||
if (!isOffsetDoubleSpreadPagesEditable(readingMode)) {
|
||||
return null;
|
||||
@@ -34,7 +34,7 @@ export const ReaderNavBarDesktopOffsetDoubleSpread = ({
|
||||
variant="contained"
|
||||
startIcon={<OffsetDoubleSpreadIcon />}
|
||||
>
|
||||
{t('reader.settings.label.offset_double_spread')}
|
||||
{t`Offset double spreads`}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
*/
|
||||
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FitScreenIcon from '@mui/icons-material/FitScreen';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
|
||||
import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
|
||||
import {
|
||||
@@ -36,13 +36,13 @@ export const ReaderNavBarDesktopPageScale = ({
|
||||
value: IReaderSettings[Setting],
|
||||
) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useLingui();
|
||||
|
||||
return (
|
||||
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
|
||||
<ValueRotationButton
|
||||
{...buttonSelectInputProps}
|
||||
tooltip={t('reader.settings.page_scale.title')}
|
||||
tooltip={t`Scale type`}
|
||||
value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
|
||||
defaultValue={pageScaleMode.isDefault ? pageScaleMode.value : undefined}
|
||||
values={READER_PAGE_SCALE_MODE_VALUES}
|
||||
@@ -51,7 +51,7 @@ export const ReaderNavBarDesktopPageScale = ({
|
||||
defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
|
||||
/>
|
||||
{READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
|
||||
<CustomTooltip title={t('reader.settings.page_scale.stretch')}>
|
||||
<CustomTooltip title={t`Stretch small pages`}>
|
||||
<CustomButtonIcon
|
||||
onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
|
||||
sx={{ px: undefined }}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
|
||||
import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
|
||||
import {
|
||||
@@ -23,12 +23,12 @@ export const ReaderNavBarDesktopReadingDirection = ({
|
||||
Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
|
||||
setReadingDirection: (readingDirection: ReadingDirection) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useLingui();
|
||||
|
||||
return (
|
||||
<ValueRotationButton
|
||||
{...buttonSelectInputProps}
|
||||
tooltip={t('reader.settings.label.reading_direction')}
|
||||
tooltip={t`Reading direction`}
|
||||
value={readingDirection.isDefault ? undefined : readingDirection.value}
|
||||
defaultValue={readingDirection.isDefault ? readingDirection.value : undefined}
|
||||
values={READING_DIRECTION_VALUES}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
|
||||
import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
|
||||
import {
|
||||
@@ -23,12 +23,12 @@ export const ReaderNavBarDesktopReadingMode = ({
|
||||
Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
|
||||
setReadingMode: (mode: ReadingMode) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useLingui();
|
||||
|
||||
return (
|
||||
<ValueRotationButton
|
||||
{...buttonSelectInputProps}
|
||||
tooltip={t('reader.settings.label.reading_mode')}
|
||||
tooltip={t`Reading mode`}
|
||||
value={readingMode.isDefault ? undefined : readingMode.value}
|
||||
defaultValue={readingMode.isDefault ? readingMode.value : undefined}
|
||||
values={READING_MODE_VALUES}
|
||||
|
||||
Reference in New Issue
Block a user