@tellescope/video-chat 1.167.0 → 1.168.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "1.167.0",
+  "version": "1.168.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.167.0",
-    "@tellescope/react-components": "^1.167.0",
-    "@tellescope/sdk": "^1.167.0",
-    "@tellescope/types-client": "^1.167.0",
-    "@tellescope/types-models": "^1.167.0",
-    "@tellescope/types-utilities": "^1.167.0",
-    "@tellescope/utilities": "^1.167.0",
+    "@tellescope/constants": "^1.168.0",
+    "@tellescope/react-components": "^1.168.0",
+    "@tellescope/sdk": "^1.168.0",
+    "@tellescope/types-client": "^1.168.0",
+    "@tellescope/types-models": "^1.168.0",
+    "@tellescope/types-utilities": "^1.168.0",
+    "@tellescope/utilities": "^1.168.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "amazon-chime-sdk-component-library-react": "^3.7.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": "c38c1cdd092cc5a0881c68117d88e98b83daed8e",
+  "gitHead": "2a92eab06c67bafc1445136c8e81dab4a94d260e",
   "publishConfig": {
     "access": "public"
   }

package/src/controls.tsx

@@ -1,5 +1,5 @@
 // components that work with web or native
-import React from "react"
+import React, { useCallback, useEffect, useState } from "react"
 
 import { 
   VideoIcon,
@@ -9,14 +9,19 @@ import {
   CallEndIcon,
   LabeledIconButton,
   Flex,
-  Paper,
   Styled,
   Button,
-  Typography,
 } from "@tellescope/react-components"
 import { CurrentCallContext } from "./video_shared"
 import { useStartVideoCall } from "./video"
-import { BlurToggleIcon, ScreenShareIcon, useJoinVideoCall } from "."
+import { useJoinVideoCall } from "."
+import { 
+  AudioInputControl,
+  AudioOutputControl,
+  ControlBar as BaseControlBar,
+  Camera, ContentShareControl, ControlBarButton, Phone, useBackgroundBlur, useMeetingManager, useVideoInputs 
+} from "amazon-chime-sdk-component-library-react"
+import { isVideoTransformDevice } from "amazon-chime-sdk-js"
 
 const DEFAULT_BUTTON_SIZE = 30
 interface ButtonProps {
@@ -77,6 +82,43 @@ export const LeaveMeeting = ({ onLeave, size=DEFAULT_BUTTON_SIZE } : LeaveMeetin
   )
 }
 
+const useToggleBlur = () => {
+  const meetingManager = useMeetingManager();
+  const { selectedDevice } = useVideoInputs();
+  const { isBackgroundBlurSupported, createBackgroundBlurDevice } = useBackgroundBlur();
+  const [isVideoTransformCheckBoxOn, setisVideoTransformCheckBoxOn] = useState(false);
+
+  useEffect(() => {
+    async function toggleBackgroundBlur() {
+      try {
+        let current = selectedDevice;
+        if (isVideoTransformCheckBoxOn) {
+          current = await createBackgroundBlurDevice(selectedDevice as any);
+        } else {
+          if (isVideoTransformDevice(selectedDevice)) {
+            current = await selectedDevice.intrinsicDevice();
+          }
+        }
+        await meetingManager.startVideoInputDevice(current!);
+      } catch (error) {
+        // Handle device selection failure here
+        console.error('Failed to toggle Background Blur');
+      }
+    }
+
+    toggleBackgroundBlur();
+  // eslint-disable-next-line
+  }, [isVideoTransformCheckBoxOn]);
+
+  const toggleBlur = useCallback(() => setisVideoTransformCheckBoxOn((current) => !current), [])
+
+  return {
+    blurIsActive: isVideoTransformCheckBoxOn,
+    isBackgroundBlurSupported,
+    toggleBlur,
+  }
+};
+
 interface ControlbarProps {
   spacing?: number,
   size?: number,
@@ -88,52 +130,67 @@ export const ControlBar = ({ onLeave, style, spacing=15, size, showEndMeeting, s
   const { isHost } = React.useContext(CurrentCallContext)
   const itemStyle = { marginLeft: spacing, marginRight: spacing }
 
+  const { leaveMeeting } = useJoinVideoCall()
+  const { toggleVideo, videoIsEnabled: cameraActive } = React.useContext(CurrentCallContext)
+
+  const { blurIsActive, isBackgroundBlurSupported, toggleBlur } = useToggleBlur()
+  // const { backgroundIsActive, isBackgroundReplacementSupported, toggleBackground } = useToggleReplacement()
+
+  const cameraButtonProps = {
+    icon: cameraActive ? <Camera /> : <Camera disabled />,
+    isSelected: true,
+    popOver: ([
+      ...(
+        isBackgroundBlurSupported ? 
+          [{
+            onClick: toggleBlur,
+            children: (
+              <span style={{ fontWeight: blurIsActive ? 'bold' : undefined}}>
+                {blurIsActive ? "Disable Blur" : "Blur Background"}
+              </span>
+            )
+          }] 
+          : []
+      ),
+      // ...(
+      //   isBackgroundReplacementSupported ? 
+      //     [{
+      //       onClick: toggleBackground,
+      //       children: (
+      //         <span style={{ fontWeight: backgroundIsActive ? 'bold' : undefined}}>
+      //           {backgroundIsActive ? "Remove Background Image" : "Use Background Image"}
+      //         </span>
+      //       )
+      //     }] 
+      //     : []
+      // ),
+    ]),
+    onClick: toggleVideo,
+    label: 'Camera',
+  };
+
+  const hangUpButtonProps = {
+    icon: <Phone />,
+    onClick: leaveMeeting,
+    label: 'Leave',
+  };
+
   return (
-    <Flex flex={1} alignItems="center" justifyContent="center" style={style}>
-      <Paper elevation={5} 
-        style={{ 
-          display: 'flex', flexDirection: 'row', padding: spacing,
-          backgroundColor: '#00000088',
-          borderColor: 'white',
-        }}
-      >
-        {showScreenShare &&
-          <Flex column justifyContent="center" style={itemStyle}>
-            <Flex>
-              <ScreenShareIcon />
-            </Flex>
-
-            <Flex>
-            <Typography style={{ color: 'white', textAlign: 'center', fontSize: 11 }}>
-              Screen share
-            </Typography>
-            </Flex>
-          </Flex>
-        }
-        {showBlurToggle &&
-          <Flex column justifyContent="center" style={itemStyle}>
-            <Flex>
-              <BlurToggleIcon />
-            </Flex>
-          </Flex>
-        }
-        {!showBlurToggle && // blur toggle also provides toggle video controls
-          <Flex style={itemStyle}>
-            <VideoToggle size={size}/>
-          </Flex>
-        }
-        <Flex style={itemStyle}>
-          <MicrophoneToggle size={size}/>
-        </Flex>
-        <Flex style={itemStyle}>
-          <LeaveMeeting size={size} onLeave={onLeave}/>
+    <BaseControlBar showLabels={true} layout="bottom" css="position: absolute;"
+      style={style}
+    >
+      <AudioInputControl />
+      <AudioOutputControl />
+      <ControlBarButton {...cameraButtonProps} />
+      {showScreenShare && <ContentShareControl iconTitle="Screen" label="Share" />}
+      <ControlBarButton {...hangUpButtonProps} />
+
+      {(isHost || showEndMeeting) &&
+        <Flex style={{ marginLeft: 30, marginRight: 20 }}>
+          <EndMeeting size={size} onLeave={onLeave} />
         </Flex>
-        {(isHost || showEndMeeting) && 
-          <Flex style={{ marginLeft: 30, marginRight: 20 }}>
-            <EndMeeting size={size} onLeave={onLeave} />
-          </Flex>
-        }
-      </Paper>
-    </Flex>
-  )
+      }
+
+    </BaseControlBar>
+  );
 }

package/src/video.tsx

@@ -42,6 +42,7 @@ import {
   useVideoInputs,
   useBackgroundReplacement,
   useAudioVideo,
+  BackgroundBlurProvider,
   // useRemoteVideoTileState,
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
@@ -252,9 +253,11 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
 export const WithVideo = ({ children }: VideoProps) => (
   <ThemeProvider theme={darkTheme}>
   <MeetingProvider>
+  <BackgroundBlurProvider>
   <WithContext>
     {children}
   </WithContext>
+  </BackgroundBlurProvider>
   </MeetingProvider>
   </ThemeProvider>
 )