agora-appbuilder-core 4.0.0 → 4.0.2

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

@@ -0,0 +1,185 @@
+import {createHook} from 'customization-implementation';
+import React from 'react';
+import {IconsInterface} from '../../atoms/CustomIcon';
+import {ILocalVideoTrack} from 'agora-rtc-sdk-ng';
+import {retrieveImagesFromAsyncStorage} from './VButils.native';
+
+import RtcEngine, {
+  BackgroundBlurDegree,
+  VirtualBackgroundSource,
+  BackgroundSourceType,
+} from 'react-native-agora';
+import {useRtc} from 'customization-api';
+import RNFS from 'react-native-fs';
+import {ImageSourcePropType} from 'react-native/types';
+import imagePathsArray from './imagePaths';
+import getUniqueID from '../../../src/utils/getUniqueID';
+
+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) {
+    console.error('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 rtc = useRtc();
+
+  /* Fetch Saved Images from AsyncStorage to show in VBPanel */
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const customImages = await retrieveImagesFromAsyncStorage();
+        console.log('retrived from async storage', customImages);
+        setOptions((prevOptions: Option[]) => [
+          ...prevOptions,
+          ...(customImages?.map(
+            base64Data =>
+              ({
+                type: 'image',
+                icon: 'vb',
+                path: base64Data,
+                id: getUniqueID(),
+              } as Option),
+          ) || []),
+        ]);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const applyVirtualBackgroundToMainView = async (
+    config: VirtualBackgroundSource,
+    disable = false,
+  ) => {
+    if (disable) {
+      await rtc?.RtcEngineUnsafe.enableVirtualBackground(false, config, {});
+    } else {
+      await rtc?.RtcEngineUnsafe.enableVirtualBackground(true, config, {});
+    }
+  };
+
+  /* VB Change modes */
+  React.useEffect(() => {
+    switch (vbMode) {
+      case 'blur':
+        blurVB();
+        break;
+      case 'image':
+        imageVB();
+        break;
+      case 'none':
+        disableVB();
+        break;
+      default:
+        break;
+    }
+  }, [vbMode, selectedImage, saveVB, previewVideoTrack]);
+
+  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,267 @@
+import {createHook} from 'customization-implementation';
+import React, {useContext} from 'react';
+import {useEffect, useRef} from 'react';
+import {SidePanelType, 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} from '../../../agora-rn-uikit';
+import {isMobileUA} from '../../utils/common';
+import {retrieveImagesFromIndexDB} from './VButils';
+import imagePathsArray from './imagePaths';
+import getUniqueID from '../../../src/utils/getUniqueID';
+import {TextDataInterface} from '../../../src/language/default-labels';
+//@ts-ignore
+
+export type VBMode = 'blur' | 'image' | 'custom' | 'none';
+
+export type Option = {
+  type: VBMode;
+  icon: keyof IconsInterface;
+  path?: string & {default?: string};
+  label?: string;
+  id?: string;
+  translationKey?: keyof TextDataInterface;
+};
+
+// 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 = () => {
+  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();
+  });
+};
+
+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[]>>;
+};
+
+export const VBContext = React.createContext<VBContextValue>({
+  isVBActive: false,
+  setIsVBActive: () => {},
+  vbMode: 'none',
+  setVBmode: () => {},
+  selectedImage: null,
+  setSelectedImage: () => {},
+  previewVideoTrack: null,
+  setPreviewVideoTrack: () => {},
+  saveVB: false,
+  setSaveVB: () => {},
+  options: [],
+  setOptions: () => {},
+});
+
+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 {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+
+  const isPreCallScreen = !callActive;
+  const isMobile = isMobileUA();
+
+  let processor =
+    useRef<ReturnType<VirtualBackgroundExtension['_createProcessor']>>(null);
+
+  useEffect(() => {
+    initializeProcessors();
+  }, []);
+
+  //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]);
+
+  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();
+  };
+
+  /* VB Change modes */
+  React.useEffect(() => {
+    switch (vbMode) {
+      case 'blur':
+        blurVB();
+        break;
+      case 'image':
+        imageVB();
+        break;
+      case 'none':
+        disableVB();
+        break;
+    }
+  }, [vbMode, selectedImage, saveVB, previewVideoTrack]);
+
+  /* Fetch Saved Images from IndexDB to show in VBPanel */
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const customImages = await retrieveImagesFromIndexDB();
+        setOptions((prevOptions: Option[]) => [
+          ...prevOptions,
+          ...(customImages?.map(
+            base64Data =>
+              ({
+                type: 'image',
+                icon: 'vb',
+                path: base64Data,
+                id: getUniqueID(),
+              } as Option),
+          ) || []),
+        ]);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        // Handle the error as needed
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  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,
+      }}>
+      {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);
+          }}
+        />
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,93 @@
+import React, {useContext, useEffect} from 'react';
+import {
+  PersistanceLevel,
+  ToolbarItem,
+  customEvents,
+  useLayout,
+  useRoomInfo,
+} from 'customization-api';
+import {whiteboardContext} from './WhiteboardConfigure';
+import {RoomPhase} from 'white-web-sdk';
+import IconButton from '../../atoms/IconButton';
+import {EventNames} from '../../rtm-events';
+
+const WhiteboardButton = () => {
+  const {
+    whiteboardRoomState,
+    whiteboardActive,
+    joinWhiteboardRoom,
+    leaveWhiteboardRoom,
+  } = useContext(whiteboardContext);
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const {setLayout, currentLayout} = useLayout();
+
+  const WhiteboardStoppedCallBack = () => {
+    toggleWhiteboard(true, false);
+  };
+
+  const WhiteboardStartedCallBack = () => {
+    toggleWhiteboard(false, false);
+  };
+
+  useEffect(() => {
+    whiteboardActive && currentLayout !== 'pinned' && setLayout('pinned');
+  }, []);
+
+  const toggleWhiteboard = (
+    whiteboardActive: boolean,
+    triggerEvent: boolean,
+  ) => {
+    if (whiteboardActive) {
+      leaveWhiteboardRoom();
+      setLayout('grid');
+      triggerEvent &&
+        customEvents.send(
+          EventNames.WHITEBOARD_ACTIVE,
+          JSON.stringify({status: false}),
+          PersistanceLevel.Session,
+        );
+    } else {
+      joinWhiteboardRoom();
+      setLayout('pinned');
+      triggerEvent &&
+        customEvents.send(
+          EventNames.WHITEBOARD_ACTIVE,
+          JSON.stringify({status: true}),
+          PersistanceLevel.Session,
+        );
+    }
+  };
+  const disabled =
+    !isHost ||
+    whiteboardRoomState === RoomPhase.Connecting ||
+    whiteboardRoomState === RoomPhase.Disconnecting;
+  return (
+    <ToolbarItem>
+      <IconButton
+        hoverEffect={disabled ? false : true}
+        iconProps={{
+          iconBackgroundColor: whiteboardActive
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : '',
+          base64: true,
+          base64TintColor: whiteboardActive
+            ? $config.SECONDARY_ACTION_COLOR
+            : $config.SEMANTIC_ERROR,
+          //@ts-ignore
+          name: 'white-board',
+          iconSize: 26,
+        }}
+        btnTextProps={{
+          textColor: $config.FONT_COLOR,
+          text: whiteboardActive ? 'Whiteboard On' : 'Whiteboard Off',
+        }}
+        onPress={() => isHost && toggleWhiteboard(whiteboardActive, true)}
+        disabled={disabled}
+      />
+    </ToolbarItem>
+  );
+};
+export default WhiteboardButton;