@tellescope/video-chat 1.3.25 → 1.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "1.3.25",
+  "version": "1.3.26",
   "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.26",
     "@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": "c4626933b58bb8f6fc07f8ba747c31377827218f",
   "publishConfig": {
     "access": "public"
   }

package/src/video.tsx

@@ -1,12 +1,16 @@
-import React, { useCallback, useState, CSSProperties, Children, useEffect } from "react"
+import React, { useCallback, useState, useEffect } from "react"
 
 import {
   useResolvedSession,
   useSession,
   Styled,
+  UserAndEnduserSelectorProps,
+  useMeetings,
+  UserAndEnduserSelector,
 } from "@tellescope/react-components"
 
 import {
+  APIError,
   UserIdentity,
 } from "@tellescope/types-utilities"
 import {
@@ -50,6 +54,7 @@ import {
   JoinVideoCallProps,
 } from "./video_shared"
 import { ConsoleLogger, DefaultDeviceController, Logger, LogLevel } from "amazon-chime-sdk-js";
+import { Enduser, Meeting, User } from "@tellescope/types-client";
 
 const WithContext = ({ children } : { children: React.ReactNode }) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
@@ -264,4 +269,37 @@ export const LocalPreview = ({ style=defaultPreviewStyle }: Styled) => {
 
   return <video id={PREVIEW_ELEMENT_ID} style={style}/>
 }
-export { VideoTileGrid }
+export { VideoTileGrid }
+
+export interface CreateMeetingProps extends Omit<UserAndEnduserSelectorProps, 'onSelect'> {
+  onSuccess?: ({ id } : { id: string }) => void,
+  onError?: (e: APIError) => void,
+  roomTitle?: string,
+}
+export const CreateMeeting = ({ 
+  roomTitle: defaultRoomTitle = "Group Chat", 
+  onSuccess, onError, 
+  ...props 
+} : CreateMeetingProps) => {
+  const session = useSession()
+
+  const handleCreateRoom = useCallback(({ users, endusers }: { users: User[], endusers: Enduser[] }) => {
+    const userIds = users.map(u => u.id)
+    const enduserIds = endusers.map(e => e.id)
+
+    session.api.meetings.start_meeting({
+      attendees: ([
+        ...userIds.map(id => ({ type: 'user', id } as UserIdentity)),
+        ...enduserIds.map(id => ({ type: 'enduser', id } as UserIdentity)),
+      ])
+    })
+    .then(r => {
+      onSuccess?.(r)
+    })
+    .catch(onError)
+  }, [session, onSuccess, onError])
+  
+  return (
+    <UserAndEnduserSelector {...props} onSelect={handleCreateRoom} />
+  )
+}