@tellescope/video-chat 0.0.16 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "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.16",
-    "@tellescope/react-components": "^0.0.16",
-    "@tellescope/sdk": "^0.0.16",
-    "@tellescope/types-client": "^0.0.16",
-    "@tellescope/types-models": "^0.0.16",
-    "@tellescope/types-utilities": "^0.0.16",
-    "@tellescope/utilities": "^0.0.16",
+    "@tellescope/constants": "^0.0.20",
+    "@tellescope/react-components": "^0.0.20",
+    "@tellescope/sdk": "^0.0.20",
+    "@tellescope/types-client": "^0.0.20",
+    "@tellescope/types-models": "^0.0.20",
+    "@tellescope/types-utilities": "^0.0.20",
+    "@tellescope/utilities": "^0.0.20",
     "@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": "06e581f4d3a6c5b57fd0cfcc22103b94125f9da4",
+  "gitHead": "99ef9475f430b7021166b8f47f9863c2e1fed8aa",
   "publishConfig": {
     "access": "public"
   }

package/src/controls.tsx

@@ -6,28 +6,79 @@ import {
   VideoOffIcon,
   MicrophoneIcon,
   MicrophoneOffIcon,
+  CallEndIcon,
+
+  Paper,
+
+  Styled,
 } from "@tellescope/react-components/lib/esm/mui"
 import { LabeledIconButton } from "@tellescope/react-components/lib/esm/controls"
-import {
-  CurrentCallContext,
-} from "./video"
+import { Flex } from "@tellescope/react-components/lib/esm/layout"
+import { CurrentCallContext } from "./video_shared"
+import { useStartVideoCall } from "./video"
 
