fixing lint

app/client/mobile/ios/Podfile.lock

@@ -2250,7 +2250,7 @@ SPEC CHECKSUMS:
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: b05994d1933f507b0a28ceaa4fdb968dc18da178
+  Yoga: a9ef4f5c2cd79ad812110525ef61048be6a582a4
 
 PODFILE CHECKSUM: 9cf7373afef7b881c911fda82ff1f94eacee3e98
 

app/client/mobile/src/context/useAppContext.hook.ts

@@ -6,7 +6,7 @@ import {NativeCrypto} from '../NativeCrypto';
 import {LocalStore} from '../LocalStore';
 import { StagingFiles } from '../StagingFiles'
 import messaging from '@react-native-firebase/messaging';
-const DATABAG_DB = 'db_v240.db';
+const DATABAG_DB = 'db_v241.db';
 const SETTINGS_DB = 'ls_v001.db';
 
 async function requestUserPermission() {

app/client/web/src/calling/Calling.tsx

@@ -1,22 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
 import classes from './Calling.module.css'
-import { useCalling } from './useCalling.hook';
+import { useCalling, type Ring } from './useCalling.hook';
 import { Card } from '../card/Card';
 import { Loader, Image, Text, ActionIcon } from '@mantine/core'
 import { IconEyeX, IconPhone, IconPhoneOff, IconMicrophone, IconMicrophoneOff, IconVideo, IconVideoOff } from '@tabler/icons-react'
 import { modals } from '@mantine/modals'
 import { Colors } from '../constants/Colors'
 
-export function Calling({ callCard }: { callCard: string }) {
+export function Calling({ callCard }: { callCard: { cardId: null|string }}) {
   const [connecting, setConnecting] = useState(false);
   const [ending, setEnding] = useState(false);
   const [applyingVideo, setApplyingVideo] = useState(false);
   const [applyingAudio, setApplyingAudio] = useState(false);
-  const [ignoring, setIgnoring] = useState(false);
-  const [declining, setDeclining] = useState(false);
-  const [accepting, setAccepting] = useState(false);
-  const remote = useRef();
-  const local = useRef();
+  const [ignoring, setIgnoring] = useState(null as null|string);
+  const [declining, setDeclining] = useState(null as null|string);
+  const [accepting, setAccepting] = useState(null as null|string);
+  const remote = useRef(null as null|HTMLVideoElement);
+  const local = useRef(null as null|HTMLVideoElement);
   const { state, actions } = useCalling();
 
   const showError = () => {
@@ -93,11 +93,11 @@ export function Calling({ callCard }: { callCard: string }) {
     }
   }
 
-  const accept = async (callId, card) => {
+  const accept = async (ring: Ring) => {
     if (!accepting) {
-      setAccepting(callId);
+      setAccepting(ring.callId);
       try {
-        await actions.accept(callId, card);
+        await actions.accept(ring.callId, ring.card);
       } catch (err) {
         console.log(err);
         showError();
@@ -106,11 +106,11 @@ export function Calling({ callCard }: { callCard: string }) {
     }
   }
 
-  const ignore = async (callId, card) => {
+  const ignore = async (ring: Ring) => {
     if (!ignoring) {
-      setIgnoring(callId);
+      setIgnoring(ring.callId);
       try {
-        await actions.ignore(callId, card);
+        await actions.ignore(ring.callId, ring.card);
       } catch (err) {
         console.log(err);
         showError();
@@ -119,11 +119,11 @@ export function Calling({ callCard }: { callCard: string }) {
     }
   }
 
-  const decline = async (callId, card) => {
+  const decline = async (ring: Ring) => {
     if (!declining) {
-      setDeclining(callId);
+      setDeclining(ring.callId);
       try {
-        await actions.decline(callId, card);
+        await actions.decline(ring.callId, ring.card);
       } catch (err) {
         console.log(err);
         showError();
@@ -132,21 +132,9 @@ export function Calling({ callCard }: { callCard: string }) {
     }
   }
 
-  const alertParams = {
-    title: state.strings.operationFailed,
-    prompt: state.strings.tryAgain,
-    cancel: {
-      label: state.strings.close,
-      action: () => {
-        setAlert(false);
-      },
-    },
-  };
-
   useEffect(() => {
-    const { cardId } = callCard;
-    if (cardId) {
-      call(cardId);
+    if (callCard?.cardId) {
+      call(callCard.cardId);
     }
   }, [callCard]);
 
@@ -166,12 +154,11 @@ export function Calling({ callCard }: { callCard: string }) {
     }           
   }, [state.remoteStream]);
 
-  const calls = state.calls.map((contact, index) => {
-    const { callId, card } = contact;
-    const { name, handle, node, imageUrl } = card;
-    const ignoreButton = <ActionIcon key="ignore" variant="subtle" loading={ignoring===callId} onClick={()=>ignore(callId, card)} color={Colors.pending}><IconEyeX /></ActionIcon>
-    const declineButton = <div key="decline" className={classes.space}><ActionIcon variant="subtle" loading={declining===callId} onClick={()=>decline(callId, card)} color={Colors.offsync}><IconPhone className={classes.off} /></ActionIcon></div>
-    const acceptButton = <ActionIcon key="accept" variant="subtle" loading={accepting===callId} onClick={()=>accept(callId, card)} color={Colors.primary}><IconPhone /></ActionIcon>
+  const calls = state.calls.map((ring, index) => {
+    const { name, handle, node, imageUrl } = ring.card;
+    const ignoreButton = <ActionIcon key="ignore" variant="subtle" loading={ignoring===ring.callId} onClick={()=>ignore(ring)} color={Colors.pending}><IconEyeX /></ActionIcon>
+    const declineButton = <div key="decline" className={classes.space}><ActionIcon variant="subtle" loading={declining===ring.callId} onClick={()=>decline(ring)} color={Colors.offsync}><IconPhone className={classes.off} /></ActionIcon></div>
+    const acceptButton = <ActionIcon key="accept" variant="subtle" loading={accepting===ring.callId} onClick={()=>accept(ring)} color={Colors.primary}><IconPhone /></ActionIcon>
 
     return (
       <div key={index} className={classes.caller}>

app/client/web/src/calling/useCalling.hook.ts

@@ -4,6 +4,11 @@ import { AppContext } from '../context/AppContext'
 import { ContextType } from '../context/ContextType'
 import { Link, type Card } from 'databag-client-sdk';
 
+export type Ring = {
+  callId: string,
+  card: Card,
+}
+
 export function useCalling() {
   const app = useContext(AppContext) as ContextType;
   const display = useContext(DisplayContext) as ContextType;
@@ -16,9 +21,9 @@ export function useCalling() {
   const peerUpdate = useRef([] as {type: string, data?: any}[]);
 
   const [state, setState] = useState({
-    strings: {}, 
+    strings: display.state.strings, 
     ringing: [] as { cardId: string, callId: string }[],
-    calls: [],
+    calls: [] as Ring[],
     cards: [] as Card[],
     calling: null as null | Card,
     failed: false,
@@ -77,25 +82,25 @@ export function useCalling() {
     if (call.current) {
       const { policy, peer, link } = call.current;
       if (status === 'connected') {
+        localVideo.current = null;
+        localStream.current = null;
+        remoteStream.current = new MediaStream();
+        updateState({ localStream: localStream.current, remoteStream: remoteStream.current,
+          audioEnabled: false, videoEnabled: false, localVideo: false, remoteVideo: false, connected: true });
+
         try {
           const audioStream = await getAudioStream(null);
           const audioTrack = audioStream.getTracks().find((track: MediaStreamTrack) => track.kind === 'audio');
           if (audioTrack) {
             localAudio.current = audioTrack;
           }
-          localVideo.current = null;
-          localStream.current = null;
-          remoteStream.current = new MediaStream();
-
           if (localAudio.current) {
             localAudio.current.enabled = true;
             await updatePeer('local_track', { track: audioTrack, stream: audioStream });
+            updateState({ audioEnabled: true }); 
           }
-          updateState({ localStream: localStream.current, remoteStream: remoteStream.current,
-            audioEnabled: true, videoEnabled: false, localVideo: false, remoteVideo: false, connected: true });
         } catch (err) {
           console.log(err);
-          updateState({ failed: true });
         }
       } else if (status === 'closed') {
         updatePeer('close');
@@ -316,7 +321,17 @@ export function useCalling() {
       if (!call.current) {
         throw new Error('cannot unmute audio');
       }
-      if (localAudio.current) {
+      if (!localAudio.current) {
+        const audioStream = await getAudioStream(null);
+        const audioTrack = audioStream.getTracks().find((track: MediaStreamTrack) => track.kind === 'audio');
+        if (!audioTrack) {
+          throw new Error('no available audio track');
+        } 
+        localAudio.current = audioTrack;
+        localStream.current = audioStream;
+        updatePeer('local_track', { track: audioTrack, stream: audioStream });
+        updateState({ localAudio: true, localStream: audioStream, audioEnabled: true });
+      } else {
         localAudio.current.enabled = true;
         updateState({ audioEnabled: true });
       }