From 086a3f47bb477f330830eafdce7972814dc40bd6 Mon Sep 17 00:00:00 2001
From: Antonio <36625268+tonyco97@users.noreply.github.com>
Date: Mon, 22 Apr 2024 11:57:42 +0200
Subject: [PATCH] added support for multiple ua type (#48)

---
 src/App.tsx                  |  9 ++++++++-
 src/components/Socket.tsx    |  4 +++-
 src/index.widget.tsx         |  3 ++-
 src/stories/Call.stories.tsx |  2 +-
 widget-example/index.html    | 12 ++++++++++--
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c05af4f..964993a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,13 +16,19 @@ interface PhoneIslandProps {
   dataConfig: string
   i18nLoadPath?: string
   showAlways?: boolean
+  uaType: string
 }
 
 interface DeviceInputOutputTypes {
   deviceId: string
 }
 
-export const PhoneIsland: FC<PhoneIslandProps> = ({ dataConfig, i18nLoadPath = undefined, showAlways = false }: PhoneIslandProps) => {
+export const PhoneIsland: FC<PhoneIslandProps> = ({
+  dataConfig,
+  i18nLoadPath = undefined,
+  showAlways = false,
+  uaType,
+}: PhoneIslandProps) => {
   const CONFIG: string[] = Base64.atob(dataConfig || '').split(':')
   const HOST_NAME: string = CONFIG[0]
   const USERNAME: string = CONFIG[1]
@@ -164,6 +170,7 @@ export const PhoneIsland: FC<PhoneIslandProps> = ({ dataConfig, i18nLoadPath = u
               authToken={AUTH_TOKEN}
               reload={reload}
               reloadedCallback={() => setReloadedSocket(true)}
+              uaType={uaType}
             >
               <Events sipHost={SIP_HOST}>
                 <Island showAlways={showAlways} />
diff --git a/src/components/Socket.tsx b/src/components/Socket.tsx
index f634769..c133190 100644
--- a/src/components/Socket.tsx
+++ b/src/components/Socket.tsx
@@ -34,6 +34,7 @@ interface SocketProps {
   authToken: string
   reload: boolean
   reloadedCallback: () => void
+  uaType: string
 }
 
 export const Socket: FC<SocketProps> = ({
@@ -43,6 +44,7 @@ export const Socket: FC<SocketProps> = ({
   reload,
   reloadedCallback,
   children,
+  uaType,
 }) => {
   const dispatch = useDispatch<Dispatch>()
   const connectionCheckInterval = useRef<any>()
@@ -283,7 +285,7 @@ export const Socket: FC<SocketProps> = ({
         socket.current.emit('login', {
           accessKeyId: `${username}`,
           token: authToken,
-          uaType: 'desktop',
+          uaType: uaType,
         })
       })
 
diff --git a/src/index.widget.tsx b/src/index.widget.tsx
index 9af9e95..f48c879 100644
--- a/src/index.widget.tsx
+++ b/src/index.widget.tsx
@@ -13,11 +13,12 @@ const widgetDivs = document.querySelectorAll('.phone-island')
 widgetDivs.forEach((div) => {
   const config: string = div.getAttribute('data-config') || ''
   const showAlways: boolean = div.getAttribute('showAlways') === 'true' ? true : false
+  const uaType: string = div.getAttribute('ua-type') || ''
 
   const root = createRoot(div)
   root.render(
     <React.StrictMode>
-      <PhoneIsland dataConfig={config} showAlways={showAlways} />
+      <PhoneIsland dataConfig={config} showAlways={showAlways} uaType={uaType}/>
     </React.StrictMode>,
   )
 })
diff --git a/src/stories/Call.stories.tsx b/src/stories/Call.stories.tsx
index 83762ab..b2588b0 100644
--- a/src/stories/Call.stories.tsx
+++ b/src/stories/Call.stories.tsx
@@ -206,7 +206,7 @@ const CallTemplate: Story<any> = (args) => {
       />
       <button onClick={() => launchEvent()}>Launch {getEventName}</button>
 
-      <PhoneIsland dataConfig={config} showAlways={false} {...args} />
+      <PhoneIsland dataConfig={config} showAlways={false} {...args} uaType={'mobile'} />
     </div>
   )
 }
diff --git a/widget-example/index.html b/widget-example/index.html
index c5ee40f..f67446f 100644
--- a/widget-example/index.html
+++ b/widget-example/index.html
@@ -5,7 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!-- IMPORT THE WIDGET CSS -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/nethesis/phone-island/dist-widget/index.widget.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/nethesis/phone-island/dist-widget/index.widget.css"
+    />
     <!-- IMPORT THE WIDGET CSS -->
     <title>React Widget</title>
   </head>
@@ -16,9 +20,13 @@
     <div
       class="phone-island"
       data-config="bnYtc2ViOmZvbzI6YzI5ODFkYzZlN2FkMzMyNDZiODc4NDA1ZDg4MDE5ZTU1ZmU2ZTM3OTo5MTIxMjphZmFhNmYzYTRlYmQyNWYzZTNjYjYzYmU3Nzg1NzY1Nw=="
+      ua-type="mobile"
     ></div>
     <!-- IMPORT THE WIDGET JS -->
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/nethesis/phone-island/dist-widget/index.widget.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/gh/nethesis/phone-island/dist-widget/index.widget.js"
+    ></script>
     <!-- IMPORT THE WIDGET JS -->
     <script type="text/javascript" src="./index.js"></script>
   </body>