From 84e351b1f8f2708a24a1aa7175b0d8dbea48039b Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Thu, 23 Jan 2025 12:22:26 -0800
Subject: [PATCH] adding calling component

---
 .../mobile/src/calling/Calling.styled.ts      | 24 +++++++++++++
 app/client/mobile/src/calling/Calling.tsx     | 17 +++++++++
 .../mobile/src/calling/useCalling.hook.ts     | 35 +++++++++++++++++++
 app/client/mobile/src/session/Session.tsx     |  2 ++
 app/sdk/src/session.ts                        |  2 +-
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 app/client/mobile/src/calling/Calling.styled.ts
 create mode 100644 app/client/mobile/src/calling/Calling.tsx
 create mode 100644 app/client/mobile/src/calling/useCalling.hook.ts

diff --git a/app/client/mobile/src/calling/Calling.styled.ts b/app/client/mobile/src/calling/Calling.styled.ts
new file mode 100644
index 00000000..90cf5780
--- /dev/null
+++ b/app/client/mobile/src/calling/Calling.styled.ts
@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import { Colors } from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  active: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+  inactive: {
+    display: 'none',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+});
diff --git a/app/client/mobile/src/calling/Calling.tsx b/app/client/mobile/src/calling/Calling.tsx
new file mode 100644
index 00000000..8981ec9f
--- /dev/null
+++ b/app/client/mobile/src/calling/Calling.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { SafeAreaView, Modal, ScrollView, View } from 'react-native';
+import { Surface, Icon, Divider, Button, IconButton, Text, TextInput} from 'react-native-paper';
+import {styles} from './Calling.styled';
+import {useCalling} from './useCalling.hook';
+import {BlurView} from '@react-native-community/blur';
+
+export function Calling() {
+  const { state, actions } = useCalling();
+
+  return (
+    <View style={(state.link || state.ringing.length > 0) ? styles.active : styles.inactive}>
+      <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+    </View>
+  );
+}
+
diff --git a/app/client/mobile/src/calling/useCalling.hook.ts b/app/client/mobile/src/calling/useCalling.hook.ts
new file mode 100644
index 00000000..478fc857
--- /dev/null
+++ b/app/client/mobile/src/calling/useCalling.hook.ts
@@ -0,0 +1,35 @@
+import { useState, useContext, useEffect } from 'react'
+import { AppContext } from '../context/AppContext'
+import { ContextType } from '../context/ContextType'
+
+export function useCalling() {
+  const app = useContext(AppContext) as ContextType
+  const [state, setState] = useState({
+    ringing: [],
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => {
+    if (app.state.session) {
+      const setRinging = (ringing: { cardId: string, callId: string }[]) => {
+console.log(">>>> ", ringing);
+
+        updateState({ ringing });
+      }
+      const ring = app.state.session.getRing();
+      ring.addRingingListener(setRinging);
+      return () => {
+        ring.removeRingingListener(setRinging);
+      }
+    }
+  }, [app.state.session]);
+
+  const actions = {
+  }
+
+  return { state, actions }
+}
diff --git a/app/client/mobile/src/session/Session.tsx b/app/client/mobile/src/session/Session.tsx
index 258abcac..8062137a 100644
--- a/app/client/mobile/src/session/Session.tsx
+++ b/app/client/mobile/src/session/Session.tsx
@@ -17,6 +17,7 @@ import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/na
 import {createDrawerNavigator} from '@react-navigation/drawer';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {Colors} from '../constants/Colors';
+import {Calling} from '../calling/Calling';
 
 const SettingsDrawer = createDrawerNavigator();
 const ContactsDrawer = createDrawerNavigator();
@@ -189,6 +190,7 @@ export function Session() {
           </Surface>
         </View>
       )}
+      <Calling />
     </View>
   );
 }
diff --git a/app/sdk/src/session.ts b/app/sdk/src/session.ts
index b12d7fb8..bc38f26c 100644
--- a/app/sdk/src/session.ts
+++ b/app/sdk/src/session.ts
@@ -68,8 +68,8 @@ export class SessionModule implements Session {
     this.attribute = new AttributeModule(log, this.settings, this.store, guid, token, node, secure);
     this.stream = new StreamModule(log, this.store, this.crypto, this.staging, guid, token, node, secure, channelTypes);
     this.content = new ContentModule(log, this.crypto, this.contact, this.stream);
-    this.ring = new RingModule(log, token, node, secure);
     this.connection = new Connection(log, token, node, secure);
+    this.ring = new RingModule(log);
 
     const onStatus = (ev: string) => {
       this.status = ev;