@tellescope/video-chat 1.76.0 → 1.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "1.76.0",
+  "version": "1.78.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.76.0",
-    "@tellescope/react-components": "^1.76.0",
-    "@tellescope/sdk": "^1.76.0",
-    "@tellescope/types-client": "^1.76.0",
-    "@tellescope/types-models": "^1.76.0",
+    "@tellescope/constants": "^1.78.0",
+    "@tellescope/react-components": "^1.78.0",
+    "@tellescope/sdk": "^1.78.0",
+    "@tellescope/types-client": "^1.78.0",
+    "@tellescope/types-models": "^1.78.0",
     "@tellescope/types-utilities": "^1.69.3",
-    "@tellescope/utilities": "^1.76.0",
+    "@tellescope/utilities": "^1.78.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": "896f4625c43cf6fb258b5017c80d5522095e4b14",
+  "gitHead": "37a62cf8570d9bd4a9068a1dc583567a4dbaa39a",
   "publishConfig": {
     "access": "public"
   }

package/src/video.tsx

@@ -38,11 +38,9 @@ import {
   MeetingStatus,
   ContentShareControl,
   VideoInputBackgroundBlurControl,
-  BackgroundBlurProvider,
   // CameraSelection,
-  // BackgroundReplacementProvider,
-  // useVideoInputs,
-  // useBackgroundReplacement,
+  useVideoInputs,
+  useBackgroundReplacement,
   // useRemoteVideoTileState,
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
@@ -210,7 +208,6 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
 
 //   return (
 //     <ThemeProvider theme={darkTheme}>
-//     <BackgroundBlurProvider>
 //     <BackgroundReplacementProvider options={{ imageBlob }}>
 //     <MeetingProvider>
 //     <WithContext>
@@ -218,20 +215,17 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
 //     </WithContext>
 //     </MeetingProvider>
 //     </BackgroundReplacementProvider>
-//     </BackgroundBlurProvider>
 //     </ThemeProvider>
 //   )
 // }
 
 export const WithVideo = ({ children }: VideoProps) => (
   <ThemeProvider theme={darkTheme}>
-  <BackgroundBlurProvider>
   <MeetingProvider>
   <WithContext>
     {children}
   </WithContext>
   </MeetingProvider>
-  </BackgroundBlurProvider>
   </ThemeProvider>
 )
 
@@ -434,52 +428,48 @@ export const BlurToggleIcon = () => (
   <VideoInputBackgroundBlurControl />
 )
 
-// export const ToggleBackgroundImageButton = () => {
-//   const meetingManager = useMeetingManager();
-//   const { selectedDevice } = useVideoInputs();
-//   const [isVideoTransformCheckBoxOn, setisVideoTransformCheckBoxOn] =
-//     useState(false);
-//   const {
-//     isBackgroundReplacementSupported,
-//     createBackgroundReplacementDevice,
-//   } = useBackgroundReplacement();
+export const ToggleBackgroundImageButton = () => {
+  const meetingManager = useMeetingManager();
+  const { selectedDevice } = useVideoInputs();
+  const [isVideoTransformCheckBoxOn, setisVideoTransformCheckBoxOn] = useState(false);
+  const { isBackgroundReplacementSupported, createBackgroundReplacementDevice } = useBackgroundReplacement();
 
-//   useEffect(() => {
-//     async function toggleBackgroundReplacement() {
-//       try {
-//         let current = selectedDevice;
-//         if (isVideoTransformCheckBoxOn) {
-//           current = await createBackgroundReplacementDevice(selectedDevice as any);
-//         } else {
-//           if (isVideoTransformDevice(selectedDevice)) {
-//             let intrinsicDevice = await selectedDevice.intrinsicDevice();
-//             selectedDevice.stop();
-//             current = intrinsicDevice;
-//           }
-//         }
-//         await meetingManager.startVideoInputDevice(current!);
-//       } catch (error) {
-//         // Handle device selection failure here
-//         console.error('Failed to toggle BackgroundReplacement');
-//       }
-//     }
-
-//     toggleBackgroundReplacement();
-//   }, [isVideoTransformCheckBoxOn]);
-
-//   const onClick = () => {
-//     setisVideoTransformCheckBoxOn((current) => !current);
-//   };
+  useEffect(() => {
+    async function toggleBackgroundReplacement() {
+      try {
+        let current = selectedDevice;
+        if (isVideoTransformCheckBoxOn) {
+          current = await createBackgroundReplacementDevice(selectedDevice as any);
+        } else {
+          if (isVideoTransformDevice(selectedDevice)) {
+            let intrinsicDevice = await selectedDevice.intrinsicDevice();
+            selectedDevice.stop();
+            current = intrinsicDevice;
+          }
+        }
+        await meetingManager.startVideoInputDevice(current!);
+      } catch (error) {
+        // Handle device selection failure here
+        console.error('Failed to toggle BackgroundReplacement');
+      }
+    }
 
-//   return (
-//     <div>
-//       {isBackgroundReplacementSupported && (
-//         <button onClick={onClick}>
-//           {isVideoTransformDevice(selectedDevice)
-//             ? 'Background Replacement Enabled'
-//             : 'Enable Background Replacement'}
-//         </button>
-//       )}
-//     </div>
-//   );
-// };
+    toggleBackgroundReplacement();
+  }, [isVideoTransformCheckBoxOn]);
+
+  const onClick = () => {
+    setisVideoTransformCheckBoxOn((current) => !current);
+  };
+
+  return (
+    <div>
+      {isBackgroundReplacementSupported && (
+        <button onClick={onClick}>
+          {isVideoTransformDevice(selectedDevice)
+            ? 'Background Replacement Enabled'
+            : 'Enable Background Replacement'}
+        </button>
+      )}
+    </div>
+  );
+};