@tellescope/video-chat 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -33,17 +33,17 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^0.0.15",
-    "@tellescope/react-components": "^0.0.15",
-    "@tellescope/sdk": "^0.0.15",
-    "@tellescope/types-client": "^0.0.15",
-    "@tellescope/types-models": "^0.0.15",
-    "@tellescope/types-utilities": "^0.0.15",
-    "@tellescope/utilities": "^0.0.15",
+    "@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",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "amazon-chime-sdk-component-library-react": "^2.12.0",
-    "amazon-chime-sdk-js": "^2.23.0",
+    "amazon-chime-sdk-js": "^2.24.0",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.26.1",
     "nodemon": "^2.0.13",
@@ -54,7 +54,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "bafbe70fd6546fdbc894fd408ae071709d3c5b80",
+  "gitHead": "06e581f4d3a6c5b57fd0cfcc22103b94125f9da4",
   "publishConfig": {
     "access": "public"
   }

package/src/controls.tsx

@@ -0,0 +1,33 @@
+// components that work with web or native
+import React from "react"
+
+import { 
+  VideoIcon,
+  VideoOffIcon,
+  MicrophoneIcon,
+  MicrophoneOffIcon,
+} from "@tellescope/react-components/lib/esm/mui"
+import { LabeledIconButton } from "@tellescope/react-components/lib/esm/controls"
+import {
+  CurrentCallContext,
+} from "./video"
+
+export const VideoToggle = () => {
+  const { toggleVideo, videoIsEnabled } = React.useContext(CurrentCallContext)
+
+  return (
+    <LabeledIconButton Icon={videoIsEnabled ? VideoIcon : VideoOffIcon} onClick={toggleVideo} 
+      label={videoIsEnabled ? "Turn Camera Off" : "Turn Camera On"}
+    />
+  )
+}
+
+export const MicrophoneToggle = () => {
+  const { microphoneIsEnabled, toggleMicrophone } = React.useContext(CurrentCallContext)
+
+  return (
+    <LabeledIconButton Icon={microphoneIsEnabled ? MicrophoneIcon : MicrophoneOffIcon} onClick={toggleMicrophone} 
+      label={microphoneIsEnabled ? "Turn Microphone Off" : "Turn Microphone On"}
+    />
+  )
+}

package/src/index.native.ts

@@ -1 +1,2 @@
-export * from "./video" 
+export * from "./video" 
+export * from "./controls" 

package/src/index.ts

@@ -1 +1,2 @@
-export * from "./video";
+export * from "./video";
+export * from "./controls"

package/src/native/RNVideoRenderView.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { requireNativeComponent, findNodeHandle, ViewStyle } from 'react-native';
 import { NativeFunction } from './bridge';
 
