Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +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 PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const AColorPicker = require('a-color-picker'); const AColorPicker = require('a-color-picker');
const { useTranslation } = require('react-i18next');
const Button = require('stremio/common/Button'); const Button = require('stremio/common/Button');
const ModalDialog = require('stremio/common/ModalDialog'); const ModalDialog = require('stremio/common/ModalDialog');
const useBinaryState = require('stremio/common/useBinaryState'); const useBinaryState = require('stremio/common/useBinaryState');
@ -16,6 +17,7 @@ const parseColor = (value) => {
}; };
const ColorInput = ({ className, value, dataset, onChange, ...props }) => { const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
const { t } = useTranslation();
const [modalOpen, openModal, closeModal] = useBinaryState(false); const [modalOpen, openModal, closeModal] = useBinaryState(false);
const [tempValue, setTempValue] = React.useState(() => { const [tempValue, setTempValue] = React.useState(() => {
return parseColor(value); return parseColor(value);
@ -69,11 +71,11 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
setTempValue(parseColor(value)); setTempValue(parseColor(value));
}, [value, modalOpen]); }, [value, modalOpen]);
return ( 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 ? isTransparent ?
<div className={styles['transparent-label-container']}> <div className={styles['transparent-label-container']}>
<div className={styles['transparent-label']}>Transparent</div> <div className={styles['transparent-label']}>{ t('BUTTON_COLOR_TRANSPARENT') }</div>
</div> </div>
: :
null 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'])}> <div className={classnames(className, styles['meta-links-container'])}>
{ {
typeof label === 'string' && label.length > 0 ? typeof label === 'string' && label.length > 0 ?
<div className={styles['label-container']}>{label}</div> <div className={styles['label-container']}>
{t(`LINKS_${label.toUpperCase()}`)}
</div>
: :
null null
} }

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

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

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

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

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

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

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

@ -324,7 +324,7 @@ const Settings = () => {
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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> </div>
<Multiselect <Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])} className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -342,7 +342,7 @@ const Settings = () => {
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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> </div>
<Multiselect <Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])} className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -352,7 +352,7 @@ const Settings = () => {
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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> </div>
<Checkbox <Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])} className={classnames(styles['option-input-container'], styles['checkbox-container'])}
@ -363,7 +363,7 @@ const Settings = () => {
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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> </div>
<Checkbox <Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])} className={classnames(styles['option-input-container'], styles['checkbox-container'])}
@ -402,10 +402,10 @@ const Settings = () => {
'NotLoaded' 'NotLoaded'
: :
streamingServer.settings.type === 'Ready' ? streamingServer.settings.type === 'Ready' ?
'Online' t('SETTINGS_SERVER_STATUS_ONLINE')
: :
streamingServer.settings.type === 'Error' ? streamingServer.settings.type === 'Error' ?
`Error: (${streamingServer.settings.content})` `${t('SETTINGS_SERVER_STATUS_ERROR')}: (${streamingServer.settings.content})`
: :
streamingServer.settings.type streamingServer.settings.type
} }
@ -427,7 +427,7 @@ const Settings = () => {
cacheSizeSelect !== null ? cacheSizeSelect !== null ?
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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> </div>
<Multiselect <Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])} className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -441,7 +441,7 @@ const Settings = () => {
torrentProfileSelect !== null ? torrentProfileSelect !== null ?
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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> </div>
<Multiselect <Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])} 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 className={styles['label']}>{ t('SETTINGS_SHORTCUT_PLAY_PAUSE') }</div>
</div> </div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}> <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>Space</kbd> <kbd>{ t('SETTINGS_SHORTCUT_SPACE') }</kbd>
</div> </div>
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}> <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>→</kbd> <kbd>→</kbd>
<div className={styles['label']}>or</div> <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_OR') }</div>
<kbd>⇧ Shift</kbd> <kbd>⇧ { t('SETTINGS_SHORTCUT_SHIFT') }</kbd>
<div className={styles['label']}>+</div> <div className={styles['label']}>+</div>
<kbd>→</kbd> <kbd>→</kbd>
</div> </div>
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-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>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}> <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>←</kbd> <kbd>←</kbd>
<div className={styles['label']}>or</div> <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_OR') }</div>
<kbd>⇧ Shift</kbd> <kbd>⇧ { t('SETTINGS_SHORTCUT_SHIFT') }</kbd>
<div className={styles['label']}>+</div> <div className={styles['label']}>+</div>
<kbd>←</kbd> <kbd>←</kbd>
</div> </div>
@ -532,7 +532,7 @@ const Settings = () => {
</div> </div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}> <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>1</kbd> <kbd>1</kbd>
<div className={styles['label']}>to</div> <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_TO') }</div>
<kbd>5</kbd> <kbd>5</kbd>
</div> </div>
</div> </div>
@ -549,7 +549,7 @@ const Settings = () => {
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_EXIT_BACK') }</div> <div className={styles['label']}>{ t('SETTINGS_SHORTCUT_EXIT_BACK') }</div>
</div> </div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}> <div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>Esc</kbd> <kbd>{ t('SETTINGS_SHORTCUT_ESC') }</kbd>
</div> </div>
</div> </div>
</div> </div>
@ -559,7 +559,7 @@ const Settings = () => {
configureServerUrlModalOpen ? configureServerUrlModalOpen ?
<ModalDialog <ModalDialog
className={styles['configure-server-url-modal-container']} className={styles['configure-server-url-modal-container']}
title={'Configure streaming server url'} title={t('SETTINGS_SERVER_CONFIGURE_TITLE')}
buttons={configureServerUrlModalButtons} buttons={configureServerUrlModalButtons}
onCloseRequest={closeConfigureServerUrlModal}> onCloseRequest={closeConfigureServerUrlModal}>
<TextInput <TextInput
@ -567,7 +567,7 @@ const Settings = () => {
className={styles['server-url-input']} className={styles['server-url-input']}
type={'text'} type={'text'}
defaultValue={streamingServerUrlInput.value} defaultValue={streamingServerUrlInput.value}
placeholder={'Enter a streaming server url'} placeholder={t('SETTINGS_SERVER_CONFIGURE_INPUT')}
onSubmit={configureServerUrlOnSubmit} onSubmit={configureServerUrlOnSubmit}
/> />
</ModalDialog> </ModalDialog>

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

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