@tellescope/video-chat 0.0.37 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "0.0.37",
+  "version": "0.0.41",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -33,13 +33,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^0.0.37",
-    "@tellescope/react-components": "^0.0.37",
-    "@tellescope/sdk": "^0.0.37",
-    "@tellescope/types-client": "^0.0.37",
-    "@tellescope/types-models": "^0.0.37",
-    "@tellescope/types-utilities": "^0.0.37",
-    "@tellescope/utilities": "^0.0.37",
+    "@tellescope/constants": "^0.0.41",
+    "@tellescope/react-components": "^0.0.41",
+    "@tellescope/sdk": "^0.0.41",
+    "@tellescope/types-client": "^0.0.41",
+    "@tellescope/types-models": "^0.0.41",
+    "@tellescope/types-utilities": "^0.0.41",
+    "@tellescope/utilities": "^0.0.41",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "amazon-chime-sdk-component-library-react": "^2.12.0",
@@ -54,7 +54,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "9d2f8b2693292c5882c9920de84176d9cbb87711",
+  "gitHead": "5eece62ed79893238758bd54df460360b013c2d3",
   "publishConfig": {
     "access": "public"
   }

package/src/controls.tsx

@@ -16,6 +16,7 @@ import { LabeledIconButton } from "@tellescope/react-components/lib/esm/controls
 import { Flex } from "@tellescope/react-components/lib/esm/layout"
 import { CurrentCallContext } from "./video_shared"
 import { useStartVideoCall } from "./video"
