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: 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 { useServices } = require('stremio/services');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const MetaItem = require('stremio/common/MetaItem'); const MetaItem = require('stremio/common/MetaItem');
const { t } = require('i18next');
const OPTIONS = [ const OPTIONS = [
{ label: 'Play', value: 'play' }, { label: 'LIBRARY_PLAY', value: 'play' },
{ label: 'Details', value: 'details' }, { label: 'LIBRARY_DETAILS', value: 'details' },
{ label: 'Dismiss', value: 'dismiss' }, { label: 'LIBRARY_RESUME_DISMISS', value: 'dismiss' },
{ label: 'Remove', value: 'remove' }, { label: 'LIBRARY_REMOVE', value: 'remove' },
]; ];
const LibItem = ({ _id, removable, ...props }) => { const LibItem = ({ _id, removable, ...props }) => {
const { core } = useServices(); const { core } = useServices();
const options = React.useMemo(() => { const options = React.useMemo(() => {
return OPTIONS.filter(({ value }) => { return OPTIONS
switch (value) { .filter(({ value }) => {
case 'play': switch (value) {
return props.deepLinks && typeof props.deepLinks.player === 'string'; case 'play':
case 'details': return props.deepLinks && typeof props.deepLinks.player === 'string';
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string'); case 'details':
case 'dismiss': return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress); case 'dismiss':
case 'remove': return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress);
return typeof _id === 'string' && removable; case 'remove':
} return typeof _id === 'string' && removable;
}); }
})
.map((option) => ({
...option,
label: t(option.label)
}));
}, [_id, removable, props.progress, props.deepLinks]); }, [_id, removable, props.progress, props.deepLinks]);
const optionOnSelect = React.useCallback((event) => { const optionOnSelect = React.useCallback((event) => {
if (typeof props.optionOnSelect === 'function') { 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 SearchBar = require('./SearchBar');
const NavMenu = require('./NavMenu'); const NavMenu = require('./NavMenu');
const styles = require('./styles'); const styles = require('./styles');
const { t } = require('i18next');
const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => { const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => {
const backButtonOnClick = React.useCallback(() => { const backButtonOnClick = React.useCallback(() => {
@ -54,7 +55,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
<div className={styles['spacing']} /> <div className={styles['spacing']} />
{ {
addonsButton ? 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'} /> <Icon className={styles['icon']} icon={'ic_addons'} />
</Button> </Button>
: :
@ -62,7 +63,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
} }
{ {
fullscreenButton ? 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'} /> <Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
</Button> </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-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> </div>
<Button className={styles['logout-button-container']} title={profile.auth === null ? `${t('LOG_IN')} / ${t('SIGN_UP')}` : t('LOG_OUT')} href={'#/intro'} onClick={logoutButtonOnClick}> <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> <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} ref={searchInputRef}
className={styles['search-input']} className={styles['search-input']}
type={'text'} type={'text'}
placeholder={t('SEARCH_PLACEHOLDER')} placeholder={t('SEARCH_OR_PASTE_LINK')}
defaultValue={query} defaultValue={query}
tabIndex={-1} tabIndex={-1}
onChange={queryInputOnChange} onChange={queryInputOnChange}
@ -56,7 +56,7 @@ const SearchBar = ({ className, query, active }) => {
/> />
: :
<div className={styles['search-input']}> <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> </div>
} }
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}> <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
@ -77,7 +77,7 @@ const SearchBarFallback = ({ className }) => {
return ( return (
<label className={classnames(className, styles['search-bar-container'])}> <label className={classnames(className, styles['search-bar-container'])}>
<div className={styles['search-input']}> <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> </div>
<Button className={styles['submit-button-container']} tabIndex={-1}> <Button className={styles['submit-button-container']} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_search_link'} /> <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'}> <MainNavBars className={styles['addons-container']} route={'addons'}>
<div className={styles['addons-content']}> <div className={styles['addons-content']}>
<div className={styles['selectable-inputs-container']}> <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'} /> <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> </Button>
{selectInputs.map((selectInput, index) => ( {selectInputs.map((selectInput, index) => (
<Multiselect <Multiselect
@ -194,15 +194,15 @@ const Addons = ({ urlParams, queryParams }) => {
addAddonModalOpen ? addAddonModalOpen ?
<ModalDialog <ModalDialog
className={styles['add-addon-modal-container']} className={styles['add-addon-modal-container']}
title={'Add addon'} title={t('ADD_ADDON')}
buttons={addAddonModalButtons} buttons={addAddonModalButtons}
onCloseRequest={closeAddAddonModal}> 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 <TextInput
ref={addAddonUrlInputRef} ref={addAddonUrlInputRef}
className={styles['addon-url-input']} className={styles['addon-url-input']}
type={'text'} type={'text'}
placeholder={'Paste addon URL'} placeholder={t('PASTE_ADDON_URL')}
autoFocus={true} autoFocus={true}
onSubmit={addAddonOnSubmit} onSubmit={addAddonOnSubmit}
/> />

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

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

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

@ -57,8 +57,8 @@ const StreamsList = ({ className, ...props }) => {
options: [ options: [
{ {
value: ALL_ADDONS_KEY, value: ALL_ADDONS_KEY,
label: 'All', label: t('ALL_ADDONS'),
title: 'All' title: t('ALL_ADDONS')
}, },
...Object.keys(streamsByAddon).map((transportUrl) => ({ ...Object.keys(streamsByAddon).map((transportUrl) => ({
value: 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 VolumeSlider = require('./VolumeSlider');
const styles = require('./styles'); const styles = require('./styles');
const { useBinaryState } = require('stremio/common'); const { useBinaryState } = require('stremio/common');
const { t } = require('i18next');
const ControlBar = ({ const ControlBar = ({
className, className,
@ -122,18 +123,18 @@ const ControlBar = ({
onSeekRequested={onSeekRequested} onSeekRequested={onSeekRequested}
/> />
<div className={styles['control-bar-buttons-container']}> <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'} /> <Icon className={styles['icon']} icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'} />
</Button> </Button>
{ {
nextVideo !== null ? 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'} /> <Icon className={styles['icon']} icon={'ic_play_next'} />
</Button> </Button>
: :
null 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 <Icon
className={styles['icon']} className={styles['icon']}
icon={ icon={

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

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

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

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