-export const VideoToggle = () => {
+const DEFAULT_BUTTON_SIZE = 30
+interface ButtonProps {
+  size?: number,
+}
+export const VideoToggle = ({ size=DEFAULT_BUTTON_SIZE } : ButtonProps) => {
   const { toggleVideo, videoIsEnabled } = React.useContext(CurrentCallContext)
 
   return (
-    <LabeledIconButton Icon={videoIsEnabled ? VideoIcon : VideoOffIcon} onClick={toggleVideo} 
+    <LabeledIconButton size={size} Icon={videoIsEnabled ? VideoIcon : VideoOffIcon} onClick={toggleVideo} 
       label={videoIsEnabled ? "Turn Camera Off" : "Turn Camera On"}
     />
   )
 }
 
-export const MicrophoneToggle = () => {
+export const MicrophoneToggle = ({ size=DEFAULT_BUTTON_SIZE }: ButtonProps) => {
   const { microphoneIsEnabled, toggleMicrophone } = React.useContext(CurrentCallContext)
 
   return (
-    <LabeledIconButton Icon={microphoneIsEnabled ? MicrophoneIcon : MicrophoneOffIcon} onClick={toggleMicrophone} 
+    <LabeledIconButton size={size} Icon={microphoneIsEnabled ? MicrophoneIcon : MicrophoneOffIcon} onClick={toggleMicrophone} 
       label={microphoneIsEnabled ? "Turn Microphone Off" : "Turn Microphone On"}
     />
   )
+}
+
+// ends meeting if host, otherwise leaves meeting
+export const EndMeeting = ({ size=DEFAULT_BUTTON_SIZE }: ButtonProps) => {
+  const { endMeeting } = useStartVideoCall()
+
+  return (
+    <LabeledIconButton size={size} Icon={CallEndIcon} onClick={endMeeting} label="End Meeting"/>
+  )
+}
+
+interface LeaveMeetingProps {
+  onLeave?: () => void,
+}
+export const LeaveMeeting = ({ onLeave, size=DEFAULT_BUTTON_SIZE } : LeaveMeetingProps & ButtonProps) => (
+  <LabeledIconButton size={size} Icon={CallEndIcon} onClick={onLeave} label="Leave Meeting"/>
+)
+
+interface ControlbarProps {
+  spacing?: number,
+  size?: number,
+
+}
+export const ControlBar = ({ onLeave, style, spacing=15, size } : ControlbarProps & LeaveMeetingProps & Styled) => {
+  const { isHost } = React.useContext(CurrentCallContext)
+  const itemStyle = { marginLeft: spacing, marginRight: spacing }
+
+  return (
+    <Flex flex={1} alignItems="center" justifyContent="center" style={style}>
+      <Paper elevation={5} style={{ display: 'flex', flexDirection: 'row', padding: spacing }}>
+        <Flex style={itemStyle}>
+          <VideoToggle size={size}/>
+        </Flex>
+        <Flex style={itemStyle}>
+          <MicrophoneToggle size={size}/>
+        </Flex>
+        <Flex style={itemStyle}>
+          {isHost ? <EndMeeting size={size}/> : <LeaveMeeting size={size} onLeave={onLeave}/>}
+        </Flex>
+      </Paper>
+    </Flex>
+  )
 }

package/src/video.native.tsx

@@ -20,12 +20,7 @@ import { Flex } from "@tellescope/react-components/lib/esm/layout"
 import { 
   Button, 
   Typography, 
-  convert_CSS_to_RNStyles,
-
-  VideoIcon,
-  VideoOffIcon,
-  MicrophoneIcon,
-  MicrophoneOffIcon,
+  convert_CSS_to_RNStyles, // requires mui.native
 } from "@tellescope/react-components/lib/esm/mui.native"
 
 import {
@@ -35,7 +30,7 @@ import {
   VideoProps,
   AttendeeDisplayInfo,
   VideoViewProps,
-} from "./video.js"
+} from "./video_shared"
 
 import {
   getSDKEventEmitter,
@@ -44,6 +39,8 @@ import {
 } from "./native/bridge"
 import { RNVideoView } from "./native/RNVideoRenderView"
 
+export { CurrentCallContext }
+
 interface TileState {
   isLocal: boolean,
   isScreenShare: boolean,
@@ -52,6 +49,7 @@ interface TileState {
 
 export const WithVideo = ({ children } : VideoProps) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
+  const [isHost, setIsHost] = useState(false)
 
   const [inMeeting, setInMeeting] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
@@ -64,6 +62,9 @@ export const WithVideo = ({ children } : VideoProps) => {
 
   const toggleVideo = async () => {
     NativeFunction.setCameraOn(!videoIsEnabled)
+    if (videoIsEnabled) {
+      setLocalTileId(null)
+    }
     setVideoIsEnabled(v => !v)
   }
   const toggleMic = async () => {
@@ -145,6 +146,7 @@ export const WithVideo = ({ children } : VideoProps) => {
 
   return (
     <CurrentCallContext.Provider value={{ 
+      isHost, setIsHost,
       attendees, 
       localTileId,
       videoTiles, 
@@ -162,18 +164,18 @@ export const WithVideo = ({ children } : VideoProps) => {
 }
 
 
-export const useRemoteViews = ({ style } : { style: React.CSSProperties }) => {
+export const useRemoteViews = (props={} as { style: React.CSSProperties }) => {
   const { localTileId, videoTiles } = React.useContext(CurrentCallContext)
   const nonLocal = videoTiles.filter(v => v !== localTileId)
 
   return nonLocal.map(tileId => 
-    <RNVideoView style={convert_CSS_to_RNStyles(style) ?? styles.video} tileId={tileId} />
+    <RNVideoView key={tileId} style={convert_CSS_to_RNStyles(props.style) ?? styles.video} tileId={tileId} />
   )
 }
 
 export const SelfView = ({ style } : VideoViewProps) => {
   const { localTileId } = React.useContext(CurrentCallContext)
-  if (!localTileId) return null
+  if (localTileId === null) return null // localTileId may be zero, don't return null on simple falsey check
   
   return (
     <RNVideoView style={convert_CSS_to_RNStyles(style) ?? styles.video} tileId={localTileId}/>
@@ -182,7 +184,7 @@ export const SelfView = ({ style } : VideoViewProps) => {
 
 export const useStartVideoCall = (): StartVideoCallReturnType => {
   const session = useSession()
-  const { meeting, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
+  const { meeting, setMeeting, setIsHost, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
 
   const [starting, setStarting] = useState(false)
   const [ending, setEnding] = useState(false)
@@ -198,6 +200,7 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
       NativeFunction.startMeeting(meeting.Meeting, host.Attendee)
 
       setMeeting(meeting.Meeting)
+      setIsHost(true)
     } catch(err) {
       console.error(err)
     }

package/src/video.tsx

@@ -35,24 +35,18 @@ import {
   // useRemoteVideoTileState,
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
-import {  } from "../../../types-client/node_modules/@tellescope/types-models/src"
-
-export type AttendeeDisplayInfo =  { attendeeId: string, externalUserId: string }
-
-export const CurrentCallContext = React.createContext({} as {
-  meeting: MeetingInfo | undefined, setMeeting: (m: MeetingInfo | undefined) => void,
-  videoIsEnabled: boolean, toggleVideo: () => Promise<void>,
-  microphoneIsEnabled: boolean, toggleMicrophone: () => Promise<void>,
-  attendees: AttendeeDisplayInfo[], shareScreenId: number | null,
-  localTileId: number | null,
-  videoTiles: (number)[],
-})
-export interface VideoProps {
-  children?: React.ReactNode,
-  theme?: typeof darkTheme,
-}
+
+import {
+  CurrentCallContext,
+
+  AttendeeDisplayInfo,
+  VideoProps,
+  VideoViewProps,
+} from "./video_shared"
+
 const WithContext = ({ children } : { children: React.ReactNode }) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
+  const [isHost, setIsHost] = useState(false)
   const { toggleVideo, isVideoEnabled: videoIsEnabled, tileId: localTileId } = useLocalVideo();
   const { roster } = useRosterState()
   const { tileId } = useContentShareState()
@@ -67,6 +61,7 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
 
   return (
     <CurrentCallContext.Provider value={{ 
+      isHost, setIsHost,
       attendees, 
       localTileId,
       videoTiles: tiles, 
@@ -82,8 +77,8 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
     </CurrentCallContext.Provider>
   )
 }
-export const WithVideo = ({ children, theme=darkTheme }: VideoProps) => (
-  <ThemeProvider theme={theme}>
+export const WithVideo = ({ children }: VideoProps) => (
+  <ThemeProvider theme={darkTheme}>
   <MeetingProvider>
   <WithContext>
     {children}
@@ -95,9 +90,9 @@ export const WithVideo = ({ children, theme=darkTheme }: VideoProps) => (
 export const useStartVideoCall = () => {
   const [starting, setStarting] = useState(false)
   const [ending, setEnding] = useState(false)
-  const { meeting, setMeeting, toggleVideo, videoIsEnabled } = React.useContext(CurrentCallContext)
+  const { meeting, setMeeting, toggleVideo, videoIsEnabled, setIsHost } = React.useContext(CurrentCallContext)
 
-  const session = useSession()
+  const session = useSession() // meetings can only be started by users, not endusers (for now)
   const meetingManager = useMeetingManager();
 
   const createAndStartMeeting = async (initialAttendees?: UserIdentity[]) => {
@@ -114,6 +109,7 @@ export const useStartVideoCall = () => {
       }
 
       setMeeting(meeting.Meeting)
+      setIsHost(true)
     } catch(err) {
       console.error(err)
     }
@@ -157,17 +153,14 @@ export const useJoinVideoCall = () => {
 }
 export type JoinVideoCallReturnType = ReturnType<typeof useJoinVideoCall>
 
-export interface VideoViewProps {
-  style?: CSSProperties,
-}
 export const SelfView = ({ style }: VideoViewProps) => <div style={style}><LocalVideo/></div>
 
-export const useRemoteViews = ({ style } : VideoViewProps) => {
+export const useRemoteViews = (props={} as VideoViewProps) => {
   const { localTileId, videoTiles } = React.useContext(CurrentCallContext)
   const nonLocal = videoTiles.filter(v => v !== localTileId)
 
   return nonLocal.map(tileId => 
-    <RemoteVideo style={style} tileId={tileId} />
+    <RemoteVideo key={tileId} style={props.style} tileId={tileId} />
   )
 }
 

package/src/video_shared.tsx

@@ -0,0 +1,48 @@
+import React, { CSSProperties } from "react"
+
+import {
+  AttendeeInfo,
+  MeetingInfo,
+} from '@tellescope/types-models'
+
+import {
+  UserIdentity,
+} from '@tellescope/types-utilities'
+
+export type AttendeeDisplayInfo =  { attendeeId: string, externalUserId: string }
+export interface CallContext {
+  meeting: MeetingInfo | undefined, setMeeting: (m: MeetingInfo | undefined) => void,
+  videoIsEnabled: boolean, toggleVideo: () => Promise<void>,
+  microphoneIsEnabled: boolean, toggleMicrophone: () => Promise<void>,
+  attendees: AttendeeDisplayInfo[], shareScreenId: number | null,
+  localTileId: number | null,
+  isHost: boolean, setIsHost: (b: boolean) => void;
+  videoTiles: (number)[],
+}
+
+export const CurrentCallContext = React.createContext({} as CallContext)
+export interface VideoProps {
+  children?: React.ReactNode,
+}
+
+export interface VideoViewProps {
+  style?: CSSProperties,
+}
+
+export interface JoinVideoCallReturnType {
+  meeting: CallContext['meeting'], 
+  videoIsEnabled: CallContext['videoIsEnabled'], 
+  toggleVideo: CallContext['toggleVideo'], 
+  joinMeeting: (meetingInfo: { Meeting: MeetingInfo }, attendeeInfo: { Attendee: AttendeeInfo }) => Promise<void>,
+}
+
+export interface StartVideoCallReturnType {
+  starting: boolean, 
+  ending: boolean, 
+  meeting: CallContext['meeting'],
+  videoIsEnabled: CallContext['videoIsEnabled'], 
+  toggleVideo: CallContext['toggleVideo'], 
+  createAndStartMeeting: (initialAttendees?: UserIdentity[]) => Promise<void>, 
+  addAttendees: (attendees: UserIdentity[]) => Promise<void>, 
+  endMeeting: () => Promise<void>,
+}

package/lib/esm/components.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=components.d.ts.map

package/lib/esm/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":""}

package/lib/esm/components.js

@@ -1,3 +0,0 @@
-"use strict";
-// components that work with web or native
-//# sourceMappingURL=components.js.map

package/lib/esm/components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components.tsx"],"names":[],"mappings":";AAAA,0CAA0C"}