translate details view

web/src/components/DialogTorrentDetailsContent/TorrentFunctions/index.jsx

@@ -4,6 +4,7 @@ import { playlistTorrHost, torrentsHost, viewedHost } from 'utils/Hosts'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Button } from '@material-ui/core'
 import ptt from 'parse-torrent-title'
+import { useTranslation } from 'react-i18next'
 
 import { SmallLabel, MainSectionButtonGroup } from './style'
 import { SectionSubName } from '../style'
@@ -19,18 +20,20 @@ const TorrentFunctions = memo(
       axios.post(viewedHost(), { action: 'rem', hash, file_index: -1 }).then(() => setViewedFileList())
     const fullPlaylistLink = `${playlistTorrHost()}/${encodeURIComponent(name || title || 'file')}.m3u?link=${hash}&m3u`
     const partialPlaylistLink = `${fullPlaylistLink}&fromlast`
+    // eslint-disable-next-line no-unused-vars
+    const { t } = useTranslation()
 
     return (
       <>
         {!isOnlyOnePlayableFile && !!viewedFileList?.length && (
           <>
-            <SmallLabel>Download Playlist</SmallLabel>
+            <SmallLabel>{t('DownloadPlaylist')}</SmallLabel>
             <SectionSubName mb={10}>
-              <strong>Latest file played:</strong> {latestViewedFileData?.title}.
+              <strong>{t('LatestFilePlayed')}</strong> {latestViewedFileData?.title}.
               {latestViewedFileData?.season && (
                 <>
                   {' '}
-                  Season: {latestViewedFileData?.season}. Episode: {latestViewedFileData?.episode}.
+                  {t('Season')}: {latestViewedFileData?.season}. {t('Episode')}: {latestViewedFileData?.episode}.
                 </>
               )}
             </SectionSubName>
@@ -38,39 +41,39 @@ const TorrentFunctions = memo(
             <MainSectionButtonGroup>
               <a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
                 <Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
-                  full
+                  {t('Full')}
                 </Button>
               </a>
 
               <a style={{ textDecoration: 'none' }} href={partialPlaylistLink}>
                 <Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
-                  from latest file
+                  {t('FromLatestFile')}
                 </Button>
               </a>
             </MainSectionButtonGroup>
           </>
         )}
-        <SmallLabel mb={10}>Torrent State</SmallLabel>
+        <SmallLabel mb={10}>{t('TorrentState')}</SmallLabel>
         <MainSectionButtonGroup>
           <Button onClick={() => removeTorrentViews()} variant='contained' color='primary' size='large'>
-            remove views
+            {t('RemoveViews')}
           </Button>
           <Button onClick={() => dropTorrent()} variant='contained' color='primary' size='large'>
-            reset torrent
+            {t('DropTorrent')}
           </Button>
         </MainSectionButtonGroup>
-        <SmallLabel mb={10}>Info</SmallLabel>
+        <SmallLabel mb={10}>{t('Info')}</SmallLabel>
         <MainSectionButtonGroup>
           {(isOnlyOnePlayableFile || !viewedFileList?.length) && (
             <a style={{ textDecoration: 'none' }} href={fullPlaylistLink}>
               <Button style={{ width: '100%' }} variant='contained' color='primary' size='large'>
-                download playlist
+                {t('DownloadPlaylist')}
               </Button>
             </a>
           )}
           <CopyToClipboard text={hash}>
             <Button variant='contained' color='primary' size='large'>
-              copy hash
+              {t('CopyHash')}
             </Button>
           </CopyToClipboard>
         </MainSectionButtonGroup>

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -7,6 +7,7 @@ import axios from 'axios'
 import { viewedHost } from 'utils/Hosts'
 import { GETTING_INFO, IN_DB } from 'torrentStates'
 import CircularProgress from '@material-ui/core/CircularProgress'
+import { useTranslation } from 'react-i18next'
 
 import { useUpdateCache, useGetSettings } from './customHooks'
 import DialogHeader from './DialogHeader'
@@ -44,6 +45,9 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
   const [seasonAmount, setSeasonAmount] = useState(null)
   const [selectedSeason, setSelectedSeason] = useState()
 
+  // eslint-disable-next-line no-unused-vars
+  const { t } = useTranslation()
+
   const {
     poster,
     hash,
@@ -115,7 +119,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
     <>
       <DialogHeader
         onClose={closeDialog}
-        title={isDetailedCacheView ? 'Detailed Cache View' : 'Torrent Details'}
+        title={isDetailedCacheView ? t('DetailedCacheView') : t('TorrentDetails')}
         {...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
       />
 
@@ -171,7 +175,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
 
             <CacheSection>
               <SectionHeader>
-                <SectionTitle mb={20}>Buffer</SectionTitle>
+                <SectionTitle mb={20}>{t('Buffer')}</SectionTitle>
                 {!settings?.PreloadBuffer && (
                   <SectionSubName>Enable &quot;Preload Buffer&quot; in settings to change buffer size</SectionSubName>
                 )}
@@ -190,16 +194,16 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                 size='large'
                 onClick={() => setIsDetailedCacheView(true)}
               >
-                Detailed cache view
+                {t('DetailedCacheView')}
               </Button>
             </CacheSection>
 
             <TorrentFilesSection>
-              <SectionTitle mb={20}>Torrent Content</SectionTitle>
+              <SectionTitle mb={20}>{t('TorrentContent')}</SectionTitle>
 
               {seasonAmount?.length > 1 && (
                 <>
-                  <SectionSubName mb={7}>Select Season</SectionSubName>
+                  <SectionSubName mb={7}>{t('SelectSeason')}</SectionSubName>
                   <ButtonGroup style={{ marginBottom: '30px' }} color='primary'>
                     {seasonAmount.map(season => (
                       <Button
@@ -212,7 +216,9 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                     ))}
                   </ButtonGroup>
 
-                  <SectionTitle mb={20}>Season {selectedSeason}</SectionTitle>
+                  <SectionTitle mb={20}>
+                    {t('Season')} {selectedSeason}
+                  </SectionTitle>
                 </>
               )}