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: add translations

Browse source
This commit is contained in:
Tim 2022-12-15 17:46:55 +01:00
parent 329812ff8f
commit 87fb0c5af8
12 changed files with 67 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/common/LibItem/LibItem.js
View file

@ -4,29 +4,35 @@ const React = require('react');
const { useServices } = require('stremio/services');
const PropTypes = require('prop-types');
const MetaItem = require('stremio/common/MetaItem');
const { t } = require('i18next');
const OPTIONS = [
{ label: 'Play', value: 'play' },
{ label: 'Details', value: 'details' },
{ label: 'Dismiss', value: 'dismiss' },
{ label: 'Remove', value: 'remove' },
{ label: 'LIBRARY_PLAY', value: 'play' },
{ label: 'LIBRARY_DETAILS', value: 'details' },
{ label: 'LIBRARY_RESUME_DISMISS', value: 'dismiss' },
{ label: 'LIBRARY_REMOVE', value: 'remove' },
];
const LibItem = ({ _id, removable, ...props }) => {
const { core } = useServices();
const options = React.useMemo(() => {
return OPTIONS.filter(({ value }) => {
switch (value) {
case 'play':
return props.deepLinks && typeof props.deepLinks.player === 'string';
case 'details':
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
case 'dismiss':
return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress);
case 'remove':
return typeof _id === 'string' && removable;
}
});
return OPTIONS
.filter(({ value }) => {
switch (value) {
case 'play':
return props.deepLinks && typeof props.deepLinks.player === 'string';
case 'details':
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
case 'dismiss':
return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress);
case 'remove':
return typeof _id === 'string' && removable;
}
})
.map((option) => ({
...option,
label: t(option.label)
}));
}, [_id, removable, props.progress, props.deepLinks]);
const optionOnSelect = React.useCallback((event) => {
if (typeof props.optionOnSelect === 'function') {

5
src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -10,6 +10,7 @@ const useFullscreen = require('stremio/common/useFullscreen');
const SearchBar = require('./SearchBar');
const NavMenu = require('./NavMenu');
const styles = require('./styles');
const { t } = require('i18next');
const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => {
const backButtonOnClick = React.useCallback(() => {
@ -54,7 +55,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
<div className={styles['spacing']} />
{
addonsButton ?
<Button className={styles['button-container']} href={'#/addons'} title={'Addons'} tabIndex={-1}>
<Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_addons'} />
</Button>
:
@ -62,7 +63,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
}
{
fullscreenButton ?
<Button className={styles['button-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
</Button>
:

2
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -48,7 +48,7 @@ const NavMenuContent = ({ onClick }) => {
}}
/>
<div className={styles['email-container']}>
<div className={styles['email-label']}>{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}</div>
<div className={styles['email-label']}>{profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}</div>
</div>
<Button className={styles['logout-button-container']} title={profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>{profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')}</div>

6
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -48,7 +48,7 @@ const SearchBar = ({ className, query, active }) => {
ref={searchInputRef}
className={styles['search-input']}
type={'text'}
placeholder={t('SEARCH_PLACEHOLDER')}
placeholder={t('SEARCH_OR_PASTE_LINK')}
defaultValue={query}
tabIndex={-1}
onChange={queryInputOnChange}
@ -56,7 +56,7 @@ const SearchBar = ({ className, query, active }) => {
/>
:
<div className={styles['search-input']}>
<div className={styles['placeholder-label']}>{ t('SEARCH_PLACEHOLDER') }</div>
<div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
</div>
}
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
@ -77,7 +77,7 @@ const SearchBarFallback = ({ className }) => {
return (
<label className={classnames(className, styles['search-bar-container'])}>
<div className={styles['search-input']}>
<div className={styles['placeholder-label']}>{ t('SEARCH_PLACEHOLDER') }</div>
<div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
</div>
<Button className={styles['submit-button-container']} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_search_link'} />

10
src/routes/Addons/Addons.js
View file

@ -80,9 +80,9 @@ const Addons = ({ urlParams, queryParams }) => {
<MainNavBars className={styles['addons-container']} route={'addons'}>
<div className={styles['addons-content']}>
<div className={styles['selectable-inputs-container']}>
<Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
<Button className={styles['add-button-container']} title={t('ADD_ADDON')} onClick={openAddAddonModal}>
<Icon className={styles['icon']} icon={'ic_plus'} />
<div className={styles['add-button-label']}>Add addon</div>
<div className={styles['add-button-label']}>{ t('ADD_ADDON') }</div>
</Button>
{selectInputs.map((selectInput, index) => (
<Multiselect
@ -194,15 +194,15 @@ const Addons = ({ urlParams, queryParams }) => {
addAddonModalOpen ?
<ModalDialog
className={styles['add-addon-modal-container']}
title={'Add addon'}
title={t('ADD_ADDON')}
buttons={addAddonModalButtons}
onCloseRequest={closeAddAddonModal}>
<div className={styles['notice']}>You can add an addon via an external link, which will appear under Installed addons.</div>
<div className={styles['notice']}>{ t('ADD_ADDON_DESCRIPTION') }</div>
<TextInput
ref={addAddonUrlInputRef}
className={styles['addon-url-input']}
type={'text'}
placeholder={'Paste addon URL'}
placeholder={t('PASTE_ADDON_URL')}
autoFocus={true}
onSubmit={addAddonOnSubmit}
/>

9
src/routes/Addons/useSelectableInputs.js
View file

@ -1,10 +1,11 @@
// Copyright (C) 2017-2022 Smart code 203358507
const { t } = require('i18next');
const React = require('react');
const mapSelectableInputs = (installedAddons, remoteAddons) => {
const catalogSelect = {
title: 'Select catalog',
title: t('SELECT_CATALOG'),
options: remoteAddons.selectable.catalogs
.concat(installedAddons.selectable.catalogs)
.map(({ name, deepLinks }) => ({
@ -29,11 +30,11 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
}
};
const typeSelect = {
title: 'Select type',
title: t('SELECT_TYPE'),
options: installedAddons.selected !== null ?
installedAddons.selectable.types.map(({ type, deepLinks }) => ({
value: deepLinks.addons,
label: type !== null ? type : 'All'
label: type !== null ? type : t('TYPE_ALL')
}))
:
remoteAddons.selectable.types.map(({ type, deepLinks }) => ({
@ -51,7 +52,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
renderLabelText: () => {
return installedAddons.selected !== null ?
installedAddons.selected.request.type === null ?
'All'
t('TYPE_ALL')
:
installedAddons.selected.request.type
:

4
src/routes/Discover/useSelectableInputs.js
View file

@ -14,7 +14,7 @@ const translateOption = (t, option, translateKeyPrefix = '') => {
const mapSelectableInputs = (discover, t) => {
const typeSelect = {
title: 'Select type',
title: t('SELECT_TYPE'),
options: discover.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.discover,
@ -32,7 +32,7 @@ const mapSelectableInputs = (discover, t) => {
}
};
const catalogSelect = {
title: 'Select catalog',
title: t('SELECT_CATALOG'),
options: discover.selectable.catalogs
.map(({ name, addon, deepLinks }) => ({
value: deepLinks.discover,

6
src/routes/Library/useSelectableInputs.js
View file

@ -14,11 +14,11 @@ const translateOption = (t, option, translateKeyPrefix = '') => {
const mapSelectableInputs = (library, t) => {
const typeSelect = {
title: 'Select type',
title: t('SELECT_TYPE'),
options: library.selectable.types
.map(({ type, deepLinks }) => ({
value: deepLinks.library,
label: type === null ? 'All' : translateOption(t, type, 'TYPE_')
label: type === null ? t('TYPE_ALL') : translateOption(t, type, 'TYPE_')
})),
selected: library.selectable.types
.filter(({ selected }) => selected)
@ -28,7 +28,7 @@ const mapSelectableInputs = (library, t) => {
}
};
const sortSelect = {
title: 'Select sort',
title: t('SELECT_SORT'),
options: library.selectable.sorts
.map(({ sort, deepLinks }) => ({
value: deepLinks.library,

4
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -57,8 +57,8 @@ const StreamsList = ({ className, ...props }) => {
options: [
{
value: ALL_ADDONS_KEY,
label: 'All',
title: 'All'
label: t('ALL_ADDONS'),
title: t('ALL_ADDONS')
},
...Object.keys(streamsByAddon).map((transportUrl) => ({
value: transportUrl,

7
src/routes/Player/ControlBar/ControlBar.js
View file

@ -10,6 +10,7 @@ const SeekBar = require('./SeekBar');
const VolumeSlider = require('./VolumeSlider');
const styles = require('./styles');
const { useBinaryState } = require('stremio/common');
const { t } = require('i18next');
const ControlBar = ({
className,
@ -122,18 +123,18 @@ const ControlBar = ({
onSeekRequested={onSeekRequested}
/>
<div className={styles['control-bar-buttons-container']}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof paused !== 'boolean' })} title={paused ? 'Play' : 'Pause'} tabIndex={-1} onClick={onPlayPauseButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof paused !== 'boolean' })} title={paused ? t('PLAYER_PLAY') : t('PLAYER_PAUSE')} tabIndex={-1} onClick={onPlayPauseButtonClick}>
<Icon className={styles['icon']} icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'} />
</Button>
{
nextVideo !== null ?
<Button className={classnames(styles['control-bar-button'])} title={'Next Video'} tabIndex={-1} onClick={onNextVideoButtonClick}>
<Button className={classnames(styles['control-bar-button'])} title={t('PLAYER_NEXT_VIDEO')} tabIndex={-1} onClick={onNextVideoButtonClick}>
<Icon className={styles['icon']} icon={'ic_play_next'} />
</Button>
:
null
}
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof muted !== 'boolean' })} title={muted ? 'Unmute' : 'Mute'} tabIndex={-1} onClick={onMuteButtonClick}>
<Button className={classnames(styles['control-bar-button'], { 'disabled': typeof muted !== 'boolean' })} title={muted ? t('PLAYER_UNMUTE') : t('PLAYER_MUTE')} tabIndex={-1} onClick={onMuteButtonClick}>
<Icon
className={styles['icon']}
icon={

8
src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
View file

@ -173,7 +173,7 @@ const SubtitlesMenu = React.memo((props) => {
null
}
<div className={styles['languages-container']}>
<div className={styles['languages-header']}>Subtitles Languages</div>
<div className={styles['languages-header']}>{ t('PLAYER_SUBTITLES_LANGUAGES') }</div>
<div className={styles['languages-list']}>
<Button title={t('OFF')} className={classnames(styles['language-option'], { 'selected': selectedSubtitlesLanguage === null })} onClick={subtitlesLanguageOnClick}>
<div className={styles['language-label']}>{ t('OFF') }</div>
@ -198,7 +198,7 @@ const SubtitlesMenu = React.memo((props) => {
</div>
</div>
<div className={styles['variants-container']}>
<div className={styles['variants-header']}>Subtitles Variants</div>
<div className={styles['variants-header']}>{ t('PLAYER_SUBTITLES_VARIANTS') }</div>
{
subtitlesTracksForLanguage.length > 0 ?
<div className={styles['variants-list']}>
@ -217,7 +217,7 @@ const SubtitlesMenu = React.memo((props) => {
:
<div className={styles['no-variants-container']}>
<div className={styles['no-variants-label']}>
Subtitles are disabled
{ t('PLAYER_SUBTITLES_DISABLED') }
</div>
</div>
}
@ -256,7 +256,7 @@ const SubtitlesMenu = React.memo((props) => {
/>
<DiscreteSelectInput
className={styles['discrete-input']}
label={'Vertical position'}
label={t('PLAYER_SUBTITLES_VERTICAL_POSIITON')}
value={
typeof props.selectedSubtitlesTrackId === 'string' ?
props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset) ? `${props.subtitlesOffset}%` : '--'

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

@ -182,22 +182,22 @@ const Settings = () => {
</div>
{
profile.auth !== null ?
<Button className={styles['logout-button-container']} title={'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>Log out</div>
<Button className={styles['logout-button-container']} title={ t('LOG_OUT') } href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>{ t('LOG_OUT') }</div>
</Button>
:
null
}
</div>
<Button className={styles['user-panel-container']} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
<div className={styles['user-panel-label']}>User Panel</div>
<div className={styles['user-panel-label']}>{ t('USER_PANEL') }</div>
</Button>
</div>
{
profile.auth === null ?
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Log in / Sign up'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['label']}>Log in / Sign up</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={`${t('LOG_IN')} / ${t('SIGN_UP')}`} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['label']}>{ t('LOG_IN') } / { t('SIGN_UP') }</div>
</Button>
</div>
:
@ -205,7 +205,7 @@ const Settings = () => {
}
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Interface language</div>
<div className={styles['label']}>{ t('SETTINGS_INTERFACE_LANGUAGE') }</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
@ -219,7 +219,7 @@ const Settings = () => {
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'} disabled={true} tabIndex={-1} onClick={authenticateTraktOnClick}>
<Icon className={styles['icon']} icon={'ic_trakt'} />
<div className={styles['label']}>Authenticate</div>
<div className={styles['label']}>{ t('SETTINGS_TRAKT_AUTHENTICATE') }</div>
</Button>
</div>
<div className={styles['option-container']}>
@ -228,7 +228,7 @@ const Settings = () => {
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Import'} disabled={true} tabIndex={-1} onClick={importFacebookOnClick}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<div className={styles['label']}>Import</div>
<div className={styles['label']}>{ t('SETTINGS_FACEBOOK_IMPORT') }</div>
</Button>
</div>
<div className={styles['option-container']}>
@ -237,7 +237,7 @@ const Settings = () => {
</div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Subscribe'} disabled={true} tabIndex={-1} onClick={subscribeCalendarOnClick}>
<Icon className={styles['icon']} icon={'ic_calendar'} />
<div className={styles['label']}>Subscribe</div>
<div className={styles['label']}>{ t('SETTINGS_CALENDAR_SUBSCRIBE') }</div>
</Button>
</div>
<div className={styles['option-container']}>
@ -504,7 +504,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Toggle Subtitles Menu</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_MENU_SUBTITLES') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>S</kbd>
@ -512,7 +512,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Toggle Info Menu</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_MENU_INFO') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>I</kbd>
@ -528,7 +528,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Navigate Between Menus</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_NAVIGATE_MENUS') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>1</kbd>
@ -538,7 +538,7 @@ const Settings = () => {
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Go to Search</div>
<div className={styles['label']}>{ t('SETTINGS_SHORTCUT_GO_TO_SEARCH') }</div>
</div>
<div className={classnames(styles['option-input-container'], styles['shortcut-container'])}>
<kbd>0</kbd>