@tellescope/video-chat 0.0.11

package/src/video.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useState, CSSProperties } from "react"
+
+import {
+  useSession,
+} from "@tellescope/react-components/lib/esm/authentication"
+
+import {
+  UserIdentity,
+} from "@tellescope/types-utilities"
+import {
+  AttendeeInfo,
+  MeetingInfo,
+} from '@tellescope/types-models'
+
+import {
+  user_display_name,
+} from "@tellescope/utilities"
+
+import {
+  Session,
+  EnduserSession,
+} from "@tellescope/sdk"
+
+import { ThemeProvider } from 'styled-components';
+import {
+  MeetingProvider,
+  lightTheme,
+
+  // LocalVideo,
+  VideoTileGrid,
+  // VideoGrid,
+  // VideoTile,
+  // PreviewVideo,
+  // RemoteVideo,
+  useLocalVideo,
+  useMeetingManager,
+  // useRosterState,
+  // useRemoteVideoTileState,
+  // useContentShareControls, // screen sharing
+} from 'amazon-chime-sdk-component-library-react';
+import {  } from "../../../types-client/node_modules/@tellescope/types-models/src"
+
+export const CurrentCallContext = React.createContext({} as {
+  meeting: MeetingInfo | undefined, setMeeting: (m: MeetingInfo | undefined) => void,
+})
+interface VideoProps {
+  children?: React.ReactNode,
+  theme?: typeof lightTheme,
+}
+export const WithVideo = ({ children, theme=lightTheme }: VideoProps) => {
+  const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
+ 
+  return (
+    <CurrentCallContext.Provider value={{ meeting, setMeeting }}>
+    <ThemeProvider theme={theme}>
+    <MeetingProvider>
+      {children}
+    </MeetingProvider>
+    </ThemeProvider>
+    </CurrentCallContext.Provider>
+  )
+}
+
+export const useStartVideoCall = () => {
+  const [starting, setStarting] = useState(false)
+  const [ending, setEnding] = useState(false)
+  const { meeting, setMeeting } = React.useContext(CurrentCallContext)
+
+  const session = useSession()
+  const meetingManager = useMeetingManager();
+  const { toggleVideo, isVideoEnabled } = useLocalVideo();
+
+  const createAndStartMeeting = async (initialAttendees?: UserIdentity[]) => {
+    setStarting(false)
+
+    try {
+      const { meeting, host } = await session.api.meetings.start_meeting()
+
+      await meetingManager.join({ meetingInfo: meeting, attendeeInfo: host }); // 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
+
+      if (initialAttendees) {
+        session.api.meetings.add_attendees_to_meeting({ id: meeting.Meeting.ExternalMeetingId, attendees: initialAttendees }) 
+      }
+
+      setMeeting(meeting.Meeting)
+    } catch(err) {
+      console.error(err)
+    }
+    finally {
+      setStarting(false)
+    }
+  }
+
+  const addAttendees = useCallback(async (attendees: UserIdentity[]) => {
+    if (!meeting) return
+    await session.api.meetings.add_attendees_to_meeting({ id: meeting?.ExternalMeetingId, attendees }) 
+  }, [session, meeting])
+
+  const endMeeting = async () => {
+    if (!meeting) return
+    setEnding(true)
+
+    try {
+      await session.api.meetings.end_meeting({ id: meeting.ExternalMeetingId })
+    } catch(err) { console.error(err) }
+
+    setEnding(false)
+    setMeeting(undefined)
+  }
+
+  return { starting, ending, meeting, videoIsEnabled: isVideoEnabled, toggleVideo, createAndStartMeeting, addAttendees, endMeeting }
+}
+
+export const useJoinVideoCall = () => {
+  const meetingManager = useMeetingManager();
+  const { toggleVideo, isVideoEnabled } = useLocalVideo();
+  const { meeting, setMeeting } = React.useContext(CurrentCallContext)
+
+  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: isVideoEnabled, toggleVideo, joinMeeting }
+}
+
+export { VideoTileGrid }

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.settings.json",
+  "compilerOptions": {
+    "outDir": "lib/esm",
+    "rootDir": "src",
+  },
+  "exclude": ["node_modules", "lib", "tests"],
+  "include": ["src"],
+  "references": [
+    { "path": "../components" },
+  ]
+}