fix(MetaDetails): added missing translation keys

src/components/Video/Video.js

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
+const { useTranslation } = require('react-i18next');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
@@ -13,6 +14,7 @@ const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
 const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => {
+    const { t } = useTranslation();
     const routeFocused = useRouteFocused();
     const profile = useProfile();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
@@ -112,7 +114,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
                                 :
                                 scheduled ?
                                     <div className={styles['released-container']} title={'To be announced'}>
-                                        TBA
+                                        {t('TBA')}
                                     </div>
                                     :
                                     null
@@ -121,7 +123,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
                             {
                                 upcoming && !watched ?
                                     <div className={styles['upcoming-container']}>
-                                        <div className={styles['flag-label']}>Upcoming</div>
+                                        <div className={styles['flag-label']}>{t('UPCOMING')}</div>
                                     </div>
                                     :
                                     null
@@ -130,7 +132,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
                                 watched ?
                                     <div className={styles['watched-container']}>
                                         <Icon className={styles['flag-icon']} name={'eye'} />
-                                        <div className={styles['flag-label']}>Watched</div>
+                                        <div className={styles['flag-label']}>{t('CTX_WATCHED')}</div>
                                     </div>
                                     :
                                     null

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js

@@ -56,9 +56,9 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
 
     return (
         <div className={classnames(className, styles['seasons-bar-container'])}>
-            <Button className={classnames(styles['prev-season-button'], { 'disabled': prevDisabled })} title={'Previous season'} data-action={'prev'} onClick={prevNextButtonOnClick}>
+            <Button className={classnames(styles['prev-season-button'], { 'disabled': prevDisabled })} title={t('PREV_SEASON')} data-action={'prev'} onClick={prevNextButtonOnClick}>
                 <Icon className={styles['icon']} name={'chevron-back'} />
-                <div className={styles['label']}>Prev</div>
+                <div className={styles['label']}>{t('BUTTON_PREV')}</div>
             </Button>
             <MultiselectMenu
                 className={styles['seasons-popup-label-container']}
@@ -67,8 +67,8 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
                 selectedOption={selectedSeason}
                 onSelect={seasonOnSelect}
             />
-            <Button className={classnames(styles['next-season-button'], { 'disabled': nextDisabled })} title={'Next season'} data-action={'next'} onClick={prevNextButtonOnClick}>
+            <Button className={classnames(styles['next-season-button'], { 'disabled': nextDisabled })} title={t('NEXT_SEASON')} data-action={'next'} onClick={prevNextButtonOnClick}>
-                <div className={styles['label']}>Next</div>
+                <div className={styles['label']}>{t('BUTTON_NEXT')}</div>
                 <Icon className={styles['icon']} name={'chevron-forward'} />
             </Button>
         </div>

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js

@@ -1,24 +1,26 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
+const { useTranslation } = require('react-i18next');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const styles = require('./styles');
 
 const SeasonsBarPlaceholder = ({ className }) => {
+    const { t } = useTranslation();
     return (
         <div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
             <div className={styles['prev-season-button']}>
                 <Icon className={styles['icon']} name={'chevron-back'} />
-                <div className={styles['label']}>Prev</div>
+                <div className={styles['label']}>{t('SEASON_PREV')}</div>
             </div>
             <div className={styles['seasons-popup-label-container']}>
-                <div className={styles['seasons-popup-label']}>Season 1</div>
+                <div className={styles['seasons-popup-label']}>{`${t('SEASON')} 1`}</div>
                 <Icon className={styles['seasons-popup-icon']} name={'caret-down'} />
             </div>
             <div className={styles['next-season-button']}>
-                <div className={styles['label']}>Next</div>
+                <div className={styles['label']}>{t('SEASON_NEXT')}</div>
                 <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>
         </div>

src/routes/MetaDetails/VideosList/VideosList.js

@@ -122,7 +122,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                         <div className={styles['message-container']}>
                             <EpisodePicker className={styles['episode-picker']} onSubmit={onSeasonSearch} />
                             <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
-                            <div className={styles['label']}>No videos found for this meta!</div>
+                            <div className={styles['label']}>{t('ERR_NO_VIDEOS_FOR_META')}</div>
                         </div>
                         :
                         <React.Fragment>

src/routes/Player/NextVideoPopup/NextVideoPopup.js

@@ -7,8 +7,10 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
 const { CONSTANTS, useProfile } = require('stremio/common');
 const { Button, Image } = require('stremio/components');
 const styles = require('./styles');
+const { useTranslation } = require('react-i18next');
 
 const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested }) => {
+    const { t } = useTranslation();
     const profile = useProfile();
     const blurPosterImage = profile.settings.hideSpoilers && metaItem.type === 'series';
     const watchNowButtonRef = React.useRef(null);
@@ -65,7 +67,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
                     {
                         typeof metaItem?.name === 'string' ?
                             <div className={styles['name']}>
-                                <span className={styles['label']}>Next on</span> { metaItem.name }
+                                <span className={styles['label']}>{t('PLAYER_NEXT_VIDEO_TITLE_SHORT')}</span> { metaItem.name }
                             </div>
                             :
                             null
@@ -82,11 +84,11 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
                 <div className={styles['buttons-container']}>
                     <Button className={classnames(styles['button-container'], styles['dismiss'])} onClick={onDismissButtonClick}>
                         <Icon className={styles['icon']} name={'close'} />
-                        <div className={styles['label']}>Dismiss</div>
+                        <div className={styles['label']}>{t('PLAYER_NEXT_VIDEO_BUTTON_DISMISS')}</div>
                     </Button>
                     <Button ref={watchNowButtonRef} className={classnames(styles['button-container'], styles['play-button'])} onClick={onWatchNowButtonClick}>
                         <Icon className={styles['icon']} name={'play'} />
-                        <div className={styles['label']}>Watch Now</div>
+                        <div className={styles['label']}>{t('PLAYER_NEXT_VIDEO_BUTTON_WATCH')}</div>
                     </Button>
                 </div>
             </div>

src/routes/Player/StatisticsMenu/StatisticsMenu.js

@@ -1,20 +1,22 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
+const { useTranslation } = require('react-i18next');
 const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const styles = require('./styles.less');
 
 const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
+    const { t } = useTranslation();
     return (
         <div className={classNames(className, styles['statistics-menu-container'])}>
             <div className={styles['title']}>
-                Statistics
+                {t('PLAYER_STATISTICS')}
             </div>
             <div className={styles['stats']}>
                 <div className={styles['stat']}>
                     <div className={styles['label']}>
-                        Peers
+                        {t('PLAYER_PEERS')}
                     </div>
                     <div className={styles['value']}>
                         { peers }
@@ -22,7 +24,7 @@ const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
                 </div>
                 <div className={styles['stat']}>
                     <div className={styles['label']}>
-                        Speed
+                        {t('PLAYER_SPEED')}
                     </div>
                     <div className={styles['value']}>
                         { speed } MB/s
@@ -30,7 +32,7 @@ const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
                 </div>
                 <div className={styles['stat']}>
                     <div className={styles['label']}>
-                        Completed
+                        {t('PLAYER_COMPLETED')}
                     </div>
                     <div className={styles['value']}>
                         { Math.min(completed, 100) } %
@@ -39,7 +41,7 @@ const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
             </div>
             <div className={styles['info-hash']}>
                 <div className={styles['label']}>
-                    Info Hash
+                    {t('PLAYER_INFO_HASH')}
                 </div>
                 <div className={styles['value']}>
                     { infoHash }