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

fix hardcoded titles with no translations

Browse source
This commit is contained in:
Botzy 2025-05-27 18:20:18 +03:00
parent 51a1da958b
commit 3c249e5925
12 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/Toast/ToastItem/ToastItem.js
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507 // Copyright (C) 2017-2023 Smart code 203358507
const React = require('react'); const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Icon } = require('@stremio/stremio-icons/react');
@ -8,6 +9,7 @@ const { Button } = require('stremio/components');
const styles = require('./styles'); const styles = require('./styles');
const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => { const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => {
const { t } = useTranslation();
const type = React.useMemo(() => { const type = React.useMemo(() => {
return ['success', 'alert', 'info', 'error'].includes(props.type) ? return ['success', 'alert', 'info', 'error'].includes(props.type) ?
props.type props.type
@ -74,7 +76,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
null null
} }
</div> </div>
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}> <Button className={styles['close-button-container']} title={t('BUTTON_CLOSE')} tabIndex={-1} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} name={'close'} /> <Icon className={styles['icon']} name={'close'} />
</Button> </Button>
</Button> </Button>

4
src/components/AddonDetailsModal/AddonDetailsModal.js
View file

@ -143,7 +143,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
return addonDetails.remoteAddon?.content.type === 'Ready' ? addonDetails.remoteAddon.content.content.manifest.background : null; return addonDetails.remoteAddon?.content.type === 'Ready' ? addonDetails.remoteAddon.content.content.manifest.background : null;
}, [addonDetails.remoteAddon]); }, [addonDetails.remoteAddon]);
return ( return (
<ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} background={modalBackground} onCloseRequest={onCloseRequest}> <ModalDialog className={styles['addon-details-modal-container']} title={t('STREMIO_COMMUNITY_ADDON')} buttons={modalButtons} background={modalBackground} onCloseRequest={onCloseRequest}>
{ {
addonDetails.selected === null ? addonDetails.selected === null ?
<div className={styles['addon-details-message-container']}> <div className={styles['addon-details-message-container']}>
@ -180,7 +180,7 @@ const AddonDetailsModalFallback = ({ onCloseRequest }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return <ModalDialog return <ModalDialog
className={styles['addon-details-modal-container']} className={styles['addon-details-modal-container']}
title={'Stremio addon'} title={t('STREMIO_COMMUNITY_ADDON')}
onCloseRequest={onCloseRequest} onCloseRequest={onCloseRequest}
> >
<div className={styles['addon-details-message-container']}> <div className={styles['addon-details-message-container']}>

2
src/components/ColorInput/ColorInput.js
View file

@ -82,7 +82,7 @@ const ColorInput = ({ className, value, dataset, onChange, ...props }) => {
} }
{ {
modalOpen ? modalOpen ?
<ModalDialog title={'Choose a color:'} buttons={modalButtons} onCloseRequest={closeModal} onClick={modalDialogOnClick}> <ModalDialog title={t('CHOOSE_COLOR')} buttons={modalButtons} onCloseRequest={closeModal} onClick={modalDialogOnClick}>
<ColorPicker className={styles['color-picker-container']} value={tempValue} onInput={colorPickerOnInput} /> <ColorPicker className={styles['color-picker-container']} value={tempValue} onInput={colorPickerOnInput} />
</ModalDialog> </ModalDialog>
: :

4
src/components/ModalDialog/ModalDialog.js
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507 // Copyright (C) 2017-2023 Smart code 203358507
const React = require('react'); const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { useRouteFocused, useModalsContainer } = require('stremio-router'); const { useRouteFocused, useModalsContainer } = require('stremio-router');
@ -10,6 +11,7 @@ const { Modal } = require('stremio-router');
const styles = require('./styles'); const styles = require('./styles');
const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, background, ...props }) => { const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, background, ...props }) => {
const { t } = useTranslation();
const routeFocused = useRouteFocused(); const routeFocused = useRouteFocused();
const modalsContainer = useModalsContainer(); const modalsContainer = useModalsContainer();
const modalContainerRef = React.useRef(null); const modalContainerRef = React.useRef(null);
@ -60,7 +62,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
<Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}> <Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}> <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
<div className={styles['modal-dialog-background']} style={{backgroundImage: `url('${background}')`}} /> <div className={styles['modal-dialog-background']} style={{backgroundImage: `url('${background}')`}} />
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}> <Button className={styles['close-button-container']} title={t('BUTTON_CLOSE')} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} name={'close'} /> <Icon className={styles['icon']} name={'close'} />
</Button> </Button>
<div className={styles['modal-dialog-content']}> <div className={styles['modal-dialog-content']}>

