Skip to content

Commit

Permalink
feat(ws-event): added event for callNethLink action (#62)
Browse files Browse the repository at this point in the history
* feat: Added missing phone-island event for callNethLink ws event
* fix: Wrong margin for alert message
* fix: missing display name animation during call
* fix: wrong transfer message on operator call hangup
* feat: enhance phone-island event name for physical actions
  • Loading branch information
tonyco97 authored Nov 15, 2024
1 parent 66d5109 commit 4422bee
Show file tree
Hide file tree
Showing 9 changed files with 122 additions and 20 deletions.
9 changes: 9 additions & 0 deletions docs/EVENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,15 @@ eventDispatch(`<event-name>`, `<data-object>`)
{}
```

- `phone-island-action-physical` The dispatch of physical phone call or action

```json
{
"url": "http://username:password@physicalPhoneIp/cgi-bin/ConfigManApp.com?key=numberCalled;ENTER",
"urlType": "call"
}
````

## Listen Recording Events - phone-island-recording-*

- `phone-island-recording-open` The event to show the recording view.
Expand Down
2 changes: 1 addition & 1 deletion src/components/AlertView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const AlertView: FC = () => {

return (
latestAlert && (
<div className='pi-relative pi-rounded-md pi-w-full pi-flex pi-mt-[-1rem]'>
<div className='pi-relative pi-rounded-md pi-w-full pi-flex'>
<div className='pi-flex pi-items-center'>
<div
className={`pi-flex pi-items-center pi-justify-center pi-flex-shrink-0 pi-mr-4 pi-rounded-full pi-h-10 pi-w-10 pi-mt-[-0.8rem] ${
Expand Down
31 changes: 16 additions & 15 deletions src/components/CallView/DisplayName.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { motion } from 'framer-motion'
import { RootState } from '../../store'
import { useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import TextScroll from '../TextScroll'

const DisplayName: FC<DisplayNameProps> = () => {
const [animateText, setAnimateText] = useState<boolean>(false)
Expand All @@ -22,9 +23,9 @@ const DisplayName: FC<DisplayNameProps> = () => {

useLayoutEffect(() => {
if (
nameContainer.current &&
nameText.current &&
nameText.current.clientWidth - nameContainer.current.clientWidth > 5
nameContainer?.current &&
nameText?.current &&
nameText?.current?.clientWidth - nameContainer?.current?.clientWidth > 5
) {
setAnimateText(true)
}
Expand Down Expand Up @@ -74,22 +75,22 @@ const DisplayName: FC<DisplayNameProps> = () => {
className='pi-whitespace-nowrap pi-relative pi-overflow-hidden '
>
<div
className={`pi-w-fit pi-relative pi-inline-block pi-text-gray-950 dark:pi-text-gray-50 ${
animateText && 'animated-text'
className={`pi-relative pi-inline-block pi-text-gray-950 dark:pi-text-gray-50 ${
animateText ? 'pi-animate-scroll-text' : ''
}`}
ref={nameText}
>
{displayName && displayName === '<unknown>'
? 'PBX'
: displayName
? displayName
: incoming
? t('Call.Incoming call') || '-'
: 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 dark:pi-to-gray-950 pi-to-gray-50'>
{' '}
{displayName && displayName === '<unknown>' ? (
'PBX'
) : displayName ? (
<TextScroll text={displayName}></TextScroll>
) : incoming ? (
t('Call.Incoming call') || '-'
) : (
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 dark:pi-to-gray-950 pi-to-gray-50' />
</NameMotion>
)}
</>
Expand Down
13 changes: 13 additions & 0 deletions src/components/Socket.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
dispatchServerReload,
dispatchParkingUpdate,
dispatchExtensions,
dispatchUrlCall,
} from '../events'
import { store } from '../store'
import { eventDispatch, withTimeout } from '../utils'
Expand Down Expand Up @@ -84,6 +85,7 @@ export const Socket: FC<SocketProps> = ({
// Handle transferring data
const { transferring, transferSwitching, transferCalls } = store.getState().currentCall

const view = store.getState().island.view
// Check conversation isn't empty
if (Object.keys(conv).length > 0) {
// With conversation
Expand Down Expand Up @@ -136,6 +138,11 @@ export const Socket: FC<SocketProps> = ({
if (userInformation?.default_device?.type === 'physical') {
checkDefaultDeviceConversationActive(conv)
}
if (view === 'call' && transferring) {
dispatch.currentCall.updateCurrentCall({
transferring: false,
})
}
}
// Handle not connected calls
else if (conv && !conv.connected) {
Expand Down Expand Up @@ -403,6 +410,12 @@ export const Socket: FC<SocketProps> = ({
// Dispatch serverReload event
dispatchParkingUpdate()
})

// `callNethLink` is the socket event when user make a call or a action from NethLink and has a physical device
socket.current.on('callNethLink', (link, urlType) => {
// Dispatch phone island physical call event with the link and the urlType
dispatchUrlCall(link, urlType)
})
}

initSocketConnection()
Expand Down
39 changes: 39 additions & 0 deletions src/components/TextScroll.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/* Copyright (C) 2024 Nethesis S.r.l. */
/* SPDX-License-Identifier: AGPL-3.0-or-later */

import React, { useState, useEffect } from 'react'

interface TextScrollProps {
text: string
}

const TextScroll: React.FC<TextScrollProps> = ({ text }) => {
const [scrollText, setScrollText] = useState(false)

useEffect(() => {
if (text.length > 15) {
setScrollText(true)
} else {
setScrollText(false)
}
}, [text])

return (
<>
{scrollText ? (
<div className='pi-text-container pi-mr-4'>
<div className='pi-text-wrapper pi-flex'>
<span>{text}</span>
<span className='pi-ml-4'>{text}</span>
</div>
</div>
) : (
<div className='pi-mr-4'>
<span>{text}</span>
</div>
)}
</>
)
}

export default TextScroll
14 changes: 14 additions & 0 deletions src/events/SocketEvents.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,17 @@ export function dispatchParkingUpdate() {
// Dispatch the event on window for external handlers
eventDispatch('phone-island-parking-update', {})
}

/**
* The dispatch function for url physical call
*
* @param event The parking update event from socket
*/
export function dispatchUrlCall(url: string, urlType: string) {
// Dispatch the event on window for external handlers
let urlCallObject = {
url: url,
urlType: urlType,
}
eventDispatch('phone-island-action-physical', { urlCallObject })
}
20 changes: 20 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,23 @@ input::placeholder {
font-size: 14px;
opacity: 1;
}

@keyframes scrollText {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

.text-container {
width: 200px;
overflow: hidden;
}

.text-wrapper {
display: inline-block;
white-space: nowrap;
animation: scrolltext 15s linear infinite;
}
9 changes: 5 additions & 4 deletions src/stories/Call.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ const meta: Meta<typeof PhoneIsland> = {

export default meta

// Uses the configuration token from .env
const config = process.env.CONFIG_TOKEN
type Story = StoryObj<typeof PhoneIsland>

const CallTemplate = (args: any) => {
const [eventName, setEventName] = useState('phone-island-recording-open')
//take the number from input field
Expand Down Expand Up @@ -156,6 +152,11 @@ const CallTemplate = (args: any) => {
setToastMessage('Phone island is detached...')
})

useEventListener('phone-island-action-physical', (data) => {
console.log('Phone island physical call', data)
setToastMessage('Phone island physical action...')
})

const toastNotification = () => {
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'>
Expand Down
5 changes: 5 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,14 @@ module.exports = {
left: '100%',
},
},
scroll: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-100%)' },
},
},
animation: {
'animated-text': '3s linear 0s infinite alternate move',
'scroll-text': 'scroll 10s linear infinite',
'custom-ping': 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite',
},
fontFamily: {
Expand Down

0 comments on commit 4422bee

Please sign in to comment.