From fed28bf6ea6b63c8108bd05f3752293d7296e7a2 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 16 Dec 2022 16:03:26 +0100
Subject: [PATCH] refactor: translate remaining strings

---
 src/common/ColorInput/ColorInput.js           |  6 ++-
 src/common/MetaPreview/MetaLinks/MetaLinks.js |  4 +-
 src/common/MetaRow/MetaRow.js                 |  6 ++-
 .../MetaRowPlaceholder/MetaRowPlaceholder.js  |  6 ++-
 .../StreamingServerWarning.js                 |  8 ++--
 src/routes/Settings/Settings.js               | 38 +++++++++----------
 .../Settings/useProfileSettingsInputs.js      | 10 +++--
 7 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index 1c5d450bc..c60f02a23 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -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
diff --git a/src/common/MetaPreview/MetaLinks/MetaLinks.js b/src/common/MetaPreview/MetaLinks/MetaLinks.js
index c19f34e6e..a78927b18 100644
--- a/src/common/MetaPreview/MetaLinks/MetaLinks.js
+++ b/src/common/MetaPreview/MetaLinks/MetaLinks.js
@@ -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
             }
diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js
index 9494d5b60..7e7771881 100644
--- a/src/common/MetaRow/MetaRow.js
+++ b/src/common/MetaRow/MetaRow.js
@@ -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>
                                 :
diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
index f49c84c17..469faa349 100644
--- a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
+++ b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
@@ -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>
                         :
diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js
index 7ff2ff6b9..f095ce1d1 100644
--- a/src/common/StreamingServerWarning/StreamingServerWarning.js
+++ b/src/common/StreamingServerWarning/StreamingServerWarning.js
@@ -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>
     );
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index e1f8db275..f00acfddf 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -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>
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
index 417e4ec89..3c4c00bfc 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@@ -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({