@tellescope/video-chat 1.3.27 → 1.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "1.3.27",
+  "version": "1.3.29",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -55,7 +55,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "84949695c66af0d03234a569d5cfc900515c7a7b",
+  "gitHead": "72917f76ec3d8ac91de746464a44cdfd896e44b0",
   "publishConfig": {
     "access": "public"
   }

package/src/video.native.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useContext, useEffect, useState } from "react"
-import { View, StyleSheet } from "react-native"
+import { StyleSheet } from "react-native"
 import {
   AttendeeInfo,
   MeetingInfo,
@@ -20,10 +20,9 @@ import {
   useSession,
   Flex,
   useCalendarEvents,
+  useMeetings,
 } from "@tellescope/react-components"
 import { 
-  Button, 
-  Typography, 
   convert_CSS_to_RNStyles, // requires mui.native
 } from "@tellescope/react-components/lib/esm/mui.native"
 
@@ -43,7 +42,6 @@ import {
   NativeFunction,
   ControlBar,
 } from "./index.native"
-import { borderColor, borderRadius } from "@mui/system"
 // import RNSwitchAudioOutput from 'react-native-switch-audio-output';
 
 interface TileState {
@@ -65,6 +63,17 @@ export const WithVideo = ({ children } : VideoProps) => {
   const [screenShareTile, setScreenShareTile] = useState(null as number | null)
   const [attendees, setAttendees] = useState ([] as AttendeeDisplayInfo[])
 
+  const resetState = () => {
+    setMeeting(undefined)
+    setIsHost(false)
+    setMuted(false)
+    setVideoIsEnabled(false)
+    setVideoTiles([])
+    setLocalTileId(null)
+    setScreenShareTile(null)
+    setAttendees([])
+  }
+
   const toggleVideo = async () => {
     NativeFunction.setCameraOn(!videoIsEnabled)
     if (videoIsEnabled) {
@@ -86,8 +95,7 @@ export const WithVideo = ({ children } : VideoProps) => {
 
     // called when user clicks Leave Meeting or meeting is ended by host
     const endSubscription = emitter.addListener(MobileSDKEvent.OnMeetingEnd, a => {
-      setInMeeting(false)
-      setIsLoading(false)
+      resetState()
     });
 
     const joinSubscription = emitter.addListener(MobileSDKEvent.OnAttendeesJoin, (added: { attendeeId: string, externalUserId: string }) => {
@@ -104,7 +112,7 @@ export const WithVideo = ({ children } : VideoProps) => {
     });
 
     const errorSubscription = emitter.addListener(MobileSDKEvent.OnError, (message) => {
-      console.error("SDK Error", message);
+      console.error("SDK Error in errorSubscription", message);
     });
 
     const muteSubscription = emitter.addListener(MobileSDKEvent.OnAttendeesMute, attendeeId => {
@@ -136,6 +144,9 @@ export const WithVideo = ({ children } : VideoProps) => {
       setVideoIsEnabled(v => tileState.isLocal ? false : v)
     });
 
+    // clean up any old meetings when the context is loaded
+    NativeFunction.stopMeeting()
+
     return () => {
       startSubscription.remove();
       endSubscription.remove();
@@ -191,6 +202,8 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
   const session = useSession()
   const { meeting, setMeeting, setIsHost, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
 
+  const [, { updateLocalElement: updateLocalMeeting }] = useMeetings({ dontFetch: true })
+
   const [starting, setStarting] = useState(false)
   const [ending, setEnding] = useState(false)
 
@@ -198,7 +211,7 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
     setStarting(true)
     try {
       const { id, meeting, host } = await session.api.meetings.start_meeting({ attendees: initialAttendees })
-      NativeFunction.startMeeting(meeting.Meeting, host.info)
+      await NativeFunction.startMeeting(meeting.Meeting, host.info)
 
       setMeeting(meeting.Meeting)
       setIsHost(true)
@@ -223,10 +236,15 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
 
     try {
       await session.api.meetings.end_meeting({ id: meeting.ExternalMeetingId })
+
+      updateLocalMeeting(meeting.ExternalMeetingId, { 
+        status: 'ended',
+        // @ts-ignore
+        endedAt: new Date().toString(), 
+      })
     } catch(err) { console.error(err) }
 
-    setEnding(false)
-    setMeeting(undefined)
+    NativeFunction.stopMeeting()
   }
 
   return { 
@@ -255,7 +273,7 @@ export const useStartAndJoinMeetingForCalendarEvent = (calendarEventId: string)
 
     updateLocalEvent(calendarEventId, { meetingId: id } )
 
-    NativeFunction.startMeeting(meeting.Meeting, host.info)
+    await NativeFunction.startMeeting(meeting.Meeting, host.info)
 
     setMeeting(meeting.Meeting)
     setIsHost(true)
@@ -271,6 +289,7 @@ export const useJoinVideoCall = (): JoinVideoCallReturnType => {
   const { meeting, setIsHost, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
 
   const joinMeeting = async (meetingInfo: string | { Meeting: MeetingInfo }, attendeeInfo?: { Attendee: AttendeeInfo }) => {
+    let isHost = false
     if (typeof meetingInfo == 'string') {
       const meetings = await session.api.meetings.my_meetings()
       const meeting = meetings.find(m => m.id === meetingInfo)
@@ -278,70 +297,29 @@ export const useJoinVideoCall = (): JoinVideoCallReturnType => {
       attendeeInfo = { Attendee: meeting?.attendees.find?.(a => a.id === session.userInfo.id)?.info as AttendeeInfo}
 
       if (attendeeInfo.Attendee.ExternalUserId === meeting?.creator) {
-        setIsHost(true)
+        isHost = true
       }
     }
 
     if (!meetingInfo || typeof meetingInfo === 'string' || !attendeeInfo) return
 
-    NativeFunction.startMeeting(meetingInfo.Meeting ?? meetingInfo, attendeeInfo.Attendee ?? attendeeInfo)
+    try {
+      await NativeFunction.startMeeting(meetingInfo.Meeting ?? meetingInfo, attendeeInfo.Attendee ?? attendeeInfo)
+    } catch(err) {
+      await NativeFunction.startMeeting(meetingInfo.Meeting ?? meetingInfo, attendeeInfo.Attendee ?? attendeeInfo)
+    }
 
-    setMeeting(meetingInfo.Meeting)
+    setMeeting(meetingInfo.Meeting ?? meetingInfo)
+    setIsHost(isHost)
   }
 
-  const leaveMeeting = () => setMeeting(undefined)
+  const leaveMeeting = () => {
+    NativeFunction.stopMeeting()
+    // setMeeting(undefined)
+  }
 
   return { meeting, videoIsEnabled, toggleVideo, joinMeeting, leaveMeeting }
 }
-export const VideoTileGrid = () => {
-  const { 
-    // attendees, 
-    videoTiles, 
-    toggleVideo,
-  } = useContext(CurrentCallContext)
-
-  return (
-    <Flex column justifyContent="space-between" alignItems="center">
-      <Flex style={styles.videoContainer}>
-        {
-          videoTiles.length > 0 ? videoTiles.map(tileId => 
-            <RNVideoRenderView style={styles.video} key={tileId} tileId={tileId} />
-          ) : <Typography style={styles.subtitle}>No one is sharing video at this moment</Typography>
-        }
-      </Flex>
-
-      {/* 
-      {
-        !!shareScreenId &&    
-        <React.Fragment>
-          <Typography style={styles.title}>Screen Share</Typography>
-          <View style={styles.videoContainer}>
-            <RNVideoRenderView style={styles.screenShare} key={shareScreenId} tileId={shareScreenId} />
-          </View>
-        </React.Fragment>
-      } 
-      */}
-
-      <Flex justifyContent="space-between" style={{ height: '5%' }}>
-        {/* <MuteButton muted={currentMuted} onPress={() => NativeFunction.setMute(!currentMuted) }/>          */}
-        {/* <CameraButton disabled={selfVideoEnabled} onPress={() =>  NativeFunction.setCameraOn(!videoIsEnabled)}/> */}
-        <Button onPress={toggleVideo}>
-          Toggle Video
-        </Button>
-        {/* <HangOffButton onPress={() => NativeFunction.stopMeeting()} /> */}
-        <Button onPress={() => NativeFunction.stopMeeting()}> Leave Meeting </Button>
-      </Flex>
-
-      {/* <FlatList
-        style={styles.attendeeList}
-        data={attendees}
-        renderItem={({ item }) => <AttendeeItem attendeeName={attendeeNameMap[item] ? attendeeNameMap[item] : item} muted={this.state.mutedAttendee.includes(item)}/>}
-        keyExtractor={(item) => item}
-      /> */}
-
-    </Flex>
-  );
-}
 
 const styles = StyleSheet.create({
   title: {
@@ -466,9 +444,7 @@ export const VideoCallNative: React.JSXElementConstructor<VideoCallNativeProps>
 
       </Flex>
 
-      <ControlBar {...props}
-        style={{ position: 'absolute', bottom: 20, width: '100%' }}
-      />
+      <ControlBar {...props} style={{ position: 'absolute', bottom: 20, width: '100%' }} />
     </Flex>
   )
 }