Added missing icon and details during calls

nethesis · Feb 9, 2024 · c86d3b2 · c86d3b2
1 parent 84ab544
commit c86d3b2
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 120 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -27,5 +27,9 @@
   "DropdownContent": {
     "Microphones": "MICROPHONES",
     "Speakers": "SPEAKERS"
+  },
+  "Call": {
+    "In progress...": "In progress...",
+    "Outgoing call": "Outgoing call"
   }
 }
diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -22,10 +22,14 @@
     "Start recording": "Inizia registrazione",
     "Switch call": "Scambia chiamata",
     "Call to transfer": "Chiamata da trasferire",
-    "Hangup and transfer": "Chiudi e trasferisci"
+    "Hangup and transfer": "Trasferisci"
   },
   "DropdownContent": {
     "Microphones": "MICROFONI",
     "Speakers": "ALTOPARLANTI"
+  },
+  "Call": {
+    "In progress...": "In corso...",
+    "Outgoing call": "Chiamata in uscita"
   }
 }
diff --git a/src/components/CallView/Actions.tsx b/src/components/CallView/Actions.tsx
@@ -91,27 +91,7 @@ const Actions: FC = () => {
     eventDispatch('phone-island-call-parked', {})
   }
 
-  /**
-   * Event listner for phone-island-transfer-call event
-   */
-  useEventListener('phone-island-transfer-call', (data) => {
-    const transferNumber = data.to
-    handleAttendedTransfer(transferNumber)
-  })
-
-  async function handleAttendedTransfer(number: string) {
-    // Send attended transfer message
-    const transferringMessageSent = await attendedTransfer(number)
-    if (transferringMessageSent) {
-      // Set transferring and disable pause
-      dispatch.currentCall.updateCurrentCall({
-        transferring: true,
-        paused: false,
-      })
-      // Play the remote audio element
-      dispatch.player.playRemoteAudio()
-    }
-  }
+
 
   const { t } = useTranslation()
 

diff --git a/src/components/CallView/DisplayName.tsx b/src/components/CallView/DisplayName.tsx
@@ -71,9 +71,15 @@ const DisplayName: FC<DisplayNameProps> = () => {
             className={`pi-w-fit pi-relative pi-inline-block ${animateText && 'animated-text'}`}
             ref={nameText}
           >
-            {displayName && displayName === '<unknown>' ? 'PBX' : displayName && displayName}
+            {displayName && displayName === '<unknown>'
+              ? 'PBX'
+              : displayName
+              ? displayName
+              : t('Call.Outgoing call') || '-'}
+          </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>
-          <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>
         </NameMotion>
       )}
     </>

diff --git a/src/components/CallView/Number.tsx b/src/components/CallView/Number.tsx
@@ -5,12 +5,17 @@ import React, { type FC } from 'react'
 import { useSelector } from 'react-redux'
 import { RootState } from '../../store'
 import { StyledNumber } from '../../styles/Island.styles'
+import { t } from 'i18next'
 
 const Number: FC = () => {
   const { number } = useSelector((state: RootState) => state.currentCall)
   const { isOpen } = useSelector((state: RootState) => state.island)
 
-  return <StyledNumber isOpen={isOpen}>{number && number !== '<unknown>' && number}</StyledNumber>
+  return (
+    <StyledNumber isOpen={isOpen}>
+      {number && number !== '<unknown>' ? number : t('Call.In progress...') || '-'}
+    </StyledNumber>
+  )
 }
 
 export default Number
diff --git a/src/components/CallView/index.tsx b/src/components/CallView/index.tsx
@@ -6,7 +6,7 @@ import { StyledDetails, StyledCallView, StyledTopContent } from '../../styles/Is
 import { useSelector } from 'react-redux'
 import { RootState } from '../../store'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPhone, faEarListen, faHandPointUp } from '@fortawesome/free-solid-svg-icons'
