@tellescope/video-chat 1.18.2 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "1.18.2",
+  "version": "1.19.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,13 +34,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^1.18.2",
-    "@tellescope/react-components": "^1.18.2",
-    "@tellescope/sdk": "^1.18.2",
-    "@tellescope/types-client": "^1.18.2",
-    "@tellescope/types-models": "^1.18.2",
+    "@tellescope/constants": "^1.19.0",
+    "@tellescope/react-components": "^1.19.0",
+    "@tellescope/sdk": "^1.19.0",
+    "@tellescope/types-client": "^1.19.0",
+    "@tellescope/types-models": "^1.19.0",
     "@tellescope/types-utilities": "^1.5.1",
-    "@tellescope/utilities": "^1.18.2",
+    "@tellescope/utilities": "^1.19.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "amazon-chime-sdk-component-library-react": "^2.15.0",
@@ -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": "50e6f7bbe6e59a4b87d91e0b2bc6a007eb85982b",
+  "gitHead": "bd06f508b9e25d7dfa2b4e97b99c75a97486a33b",
   "publishConfig": {
     "access": "public"
   }

package/src/controls.tsx

@@ -11,6 +11,7 @@ import {
   Flex,
   Paper,
   Styled,
+  Button,
 } from "@tellescope/react-components"
 import { CurrentCallContext } from "./video_shared"
 import { useStartVideoCall } from "./video"
@@ -45,12 +46,15 @@ export const EndMeeting = ({ size=DEFAULT_BUTTON_SIZE, onLeave }: ButtonProps &
   const { endMeeting } = useStartVideoCall()
 
   return (
-    <LabeledIconButton size={size} Icon={CallEndIcon} label="End Meeting"
-      onClick={() => {
-        endMeeting()
+    <Button variant="outlined" color="primary"
+      style={{ width: 200 }}
+      onClick={() => { 
         onLeave?.()
-      }}
-    />
+        endMeeting()
+      }}    
+    >
+      End Meeting for All 
+    </Button>
   )
 }
 
@@ -60,11 +64,12 @@ interface LeaveMeetingProps {
 export const LeaveMeeting = ({ onLeave, size=DEFAULT_BUTTON_SIZE } : LeaveMeetingProps & ButtonProps) => {
   const { leaveMeeting } = useJoinVideoCall()
 
+
   return (
-    <LabeledIconButton size={size} Icon={CallEndIcon} label="Leave Meeting" 
-      onClick={() => { 
-        onLeave?.()
+    <LabeledIconButton size={size} Icon={CallEndIcon} label="Leave Meeting"
+      onClick={() => {
         leaveMeeting()
+        onLeave?.()
       }}
     />
   )
@@ -73,8 +78,9 @@ export const LeaveMeeting = ({ onLeave, size=DEFAULT_BUTTON_SIZE } : LeaveMeetin
 interface ControlbarProps {
   spacing?: number,
   size?: number,
+  showEndMeeting?: boolean
 }
-export const ControlBar = ({ onLeave, style, spacing=15, size } : ControlbarProps & LeaveMeetingProps & Styled) => {
+export const ControlBar = ({ onLeave, style, spacing=15, size, showEndMeeting, } : ControlbarProps & LeaveMeetingProps & Styled) => {
   const { isHost } = React.useContext(CurrentCallContext)
   const itemStyle = { marginLeft: spacing, marginRight: spacing }
 
@@ -88,8 +94,13 @@ export const ControlBar = ({ onLeave, style, spacing=15, size } : ControlbarProp
           <MicrophoneToggle size={size}/>
         </Flex>
         <Flex style={itemStyle}>
-          {isHost ? <EndMeeting size={size} onLeave={onLeave}/> : <LeaveMeeting size={size} onLeave={onLeave}/>}
+          <LeaveMeeting size={size} onLeave={onLeave}/>
         </Flex>
+        {(isHost || showEndMeeting) && 
+          <Flex style={{ marginLeft: 30, marginRight: 20 }}>
+            <EndMeeting size={size} onLeave={onLeave} />
+          </Flex>
+        }
       </Paper>
     </Flex>
   )

package/src/video.tsx

@@ -119,9 +119,6 @@ export const useJoinMeeting = () => {
   }
 
   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
@@ -143,6 +140,8 @@ export const useJoinMeeting = () => {
     }); // 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.meetingInfo.Meeting)
+    setIsHost(meeting.creator === session.userInfo.id)
   }, [setMeeting, meetingManager, setMeeting, setIsHost])
 
   return {