Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: translate remaining strings

Browse source
This commit is contained in:
Tim 2022-12-16 16:03:26 +01:00
parent 4008a6202d
commit fed28bf6ea
7 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/ColorInput/ColorInput.js
View file

@ -4,6 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const AColorPicker = require('a-color-picker');
const { useTranslation } = require('react-i18next');
const Button = require('stremio/common/Button');
const ModalDialog = require('stremio/common/ModalDialog');
const useBinaryState = require('stremio/common/useBinaryState');
@ -16,6 +17,7 @@ const parseColor = (value) => {
};
const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
const { t } = useTranslation();
const [modalOpen, openModal, closeModal] = useBinaryState(false);
const [tempValue, setTempValue] = React.useState(() => {
return parseColor(value);
@ -69,11 +71,11 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
setTempValue(parseColor(value));
}, [value, modalOpen]);
return (
<Button title={isTransparent ? 'Transparent' : value} {...props} style={labelButtonStyle} className={classnames(className, styles['color-input-container'])} onClick={labelButtonOnClick}>
<Button title={isTransparent ? t('BUTTON_COLOR_TRANSPARENT') : value} {...props} style={labelButtonStyle} className={classnames(className, styles['color-input-container'])} onClick={labelButtonOnClick}>
{
isTransparent ?
<div className={styles['transparent-label-container']}>
<div className={styles['transparent-label']}>Transparent</div>
<div className={styles['transparent-label']}>{ t('BUTTON_COLOR_TRANSPARENT') }</div>
</div>
:
null

4
src/common/MetaPreview/MetaLinks/MetaLinks.js
View file

@ -13,7 +13,9 @@ const MetaLinks = ({ className, label, links }) => {
<div className={classnames(className, styles['meta-links-container'])}>
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label-container']}>{label}</div>
<div className={styles['label-container']}>
{t(`LINKS_${label.toUpperCase()}`)}
</div>
:
null
}

6
src/common/MetaRow/MetaRow.js
View file

@ -4,6 +4,7 @@ const React = require('react');
const ReactIs = require('react-is');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
@ -11,6 +12,7 @@ const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const styles = require('./styles');
const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => {
const { t } = useTranslation();
return (
<div className={classnames(className, styles['meta-row-container'])}>
{
@ -24,8 +26,8 @@ const MetaRow = ({ className, title, message, items, itemComponent, deepLinks })
}
{
deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
<div className={styles['label']}>SEE ALL</div>
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</Button>
:

6
src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
View file

@ -3,12 +3,14 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const Icon = require('@stremio/stremio-icons/dom');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const styles = require('./styles');
const MetaRowPlaceholder = ({ className, title, deepLinks }) => {
const { t } = useTranslation();
return (
<div className={classnames(className, styles['meta-row-placeholder-container'])}>
<div className={styles['header-container']}>
@ -17,8 +19,8 @@ const MetaRowPlaceholder = ({ className, title, deepLinks }) => {
</div>
{
deepLinks && typeof deepLinks.discover === 'string' ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={deepLinks.discover} tabIndex={-1}>
<div className={styles['label']}>SEE ALL</div>
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</Button>
:

8
src/common/StreamingServerWarning/StreamingServerWarning.js
View file

@ -51,11 +51,11 @@ const StreamingServerWarning = ({ className }) => {
return (
<div className={classnames(className, styles['warning-container'])}>
<div className={styles['warning-statement']}>{ t('SETTINGS_SERVER_UNAVAILABLE') }</div>
<Button className={styles['warning-button']} title={'Later'} onClick={onLaterClick} tabIndex={-1}>
<div className={styles['warning-label']}>Later</div>
<Button className={styles['warning-button']} title={t('WARNING_STREAMING_SERVER_LATER')} onClick={onLaterClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('WARNING_STREAMING_SERVER_LATER') }</div>
</Button>
<Button className={styles['warning-button']} title={'Dismiss'} onClick={onDismissClick} tabIndex={-1}>
<div className={styles['warning-label']}>Dismiss</div>
<Button className={styles['warning-button']} title={t('WARNING_STREAMING_SERVER_DISMISS')} onClick={onDismissClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('WARNING_STREAMING_SERVER_DISMISS') }</div>
</Button>
</div>
);

38
src/routes/Settings/Settings.js
View file

@ -324,7 +324,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Rewind & Fast-forward duration</div>
<div className={styles['label']}>{ t('SETTINGS_REWIND_FAST_FORWARD_DURATION') }</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -342,7 +342,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Next video popup duration</div>
<div className={styles['label']}>{ t('SETTINGS_NEXT_VIDEO_POPUP_DURATION') }</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -352,7 +352,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Play in background</div>
<div className={styles['label']}>{ t('SETTINGS_PLAY_IN_BACKGROUND') }</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
@ -363,7 +363,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Play in external player</div>
<div className={styles['label']}>{ t('SETTINGS_PLAY_IN_EXTERNAL_PLAYER') }</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
@ -402,10 +402,10 @@ const Settings = () => {
'NotLoaded'
:
streamingServer.settings.type === 'Ready' ?
'Online'
t('SETTINGS_SERVER_STATUS_ONLINE')
:
streamingServer.settings.type === 'Error' ?
`Error: (${streamingServer.settings.content})`
`${t('SETTINGS_SERVER_STATUS_ERROR')}: (${streamingServer.settings.content})`
:
streamingServer.settings.type
}
@ -427,7 +427,7 @@ const Settings = () => {
cacheSizeSelect !== null ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Cache size</div>
<div className={styles['label']}>{ t('SETTINGS_SERVER_CACHE_SIZE') }</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -441,7 +441,7 @@ const Settings = () => {
torrentProfileSelect !== null ?
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Torrent profile</div>
<div className={styles['label']}>{ t('SETTINGS_SERVER_TORRENT_PROFILE') }</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -459,29 +459,29 @@ const Settings = () => {
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_PLAY_PAUSE') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>Space</kbd>
<kbd>{ t('SETTINGS_SHORTCUT_SPACE') }</kbd>
</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Seek Forward</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_SEEK_FORWARD') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>→</kbd>
<div className={styles['label']}>or</div>
<kbd>⇧ Shift</kbd>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_OR') }</div>
<kbd>⇧ { t('SETTINGS_SHORTCUT_SHIFT') }</kbd>
<div className={styles['label']}>+</div>
<kbd>→</kbd>
</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Seek Backward</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_SEEK_BACKWARD') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>←</kbd>
<div className={styles['label']}>or</div>
<kbd>⇧ Shift</kbd>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_OR') }</div>
<kbd>⇧ { t('SETTINGS_SHORTCUT_SHIFT') }</kbd>
<div className={styles['label']}>+</div>
<kbd>←</kbd>
</div>
@ -532,7 +532,7 @@ const Settings = () => {
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>1</kbd>
<div className={styles['label']}>to</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_TO') }</div>
<kbd>5</kbd>
</div>
</div>
@ -549,7 +549,7 @@ const Settings = () => {
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_EXIT_BACK') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>Esc</kbd>
<kbd>{ t('SETTINGS_SHORTCUT_ESC') }</kbd>
</div>
</div>
</div>
@ -559,7 +559,7 @@ const Settings = () => {
configureServerUrlModalOpen ?
<ModalDialog
className={styles['configure-server-url-modal-container']}
title={'Configure streaming server url'}
title={t('SETTINGS_SERVER_CONFIGURE_TITLE')}
buttons={configureServerUrlModalButtons}
onCloseRequest={closeConfigureServerUrlModal}>
<TextInput
@ -567,7 +567,7 @@ const Settings = () => {
className={styles['server-url-input']}
type={'text'}
defaultValue={streamingServerUrlInput.value}
placeholder={'Enter a streaming server url'}
placeholder={t('SETTINGS_SERVER_CONFIGURE_INPUT')}
onSubmit={configureServerUrlOnSubmit}
/>
</ModalDialog>

10
src/routes/Settings/useProfileSettingsInputs.js
View file

@ -1,10 +1,12 @@
// Copyright (C) 2017-2022 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const { useServices } = require('stremio/services');
const { CONSTANTS, interfaceLanguages, languageNames } = require('stremio/common');
const useProfileSettingsInputs = (profile) => {
const { t } = useTranslation();
const { core } = useServices();
// TODO combine those useMemo in one
const interfaceLanguageSelect = React.useMemo(() => ({
@ -136,11 +138,11 @@ const useProfileSettingsInputs = (profile) => {
const seekTimeDurationSelect = React.useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
label: `${size / 1000} seconds`
label: `${size / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.seekTimeDuration}`],
renderLabelText: () => {
return `${profile.settings.seekTimeDuration / 1000} seconds`;
return `${profile.settings.seekTimeDuration / 1000} ${t('SECONDS')}`;
},
onSelect: (event) => {
core.transport.dispatch({
@ -158,14 +160,14 @@ const useProfileSettingsInputs = (profile) => {
const nextVideoPopupDurationSelect = React.useMemo(() => ({
options: CONSTANTS.NEXT_VIDEO_POPUP_DURATIONS.map((duration) => ({
value: `${duration}`,
label: duration === 0 ? 'Disabled' : `${duration / 1000} seconds`
label: duration === 0 ? 'Disabled' : `${duration / 1000} ${t('SECONDS')}`
})),
selected: [`${profile.settings.nextVideoNotificationDuration}`],
renderLabelText: () => {
return profile.settings.nextVideoNotificationDuration === 0 ?
'Disabled'
:
`${profile.settings.nextVideoNotificationDuration / 1000} seconds`;
`${profile.settings.nextVideoNotificationDuration / 1000} ${t('SECONDS')}`;
},
onSelect: (event) => {
core.transport.dispatch({