+import { useJoinVideoCall } from "."
 
 const DEFAULT_BUTTON_SIZE = 30
 interface ButtonProps {
@@ -42,20 +43,34 @@ export const MicrophoneToggle = ({ size=DEFAULT_BUTTON_SIZE }: ButtonProps) => {
 }
 
 // ends meeting if host, otherwise leaves meeting
-export const EndMeeting = ({ size=DEFAULT_BUTTON_SIZE }: ButtonProps) => {
+export const EndMeeting = ({ size=DEFAULT_BUTTON_SIZE, onLeave }: ButtonProps & LeaveMeetingProps) => {
   const { endMeeting } = useStartVideoCall()
 
   return (
-    <LabeledIconButton size={size} Icon={CallEndIcon} onClick={endMeeting} label="End Meeting"/>
+    <LabeledIconButton size={size} Icon={CallEndIcon} label="End Meeting"
+      onClick={() => {
+        endMeeting()
+        onLeave?.()
+      }}
+    />
   )
 }
 
 interface LeaveMeetingProps {
   onLeave?: () => void,
 }
-export const LeaveMeeting = ({ onLeave, size=DEFAULT_BUTTON_SIZE } : LeaveMeetingProps & ButtonProps) => (
-  <LabeledIconButton size={size} Icon={CallEndIcon} onClick={onLeave} label="Leave Meeting"/>
-)
+export const LeaveMeeting = ({ onLeave, size=DEFAULT_BUTTON_SIZE } : LeaveMeetingProps & ButtonProps) => {
+  const { leaveMeeting } = useJoinVideoCall()
+
+  return (
+    <LabeledIconButton size={size} Icon={CallEndIcon} label="Leave Meeting" 
+      onClick={() => { 
+        onLeave?.()
+        leaveMeeting()
+      }}
+    />
+  )
+}
 
 interface ControlbarProps {
   spacing?: number,
@@ -76,7 +91,7 @@ export const ControlBar = ({ onLeave, style, spacing=15, size } : ControlbarProp
           <MicrophoneToggle size={size}/>
         </Flex>
         <Flex style={itemStyle}>
-          {isHost ? <EndMeeting size={size}/> : <LeaveMeeting size={size} onLeave={onLeave}/>}
+          {isHost ? <EndMeeting size={size} onLeave={onLeave}/> : <LeaveMeeting size={size} onLeave={onLeave}/>}
         </Flex>
       </Paper>
     </Flex>

package/src/video.native.tsx

@@ -15,7 +15,7 @@ import {
 import {
   UserIdentity,
 } from '@tellescope/types-utilities'
-import { useSession } from "@tellescope/react-components/lib/esm/authentication"
+import { useResolvedSession, useSession } from "@tellescope/react-components/lib/esm/authentication"
 import { Flex } from "@tellescope/react-components/lib/esm/layout"
 import { 
   Button, 
@@ -190,8 +190,9 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
   const [ending, setEnding] = useState(false)
 
   const createAndStartMeeting = async (initialAttendees?: UserIdentity[]) => {
+    setStarting(true)
     try {
-      const { meeting, host } = await session.api.meetings.start_meeting()
+      const { id, meeting, host } = await session.api.meetings.start_meeting()
 
       if (initialAttendees) {
         session.api.meetings.add_attendees_to_meeting({ id: meeting.Meeting.ExternalMeetingId, attendees: initialAttendees }) 
@@ -201,11 +202,13 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
 
       setMeeting(meeting.Meeting)
       setIsHost(true)
+
+      return id
     } catch(err) {
       console.error(err)
-    }
-    finally {
-
+      throw err
+    } finally {
+      setStarting(false)
     }
   }
 
@@ -239,13 +242,24 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
 }
 
 export const useJoinVideoCall = (): JoinVideoCallReturnType => {
+  const session = useResolvedSession()
   const { meeting, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
 
-  const joinMeeting = async (meetingInfo: { 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 = meeting?.attendees.find?.(a => a.id === session.userInfo.id)?.info as { Attendee: AttendeeInfo }
+    }
+    if (!meetingInfo || typeof meetingInfo === 'string' || !attendeeInfo) return
+
     NativeFunction.startMeeting(meetingInfo.Meeting, attendeeInfo.Attendee)
   }
 
-  return { meeting, videoIsEnabled, toggleVideo, joinMeeting }
+  const leaveMeeting = () => setMeeting(undefined)
+
+  return { meeting, videoIsEnabled, toggleVideo, joinMeeting, leaveMeeting }
 }
 export const VideoTileGrid = () => {
   const { 
@@ -359,4 +373,8 @@ const styles = StyleSheet.create({
     width: 50,
     height: 50
   }
-});
+});
+
+export const LocalPreview = () => {
+  throw new Error("Unimplemented")
+}

package/src/video.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useState, CSSProperties, Children } from "react"
+import React, { useCallback, useState, CSSProperties, Children, useEffect } from "react"
 
 import {
+  useResolvedSession,
   useSession,
 } from "@tellescope/react-components/lib/esm/authentication"
 
@@ -30,8 +31,9 @@ import {
   useMeetingManager,
   useRosterState,
   useRemoteVideoTileState,
-  VideoTile,
   useToggleLocalMute,
+  useMeetingStatus,
+  MeetingStatus,
   // useRemoteVideoTileState,
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
@@ -42,7 +44,12 @@ import {
   AttendeeDisplayInfo,
   VideoProps,
   VideoViewProps,
+  JoinVideoCallReturnType,
+  StartVideoCallReturnType,
+  JoinVideoCallProps,
 } from "./video_shared"
+import { ConsoleLogger, DefaultDeviceController, Logger, LogLevel } from "amazon-chime-sdk-js";
+import { Styled } from "@tellescope/react-components";
 
 const WithContext = ({ children } : { children: React.ReactNode }) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
@@ -87,7 +94,7 @@ export const WithVideo = ({ children }: VideoProps) => (
   </ThemeProvider>
 )
 
-export const useStartVideoCall = () => {
+export const useStartVideoCall = (): StartVideoCallReturnType  => {
   const [starting, setStarting] = useState(false)
   const [ending, setEnding] = useState(false)
   const { meeting, setMeeting, toggleVideo, videoIsEnabled, setIsHost } = React.useContext(CurrentCallContext)
@@ -96,10 +103,9 @@ export const useStartVideoCall = () => {
   const meetingManager = useMeetingManager();
 
   const createAndStartMeeting = async (initialAttendees?: UserIdentity[]) => {
-    setStarting(false)
-
+    setStarting(true)
     try {
-      const { meeting, host } = await session.api.meetings.start_meeting()
+      const { id, meeting, host } = await session.api.meetings.start_meeting()
 
       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
@@ -110,8 +116,10 @@ export const useStartVideoCall = () => {
 
       setMeeting(meeting.Meeting)
       setIsHost(true)
+      return id
     } catch(err) {
       console.error(err)
+      throw err
     }
     finally {
       setStarting(false)
@@ -137,21 +145,55 @@ export const useStartVideoCall = () => {
 
   return { starting, ending, meeting, videoIsEnabled, toggleVideo, createAndStartMeeting, addAttendees, endMeeting }
 }
-export type StartVideoCallReturnType = ReturnType<typeof useStartVideoCall>
 
-export const useJoinVideoCall = () => {
+export const useJoinVideoCall = (props?: JoinVideoCallProps): JoinVideoCallReturnType  => {
+  const { onCallEnd } = props ?? {}
+  const session = useResolvedSession()
   const meetingManager = useMeetingManager();
   const { meeting, setMeeting, toggleVideo, videoIsEnabled } = React.useContext(CurrentCallContext)
+  const status = useMeetingStatus()
+
+  // meetingInfo may be meetingId as string
+  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 = meeting?.attendees.find?.(a => a.id === session.userInfo.id)?.info as { Attendee: AttendeeInfo }
+    }
+    if (!meetingInfo || typeof meetingInfo === 'string' || !attendeeInfo) return
 
-  const joinMeeting = async (meetingInfo: { Meeting: MeetingInfo }, attendeeInfo: { Attendee: AttendeeInfo }) => {
     await meetingManager.join({ 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(meetingInfo.Meeting)
   }
 
-  return { meeting, videoIsEnabled: videoIsEnabled, toggleVideo, joinMeeting }
+  const leaveMeeting = () => {
+    if (meetingManager.audioVideo) {
+      meetingManager.audioVideo.chooseVideoInputDevice(null);
+
+      // Stop local video tile (stops sharing the video tile in the meeting)
+      meetingManager.audioVideo.stopLocalVideoTile();
+
+      // Stop a video preview that was previously started (before session starts)
+      // meetingManager.audioVideo.stopVideoPreviewForVideoInput(previewVideoElement);
+
+      // Stop the meeting session (audio and video)
+      meetingManager.audioVideo && meetingManager.audioVideo.stop() 
+
+    }
+  }
+
+  useEffect(() => {
+    if (!meeting) return
+    if (status === MeetingStatus.Ended) {
+      leaveMeeting()
+      onCallEnd?.()
+    }
+  }, [meeting, status, leaveMeeting])
+
+  return { meeting, videoIsEnabled: videoIsEnabled, toggleVideo, joinMeeting, leaveMeeting }
 }
-export type JoinVideoCallReturnType = ReturnType<typeof useJoinVideoCall>
 
 export const SelfView = ({ style }: VideoViewProps) => <div style={style}><LocalVideo/></div>
 
@@ -165,4 +207,65 @@ export const useRemoteViews = (props={} as VideoViewProps) => {
 }
 
 
+class SwappableLogger implements Logger {
+  constructor(public inner: Logger) {}
+  debug(debugFunction: string | (() => string)): void {
+    this.inner.debug(debugFunction);
+  }
+
+  info(msg: string): void {
+    this.inner.info(msg);
+  }
+
+  error(msg: string): void {
+    this.inner.error(msg);
+  }
+
+  warn(msg: string): void {
+    this.inner.warn(msg);
+  }
+
+  setLogLevel(level: LogLevel): void {
+    this.inner.setLogLevel(level);
+  }
+
+  getLogLevel(): LogLevel {
+    return this.inner.getLogLevel();
+  }
+}
+
+const PREVIEW_ELEMENT_ID = 'video-preview'
+const defaultPreviewStyle = {
+  width: 400,
+  minHeight: 200,
+  height: 'auto',
+  maxHeight: 600,
+  backgroundColor: '#f0f0f0'
+}
+export const LocalPreview = ({ style=defaultPreviewStyle }: Styled) => {
+  useEffect(() => {
+    const videoElement = document.getElementById(PREVIEW_ELEMENT_ID) as HTMLVideoElement;
+    if (!videoElement) return
+
+    const deviceController = new DefaultDeviceController(new SwappableLogger(new ConsoleLogger('SDK', LogLevel.WARN)), { enableWebAudio: true });
+
+    //List the video device list
+    deviceController.listVideoInputDevices()
+    .then(deviceList => {
+      //Choose video device
+      deviceController.chooseVideoInputDevice(deviceList[0].deviceId)
+      .then(() => {
+        //Start video preview
+        deviceController.startVideoPreviewForVideoInput(videoElement); 
+      }).catch(console.error)
+    }).catch(console.error)
+
+    // disconnect camera 
+    return () => {
+      deviceController.destroy()
+    }
+  }, [])
+
+  return <video id={PREVIEW_ELEMENT_ID} style={style}/>
+}
 export { VideoTileGrid }

package/src/video_shared.tsx

@@ -29,11 +29,15 @@ export interface VideoViewProps {
   style?: CSSProperties,
 }
 
+export interface JoinVideoCallProps {
+  onCallEnd?: () => void;
+}
 export interface JoinVideoCallReturnType {
   meeting: CallContext['meeting'], 
   videoIsEnabled: CallContext['videoIsEnabled'], 
   toggleVideo: CallContext['toggleVideo'], 
-  joinMeeting: (meetingInfo: { Meeting: MeetingInfo }, attendeeInfo: { Attendee: AttendeeInfo }) => Promise<void>,
+  leaveMeeting: () => void,
+  joinMeeting: (meetingInfo: { Meeting: MeetingInfo } | string, attendeeInfo: { Attendee: AttendeeInfo }) => Promise<void>,
 }
 
 export interface StartVideoCallReturnType {
@@ -42,7 +46,7 @@ export interface StartVideoCallReturnType {
   meeting: CallContext['meeting'],
   videoIsEnabled: CallContext['videoIsEnabled'], 
   toggleVideo: CallContext['toggleVideo'], 
-  createAndStartMeeting: (initialAttendees?: UserIdentity[]) => Promise<void>, 
+  createAndStartMeeting: (initialAttendees?: UserIdentity[]) => Promise<string>, 
   addAttendees: (attendees: UserIdentity[]) => Promise<void>, 
   endMeeting: () => Promise<void>,
 }