2
src/components/SharePrompt/SharePrompt.js
View file

@ -70,7 +70,7 @@ const SharePrompt = ({ className, url }) => {
onClick={selectInputContent} onClick={selectInputContent}
tabIndex={-1} tabIndex={-1}
/> />
<Button className={styles['copy-button']} title={'Copy to clipboard'} onClick={copyToClipboard}> <Button className={styles['copy-button']} title={t('CTX_COPY_TO_CLIPBOARD')} onClick={copyToClipboard}>
<Icon className={styles['icon']} name={'link'} /> <Icon className={styles['icon']} name={'link'} />
<div className={styles['label']}>{ t('COPY') }</div> <div className={styles['label']}>{ t('COPY') }</div>
</Button> </Button>

6
src/components/Video/Video.js
View file

@ -113,7 +113,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
</div> </div>
: :
scheduled ? scheduled ?
<div className={styles['released-container']} title={'To be announced'}> <div className={styles['released-container']} title={t('TBA')}>
{t('TBA')} {t('TBA')}
</div> </div>
: :
@ -147,10 +147,10 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
const renderMenu = React.useMemo(() => function renderMenu() { const renderMenu = React.useMemo(() => function renderMenu() {
return ( return (
<div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}> <div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
<Button className={styles['context-menu-option-container']} title={'Watch'}> <Button className={styles['context-menu-option-container']} title={t('CTX_WATCH')}>
<div className={styles['context-menu-option-label']}>{t('CTX_WATCH')}</div> <div className={styles['context-menu-option-label']}>{t('CTX_WATCH')}</div>
</Button> </Button>
<Button className={styles['context-menu-option-container']} title={watched ? 'Mark as non-watched' : 'Mark as watched'} onClick={toggleWatchedOnClick}> <Button className={styles['context-menu-option-container']} title={watched ? t('CTX_MARK_NON_WATCHED') : t('CTX_MARK_WATCHED')} onClick={toggleWatchedOnClick}>
<div className={styles['context-menu-option-label']}>{watched ? t('CTX_MARK_NON_WATCHED') : t('CTX_MARK_WATCHED')}</div> <div className={styles['context-menu-option-label']}>{watched ? t('CTX_MARK_NON_WATCHED') : t('CTX_MARK_WATCHED')}</div>
</Button> </Button>
<Button className={styles['context-menu-option-container']} title={seasonWatched ? t('CTX_UNMARK_REST') : t('CTX_MARK_REST')} onClick={toggleWatchedSeasonOnClick}> <Button className={styles['context-menu-option-container']} title={seasonWatched ? t('CTX_UNMARK_REST') : t('CTX_MARK_REST')} onClick={toggleWatchedSeasonOnClick}>

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

@ -124,7 +124,7 @@ const Addons = ({ urlParams, queryParams }) => {
value={search} value={search}
onChange={searchInputOnChange} onChange={searchInputOnChange}
/> />
<Button className={styles['filter-button']} title={'All filters'} onClick={openFiltersModal}> <Button className={styles['filter-button']} title={t('ALL_FILTERS')} onClick={openFiltersModal}>
<Icon className={styles['filter-icon']} name={'filters'} /> <Icon className={styles['filter-icon']} name={'filters'} />
</Button> </Button>
</div> </div>
@ -216,7 +216,7 @@ const Addons = ({ urlParams, queryParams }) => {
</div> </div>
{ {
filtersModalOpen ? filtersModalOpen ?
<ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}> <ModalDialog title={t('ADDONS_FILTERS')} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
{selectInputs.map((selectInput, index) => ( {selectInputs.map((selectInput, index) => (
<Multiselect <Multiselect
{...selectInput} {...selectInput}

6
src/routes/Discover/Discover.js
View file

@ -114,7 +114,7 @@ const Discover = ({ urlParams, queryParams }) => {
/> />
))} ))}
<div className={styles['filter-container']}> <div className={styles['filter-container']}>
<Button className={styles['filter-button']} title={'All filters'} onClick={openInputsModal}> <Button className={styles['filter-button']} title={t('ALL_FILTERS')} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} name={'filters'} /> <Icon className={styles['filter-icon']} name={'filters'} />
</Button> </Button>
</div> </div>
@ -123,7 +123,7 @@ const Discover = ({ urlParams, queryParams }) => {
discover.catalog !== null && !discover.catalog.installed ? discover.catalog !== null && !discover.catalog.installed ?
<div className={styles['missing-addon-warning-container']}> <div className={styles['missing-addon-warning-container']}>
<div className={styles['warning-label']}>{t('ERR_ADDON_NOT_INSTALLED')}</div> <div className={styles['warning-label']}>{t('ERR_ADDON_NOT_INSTALLED')}</div>
<Button className={styles['install-button']} title={'Install addon'} onClick={openAddonModal}> <Button className={styles['install-button']} title={t('INSTALL_ADDON')} onClick={openAddonModal}>
<div className={styles['label']}>{t('ADDON_INSTALL')}</div> <div className={styles['label']}>{t('ADDON_INSTALL')}</div>
</Button> </Button>
</div> </div>
@ -204,7 +204,7 @@ const Discover = ({ urlParams, queryParams }) => {
</div> </div>
{ {
inputsModalOpen ? inputsModalOpen ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}> <ModalDialog title={t('CATALOG_FILTERS')} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect <Multiselect
key={index} key={index}

4
src/routes/Intro/PasswordResetModal/PasswordResetModal.js
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507 // Copyright (C) 2017-2023 Smart code 203358507
const React = require('react'); const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const { useRouteFocused } = require('stremio-router'); const { useRouteFocused } = require('stremio-router');
const { usePlatform } = require('stremio/common'); const { usePlatform } = require('stremio/common');
@ -9,6 +10,7 @@ const CredentialsTextInput = require('../CredentialsTextInput');
const styles = require('./styles'); const styles = require('./styles');
const PasswordResetModal = ({ email, onCloseRequest }) => { const PasswordResetModal = ({ email, onCloseRequest }) => {
const { t } = useTranslation();
const routeFocused = useRouteFocused(); const routeFocused = useRouteFocused();
const platform = usePlatform(); const platform = usePlatform();
const [error, setError] = React.useState(''); const [error, setError] = React.useState('');
@ -45,7 +47,7 @@ const PasswordResetModal = ({ email, onCloseRequest }) => {
} }
}, [routeFocused]); }, [routeFocused]);
return ( return (
<ModalDialog className={styles['password-reset-modal-container']} title={'Password reset'} buttons={passwordResetModalButtons} onCloseRequest={onCloseRequest}> <ModalDialog className={styles['password-reset-modal-container']} title={t('PASSWORD_RESET')} buttons={passwordResetModalButtons} onCloseRequest={onCloseRequest}>
<CredentialsTextInput <CredentialsTextInput
ref={emailRef} ref={emailRef}
className={styles['credentials-text-input']} className={styles['credentials-text-input']}

4
src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507 // Copyright (C) 2017-2023 Smart code 203358507
const React = require('react'); const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Icon } = require('@stremio/stremio-icons/react');
@ -8,6 +9,7 @@ const { Button } = require('stremio/components');
const styles = require('./styles'); const styles = require('./styles');
const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onChange }) => { const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onChange }) => {
const { t } = useTranslation();
const buttonOnClick = React.useCallback((event) => { const buttonOnClick = React.useCallback((event) => {
if (typeof onChange === 'function') { if (typeof onChange === 'function') {
onChange({ onChange({
@ -22,7 +24,7 @@ const DiscreteSelectInput = ({ className, value, label, disabled, dataset, onCha
return ( return (
<div className={classnames(className, styles['discrete-input-container'], { 'disabled': disabled })}> <div className={classnames(className, styles['discrete-input-container'], { 'disabled': disabled })}>
<div className={styles['header']}>{label}</div> <div className={styles['header']}>{label}</div>
<div className={styles['input-container']} title={disabled ? `${label} is not configurable` : null}> <div className={styles['input-container']} title={disabled ? t('DISABLED_LABEL', { label }) : null}>
<Button className={classnames(styles['button-container'], { 'disabled': disabled })} data-type={'decrement'} onClick={buttonOnClick}> <Button className={classnames(styles['button-container'], { 'disabled': disabled })} data-type={'decrement'} onClick={buttonOnClick}>
<Icon className={styles['icon']} name={'remove'} /> <Icon className={styles['icon']} name={'remove'} />
</Button> </Button>

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

@ -219,9 +219,9 @@ const Settings = () => {
}} }}
/> />
<div className={styles['email-logout-container']}> <div className={styles['email-logout-container']}>
<div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}> <div className={styles['email-label-container']} title={profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}>
<div className={styles['email-label']}> <div className={styles['email-label']}>
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email} {profile.auth === null ? t('ANONYMOUS_USER') : profile.auth.user.email}
</div> </div>
</div> </div>
{ {
@ -273,7 +273,7 @@ const Settings = () => {
</Button> </Button>
</div> </div>
<div className={classnames(styles['option-container'], styles['link-container'])}> <div className={classnames(styles['option-container'], styles['link-container'])}>
<Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={'Source code'} target={'_blank'} href={`https://github.com/stremio/stremio-web/tree/${process.env.COMMIT_HASH}`}> <Button className={classnames(styles['option-input-container'], styles['link-input-container'])} title={t('SETTINGS_SOURCE_CODE')} target={'_blank'} href={`https://github.com/stremio/stremio-web/tree/${process.env.COMMIT_HASH}`}>
<div className={styles['label']}>{t('SETTINGS_SOURCE_CODE')}</div> <div className={styles['label']}>{t('SETTINGS_SOURCE_CODE')}</div>
</Button> </Button>
</div> </div>
@ -312,7 +312,7 @@ const Settings = () => {
<Icon className={styles['icon']} name={'trakt'} /> <Icon className={styles['icon']} name={'trakt'} />
<div className={styles['label']}>{t('SETTINGS_TRAKT')}</div> <div className={styles['label']}>{t('SETTINGS_TRAKT')}</div>
</div> </div>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Authenticate'} disabled={profile.auth === null} tabIndex={-1} onClick={toggleTraktOnClick}> <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={t('SETTINGS_TRAKT_AUTHENTICATE')} disabled={profile.auth === null} tabIndex={-1} onClick={toggleTraktOnClick}>
<div className={styles['label']}> <div className={styles['label']}>
{ profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE') } { profile.auth !== null && profile.auth.user !== null && profile.auth.user.trakt !== null ? t('LOG_OUT') : t('SETTINGS_TRAKT_AUTHENTICATE') }
</div> </div>

4
src/routes/Settings/URLsManager/URLsManager.tsx
View file

@ -46,11 +46,11 @@ const URLsManager = () => {
} }
</div> </div>
<div className={styles['footer']}> <div className={styles['footer']}>
<Button title={'Add URL'} className={styles['add-url']} onClick={onAdd}> <Button title={t('SETTINGS_SERVER_ADD_URL')} className={styles['add-url']} onClick={onAdd}>
<Icon name={'add'} className={styles['icon']} /> <Icon name={'add'} className={styles['icon']} />
{t('SETTINGS_SERVER_ADD_URL')} {t('SETTINGS_SERVER_ADD_URL')}
</Button> </Button>
<Button className={styles['reload']} title={'Reload'} onClick={reloadServer}> <Button className={styles['reload']} title={t('RELOAD')} onClick={reloadServer}>
<Icon name={'reset'} className={styles['icon']} /> <Icon name={'reset'} className={styles['icon']} />
<div className={styles['label']}>{t('RELOAD')}</div> <div className={styles['label']}>{t('RELOAD')}</div>
</Button> </Button>