Add usage code for changeBackgroundReplacementImage in storybook

aws · Aug 8, 2024 · 4d239d8 · 4d239d8
1 parent 4e54039
commit 4d239d8
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `changeBackgroundReplacementImage` function in the `BackgroundReplacementProvider` to enable the functionality of changing the background replacement image. `changeBackgroundReplacementImage` will take a `Blob` as its parameter and return a `Promise`.
+- Add usage of `changeBackgroundReplacementImage` in storybook.
 
 ### Removed
 

diff --git a/src/providers/BackgroundReplacementProvider/docs/BackgroundReplacementProvider.mdx b/src/providers/BackgroundReplacementProvider/docs/BackgroundReplacementProvider.mdx
@@ -75,8 +75,26 @@ import {
   useMeetingManager,
   useBackgroundReplacement,
   useVideoInputs,
+  useLogger,
 } from 'amazon-chime-sdk-component-library-react';
 
+// Define Background replacement options
+enum ReplacementOptions {
+  Blue = 'Blue',
+  Beach = 'Beach',
+}
+
+enum ReplacementType {
+  Color,
+  Image,
+};
+
+type ReplacementDropdownOptionType = {
+  label: ReplacementOptions;
+  type: ReplacementType;
+  value: string;
+};
+
 const App = () => (
   <BackgroundReplacementProvider>
     <MeetingProvider>
@@ -92,7 +110,24 @@ const MyChild = () => {
   const {
     isBackgroundReplacementSupported,
     createBackgroundReplacementDevice,
+    changeBackgroundReplacementImage,
   } = useBackgroundReplacement();
+  const logger = useLogger();
+  const [backgroundReplacementOption, setBackgroundReplacementOption] = 
+    useState<ReplacementOptions>(ReplacementOptions.Blue);
+
+  const replacementOptionsList: ReplacementDropdownOptionType[] = [
+    {
+      label: ReplacementOptions.Blue,
+      type: ReplacementType.Color,
+      value: '#0000ff',
+    },
+    {
+      label: ReplacementOptions.Beach,
+      type: ReplacementType.Image,
+      value: ReplacementOptions.Beach,
+    },
+  ];
 
   useEffect(() => {
     async function toggleBackgroundReplacement() {
@@ -121,6 +156,25 @@ const MyChild = () => {
     setisVideoTransformCheckOn((current) => !current);
   };
 
+  const changeBackgroundReplacementOption = async (replacementOption: string) => {
+    let current = selectedDevice;
+    if (current === undefined) {
+      return;
+    }
+    try {
+      const selectedOption = replacementOptionsList.find(option => replacementOption === option.label);
+      if (selectedOption) {
+        const blob = await createBlob(selectedOption); // Refer to https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/utils/background-replacement.ts#L7 for the implementation.
+        await changeBackgroundReplacementImage(blob);
+        setBackgroundReplacementOption(selectedOption.label); 
+      } else {
+        logger.error(`Error: Cannot find ${replacementOption} in the replacementOptionsList: ${replacementOptionsList}`);
+      }
+    } catch (error) {
+      logger.error(`Error trying to change background replacement image ${error}`);
+    }
+  };
+
   return (
     <div>
       {isBackgroundReplacementSupported && (
@@ -129,6 +183,13 @@ const MyChild = () => {
             ? 'Background Replacement Enabled'
             : 'Enable Background Replacement'}
         </button>
+        {replacementOptionsList.map((option) => (
+          <button
+            onClick={async () => await changeBackgroundReplacementOption(option.label)}
+          >
+            {option.label}
+          </button>
+        ))}
       )}
     </div>
   );

diff --git a/src/providers/BackgroundReplacementProvider/docs/useBackgroundReplacement.mdx b/src/providers/BackgroundReplacementProvider/docs/useBackgroundReplacement.mdx
@@ -60,8 +60,26 @@ import {
   useMeetingManager,
   useBackgroundReplacement,
   useVideoInputs,
+  useLogger,
 } from 'amazon-chime-sdk-component-library-react';
 
+// Define Background replacement options
+enum ReplacementOptions {
+  Blue = 'Blue',
+  Beach = 'Beach',
+}
+
+enum ReplacementType {
+  Color,
+  Image,
+};
+
+type ReplacementDropdownOptionType = {
+  label: ReplacementOptions;
+  type: ReplacementType;
+  value: string;
+};
+
 const App = () => (
   <BackgroundReplacementProvider>
     <MeetingProvider>
@@ -78,7 +96,24 @@ const MyChild = () => {
   const {
     isBackgroundReplacementSupported,
     createBackgroundReplacementDevice,
+    changeBackgroundReplacementImage,
   } = useBackgroundReplacement();
+  const logger = useLogger();
+  const [backgroundReplacementOption, setBackgroundReplacementOption] = 
+    useState<ReplacementOptions>(ReplacementOptions.Blue);
+
+  const replacementOptionsList: ReplacementDropdownOptionType[] = [
+    {
+      label: ReplacementOptions.Blue,
+      type: ReplacementType.Color,
+      value: '#0000ff',
+    },
+    {
+      label: ReplacementOptions.Beach,
+      type: ReplacementType.Image,
+      value: ReplacementOptions.Beach,
+    },
+  ];
 
   useEffect(() => {
     async function toggleBackgroundReplacement() {
@@ -107,6 +142,25 @@ const MyChild = () => {
     setisVideoTransformCheckBoxOn((current) => !current);
   };
 
+  const changeBackgroundReplacementOption = async (replacementOption: string) => {
+    let current = selectedDevice;
+    if (current === undefined) {
+      return;
+    }
+    try {
+      const selectedOption = replacementOptionsList.find(option => replacementOption === option.label);
+      if (selectedOption) {
+        const blob = await createBlob(selectedOption); // Refer to https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/utils/background-replacement.ts#L7 for the implementation.
+        await changeBackgroundReplacementImage(blob);
+        setBackgroundReplacementOption(selectedOption.label); 
+      } else {
+        logger.error(`Error: Cannot find ${replacementOption} in the replacementOptionsList: ${replacementOptionsList}`);
+      }
+    } catch (error) {
+      logger.error(`Error trying to change background replacement image ${error}`);
+    }
+  };
+
   return (
     <div>
       {isBackgroundReplacementSupported && (
@@ -115,6 +169,13 @@ const MyChild = () => {
             ? 'Background Replacement Enabled'
             : 'Enable Background Replacement'}
         </button>
+        {replacementOptionsList.map((option) => (
+          <button
+            onClick={async () => await changeBackgroundReplacementOption(option.label)}
+          >
+            {option.label}
+          </button>
+        ))}
       )}
     </div>
   );