agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/virtual-background/useVB.native.tsx

@@ -0,0 +1,205 @@
+import {createHook} from 'customization-implementation';
+import React from 'react';
+import {IconsInterface} from '../../atoms/CustomIcon';
+import {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
+import {retrieveImagesFromStorage} from './VButils.native';
+
+import RtcEngine, {
+  BackgroundBlurDegree,
+  VirtualBackgroundSource,
+  BackgroundSourceType,
+} from 'react-native-agora';
+import {useLocalUserInfo, useRtc} from 'customization-api';
+import RNFS from 'react-native-fs';
+import {ImageSourcePropType} from 'react-native/types';
+import imagePathsArray from './imagePaths';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+import {ToggleState} from '../../../agora-rn-uikit';
+
+export type VBMode = 'blur' | 'image' | 'custom' | 'none';
+
+export type Option = {
+  type: VBMode;
+  icon?: keyof IconsInterface;
+  path?: string & {default?: string};
+  label?: string;
+  id?: string;
+};
+
+type VBContextValue = {
+  isVBActive: boolean;
+  setIsVBActive: React.Dispatch<React.SetStateAction<boolean>>;
+  vbMode: VBMode;
+  setVBmode: React.Dispatch<React.SetStateAction<VBMode>>;
+  selectedImage: ImageSourcePropType | string | null;
+  setSelectedImage: React.Dispatch<
+    React.SetStateAction<ImageSourcePropType | string | null>
+  >;
+  previewVideoTrack: ILocalVideoTrack | null;
+  setPreviewVideoTrack: React.Dispatch<React.SetStateAction<ILocalVideoTrack> | null>;
+  saveVB: boolean;
+  setSaveVB: React.Dispatch<React.SetStateAction<boolean>>;
+  options: Option[];
+  setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
+};
+
+export const VBContext = React.createContext<VBContextValue>({
+  isVBActive: false,
+  setIsVBActive: () => {},
+  vbMode: null,
+  setVBmode: () => {},
+  selectedImage: null,
+  setSelectedImage: () => {},
+  previewVideoTrack: null,
+  setPreviewVideoTrack: () => {},
+  saveVB: false,
+  setSaveVB: () => {},
+  options: [],
+  setOptions: () => {},
+});
+
+const downloadBase64Image = async (base64Data, filename) => {
+  const extractData = base64Data.split(',')[1];
+  const filePath = `${RNFS.DocumentDirectoryPath}/${filename}`;
+
+  try {
+    await RNFS.writeFile(filePath, extractData, 'base64');
+    return filePath;
+  } catch (error) {
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Error saving base64 image',
+      error,
+    );
+    return null;
+  }
+};
+
+const VBProvider: React.FC = ({children}) => {
+  const [isVBActive, setIsVBActive] = React.useState<boolean>(false);
+  const [vbMode, setVBmode] = React.useState<VBMode>(null);
+  const [selectedImage, setSelectedImage] = React.useState<
+    ImageSourcePropType | string | null
+  >(null);
+  const [saveVB, setSaveVB] = React.useState(false);
+  // can be original video track/clone track
+  const [previewVideoTrack, setPreviewVideoTrack] = React.useState<null>(null);
+  const [options, setOptions] = React.useState<Option[]>(imagePathsArray);
+  const {video: localVideoStatus} = useLocalUserInfo();
+  const isLocalVideoON = localVideoStatus === ToggleState.enabled;
+
+  const rtc = useRtc();
+
+  /* Fetch Saved Images from AsyncStorage to show in VBPanel */
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const customImages = await retrieveImagesFromStorage();
+        logger.debug(
+          LogSource.Internals,
+          'VIRTUAL_BACKGROUND',
+          'retrived from async storage',
+          customImages,
+        );
+        setOptions((prevOptions: Option[]) => [
+          ...prevOptions,
+          ...(customImages?.map(
+            base64Data =>
+              ({
+                type: 'image',
+                icon: 'vb',
+                path: base64Data,
+              } as Option),
+          ) || []),
+        ]);
+      } catch (error) {
+        logger.error(
+          LogSource.Internals,
+          'VIRTUAL_BACKGROUND',
+          'Error fetching data',
+          error,
+        );
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  /* VB Change modes */
+  React.useEffect(() => {
+    if (!isLocalVideoON) {
+      return;
+    }
+    switch (vbMode) {
+      case 'blur':
+        blurVB();
+        break;
+      case 'image':
+        imageVB();
+        break;
+      case 'none':
+        disableVB();
+        break;
+      default:
+        break;
+    }
+  }, [vbMode, selectedImage, saveVB, previewVideoTrack, isLocalVideoON]);
+
+  const applyVirtualBackgroundToMainView = async (
+    config: VirtualBackgroundSource,
+    disable = false,
+  ) => {
+    if (disable) {
+      await rtc?.RtcEngineUnsafe.enableVirtualBackground(false, config, {});
+    } else {
+      await rtc?.RtcEngineUnsafe.enableVirtualBackground(true, config, {});
+    }
+  };
+
+  const blurVB = async () => {
+    const blurConfig: VirtualBackgroundSource = new VirtualBackgroundSource();
+    blurConfig.background_source_type = BackgroundSourceType.BackgroundBlur;
+    blurConfig.blur_degree = BackgroundBlurDegree.BlurDegreeMedium;
+    await applyVirtualBackgroundToMainView(blurConfig);
+  };
+
+  const imageVB = async () => {
+    const savedImagePath = await downloadBase64Image(selectedImage, 'img.png');
+    const imageConfig: VirtualBackgroundSource = new VirtualBackgroundSource();
+    imageConfig.background_source_type = BackgroundSourceType.BackgroundImg;
+    imageConfig.source = savedImagePath;
+    await applyVirtualBackgroundToMainView(imageConfig);
+  };
+
+  const disableVB = async () => {
+    const disableConfig: VirtualBackgroundSource =
+      new VirtualBackgroundSource();
+    disableConfig.background_source_type = BackgroundSourceType.BackgroundNone;
+    await applyVirtualBackgroundToMainView(disableConfig, true);
+  };
+
+  return (
+    <VBContext.Provider
+      value={{
+        isVBActive,
+        setIsVBActive,
+        vbMode,
+        setVBmode,
+        selectedImage,
+        setSelectedImage,
+        previewVideoTrack,
+        setPreviewVideoTrack,
+        saveVB,
+        setSaveVB,
+        options,
+        setOptions,
+      }}>
+      {children}
+    </VBContext.Provider>
+  );
+};
+
+const useVB = createHook(VBContext);
+
+export {VBProvider, useVB};

