@tellescope/video-chat 1.3.25 → 1.3.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "1.3.25",
+  "version": "1.3.27",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -35,7 +35,7 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
     "@tellescope/constants": "^1.3.24",
-    "@tellescope/react-components": "^1.3.25",
+    "@tellescope/react-components": "^1.3.27",
     "@tellescope/sdk": "^1.3.25",
     "@tellescope/types-client": "^1.3.24",
     "@tellescope/types-models": "^1.3.24",
@@ -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": "b0763c5db209879f150d7289a2e031740b2fb371",
+  "gitHead": "84949695c66af0d03234a569d5cfc900515c7a7b",
   "publishConfig": {
     "access": "public"
   }

package/src/index.native.ts

@@ -1,10 +1,6 @@
 export * from "./video"
-export * from "./hooks"
 export * from "./controls"
-export {
-  CurrentCallContext,
-  useCurrentCallContext, 
-} from "./video_shared"
+export * from "./video_shared"
 export {
   RNVideoRenderView,
 } from "./native/RNVideoRenderView"

package/src/index.ts

@@ -1,7 +1,3 @@
 export * from "./video"
 export * from "./controls"
-export * from "./hooks"
-export {
-  CurrentCallContext,
-  useCurrentCallContext, 
-} from "./video_shared"
+export * from "./video_shared"

package/src/video.native.tsx