+import { faPhone, faEarListen, faHandPointUp, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
 import { Button } from '../'
 import Timer from './Timer'
 import Number from './Number'
@@ -27,9 +27,11 @@ function isAnswerVisible(outgoing: boolean, accepted: boolean): boolean {
  */
 const CallView: FC<CallViewProps> = () => {
   // Get multiple values from currentCall state
-  const { incoming, accepted, outgoing, startTime, paused } = useSelector(
+  const { incoming, accepted, outgoing, startTime, paused, username, number } = useSelector(
     (state: RootState) => state.currentCall,
   )
+
+  const currentCallDetails: any = useSelector((state: RootState) => state.currentCall)
   // Get isOpen and view from island state
   const { isOpen } = useSelector((state: RootState) => state.island)
 
@@ -68,8 +70,62 @@ const CallView: FC<CallViewProps> = () => {
               }`}
               icon={faHandPointUp}
             />
-          ) : (
+          ) : number !== '' &&
+            currentCallDetails?.username !== '' &&
+            currentCallDetails?.username !== 'undefined' ? (
             <Avatar />
+          ) : incoming &&
+            (currentCallDetails?.username === '' ||
+              currentCallDetails?.username === 'undefined') ? (
+            <FontAwesomeIcon
+              // className='pi-relative pi-z-30 pi-h-12 pi-w-12 pi-rounded-sm pi-bg-cover'
+              className={`${
+                isOpen
+                  ? 'pi-relative pi-z-30 pi-h-12 pi-w-12 pi-rounded-sm pi-bg-cover pi--rotate-45'
+                  : 'pi-relative pi-z-30 pi-h-6 pi-w-6 pi-rounded-sm pi-bg-cover pi--rotate-45'
+              }`}
+              icon={faArrowLeft}
+            />
+          ) : accepted &&
+            !outgoing &&
+            (currentCallDetails?.username === '' ||
+              currentCallDetails?.username === 'undefined') ? (
+            <FontAwesomeIcon
+              // className='pi-relative pi-z-30 pi-h-12 pi-w-12 pi-rounded-sm pi-bg-cover'
+              className={`${
+                isOpen
+                  ? 'pi-relative pi-z-30 pi-h-12 pi-w-12 pi-rounded-sm pi-bg-cover pi--rotate-45'
+                  : 'pi-relative pi-z-30 pi-h-6 pi-w-6 pi-rounded-sm pi-bg-cover pi--rotate-45'
+              }`}
+              icon={faArrowLeft}
+            />
+          ) : outgoing &&
+            (currentCallDetails?.username === '' ||
+              currentCallDetails?.username === 'undefined') ? (
+            // set a loading avatar when the call is not attached to a user
+            <FontAwesomeIcon
+              className={`${
+                isOpen
+                  ? 'pi-relative pi-z-30 pi-h-12 pi-w-12 pi-rounded-sm pi-bg-cover pi-rotate-[135deg]'
+                  : 'pi-relative pi-z-30 pi-h-6 pi-w-6 pi-rounded-sm pi-bg-cover pi-rotate-[135deg]'
+              }`}
+              icon={faArrowLeft}
+            />
+          ) : outgoing &&
+            accepted &&
+            (currentCallDetails?.username === '' ||
+              currentCallDetails?.username === 'undefined') ? (
+            // set a loading avatar when the call is not attached to a user
+            <FontAwesomeIcon
+              className={`${
+                isOpen
+                  ? 'pi-relative pi-z-30 pi-h-12 pi-w-12 pi-rounded-sm pi-bg-cover pi-rotate-[135deg]'
+                  : 'pi-relative pi-z-30 pi-h-6 pi-w-6 pi-rounded-sm pi-bg-cover pi-rotate-[135deg]'
+              }`}
+              icon={faArrowLeft}
+            />
+          ) : (
+            <></>
           )}
           {isOpen ? (
             intrudeListenStatus?.isIntrude ? (

diff --git a/src/components/Hangup.tsx b/src/components/Hangup.tsx
@@ -19,8 +19,9 @@ import DropdownContent from './SwitchInputView/DropdownContent'
  * Return the status of the
  */
 const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description }) => {
-  const { transferring, incoming } = useSelector((state: RootState) => state.currentCall)
+  const { transferring, incoming, accepted } = useSelector((state: RootState) => state.currentCall)
   const dispatch = useDispatch<Dispatch>()
+  const { isOpen } = useSelector((state: RootState) => state.island)
 
   function handleHangup() {
     if (incoming) {
@@ -44,10 +45,21 @@ const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description })
   // Phone island footer section
   return (
     <>
-      <div className={`pi-flex pi-justify-center ${transferring && 'pi-w-full'}`}>
+      <div
+        className={` ${
+          transferring
+            ? 'pi-grid pi-w-full pi-space-x-2 pi-justify-start'
+            : 'pi-flex pi-justify-center'
+        }`}
+      >
         {/* The button to hangup the currentCall */}
-
-        <motion.div className={`${transferring && description ? 'pi-w-full' : 'pi-w-12'} pi-flex`}>
+        <motion.div
+          className={`${
+            transferring && description
+              ? 'pi-grid pi-grid-cols-[12rem,1rem] pi-ml-4 pi-justify-start'
+              : 'pi-flex pi-w-12'
+          } `}
+        >
           <Button
             onClick={() => handleHangup()}
             variant='red'
@@ -67,8 +79,17 @@ const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description })
               </motion.div>
             )}
           </Button>
-
-          <DropdownContent></DropdownContent>
+          {isOpen && accepted && (
+            <div
+              className={`${
+                transferring && description
+                  ? 'pi-grid pi-grid-cols-1 pi-ml-8'
+                  : 'pi-flex pi-items-center pi-justify-end pi-ml-16'
+              }`}
+            >
+              <DropdownContent data-stop-propagation={true}></DropdownContent>
+            </div>
+          )}
         </motion.div>
       </div>
       <Tooltip className='pi-z-20' id='tooltip' place='bottom' />

diff --git a/src/components/IslandMotion.tsx b/src/components/IslandMotion.tsx
@@ -32,9 +32,16 @@ export const IslandMotion: FC<IslandMotionProps> = ({ children }) => {
       case 'call':
         if (isOpen) {
           if (accepted && transferring) {
-            size = {
-              width: variants.call.expanded.transfer.width,
-              height: variants.call.expanded.transfer.height,
+            if (actionsExpanded) {
+              size = {
+                width: variants.call.expanded.transfer.actionsExpanded.width,
+                height: variants.call.expanded.transfer.actionsExpanded.height,
+              }
+            } else {
+              size = {
+                width: variants.call.expanded.transfer.width,
+                height: variants.call.expanded.transfer.height,
+              }
             }
           } else if (accepted && actionsExpanded) {
             size = {