agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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

@@ -0,0 +1,279 @@
+import React, {useContext} from 'react';
+import {StyleSheet, Text, View, ScrollView, Dimensions} from 'react-native';
+
+import {
+  useIsSmall,
+  isMobileUA,
+  isWebInternal,
+  isAndroid,
+  isIOS,
+} from '../../../src/utils/common';
+
+import CommonStyles from '../CommonStyles';
+import {useLayout} from '../../../src/utils/useLayout';
+import {getGridLayoutName} from '../../pages/video-call/DefaultLayouts';
+import {VBHeader} from '../../../src/pages/video-call/SidePanelHeader';
+import useCaptionWidth from '../../subComponents/caption/useCaptionWidth';
+
+import {useVB, VBMode} from './useVB';
+
+import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
+import VideoPreview from './VideoPreview';
+import {useLocalUserInfo, usePreCall} from 'customization-api';
+import ThemeConfig from '../../theme';
+import PrimaryButton from '../../atoms/PrimaryButton';
+
+import PropsContext, {
+  ToggleState,
+} from '../../../agora-rn-uikit/src/Contexts/PropsContext';
+import {IconsInterface} from '../../atoms/CustomIcon';
+import InlineNotification from '../../atoms/InlineNotification';
+import VBCard from './VBCard';
+import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
+import Spacer from '../../atoms/Spacer';
+import {useString} from '../../utils/useString';
+import {
+  vbPanelHeading,
+  vbPanelInfo,
+} from '../../language/default-labels/precallScreenLabels';
+import {
+  vbPanelAppliedBtnText,
+  vbPanelApplyBtnText,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const screenHeight = Dimensions.get('window').height;
+
+interface VBCardProps {
+  type: VBMode;
+  icon: keyof IconsInterface;
+  path?: string & {default?: string};
+  label?: string;
+  position?: number;
+  isOnPrecall?: boolean;
+  isMobile?: boolean;
+}
+
+const isNative = isAndroid() || isIOS();
+const VBPanel = (props?: {isOnPrecall?: boolean}) => {
+  const {isOnPrecall = false} = props;
+  const isSmall = useIsSmall();
+
+  const {currentLayout} = useLayout();
+  const {transcriptHeight} = useCaptionWidth();
+  const {saveVB, setSaveVB, options} = useVB();
+  const {video: localVideoStatus} = useLocalUserInfo();
+  const maxPanelHeight = isOnPrecall ? '100%' : screenHeight * 0.8;
+
+  const isLocalVideoON = localVideoStatus === ToggleState.enabled;
+  const isMobile = isMobileUA();
+  const {isCameraAvailable} = usePreCall();
+  const {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+  const fallbackText = useString<boolean>(vbPanelInfo)(isCameraAvailable);
+
+  const vbLabel = useString(vbPanelHeading)();
+  const applyLabel = useString(vbPanelApplyBtnText)();
+  const appliedLabel = useString(vbPanelAppliedBtnText)();
+
+  const PreCallVBHeader = () => (
+    <Text
+      style={{
+        paddingHorizontal: 24,
+        fontWeight: '400',
+        fontSize: ThemeConfig.FontSize.small,
+        color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        paddingVertical: 20,
+        borderBottomWidth: 1,
+        borderBottomColor: $config.INPUT_FIELD_BORDER_COLOR,
+      }}>
+      {vbLabel}
+    </Text>
+  );
+
+  return (
+    <View
+      style={[
+        !callActive
+          ? {height: maxPanelHeight}
+          : isMobile
+          ? CommonStyles.sidePanelContainerNative
+          : isSmall()
+          ? CommonStyles.sidePanelContainerWebMinimzed
+          : CommonStyles.sidePanelContainerWeb,
+        isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
+          ? {marginVertical: 4}
+          : {},
+        //@ts-ignore
+        transcriptHeight && !isMobile && {height: transcriptHeight},
+        (!isOnPrecall || isMobile) && {
+          backgroundColor: $config.CARD_LAYER_1_COLOR,
+        },
+      ]}>
+      {/* VB Header */}
+      {isMobile ? (
+        <VBHeader />
+      ) : isOnPrecall ? (
+        <PreCallVBHeader />
+      ) : (
+        <VBHeader />
+      )}
+
+      {/* VB Notification */}
+      {!callActive && !isLocalVideoON && !isMobile ? (
+        <View style={{padding: 20, paddingBottom: 0}}>
+          <InlineNotification text={fallbackText} />
+        </View>
+      ) : (
+        <></>
+      )}
+
+      {/* VB Preview */}
+      <View style={{justifyContent: 'space-between', flex: 1}}>
+        {callActive || isMobile ? (
+          <View style={isMobile ? styles.mobilePreviewContainer : {}}>
+            {isMobile && isLocalVideoON ? (
+              <View style={styles.switchCamera}>
+                <LocalSwitchCamera
+                  showText={false}
+                  iconBackgroundColor={$config.CARD_LAYER_5_COLOR}
+                  iconSize={20}
+                  iconContainerStyle={{padding: 6}}
+                />
+              </View>
+            ) : (
+              <></>
+            )}
+
+            <VideoPreview isLocalVideoON={isLocalVideoON} />
+          </View>
+        ) : (
+          <></>
+        )}
+
+        {/* Image List */}
+        <ScrollView
+          horizontal={isMobile}
+          showsHorizontalScrollIndicator={isMobile ? false : true}
+          style={isMobile ? {maxHeight: 104} : {flex: 1}}
+          contentContainerStyle={
+            isMobile ? styles.mobileListContainer : styles.desktopListContainer
+          }
+          decelerationRate={0}>
+          {options.map((item, index) => (
+            <VBCard
+              key={item.id}
+              type={item.type}
+              icon={item.icon}
+              path={item.path}
+              label={item?.label}
+              translationKey={item?.translationKey}
+              position={index + 1}
+              isOnPrecall={isOnPrecall}
+              isMobile={isMobile}
+            />
+          ))}
+        </ScrollView>
+        {isMobile && <Spacer size={20} />}
+      </View>
+
+      {/* Save VB Btns */}
+      {callActive && !isMobile ? (
+        <View style={styles.btnContainer}>
+          <View style={{flex: 1}}>
+            <PrimaryButton
+              textStyle={styles.btnText}
+              disabled={saveVB}
+              containerStyle={[
+                styles.btn,
+                {
+                  backgroundColor: saveVB
+                    ? $config.SEMANTIC_SUCCESS
+                    : $config.PRIMARY_ACTION_BRAND_COLOR,
+                },
+              ]}
+              onPress={() => {
+                setSaveVB(true);
+              }}
+              text={saveVB ? appliedLabel : applyLabel}
+            />
+          </View>
+        </View>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+};
+
+export default VBPanel;
+
+const styles = StyleSheet.create({
+  desktopListContainer: {
+    padding: 20,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  mobileListContainer: {
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    textTransform: 'capitalize',
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+  },
+  btn: {
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    minWidth: 'auto',
+  },
+  text: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: 12,
+    lineHeight: 16,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+  },
+  textContainer: {
+    padding: 12,
+    borderRadius: 4,
+    backgroundColor: 'rgba(255, 171, 0, 0.15)',
+    margin: 20,
+    marginBottom: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  iconStyleView: {
+    marginRight: 4,
+    width: 20,
+    height: 20,
+  },
+  switchCamera: {
+    position: 'absolute',
+    zIndex: 1,
+    elevation: 1,
+    top: isNative ? 8 : 8,
+    right: isNative ? 8 : 8,
+    opacity: 0.7,
+  },
+  mobilePreviewContainer: {
+    width: 250,
+    alignSelf: 'center',
+    flex: 1,
+    marginVertical: 24,
+  },
+});

package/template/src/components/virtual-background/VButils.native.ts

@@ -0,0 +1,37 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const saveImagesToAsyncStorage = async (
+  base64Data: string,
+): Promise<void> => {
+  try {
+    const timestampId = new Date().getTime();
+    const key = `image_${timestampId}`;
+
+    await AsyncStorage.setItem(key, base64Data);
+
+    console.log('Image saved to AsyncStorage with key:', key);
+  } catch (error) {
+    console.error('Error saving image to AsyncStorage:', error);
+  }
+};
+
+export const retrieveImagesFromAsyncStorage = async (): Promise<string[]> => {
+  try {
+    const keys = await AsyncStorage.getAllKeys();
+
+    // filtering out keys that are saved for VB
+    const imageKeys = keys.filter(key => key.startsWith('image_'));
+    const retrievedImages: string[] = await Promise.all(
+      imageKeys.map(async key => {
+        const imageData = await AsyncStorage.getItem(key);
+        return imageData || '';
+      }),
+    );
+
+    console.log('Retrieved images from AsyncStorage:', retrievedImages);
+    return retrievedImages;
+  } catch (error) {
+    console.error('Error retrieving images from AsyncStorage:', error);
+    throw error;
+  }
+};

package/template/src/components/virtual-background/VButils.ts

@@ -0,0 +1,104 @@
+interface ImageItem {
+  id: number;
+  data: string;
+}
+
+export const openIndexedDB = async (
+  dbName: string,
+  version: number,
+): Promise<IDBDatabase> => {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    const request = window.indexedDB.open(dbName, version);
+
+    request.onsuccess = (event: Event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      resolve(db);
+    };
+
+    request.onerror = (event: Event) => {
+      reject((event.target as IDBOpenDBRequest).error);
+    };
+
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      const db = (event.target as IDBOpenDBRequest).result as IDBDatabase;
+      if (!db.objectStoreNames.contains('images')) {
+        const store = db.createObjectStore('images', {
+          keyPath: 'id',
+          autoIncrement: false,
+        });
+        store.createIndex('by_id', 'id', {unique: true});
+      }
+    };
+  });
+};
+
+export const saveImagesToIndexDB = async (
+  base64Data: string,
+): Promise<void> => {
+  try {
+    const db = await openIndexedDB('vb-image-db', 1);
+    const tx = db.transaction('images', 'readwrite');
+    const store = tx.objectStore('images');
+
+    const timestampId = new Date().getTime();
+    const item: ImageItem = {
+      id: timestampId,
+      data: base64Data,
+    };
+    store.add(item);
+
+    tx.oncomplete = () => {
+      console.log('Transaction completed');
+    };
+
+    console.log('Added images to the store!');
+  } catch (error) {
+    console.error('Error saving images to IndexedDB:', error);
+  }
+};
+
+export const retrieveImagesFromIndexDB = async (): Promise<string[]> => {
+  return new Promise<string[]>(async (resolve, reject) => {
+    try {
+      const db = await openIndexedDB('vb-image-db', 1);
+      const tx = db.transaction('images', 'readonly');
+      const store = tx.objectStore('images');
+      const cursorRequest = store.openCursor();
+
+      const retrievedImages: string[] = [];
+
+      cursorRequest.onsuccess = (event: Event) => {
+        const cursor = (event.target as IDBRequest)
+          .result as IDBCursorWithValue;
+        if (cursor) {
+          retrievedImages.push(cursor.value.data);
+          cursor.continue();
+        } else {
+          console.log('Successfully Retrieved images from IndexedDB:');
+          resolve(retrievedImages);
+        }
+      };
+    } catch (error) {
+      console.error('Error retrieving images from IndexedDB:', error);
+      reject(error);
+    }
+  });
+};
+
+export const convertBlobToBase64 = async (blobURL: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'blob';
+    xhr.onload = () => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        resolve(reader.result as string);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(xhr.response);
+    };
+    xhr.onerror = reject;
+    xhr.open('GET', blobURL);
+    xhr.send();
+  });
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import {MaxVideoView, useLocalUid} from '../../../agora-rn-uikit';
+import {useContent, usePreCall, useRtc} from 'customization-api';
+import InlineNotification from '../../atoms/InlineNotification';
+import {useString} from '../../utils/useString';
+import {vbPanelInfo} from '../../language/default-labels/precallScreenLabels';
+
+interface VideoPreviewProps {
+  isLocalVideoON?: boolean;
+}
+
+const VideoPreview = ({isLocalVideoON = false}: VideoPreviewProps) => {
+  const {defaultContent} = useContent();
+  const {isCameraAvailable} = usePreCall();
+  const localUid = useLocalUid();
+
+  const rtc = useRtc();
+  const fallbackText = useString<boolean>(vbPanelInfo);
+  rtc?.RtcEngineUnsafe?.startPreview();
+
+  if (!isLocalVideoON) {
+    return <InlineNotification text={fallbackText(isCameraAvailable)} />;
+  }
+
+  return (
+    <MaxVideoView
+      user={defaultContent[localUid]}
+      key={localUid}
+      fallback={() => (
+        <InlineNotification text={fallbackText(isCameraAvailable)} />
+      )}
+      isFullView={true}
+      containerStyle={{
+        width: '100%',
+        height: '100%',
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}
+    />
+  );
+};
+
+export default VideoPreview;

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

@@ -0,0 +1,106 @@
+import {StyleSheet, View} from 'react-native';
+import React, {useContext} from 'react';
+import {useContent, useLocalUserInfo, usePreCall} from 'customization-api';
+import {MaxVideoView, RtcContext, useLocalUid} from '../../../agora-rn-uikit';
+import {ToggleState} from '../../../agora-rn-uikit/src/Contexts/PropsContext';
+import AgoraRTC from 'agora-rtc-sdk-ng';
+import {useVB} from './useVB';
+import ThemeConfig from '../../../src/theme';
+import {isMobileUA} from '../../utils/common';
+import InlineNotification from '../../atoms/InlineNotification';
+import {useString} from '../../utils/useString';
+import {vbPanelInfo} from '../../language/default-labels/precallScreenLabels';
+interface VideoPreviewProps {
+  isLocalVideoON?: boolean;
+}
+
+const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
+  const {setPreviewVideoTrack, setSaveVB, previewVideoTrack} = useVB();
+  const rtc = useContext(RtcContext);
+  const vContainerRef = React.useRef(null);
+  const {video: localVideoStatus} = useLocalUserInfo();
+  const {isCameraAvailable} = usePreCall();
+  const localUid = useLocalUid();
+
+  const isMobileWeb = isMobileUA();
+  const {defaultContent, activeUids} = useContent();
+  const [maxUid] = activeUids;
+
+  const fallbackText = useString<boolean>(vbPanelInfo);
+
+  const createCameraTrack = async () => {
+    if (isLocalVideoON && vContainerRef.current && !previewVideoTrack) {
+      const localVideo = await AgoraRTC.createCameraVideoTrack();
+      localVideo.play(vContainerRef.current);
+      setPreviewVideoTrack(localVideo);
+      return localVideo;
+    }
+    return null;
+  };
+
+  React.useEffect(() => {
+    if (isMobileWeb) return;
+    let localVideo = null;
+    const initialize = async () => {
+      localVideo = await createCameraTrack();
+    };
+
+    initialize();
+    return () => {
+      console.log('cleanup local preview');
+      if (localVideo) {
+        localVideo.stop();
+        localVideo.close();
+        setPreviewVideoTrack(null);
+        setSaveVB(false);
+      }
+    };
+  }, [isLocalVideoON]);
+
+  return (
+    <View
+      style={
+        isMobileWeb
+          ? styles.mobilePreviewContainer
+          : styles.desktopPreviewContainer
+      }>
+      {isMobileWeb ? (
+        <MaxVideoView
+          user={defaultContent[localUid]}
+          key={localUid}
+          fallback={() => <InlineNotification text={fallbackText(true)} />}
+          isFullView={true}
+          containerStyle={{
+            width: '100%',
+            height: '100%',
+            borderRadius: 12,
+          }}
+        />
+      ) : isLocalVideoON ? (
+        <View ref={vContainerRef} style={styles.desktopPreview}></View>
+      ) : (
+        <InlineNotification text={fallbackText(isCameraAvailable)} />
+      )}
+    </View>
+  );
+};
+
+export default VideoPreview;
+
+const styles = StyleSheet.create({
+  desktopPreviewContainer: {
+    padding: 20,
+    paddingBottom: 8,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    flex: 1,
+  },
+  mobilePreviewContainer: {
+    flex: 1,
+  },
+  desktopPreview: {
+    width: 300,
+    height: 166,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+});

package/template/src/components/virtual-background/imagePaths.ts

@@ -0,0 +1,87 @@
+import {Option} from './useVB';
+import images from './images';
+import {
+  vbPanelOptionBlurText,
+  vbPanelOptionCustomText,
+  vbPanelOptionNoneText,
+} from '../../language/default-labels/precallScreenLabels';
+
+const imagePathsArray: Option[] = [
+  {
+    type: 'none',
+    icon: 'remove',
+    label: 'None',
+    translationKey: vbPanelOptionNoneText,
+    id: 'VBOption_1',
+  },
+  {
+    type: 'blur',
+    icon: 'blur',
+    label: 'Blur',
+    translationKey: vbPanelOptionBlurText,
+    id: 'VBOption_2',
+  },
+  {
+    type: 'custom',
+    icon: 'upload-new',
+    label: 'Custom',
+    translationKey: vbPanelOptionCustomText,
+    id: 'VBOption_3',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.bookImageBase64,
+    id: 'VBOption_4',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.beachImageBase64,
+    id: 'VBOption_5',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.office1ImageBase64,
+    id: 'VBOption_6',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.bedroomImageBase64,
+    id: 'VBOption_7',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.officeImageBase64,
+    id: 'VBOption_8',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.earthImageBase64,
+    id: 'VBOption_9',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.mountainsImageBase64,
+    id: 'VBOption_10',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.plantsImageBase64,
+    id: 'VBOption_11',
+  },
+  {
+    type: 'image',
+    icon: 'vb',
+    path: images.wallImageBase64,
+    id: 'VBOption_12',
+  },
+];
+
+export default imagePathsArray;