@@ -19,6 +19,7 @@ import {
   useResolvedSession, 
   useSession,
   Flex,
+  useCalendarEvents,
 } from "@tellescope/react-components"
 import { 
   Button, 
@@ -32,6 +33,7 @@ import {
   VideoProps,
   AttendeeDisplayInfo,
   VideoViewProps,
+  VideoCallNativeProps,
 } from "./video_shared"
 import {
   CurrentCallContext,
@@ -39,7 +41,10 @@ import {
   getSDKEventEmitter,
   MobileSDKEvent,
   NativeFunction,
+  ControlBar,
 } from "./index.native"
+import { borderColor, borderRadius } from "@mui/system"
+// import RNSwitchAudioOutput from 'react-native-switch-audio-output';
 
 interface TileState {
   isLocal: boolean,
@@ -236,20 +241,52 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
   }
 }
 
+export const useStartAndJoinMeetingForCalendarEvent = (calendarEventId: string) => {
+  const session = useSession()
+  const [, { updateLocalElement: updateLocalEvent }] = useCalendarEvents()
+
+  const { setMeeting, setIsHost } = useContext(CurrentCallContext)
+  if (!(!!setMeeting && setIsHost)) {
+    throw new Error("Missing CurrentCallContext")
+  }
+
+  const startAndJoinMeeting = useCallback(async () => {
+    const { meeting, host, id } = await session.api.meetings.start_meeting_for_event({ calendarEventId })
+
+    updateLocalEvent(calendarEventId, { meetingId: id } )
+
+    NativeFunction.startMeeting(meeting.Meeting, host.info)
+
+    setMeeting(meeting.Meeting)
+    setIsHost(true)
+  }, [session, setMeeting, setIsHost, updateLocalEvent])
+
+  return {
+    startAndJoinMeeting,
+  }
+}
+
 export const useJoinVideoCall = (): JoinVideoCallReturnType => {
   const session = useResolvedSession()
-  const { meeting, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
+  const { meeting, setIsHost, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
 
-  const joinMeeting = async (meetingInfo: string | { Meeting: MeetingInfo }, attendeeInfo: { Attendee: AttendeeInfo }) => {
+  const joinMeeting = async (meetingInfo: string | { Meeting: MeetingInfo }, attendeeInfo?: { Attendee: AttendeeInfo }) => {
     if (typeof meetingInfo == 'string') {
       const meetings = await session.api.meetings.my_meetings()
       const meeting = meetings.find(m => m.id === meetingInfo)
       meetingInfo = meeting?.meetingInfo as { Meeting: MeetingInfo }
       attendeeInfo = { Attendee: meeting?.attendees.find?.(a => a.id === session.userInfo.id)?.info as AttendeeInfo}
+
+      if (attendeeInfo.Attendee.ExternalUserId === meeting?.creator) {
+        setIsHost(true)
+      }
     }
+
     if (!meetingInfo || typeof meetingInfo === 'string' || !attendeeInfo) return
 
-    NativeFunction.startMeeting(meetingInfo.Meeting ?? meetingInfo, attendeeInfo)
+    NativeFunction.startMeeting(meetingInfo.Meeting ?? meetingInfo, attendeeInfo.Attendee ?? attendeeInfo)
+
+    setMeeting(meetingInfo.Meeting)
   }
 
   const leaveMeeting = () => setMeeting(undefined)
@@ -371,5 +408,67 @@ const styles = StyleSheet.create({
 });
 
 export const LocalPreview = () => {
-  throw new Error("Unimplemented")
+  // console.error("LocalPreview unimplemented for Native")
+  return null
+}
+
+const get_video_styles = (count: number): React.CSSProperties => {
+  return ({
+    borderWidth: '1px',
+    borderColor: '#888888',
+    borderRadius: 5,
+    padding: 5,
+    width: count === 1 ? '100%' : '50%',
+    maxHeight: (
+      count <= 4
+        ? '50%'
+    : count <= 8
+        ? '25%'
+        : '20%'
+    ),
+    backgroundColor: '#bbbbbb'
+  })
+}
+export const VideoCallNative: React.JSXElementConstructor<VideoCallNativeProps> = ({
+  ...props
+}) => {
+  const remoteViews = useRemoteViews()
+  // RNSwitchAudioOutput.selectAudioOutput(RNSwitchAudioOutput.AUDIO_SPEAKER)
+  const selfView = (
+    <SelfView 
+      // style={{ 
+      //   position: 'absolute', 
+      //   zIndex: '100', 
+      //   borderRadius: 100, 
+      //   width: 130, 
+      //   height: 130, 
+      //   bottom: 120, 
+      //   right: 25 
+      // }} 
+    />
+  )
+
+  const style = get_video_styles(remoteViews.length + 1)
+  
+  return (
+    <Flex column flex={1} style={{ }}>
+      <Flex flex={1} style={{ marginBottom: 75 }}>
+
+        {remoteViews.map((view, i) => (
+          <Flex key={i} alignItems="center" justifyContent="center" style={style}>
+            {view}
+          </Flex>
+        ))}
+
+        <Flex alignItems="center" justifyContent="center" style={style}>
+          {selfView}
+        </Flex>
+
+      </Flex>
+
+      <ControlBar {...props}
+        style={{ position: 'absolute', bottom: 20, width: '100%' }}
+      />
+    </Flex>
+  )
 }

package/src/video.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, CSSProperties, Children, useEffect } from "react"
+import React, { useCallback, useContext, useState, useEffect } from "react"
 
 import {
   useResolvedSession,
@@ -11,6 +11,7 @@ import {
 } from "@tellescope/types-utilities"
 import {
   AttendeeInfo,
+  Meeting,
   MeetingInfo,
 } from '@tellescope/types-models'
 
@@ -39,7 +40,8 @@ import {
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
 import {
-  CurrentCallContext,
+  CurrentCallContext, 
+  VideoCallNativeProps,
 } from "./index"
 import {
   AttendeeDisplayInfo,
@@ -51,6 +53,103 @@ import {
 } from "./video_shared"
 import { ConsoleLogger, DefaultDeviceController, Logger, LogLevel } from "amazon-chime-sdk-js";
 
+import { useCalendarEvents } from "@tellescope/react-components"
+import { useCurrentCallContext } from "./index"
+import { CalendarEvent } from "@tellescope/types-client";
+
+export const useMeetingForCalendarEvent = (event: CalendarEvent) => {
+  const { meeting } = useCurrentCallContext()
+  const { startAndJoinMeeting } = useStartAndJoinMeetingForCalendarEvent(event.id)
+  const { joinMeeting } = useJoinMeeting()
+
+  return {
+    startAndJoinMeeting,
+    joinMeeting,
+    meeting,
+    meetingStatus: (
+      !event.enableVideoCall 
+        ? 'disabled'
+    : !(event.meetingId)
+        ? 'waiting-room'
+    : !!meeting
+        ? 'joined'
+        : 'loading'
+
+    )
+  }
+} 
+
+export const useStartAndJoinMeetingForCalendarEvent = (calendarEventId: string) => {
+  const session = useSession()
+  const [, { updateLocalElement: updateLocalEvent }] = useCalendarEvents()
+
+  const meetingManager = useMeetingManager();
+
+  const { setMeeting, setIsHost } = useContext(CurrentCallContext)
+  if (!(!!setMeeting && setIsHost)) {
+    throw new Error("Missing CurrentCallContext")
+  }
+
+  const startAndJoinMeeting = useCallback(async () => {
+    const { meeting, host, id } = await session.api.meetings.start_meeting_for_event({ calendarEventId })
+
+    updateLocalEvent(calendarEventId, { meetingId: id } )
+
+    setMeeting(meeting as any)
+
+    await meetingManager.join({ meetingInfo: meeting, attendeeInfo: host.info }); // Use the join API to create a meeting session
+    await meetingManager.start(); // At this point you can let users setup their devices, or start the session immediately
+
+    setMeeting(meeting.Meeting)
+    setIsHost(true)
+  }, [session, calendarEventId, updateLocalEvent, meetingManager, setMeeting, setIsHost])
+
+  return {
+    startAndJoinMeeting,
+  }
+}
+
+export const useJoinMeeting = () => {
+  const session = useResolvedSession()
+  const meetingManager = useMeetingManager();
+
+  const { setMeeting, setIsHost } = useContext(CurrentCallContext)
+  if (!(!!setMeeting && setIsHost)) {
+    throw new Error("Missing CurrentCallContext")
+  }
+
+  const joinMeeting = useCallback(async (meeting: Meeting) => {
+    setMeeting(meeting.meetingInfo.Meeting)
+    setIsHost(meeting.creator === session.userInfo.id)
+
+    let attendeeInfo = meeting.attendees.find(a => a.id === session.userInfo.id)?.info
+    if (!attendeeInfo) {
+      const calendarEventId = meeting.calendarEventId
+      if (calendarEventId) {
+        const result = await session.api.meetings.join_meeting_for_event({ calendarEventId })
+
+        attendeeInfo = result.attendee.info
+      }
+
+      if (!attendeeInfo) {
+        console.error("Could not find attendee info for joining meeting and failed to join")
+        return
+      }      
+    }
+    
+    await meetingManager.join({ 
+      meetingInfo: meeting.meetingInfo, 
+      attendeeInfo,
+    }); // Use the join API to create a meeting session
+    await meetingManager.start(); // At this point you can let users setup their devices, or start the session immediately
+
+  }, [setMeeting, meetingManager, setMeeting, setIsHost])
+
+  return {
+    joinMeeting,
+  }
+}
+
 const WithContext = ({ children } : { children: React.ReactNode }) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
   const [isHost, setIsHost] = useState(false)
@@ -150,7 +249,7 @@ export const useJoinVideoCall = (props?: JoinVideoCallProps): JoinVideoCallRetur
   const status = useMeetingStatus()
 
   // meetingInfo may be meetingId as string
-  const joinMeeting = async (meetingInfo: string | { Meeting: MeetingInfo }, attendeeInfo: { Attendee: AttendeeInfo }) => {
+  const joinMeeting = async (meetingInfo: string | { Meeting: MeetingInfo }, attendeeInfo?: { Attendee: AttendeeInfo }) => {
     if (typeof meetingInfo == 'string') {
       const meetings = await session.api.meetings.my_meetings()
       const meeting = meetings.find(m => m.id === meetingInfo)
@@ -264,4 +363,9 @@ export const LocalPreview = ({ style=defaultPreviewStyle }: Styled) => {
 
   return <video id={PREVIEW_ELEMENT_ID} style={style}/>
 }
-export { VideoTileGrid }
+export { VideoTileGrid }
+
+// unimplemented for web
+export const VideoCallNative: React.JSXElementConstructor<VideoCallNativeProps> = () => (
+  null
+)

package/src/video_shared.tsx

@@ -1,14 +1,34 @@
-import React, { CSSProperties } from "react"
+import React, { CSSProperties, useCallback, useEffect, useState } from "react"
 
 import {
   AttendeeInfo,
   MeetingInfo,
 } from '@tellescope/types-models'
+import {
+  CalendarEvent,
+  Enduser,
+  User,
+} from '@tellescope/types-client'
 
 import {
+  APIError,
   UserIdentity,
 } from '@tellescope/types-utilities'
 
+import {
+  UserAndEnduserSelectorProps,
+  useMeetings,
+  UserAndEnduserSelector,
+  useCalendarEvents,
+  Flex,
+  Typography,
+  LoadingButton,
+  useSession,
+  useResolvedSession,
+  Button,
+} from "@tellescope/react-components"
+import { LocalPreview, useJoinVideoCall, useStartAndJoinMeetingForCalendarEvent } from "./video"
+
 export type AttendeeDisplayInfo =  { attendeeId: string, externalUserId: string }
 export interface CallContext {
   meeting: MeetingInfo | undefined, setMeeting: (m: MeetingInfo | undefined) => void,
@@ -43,7 +63,7 @@ export interface JoinVideoCallReturnType {
   videoIsEnabled: CallContext['videoIsEnabled'], 
   toggleVideo: CallContext['toggleVideo'], 
   leaveMeeting: () => void,
-  joinMeeting: (meetingInfo: { Meeting: MeetingInfo } | string, attendeeInfo: { Attendee: AttendeeInfo }) => Promise<void>,
+  joinMeeting: (meetingInfo: { Meeting: MeetingInfo } | string, attendeeInfo?: { Attendee: AttendeeInfo }) => Promise<void>,
 }
 
 export interface StartVideoCallReturnType {
@@ -55,4 +75,122 @@ export interface StartVideoCallReturnType {
   createAndStartMeeting: (initialAttendees?: UserIdentity[]) => Promise<string>, 
   addAttendees: (attendees: UserIdentity[]) => Promise<void>, 
   endMeeting: () => Promise<void>,
+}
+
+export interface CreateCalendarEventForAttendeesProps extends Omit<UserAndEnduserSelectorProps, 'onSelect'> {
+  onSuccess?: (c: CalendarEvent) => void,
+  onError?: (e: APIError) => void,
+  eventProps?: Pick<CalendarEvent, 'startTimeInMS' | 'durationInMinutes' | 'title'>
+}
+export const CreateCalendarEventForAttendees = ({ 
+  onSuccess, 
+  onError, 
+  eventProps,
+  ...props 
+} : CreateCalendarEventForAttendeesProps) => {
+  const [, { createElement: createEvent }] = useCalendarEvents({ dontFetch: true })
+  const [eventTitle, /*setEventTitle*/] = useState(eventProps?.title ?? 'Video Call')
+  const session = useResolvedSession()
+
+  const handleCreateRoom = useCallback(({ users, endusers }: { users: User[], endusers: Enduser[] }) => {
+    const userIds = users.map(u => u.id)
+    const enduserIds = endusers.map(e => e.id)
+
+    createEvent({
+      title: eventTitle,
+      attendees: ([
+        ...userIds.map(id => ({ type: 'user', id } as UserIdentity)),
+        ...enduserIds.map(id => ({ type: 'enduser', id } as UserIdentity)),
+      ]),
+      startTimeInMS: eventProps?.startTimeInMS ?? Date.now(),
+      durationInMinutes: eventProps?.durationInMinutes || 30,
+      enableVideoCall: true,
+    })
+    .then(r => {
+      onSuccess?.(r)
+    })
+    .catch(onError)
+  }, [session, onSuccess, onError])
+  
+  return (
+    <UserAndEnduserSelector {...props} onSelect={handleCreateRoom} />
+  )
+}
+
+export type WaitingRoomProps = {
+  calendarEvent: CalendarEvent,
+  onGoBack?: () => void,
+}
+export const WaitingRoom = ({ calendarEvent, onGoBack } : WaitingRoomProps) => {
+  const session = useSession()
+  const [, { findById: findEvent }] = useCalendarEvents()
+  const [, { findById: findMeeting }] = useMeetings()
+  const { startAndJoinMeeting } = useStartAndJoinMeetingForCalendarEvent(calendarEvent.id)
+  const { joinMeeting } = useJoinVideoCall()
+
+  const tsMeeting = findMeeting(calendarEvent?.meetingId ?? '')
+
+  // poll to check for started meeting
+  useEffect(() => { 
+    const t = setInterval(() => {
+      const event = findEvent(calendarEvent.id, { reload: true })
+      findMeeting(event?.meetingId ?? '', { reload: true }) // reloads tsMeeting
+    }, 2500)
+    
+    return () => { clearInterval(t) }
+  }, [calendarEvent, findMeeting, findEvent])
+
+  const meetingIsStarted = tsMeeting?.status === 'live'
+  const isHost = session.userInfo.id === calendarEvent?.creator
+
+  return (
+    <Flex flex={1} column alignItems="center" justifyContent="center">
+      <Typography style={{ fontSize: 20, fontWeight: 'bold' }}>
+        {calendarEvent.title}
+      </Typography>
+
+      <Typography style={{ marginBottom: 15 }}>
+        Waiting Room
+      </Typography>
+
+      <LocalPreview />
+
+      <LoadingButton variant="contained" 
+        disabled={
+           (!meetingIsStarted && !isHost)
+        || (meetingIsStarted && !tsMeeting)
+        }
+        onClick={
+          meetingIsStarted 
+            ? () => joinMeeting(tsMeeting.id) 
+            : startAndJoinMeeting
+        } 
+        submitText={
+          meetingIsStarted ? "Join Meeting" : "Start Meeting" 
+        }
+        submittingText={
+          meetingIsStarted ? "Joining" : "Starting"
+        }
+        style={{
+          marginTop: 15,
+        }} 
+      />
+
+      {onGoBack && 
+        <Button onClick={onGoBack} style={{ width: '100%' }}>
+          Back
+        </Button>
+      }
+
+      {!meetingIsStarted && !isHost && 
+        <Typography style={{ marginTop: 5 }}>
+          Waiting for the host to start the meeting 
+        </Typography>
+      }   
+    </Flex>
+  )
+}
+
+export interface VideoCallNativeProps {
+  onLeave?: () => void,
 }

package/src/hooks.ts

@@ -1,98 +0,0 @@
-import { useCallback, useContext } from "react"
-import { useCalendarEvents, useResolvedSession, useSession } from "@tellescope/react-components"
-import { useMeetingManager } from "amazon-chime-sdk-component-library-react"
-import { CurrentCallContext, useCurrentCallContext } from "./index"
-import { CalendarEvent, Meeting } from "@tellescope/types-client"
-
-export const useStartAndJoinMeetingForCalendarEvent = (calendarEventId: string) => {
-  const session = useSession()
-  const [, { updateLocalElement: updateLocalEvent }] = useCalendarEvents()
-
-  const meetingManager = useMeetingManager();
-
-  const { setMeeting, setIsHost } = useContext(CurrentCallContext)
-  if (!(!!setMeeting && setIsHost)) {
-    throw new Error("Missing CurrentCallContext")
-  }
-
-  const startAndJoinMeeting = useCallback(async () => {
-    const { meeting, host, id } = await session.api.meetings.start_meeting_for_event({ calendarEventId })
-
-    updateLocalEvent(calendarEventId, { meetingId: id } )
-
-    setMeeting(meeting as any)
-
-    await meetingManager.join({ meetingInfo: meeting, attendeeInfo: host.info }); // Use the join API to create a meeting session
-    await meetingManager.start(); // At this point you can let users setup their devices, or start the session immediately
-
-    setMeeting(meeting.Meeting)
-    setIsHost(true)
-  }, [session, calendarEventId, updateLocalEvent, meetingManager, setMeeting, setIsHost])
-
-  return {
-    startAndJoinMeeting,
-  }
-}
-
-export const useJoinMeeting = () => {
-  const session = useResolvedSession()
-  const meetingManager = useMeetingManager();
-
-  const { setMeeting, setIsHost } = useContext(CurrentCallContext)
-  if (!(!!setMeeting && setIsHost)) {
-    throw new Error("Missing CurrentCallContext")
-  }
-
-  const joinMeeting = useCallback(async (meeting: Meeting) => {
-    setMeeting(meeting.meetingInfo.Meeting)
-    setIsHost(meeting.creator === session.userInfo.id)
-
-    let attendeeInfo = meeting.attendees.find(a => a.id === session.userInfo.id)?.info
-    if (!attendeeInfo) {
-      const calendarEventId = meeting.calendarEventId
-      if (calendarEventId) {
-        const result = await session.api.meetings.join_meeting_for_event({ calendarEventId })
-
-        attendeeInfo = result.attendee.info
-      }
-
-      if (!attendeeInfo) {
-        console.error("Could not find attendee info for joining meeting and failed to join")
-        return
-      }      
-    }
-    
-    await meetingManager.join({ 
-      meetingInfo: meeting.meetingInfo, 
-      attendeeInfo,
-    }); // Use the join API to create a meeting session
-    await meetingManager.start(); // At this point you can let users setup their devices, or start the session immediately
-
-  }, [setMeeting, meetingManager, setMeeting, setIsHost])
-
-  return {
-    joinMeeting,
-  }
-}
-
-export const useMeetingForCalendarEvent = (event: CalendarEvent) => {
-  const { meeting } = useCurrentCallContext()
-  const { startAndJoinMeeting } = useStartAndJoinMeetingForCalendarEvent(event.id)
-  const { joinMeeting } = useJoinMeeting()
-
-  return {
-    startAndJoinMeeting,
-    joinMeeting,
-    meeting,
-    meetingStatus: (
-      !event.enableVideoCall 
-        ? 'disabled'
-    : !(event.meetingId)
-        ? 'waiting-room'
-    : !!meeting
-        ? 'joined'
-        : 'loading'
-
-    )
-  }
-}