fix: wrong icon on physical click2call

nethesis · Jan 10, 2025 · ddbf544 · ddbf544
1 parent a0d8b71
commit ddbf544
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nethesis/phone-island",
   "author": "Nethesis",
-  "version": "0.8.51",
+  "version": "0.8.36",
   "description": "NethVoice CTI Phone Island",
   "keywords": [
     "nethserver",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -8,7 +8,8 @@
     "Answer phone to start recording": "Answer phone to start recording",
     "Close the call to stop recording": "Close the call to stop recording",
     "Search or type a contact": "Search or type a contact",
-    "Enter a phone number": "Enter a phone number"
+    "Enter a phone number": "Enter a phone number",
+    "Landline phone": "Landline phone"
   },
   "Tooltip": {
     "Hangup": "Hangup",

diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -8,7 +8,8 @@
     "Answer phone to start recording": "Rispondi al telefono per iniziare la registrazione",
     "Close the call to stop recording": "Chiudi la chiamata per fermare la registrazione",
     "Search or type a contact": "Cerca o digita un contatto",
-    "Enter a phone number": "Inserisci un numero di telefono"
+    "Enter a phone number": "Inserisci un numero di telefono",
+    "Landline phone": "Telefono fisso"
   },
   "Tooltip": {
     "Hangup": "Chiudi",

diff --git a/src/components/CallView/Timer.tsx b/src/components/CallView/Timer.tsx
@@ -6,14 +6,15 @@ import { useSelector } from 'react-redux'
 import { RootState } from '../../store'
 import { StyledTimer } from '../../styles/Island.styles'
 import Moment from 'react-moment'
+import { isPhysical } from '../../lib/user/default_device'
 
 const Timer: FC<TimerProps> = ({ size = 'large', startTime, isHome }) => {
   // Get isOpen from the island store
   const { isOpen } = useSelector((state: RootState) => state.island)
 
   return (
     <>
-      {startTime != null && (
+      {startTime != null && !isPhysical() && (
         <StyledTimer isOpen={isOpen} size={size}>
           <Moment
             date={Number(startTime)}

diff --git a/src/components/CallView/index.tsx b/src/components/CallView/index.tsx
@@ -24,6 +24,8 @@ import Actions from './Actions'
 import Hangup from '../Hangup'
 import { useTranslation } from 'react-i18next'
 import { Tooltip } from 'react-tooltip'
+import { faOfficePhone } from '@nethesis/nethesis-solid-svg-icons'
+import { isPhysical } from '../../lib/user/default_device'
 
 function isAnswerVisible(outgoing: boolean, accepted: boolean): boolean {
   return !outgoing && !accepted
@@ -52,10 +54,52 @@ const CallView: FC<CallViewProps> = () => {
   const { t } = useTranslation()
   const activeAlerts = Object.values(data).filter((alert: any) => alert.active)
   const latestAlert = activeAlerts.length > 0 ? activeAlerts[activeAlerts.length - 1] : null
+  const currentUser = useSelector((state: RootState) => state.currentUser)
+
+  const landlinePhoneDiv = () => {
+    return (
+      <div className='pi-text-gray-600 dark:pi-text-gray-300 pi-font-normal pi-text-sm pi-flex pi-items-center pi-truncate'>
+        <FontAwesomeIcon size='sm' icon={faOfficePhone} className='pi-mr-1' />
+        <span className='pi-max-w-16 pi-truncate'>
+          {currentUser?.default_device?.description || t('Common.Landline phone')}
+        </span>
+      </div>
+    )
+  }
+
+  const pulseIcon = (color: string) => {
+    return (
+      <div
+        className={`${
+          !isOpen ? 'pi-h-6 pi-w-6' : 'pi-h-12 pi-w-12'
+        } pi-flex pi-justify-center pi-items-center`}
+      >
+        <div
+          className={`${
+            !isOpen ? 'pi-h-4 pi-w-4 pi-rounded-full' : 'pi-h-8'
+          } pi-w-fit pi-flex pi-justify-center pi-items-center pi-gap-1 pi-overflow-hidden`}
+        >
+          <span
+            className={`${
+              !isOpen ? 'pi-h-6 pi-w-6' : 'pi-w-8 pi-h-8'
+            } pi-animate-ping pi-absolute pi-inline-flex pi-rounded-full ${
+              color === 'red' ? 'pi-bg-red-400' : 'pi-bg-green-400'
+            } pi-opacity-75 `}
+          ></span>
+          <FontAwesomeIcon
+            className={`pi-w-4 pi-h-6 pi-rotate-45 ${
+              color === 'red' ? 'pi-text-red-500' : 'pi-text-green-500'
+            }`}
+            icon={faCircle}
+          ></FontAwesomeIcon>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <>
-    {/* Avoid alert message and incoming call message for slow connections */}
+      {/* Avoid alert message and incoming call message for slow connections */}
       {latestAlert !== null ? null : (
         <div className='pi-bg-red pi-content-center pi-justify-center'>
           <StyledCallView
@@ -157,7 +201,11 @@ const CallView: FC<CallViewProps> = () => {
                         : ''}
                     </span>
                     {accepted ? (
-                      <Timer startTime={startTime} isHome />
+                      !isPhysical() ? (
+                        <Timer startTime={startTime} isHome />
+                      ) : (
+                        landlinePhoneDiv()
+                      )
                     ) : intrudeListenStatus?.isIntrudeExtension ? (
                       `${intrudeListenStatus?.isIntrudeExtension}`
                     ) : (
@@ -174,7 +222,11 @@ const CallView: FC<CallViewProps> = () => {
                         : ''}
                     </span>
                     {accepted ? (
-                      <Timer startTime={startTime} isHome />
+                      !isPhysical() ? (
+                        <Timer startTime={startTime} isHome />
+                      ) : (
+                        landlinePhoneDiv()
+                      )
                     ) : intrudeListenStatus?.isListenExtension ? (
                       `${intrudeListenStatus?.isListenExtension}`
                     ) : (
@@ -184,7 +236,15 @@ const CallView: FC<CallViewProps> = () => {
                 ) : (
                   <StyledDetails>
                     <DisplayName />
-                    {accepted ? <Timer startTime={startTime} isHome /> : <Number />}
+                    {accepted ? (
+                      !isPhysical() ? (
+                        <Timer startTime={startTime} isHome />
+                      ) : (
+                        landlinePhoneDiv()
+                      )
+                    ) : (
+                      <Number />
+                    )}
                   </StyledDetails>
                 )
               ) : null}
@@ -193,37 +253,17 @@ const CallView: FC<CallViewProps> = () => {
               {/* The timer when collapsed */}
               {!isOpen && accepted && <Timer startTime={startTime} isHome />}
               {accepted && isRecording ? (
-                <>
-                  <div
-                    className={`${
-                      !isOpen ? 'pi-h-6 pi-w-6' : 'pi-h-12 pi-w-12'
-                    } pi-flex pi-justify-center pi-items-center`}
-                  >
-                    <div
-                      className={`${
-                        !isOpen ? 'pi-h-4 pi-w-4 pi-rounded-full' : 'pi-h-8'
-                      } pi-w-fit pi-flex pi-justify-center pi-items-center pi-gap-1 pi-overflow-hidden`}
-                    >
-                      <span
-                        className={`${
-                          !isOpen ? 'pi-h-6 pi-w-6' : 'pi-w-8 pi-h-8'
-                        } pi-animate-ping pi-absolute pi-inline-flex pi-rounded-full pi-bg-red-400 pi-opacity-75 `}
-                      ></span>
-                      <FontAwesomeIcon
-                        className='pi-w-4 pi-h-6 pi-rotate-45 pi-text-red-500'
-                        icon={faCircle}
-                      ></FontAwesomeIcon>
-                    </div>
-                  </div>
-                </>
-              ) : accepted && remoteAudioStream ? (
+                pulseIcon('red')
+              ) : accepted && remoteAudioStream && !isPhysical() ? (
                 <>
                   <AudioBars
                     audioStream={remoteAudioStream}
                     paused={paused}
                     size={isOpen ? 'large' : 'small'}
                   />
                 </>
+              ) : accepted && isPhysical() ? (
+                pulseIcon('green')
               ) : (
                 <></>
               )}

diff --git a/src/lib/devices/devices.ts b/src/lib/devices/devices.ts
@@ -9,6 +9,7 @@ import {
 import JanusLib from '../webrtc/janus'
 import { JanusTypes } from '../../types'
 import { store } from '../../store'
+import { isPhysical } from '../user/default_device'
 
 const Janus: JanusTypes = JanusLib
 
@@ -92,8 +93,8 @@ export const checkMediaPermissions = function () {
         if (Janus.error)
           Janus.error('WebRTC: browser does not have permission to access camera or microphone')
       } else if (type === MediaPermissionsErrorType.UserPermissionDenied) {
-        // User didn't allow app to access camera or microphone
-        store.dispatch.alerts.setAlert('user_permissions')
+        // User didn't allow app to access camera or microphone only if default_device is not physical
+        if( isPhysical() ? '' : store.dispatch.alerts.setAlert('user_permissions') )
         if (Janus.error) Janus.error("WebRTC: user didn't allow app to access camera or microphone")
       } else if (type === MediaPermissionsErrorType.CouldNotStartVideoSource) {
         // Camera is in use by another application (Zoom, Skype) or browser tab (Google Meet, Messenger Video)

diff --git a/src/lib/user/default_device.ts b/src/lib/user/default_device.ts
@@ -13,3 +13,11 @@ export function isWebRTC() {
   }
   return false
 }
+
+export function isPhysical() {
+  const { default_device } = store.getState().currentUser
+  if (default_device?.type === 'physical') {
+    return true
+  }
+  return false
+}
diff --git a/src/stories/Call.stories.tsx b/src/stories/Call.stories.tsx
@@ -162,7 +162,7 @@ const CallTemplate = (args: any) => {
     return (
       <div className='pi-fixed pi-bottom-4 pi-right-4 pi-bg-white pi-rounded-lg pi-shadow-lg pi-p-4 pi-flex pi-items-center pi-gap-2'>
         <div className='pi-flex pi-items-center'>
-          <FontAwesomeIcon icon={faCheck} size='lg' className='pi-text-green-600' />
+          <FontAwesomeIcon icon={faCheck} size='lg' className='pi-text-green-500 pi-bg-green-400' />
           <span className='pi-ml-2'>{toastMessage}</span>
         </div>
         <button onClick={closeToast} className='pi-text-red-600 hover:pi-text-red-800'>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -60,5 +60,7 @@ module.exports = {
     'pi-border-red-600',
     'pi-border-orange-600',
     'pi-border-green-600',
+    'pi-text-green-500',
+    'pi-bg-green-400',
   ],
 }