package/template/src/components/virtual-background/useVB.tsx

@@ -0,0 +1,294 @@
+import {createHook} from 'customization-implementation';
+import React, {useContext} from 'react';
+import {useEffect, useRef} from 'react';
+import {
+  SidePanelType,
+  useLocalUserInfo,
+  useRtc,
+  useSidePanel,
+} from 'customization-api';
+import AgoraRTC, {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
+import Image from 'react-native';
+import VirtualBackgroundExtension from 'agora-extension-virtual-background';
+//@ts-ignore
+import wasm1 from '../../wasms/agora-virtual-background.wasm';
+import {IconsInterface} from '../../atoms/CustomIcon';
+import {PropsContext, ToggleState} from '../../../agora-rn-uikit';
+import {isMobileUA} from '../../utils/common';
+import {retrieveImagesFromStorage} from './VButils';
+import imagePathsArray from './imagePaths';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+
+export type VBMode = 'blur' | 'image' | 'custom' | 'none';
+
+export type Option = {
+  type: VBMode;
+  icon?: keyof IconsInterface;
+  path?: string & {default?: string};
+  label?: string;
+  isSelected?: boolean;
+};
+
+export type VBProcessorType = ReturnType<
+  VirtualBackgroundExtension['_createProcessor']
+> | null;
+// processors for the main view and preview view
+let mainViewProcessor: ReturnType<
+  VirtualBackgroundExtension['_createProcessor']
+> | null = null;
+let previewViewProcessor: ReturnType<
+  VirtualBackgroundExtension['_createProcessor']
+> | null = null;
+
+// fn to initialize processors
+const initializeProcessors = () => {
+  try {
+    const mainViewExtension = new VirtualBackgroundExtension();
+    AgoraRTC.registerExtensions([mainViewExtension]);
+    mainViewProcessor = mainViewExtension.createProcessor();
+    mainViewProcessor.init(wasm1).then(() => {
+      mainViewProcessor.disable();
+    });
+
+    previewViewProcessor = mainViewExtension.createProcessor();
+    previewViewProcessor.init(wasm1).then(() => {
+      previewViewProcessor.disable();
+    });
+  } catch (error) {
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Failed to initiate VirtualBackgroundExtension',
+      error,
+    );
+  }
+};
+
+type VirtualBackgroundConfig = {
+  blurDegree?: number;
+  type: 'blur' | 'img' | 'custom'; // Adjust this as needed based on your configuration options
+  source?: HTMLImageElement; // Adjust this based on the type of source you expect
+};
+
+type VBContextValue = {
+  isVBActive: boolean;
+  setIsVBActive: React.Dispatch<React.SetStateAction<boolean>>;
+  vbMode: VBMode;
+  setVBmode: React.Dispatch<React.SetStateAction<VBMode>>;
+  selectedImage: string | null;
+  setSelectedImage: React.Dispatch<React.SetStateAction<string | null>>;
+  previewVideoTrack: ILocalVideoTrack | null;
+  setPreviewVideoTrack: React.Dispatch<React.SetStateAction<ILocalVideoTrack> | null>;
+  saveVB: boolean;
+  setSaveVB: React.Dispatch<React.SetStateAction<boolean>>;
+  options: Option[];
+  setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
+  applyVirtualBackgroundToMainView;
+  applyVirtualBackgroundToPreviewView;
+  vbProcessor: VBProcessorType;
+};
+
+export const VBContext = React.createContext<VBContextValue>({
+  isVBActive: false,
+  setIsVBActive: () => {},
+  vbMode: 'none',
+  setVBmode: () => {},
+  selectedImage: null,
+  setSelectedImage: () => {},
+  previewVideoTrack: null,
+  setPreviewVideoTrack: () => {},
+  saveVB: false,
+  setSaveVB: () => {},
+  options: [],
+  setOptions: () => {},
+  applyVirtualBackgroundToMainView: () => {},
+  applyVirtualBackgroundToPreviewView: () => {},
+  vbProcessor: null,
+});
+
+const VBProvider: React.FC = ({children}) => {
+  const [isVBActive, setIsVBActive] = React.useState<boolean>(false);
+  const [vbMode, setVBmode] = React.useState<VBMode>('none');
+  const [selectedImage, setSelectedImage] = React.useState<string | null>(null);
+  const [saveVB, setSaveVB] = React.useState(false);
+  const {RtcEngineUnsafe} = useRtc();
+  // can be original video track/clone track
+  const [previewVideoTrack, setPreviewVideoTrack] =
+    React.useState<ILocalVideoTrack | null>(null);
+  const {sidePanel} = useSidePanel();
+  const [options, setOptions] = React.useState<Option[]>(imagePathsArray);
+  const {video: localVideoStatus} = useLocalUserInfo();
+  const isLocalVideoON = localVideoStatus === ToggleState.enabled;
+
+  const {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+
+  const isPreCallScreen = !callActive;
+  const isMobile = isMobileUA();
+
+  let processor =
+    useRef<ReturnType<VirtualBackgroundExtension['_createProcessor']>>(null);
+
+  //if vitrual got closed by some other settings/chat panel then update the state
+  //ex: user open vitrual background using more menu and then open chat will hide the vitrual background panel
+  //so we need to update the state
+  useEffect(() => {
+    if (sidePanel !== SidePanelType.VirtualBackground) {
+      setIsVBActive(false);
+    }
+  }, [sidePanel]);
+
+  React.useEffect(() => {
+    initializeProcessors();
+  }, []);
+
+  /* VB Change modes */
+  React.useEffect(() => {
+    if (!isLocalVideoON) {
+      return;
+    }
+    switch (vbMode) {
+      case 'blur':
+        blurVB();
+        break;
+      case 'image':
+        imageVB();
+        break;
+      case 'none':
+        disableVB();
+        break;
+    }
+  }, [vbMode, selectedImage, saveVB, previewVideoTrack, isLocalVideoON]);
+
+  /* Fetch Saved Images from IndexDB to show in VBPanel */
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const customImages = await retrieveImagesFromStorage();
+        setOptions((prevOptions: Option[]) => [
+          ...prevOptions,
+          ...(customImages?.map(
+            base64Data =>
+              ({
+                type: 'image',
+                icon: 'vb',
+                path: base64Data,
+              } as Option),
+          ) || []),
+        ]);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        // Handle the error as needed
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const applyVirtualBackgroundToMainView = async (
+    config: VirtualBackgroundConfig,
+  ) => {
+    //@ts-ignore
+    const localVideoTrack = RtcEngineUnsafe?.localStream?.video;
+    //  mainViewProcessor && (await mainViewProcessor.disable()); // Disable the old processor
+    // localVideoTrack
+    //   ?.pipe(mainViewProcessor)
+    //   .pipe(localVideoTrack?.processorDestination);
+    mainViewProcessor.setOptions(config);
+    await mainViewProcessor.enable();
+  };
+
+  // Function to apply virtual background to the preview view
+  const applyVirtualBackgroundToPreviewView = async (
+    config: VirtualBackgroundConfig,
+  ) => {
+    const localVideoTrack = previewVideoTrack; // Use the preview view's video track
+    // previewViewProcessor && (await previewViewProcessor.disable()); // Disable the old processor
+    if (!localVideoTrack) return;
+    localVideoTrack
+      ?.pipe(previewViewProcessor)
+      .pipe(localVideoTrack?.processorDestination);
+    previewViewProcessor.setOptions(config);
+    await previewViewProcessor.enable();
+  };
+
+  const blurVB = async () => {
+    const blurConfig: VirtualBackgroundConfig = {blurDegree: 3, type: 'blur'};
+    if (isMobile) {
+      await applyVirtualBackgroundToMainView(blurConfig);
+    } else {
+      if (saveVB || isPreCallScreen) {
+        await applyVirtualBackgroundToMainView(blurConfig);
+      } else {
+        previewVideoTrack &&
+          (await applyVirtualBackgroundToPreviewView(blurConfig));
+      }
+    }
+  };
+
+  const imageVB = async () => {
+    const imagePath = selectedImage;
+    let htmlElement = document.createElement('img');
+    const imgConfig: VirtualBackgroundConfig = {
+      source: htmlElement,
+      type: 'img',
+    };
+
+    // htmlElement.crossorigin = 'anonymous'
+    htmlElement.src =
+      //@ts-ignore
+      typeof imagePath === 'string' ? imagePath : imagePath?.default || '';
+    htmlElement.onload = async () => {
+      if (isMobile) {
+        await applyVirtualBackgroundToMainView(imgConfig);
+      } else {
+        if (saveVB || isPreCallScreen) {
+          await applyVirtualBackgroundToMainView(imgConfig);
+        } else {
+          previewVideoTrack &&
+            (await applyVirtualBackgroundToPreviewView(imgConfig));
+        }
+      }
+    };
+  };
+
+  const disableVB = async () => {
+    if (isMobile) {
+      await mainViewProcessor.disable();
+    } else {
+      if (saveVB || isPreCallScreen) {
+        await mainViewProcessor.disable();
+      } else {
+        previewVideoTrack && (await previewViewProcessor.disable());
+      }
+    }
+  };
+
+  return (
+    <VBContext.Provider
+      value={{
+        isVBActive,
+        setIsVBActive,
+        vbMode,
+        setVBmode,
+        selectedImage,
+        setSelectedImage,
+        previewVideoTrack,
+        setPreviewVideoTrack,
+        saveVB,
+        setSaveVB,
+        options,
+        setOptions,
+        applyVirtualBackgroundToMainView,
+        applyVirtualBackgroundToPreviewView,
+        vbProcessor: mainViewProcessor,
+      }}>
+      {children}
+    </VBContext.Provider>
+  );
+};
+
+const useVB = createHook(VBContext);
+
+export {VBProvider, useVB};

package/template/src/components/whiteboard/StrokeWidthTool.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+//import './StrokeWidthTool.less';
+import {Color, Room, RoomState} from 'white-web-sdk';
+import {View, Text} from 'react-native';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+//import mask from './image/mask.svg';
+
+export type StrokeWidthToolProps = {
+  room: Room;
+  roomState: RoomState;
+  setPrevValue: any;
+  widthLabel: string;
+  pxLabel: string;
+};
+
+export type StrokeWidthToolStates = {
+  percentage: number;
+};
+
+const css2 = `
+.range-slider{
+  -webkit-appearance: none;
+  background: ${$config.CARD_LAYER_1_COLOR};
+  outline: none;
+  border-radius: 15px;
+  overflow: hidden;  
+}
+.range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: ${$config.CARD_LAYER_4_COLOR};
+  cursor: pointer;
+  border: 4px solid ${$config.FONT_COLOR};
+  box-shadow: -407px 0 0 400px ${$config.CARD_LAYER_4_COLOR};
+}
+.range-slider::-moz-range-thumb {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${$config.CARD_LAYER_4_COLOR};
+  cursor: pointer;
+  border: 4px solid ${$config.FONT_COLOR};
+  box-shadow: -407px 0 0 400px ${$config.CARD_LAYER_4_COLOR};
+}
+
+`;
+
+export default class StrokeWidthTool extends React.PureComponent<
+  StrokeWidthToolProps,
+  StrokeWidthToolStates
+> {
+  public constructor(props: StrokeWidthToolProps) {
+    super(props);
+    this.state = {
+      percentage: props.room.state.memberState.strokeWidth / 32,
+    };
+  }
+
+  private rgbToHex = (rgb: Color): string => {
+    return (
+      '#' +
+      this.componentToHex(rgb[0]) +
+      this.componentToHex(rgb[1]) +
+      this.componentToHex(rgb[2])
+    );
+  };
+
+  private setStrokeWidth = (event: any): void => {
+    const {room, setPrevValue} = this.props;
+    const percentage = event.target.value / 32;
+    const strokeWidth = parseInt(event.target.value);
+    this.setState({percentage: percentage});
+    room.setMemberState({strokeWidth: strokeWidth});
+    setPrevValue(strokeWidth);
+  };
+
+  private componentToHex = (c: number): string => {
+    const hex = c.toString(16);
+    return hex.length == 1 ? '0' + hex : hex;
+  };
+
+  public render(): React.ReactNode {
+    const {room, roomState, setPrevValue} = this.props;
+    const strokeColor = room.state.memberState.strokeColor;
+
+    return (
+      <>
+        <View
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            paddingBottom: 12,
+          }}>
+          <Text
+            style={{
+              color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontSize: 14,
+              fontWeight: '600',
+            }}>
+            {this.props.widthLabel}
+          </Text>
+          <Text
+            style={{
+              color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontSize: 14,
+              fontWeight: '600',
+            }}>
+            {roomState.memberState.strokeWidth}
+            {this.props.pxLabel}
+          </Text>
+        </View>
+        <style type="text/css">{css2}</style>
+        <input
+          className="range-slider"
+          type="range"
+          min={1}
+          max={32}
+          onChange={this.setStrokeWidth}
+          defaultValue={roomState.memberState.strokeWidth}
+          value={roomState.memberState.strokeWidth}
+          onMouseUp={() => {
+            room.setMemberState({
+              strokeWidth: roomState.memberState.strokeWidth,
+            });
+            setPrevValue(roomState.memberState.strokeWidth);
+          }}
+        />
+      </>
+    );
+  }
+}