-export class RNVideoView extends React.Component<{ tileId: string | number, style?: ViewStyle }> {
+export class RNVideoView extends React.Component<{ tileId: number, style?: ViewStyle }> {
   componentDidMount() {
     // we need to delay the bind video 
     // Because "componentDidMount" will be called "immediately after the initial rendering occurs"

package/src/video.native.tsx

@@ -17,14 +17,24 @@ import {
 } from '@tellescope/types-utilities'
 import { useSession } from "@tellescope/react-components/lib/esm/authentication"
 import { Flex } from "@tellescope/react-components/lib/esm/layout"
-import { Button, Typography } from "@tellescope/react-components/lib/esm/mui"
+import { 
+  Button, 
+  Typography, 
+  convert_CSS_to_RNStyles,
+
+  VideoIcon,
+  VideoOffIcon,
+  MicrophoneIcon,
+  MicrophoneOffIcon,
+} from "@tellescope/react-components/lib/esm/mui.native"
 
 import {
   CurrentCallContext,
   JoinVideoCallReturnType,
   StartVideoCallReturnType,
   VideoProps,
-  AttendeeDisplayInfo
+  AttendeeDisplayInfo,
+  VideoViewProps,
 } from "./video.js"
 
 import {
@@ -40,20 +50,26 @@ interface TileState {
   tileId: number,
 }
 
-export const WithVideo = ({ children } : VideoProps ) => {
+export const WithVideo = ({ children } : VideoProps) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
 
   const [inMeeting, setInMeeting] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [muted, setMuted] = useState(false)
   const [videoIsEnabled, setVideoIsEnabled] = useState(false)
   const [videoTiles, setVideoTiles] = useState([] as number[])
+  const [localTileId, setLocalTileId] = useState(null as number | null)
   const [screenShareTile, setScreenShareTile] = useState(null as number | null)
   const [attendees, setAttendees] = useState ([] as AttendeeDisplayInfo[])
 
   const toggleVideo = async () => {
-    console.log('toggling', NativeFunction.setCameraOn(!videoIsEnabled))
+    NativeFunction.setCameraOn(!videoIsEnabled)
     setVideoIsEnabled(v => !v)
   }
+  const toggleMic = async () => {
+    NativeFunction.setMute(!muted)
+    setMuted(m => !m)
+  }
   const emitter = getSDKEventEmitter()
 
   useEffect(() => { 
@@ -98,6 +114,9 @@ export const WithVideo = ({ children } : VideoProps ) => {
         setScreenShareTile(tileState.tileId)
         return
       }
+      if (tileState.isLocal) {
+        setLocalTileId(tileState.tileId)
+      }
       setVideoTiles(v => [...v, tileState.tileId])
       setVideoIsEnabled(v => tileState.isLocal ? true : v)
     });
@@ -127,18 +146,40 @@ export const WithVideo = ({ children } : VideoProps ) => {
   return (
     <CurrentCallContext.Provider value={{ 
       attendees, 
+      localTileId,
       videoTiles, 
       meeting, 
       shareScreenId: screenShareTile, 
       setMeeting, 
       videoIsEnabled, 
-      toggleVideo 
+      toggleVideo, 
+      microphoneIsEnabled: !muted,
+      toggleMicrophone: toggleMic,
     }}>
       {children}
     </CurrentCallContext.Provider>
   )
 }
 
+
+export const useRemoteViews = ({ style } : { 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} />
+  )
+}
+
+export const SelfView = ({ style } : VideoViewProps) => {
+  const { localTileId } = React.useContext(CurrentCallContext)
+  if (!localTileId) return null
+  
+  return (
+    <RNVideoView style={convert_CSS_to_RNStyles(style) ?? styles.video} tileId={localTileId}/>
+  )
+}
+
 export const useStartVideoCall = (): StartVideoCallReturnType => {
   const session = useSession()
   const { meeting, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
@@ -182,7 +223,16 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
     setMeeting(undefined)
   }
 
-  return { meeting, videoIsEnabled, starting, ending, toggleVideo, createAndStartMeeting, addAttendees, endMeeting }
+  return { 
+    meeting, 
+    videoIsEnabled, 
+    starting, 
+    ending, 
+    toggleVideo, 
+    createAndStartMeeting, 
+    addAttendees, 
+    endMeeting,
+  }
 }
 
 export const useJoinVideoCall = (): JoinVideoCallReturnType => {

package/src/video.tsx

@@ -12,14 +12,6 @@ import {
   MeetingInfo,
 } from '@tellescope/types-models'
 
-import {
-  user_display_name,
-} from "@tellescope/utilities"
-
-import {
-  Session,
-  EnduserSession,
-} from "@tellescope/sdk"
 
 import { ThemeProvider } from 'styled-components';
 import {
@@ -31,12 +23,15 @@ import {
   // VideoGrid,
   // VideoTile,
   // PreviewVideo,
-  // RemoteVideo,
+  RemoteVideo,
   useAttendeeAudioStatus,
+  LocalVideo,
   useLocalVideo,
   useMeetingManager,
   useRosterState,
-  useRemoteVideoTileState
+  useRemoteVideoTileState,
+  VideoTile,
+  useToggleLocalMute,
   // useRemoteVideoTileState,
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
@@ -47,8 +42,10 @@ 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,
-  videoTiles: (number | string)[],
+  localTileId: number | null,
+  videoTiles: (number)[],
 })
 export interface VideoProps {
   children?: React.ReactNode,
@@ -56,10 +53,11 @@ export interface VideoProps {
 }
 const WithContext = ({ children } : { children: React.ReactNode }) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
-  const { toggleVideo, isVideoEnabled: videoIsEnabled } = useLocalVideo();
+  const { toggleVideo, isVideoEnabled: videoIsEnabled, tileId: localTileId } = useLocalVideo();
   const { roster } = useRosterState()
   const { tileId } = useContentShareState()
   const { tiles } = useRemoteVideoTileState()
+  const { muted, toggleMute } = useToggleLocalMute()
 
   const attendees = [] as AttendeeDisplayInfo[]
   for (const attendeeId in roster) {
@@ -68,7 +66,18 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
   }
 
   return (
-    <CurrentCallContext.Provider value={{ attendees, videoTiles: tiles, shareScreenId: tileId, meeting, setMeeting, videoIsEnabled, toggleVideo }}>
+    <CurrentCallContext.Provider value={{ 
+      attendees, 
+      localTileId,
+      videoTiles: tiles, 
+      shareScreenId: tileId, 
+      meeting, 
+      setMeeting, 
+      videoIsEnabled, 
+      toggleVideo, 
+      microphoneIsEnabled: !muted,
+      toggleMicrophone: async () => toggleMute(),
+    }}>
       {children}
     </CurrentCallContext.Provider>
   )
@@ -148,4 +157,19 @@ 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) => {
+  const { localTileId, videoTiles } = React.useContext(CurrentCallContext)
+  const nonLocal = videoTiles.filter(v => v !== localTileId)
+
+  return nonLocal.map(tileId => 
+    <RemoteVideo style={style} tileId={tileId} />
+  )
+}
+
+
 export { VideoTileGrid }