Created english and italian translations file (#35)

nethesis · Oct 23, 2023 · 3e0e7da · 3e0e7da
1 parent 91906cf
commit 3e0e7da
Show file tree

Hide file tree

Showing 15 changed files with 401 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,12 +49,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-moment": "^1.1.2",
+    "react-i18next": "^12.1.5",
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
     "react-tooltip": "^5.11.1",
     "socket.io-client": "^4.5.3",
     "styled-components": "^5.3.6",
-    "webrtc-adapter": "^8.2.0"
+    "webrtc-adapter": "^8.2.0",
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -0,0 +1,27 @@
+{
+  "Common": {
+    "Intrude": "Intrude",
+    "Listen": "Listen"
+  },
+  "Tooltip": {
+    "Hangup": "Hangup",
+    "Pause": "Pause",
+    "Play": "Play",
+    "Mute": "Mute",
+    "Unmute": "Unmute",
+    "Transfer": "Transfer",
+    "Cancel transfer": "Cancel transfer",
+    "Collapse": "Collapse",
+    "Expand": "Expand",
+    "Keyboard": "Keyboard",
+    "Park": "Park",
+    "Back to call": "Back to call",
+    "Stop": "Stop",
+    "Delete": "Delete",
+    "Confirm": "Confirm",
+    "Start recording": "Start recording",
+    "Switch call": "Switch call",
+    "Call to transfer": "Call to transfer",
+    "Hangup and transfer": "Hangup and transfer"
+  }
+}
diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -0,0 +1,27 @@
+{
+  "Common": {
+    "Intrude": "Intromesso",
+    "Listen": "Ascolto"
+  },
+  "Tooltip": {
+    "Hangup": "Chiudi",
+    "Pause": "Pausa",
+    "Play": "Riproduci",
+    "Mute": "Muto",
+    "Unmute": "Togli muto",
+    "Transfer": "Trasferisci",
+    "Cancel transfer": "Annulla trasferimento",
+    "Collapse": "Riduci",
+    "Expand": "Espandi",
+    "Keyboard": "Tastiera",
+    "Park": "Parcheggia",
+    "Back to call": "Torna alla chiamata",
+    "Stop": "Stop",
+    "Delete": "Elimina",
+    "Confirm": "Conferma",
+    "Start recording": "Inizia registrazione",
+    "Switch call": "Scambia chiamata",
+    "Call to transfer": "Chiamata da trasferire",
+    "Hangup and transfer": "Chiudi e trasferisci"
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux'
 import { store } from './store'
 import { Base64 } from 'js-base64'
 import wakeUpWorker from './workers/wake_up'
+import loadI18n from './lib/i18n'
 
 import 'react-tooltip/dist/react-tooltip.css'
 import { useEventListener } from './utils'
@@ -58,6 +59,15 @@ export const PhoneIsland: FC<PhoneIslandProps> = ({ dataConfig, showAlways = fal
     store.dispatch.listen.setUpdateIntrudeStatus(true, data.to)
   })
 
+  const [firstRenderI18n, setFirstRenderI18n] = useState(true)
+  //initialize i18n
+  useEffect(() => {
+    if (firstRenderI18n) {
+      loadI18n()
+      setFirstRenderI18n(false)
+    }
+  }, [firstRenderI18n])
+
   return (
     <>
       <Provider store={store}>

diff --git a/src/components/AudioPlayerView/index.tsx b/src/components/AudioPlayerView/index.tsx
@@ -11,6 +11,7 @@ import { Button } from '../Button'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 import { Tooltip } from 'react-tooltip/dist/react-tooltip.min.cjs'
+import { useTranslation } from 'react-i18next'
 
 export const KeypadView: FC<KeypadViewTypes> = () => {
   const { audioPlayerTrackType, audioPlayerTrackName, audioPlayer, audioPlayerPlaying } =
@@ -26,6 +27,8 @@ export const KeypadView: FC<KeypadViewTypes> = () => {
     dispatch.player.pauseAudioPlayer()
   }
 
+  const { t } = useTranslation()
+
   return (
     <div className='pi-flex pi-gap-7 pi-flex-col'>
       <div className='pi-flex pi-gap-4'>
@@ -54,7 +57,7 @@ export const KeypadView: FC<KeypadViewTypes> = () => {
               variant='default'
               style={{ transform: 'scale(1.15)' }}
               data-tooltip-id='tooltip'
-              data-tooltip-content={audioPlayerPlaying ? 'Pause' : 'Play'}
+              data-tooltip-content={audioPlayerPlaying ? `${t('Tooltip.Pause')}` : `${t('Tooltip.Play')}`}
             >
               {audioPlayerPlaying ? (
                 <FontAwesomeIcon icon={faPause} size='xl' />

diff --git a/src/components/CallView/Actions.tsx b/src/components/CallView/Actions.tsx
@@ -32,6 +32,7 @@ import { TransferActions } from '../TransferView'
 import { Tooltip } from 'react-tooltip/dist/react-tooltip.min.cjs'
 import { park } from '../../lib/phone/call'
 import { eventDispatch, useEventListener } from '../../utils'
+import { useTranslation } from 'react-i18next'
 
 const Actions: FC = () => {
   // Get multiple values from currentCall store
@@ -114,6 +115,8 @@ const Actions: FC = () => {
     }
   }
 
+  const { t } = useTranslation()
+
   return (
     <>
       <div className='pi-grid pi-grid-cols-4 pi-auto-cols-max pi-gap-y-5 pi-justify-items-center pi-place-items-center pi-justify-center'>
@@ -122,7 +125,7 @@ const Actions: FC = () => {
           active={paused ? true : false}
           onClick={() => (paused ? unpauseCurrentCall() : pauseCurrentCall())}
           data-tooltip-id='tooltip'
-          data-tooltip-content={paused ? 'Play' : 'Pause'}
+          data-tooltip-content={paused ? `${t('Tooltip.Play')}` : `${t('Tooltip.Pause')}`}
         >
           {paused ? (
             <FontAwesomeIcon size='xl' icon={faPlay} />
@@ -136,7 +139,7 @@ const Actions: FC = () => {
           active={muted ? true : false}
           onClick={() => (muted ? unmuteCurrentCall() : muteCurrentCall())}
           data-tooltip-id='tooltip'
-          data-tooltip-content={muted ? 'Unmute' : 'Mute'}
+          data-tooltip-content={muted ? `${t('Tooltip.Unmute')}` : `${t('Tooltip.Mute')}`}
         >
           {muted ? (
             <FontAwesomeIcon size='xl' icon={faMicrophoneSlash} />
@@ -149,7 +152,9 @@ const Actions: FC = () => {
           onClick={transferring ? calcelTransfer : transfer}
           variant='default'
           data-tooltip-id='tooltip'
-          data-tooltip-content={transferring ? 'Cancel transfer' : 'Transfer'}
+          data-tooltip-content={
+            transferring ? `${t('Tooltip.Cancel transfer')}` : `${t('Tooltip.Transfer')}`
+          }
         >
           {transferring ? (
             <FontAwesomeIcon className='' size='xl' icon={faArrowDownUpAcrossLine} />
@@ -162,7 +167,9 @@ const Actions: FC = () => {
           variant='transparent'
           onClick={() => toggleActionsExpanded()}
           data-tooltip-id='tooltip'
-          data-tooltip-content={actionsExpanded ? 'Collapse' : 'Expand'}
+          data-tooltip-content={
+            actionsExpanded ? `${t('Tooltip.Collapse')}` : `${t('Tooltip.Expand')}`
+          }
         >
           {actionsExpanded ? (
             <FontAwesomeIcon className='' size='xl' icon={faChevronUp} />
@@ -181,7 +188,7 @@ const Actions: FC = () => {
               variant='default'
               onClick={openKeypad}
               data-tooltip-id='tooltip'
-              data-tooltip-content='Keyboard'
+              data-tooltip-content={t('Tooltip.Keyboard')}
             >
               <FontAwesomeIcon size='xl' icon={faGridRound} />
             </Button>
@@ -190,7 +197,7 @@ const Actions: FC = () => {
               variant='default'
               onClick={parkAction}
               data-tooltip-id='tooltip'
-              data-tooltip-content='Park'
+              data-tooltip-content={t('Tooltip.Park')}
             >
               <FontAwesomeIcon size='xl' icon={faSquareParking} />
             </Button>

diff --git a/src/components/CallView/DisplayName.tsx b/src/components/CallView/DisplayName.tsx
@@ -6,6 +6,7 @@ import { StyledName } from '../../styles/Island.styles'
 import { motion } from 'framer-motion/dist/framer-motion'
 import { RootState } from '../../store'
 import { useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 
 const DisplayName: FC<DisplayNameProps> = () => {
   const [animateText, setAnimateText] = useState<boolean>(false)
@@ -17,6 +18,8 @@ const DisplayName: FC<DisplayNameProps> = () => {
   const { displayName } = useSelector((state: RootState) => state.currentCall)
   const intrudeListenStatus = useSelector((state: RootState) => state.listen)
 
+  const { t } = useTranslation()
+
   useLayoutEffect(() => {
     if (
       nameContainer.current &&
@@ -39,7 +42,7 @@ const DisplayName: FC<DisplayNameProps> = () => {
             ref={nameText}
           >
             {intrudeListenStatus?.isIntrudeExtension !== ''
-              ? 'Intrude' + '-' + intrudeListenStatus?.isIntrudeExtension
+              ? `${t('Common.Intrude')}` + '-' + intrudeListenStatus?.isIntrudeExtension
               : '-'}
           </div>
           <div className='pi-w-6 pi-absolute pi-right-0 pi-top-0 pi-h-full pi-bg-gradient-to-r pi-from-transparent pi-to-black'></div>
@@ -54,7 +57,7 @@ const DisplayName: FC<DisplayNameProps> = () => {
             ref={nameText}
           >
             {intrudeListenStatus?.isListenExtension !== ''
-              ? 'Listen' + '-' + intrudeListenStatus?.isListenExtension
+              ? `${t('Common.Listen')}` + '-' + intrudeListenStatus?.isListenExtension
               : '-'}
           </div>
           <div className='pi-w-6 pi-absolute pi-right-0 pi-top-0 pi-h-full pi-bg-gradient-to-r pi-from-transparent pi-to-black'></div>

diff --git a/src/components/CallView/index.tsx b/src/components/CallView/index.tsx
@@ -16,6 +16,7 @@ import { answerIncomingCall } from '../../lib/phone/call'
 import Avatar from './Avatar'
 import Actions from './Actions'
 import Hangup from '../Hangup'
+import { useTranslation } from 'react-i18next'
 
 function isAnswerVisible(outgoing: boolean, accepted: boolean): boolean {
   return !outgoing && !accepted
@@ -37,6 +38,8 @@ const CallView: FC<CallViewProps> = () => {
 
   const intrudeListenStatus = useSelector((state: RootState) => state.listen)
 
+  const { t } = useTranslation()
+
   return (
     <div className='pi-bg-red pi-content-center pi-justify-center'>
       <StyledCallView incoming={incoming} accepted={accepted} outgoing={outgoing} isOpen={isOpen}>
@@ -73,7 +76,7 @@ const CallView: FC<CallViewProps> = () => {
               <StyledDetails>
                 <span className='pi-justify-center pi-w-fit pi-relative pi-inline-block pi-font-bold pi-text-base'>
                   {' '}
-                  Intrude
+                  {t('Common.Intrude')}
                   {intrudeListenStatus?.isIntrudeExtension
                     ? ` - ${intrudeListenStatus?.isIntrudeExtension}`
                     : ''}
@@ -90,7 +93,7 @@ const CallView: FC<CallViewProps> = () => {
               <StyledDetails>
                 <span className='pi-justify-center pi-w-fit pi-relative pi-inline-block pi-font-bold pi-text-base'>
                   {' '}
-                  Listen
+                  {t('Common.Listen')}
                   {intrudeListenStatus?.isListenExtension
                     ? ` - ${intrudeListenStatus?.isListenExtension}`
                     : ''}
@@ -140,7 +143,7 @@ const CallView: FC<CallViewProps> = () => {
                 <FontAwesomeIcon className='pi-rotate-135 pi-w-6 pi-h-6' icon={faPhone} />
               </Button>
             ) : ( */}
-              <Hangup description='Hangup and transfer' />
+              <Hangup description={t('Tooltip.Hangup and transfer')} />
               {/* )} */}
               {/* The button to answer the incoming call */}
               {isAnswerVisible(outgoing, accepted) && (

diff --git a/src/components/Hangup.tsx b/src/components/Hangup.tsx
@@ -12,6 +12,7 @@ import { RootState } from '../store'
 import { Dispatch } from '../store'
 import { Tooltip } from 'react-tooltip/dist/react-tooltip.min.cjs'
 import { hangupAllExtensions } from '../lib/phone/call'
+import { useTranslation } from 'react-i18next'
 
 /**
  * Return the status of the
@@ -37,6 +38,8 @@ const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description })
     }
   }
 
+  const { t } = useTranslation()
+
   return (
     <>
       <div className={`pi-flex pi-justify-center ${transferring && 'pi-w-full'}`}>
@@ -47,7 +50,9 @@ const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description })
             variant='red'
             className='pi-gap-4 pi-font-medium pi-text-base pi-transition pi-min-w-12 pi-w-full'
             data-tooltip-id='tooltip'
-            data-tooltip-content={description && transferring ? description : 'Hangup'}
+            data-tooltip-content={
+              description && transferring ? description : `${t('Tooltip.Hangup')}`
+            }
           >
             <FontAwesomeIcon className='pi-rotate-135 pi-h-6 pi-w-6' icon={faPhone} />
             {transferring && description && (
@@ -71,5 +76,5 @@ export default Hangup
 interface HangupProps {
   clickCallback?: () => void
   isDestination?: boolean
-  description?: string
+  description?: any
 }
diff --git a/src/components/KeypadView/index.tsx b/src/components/KeypadView/index.tsx
@@ -12,6 +12,7 @@ import { sendDTMF } from '../../lib/webrtc/messages'
 import { backToCallView } from '../../lib/island/island'
 import { playDtmfAudio } from '../../lib/phone/call'
 import { Tooltip } from 'react-tooltip/dist/react-tooltip.min.cjs'
+import { useTranslation } from 'react-i18next'
 
 const DTMF_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '#']
 
@@ -38,6 +39,8 @@ const KeypadView: FC<KeypadViewTypes> = () => {
     return () => window.removeEventListener('keydown', handlePhysicalKeydown)
   }, [])
 
+  const { t } = useTranslation()
+
   return (
     <>
       {isOpen ? (
@@ -47,7 +50,7 @@ const KeypadView: FC<KeypadViewTypes> = () => {
               variant='transparent'
               onClick={backToCallView}
               data-tooltip-id='keyboard-tooltip'
-              data-tooltip-content='Back to call'
+              data-tooltip-content={t('Tooltip.Back to call')}
             >
               <FontAwesomeIcon size='xl' icon={faArrowLeft} />
             </Button>