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

package/template/src/components/NavbarMobile.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {
+  ToolbarItemHide,
+  ToolbarItemLabel,
+  ToolbarPresetProps,
+} from '../atoms/ToolbarPreset';
+import {
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+} from './Navbar';
+import {useRecording} from '../subComponents/recording/useRecording';
+import {CustomToolbarMerge, CustomToolbarSorting} from '../utils/common';
+import {filterObject} from '../utils';
+import {useLanguage} from '../language/useLanguage';
+
+export interface NavbarProps {
+  includeDefaultItems?: boolean;
+  items?: ToolbarPresetProps['items'];
+}
+
+const NavbarMobile = (props: NavbarProps) => {
+  const {isRecordingActive} = useRecording();
+  const defaultItems: NavbarProps['items'] = {
+    'meeting-title': {
+      align: 'start',
+      component: MeetingTitleToolbarItem,
+      order: 0,
+    },
+    'participant-count': {
+      align: 'start',
+      component: ParticipantCountToolbarItem,
+      order: 1,
+    },
+    'recording-status': {
+      align: 'start',
+      component: isRecordingActive ? RecordingStatusToolbarItem : null,
+      order: 2,
+    },
+  };
+  const {items = {}, includeDefaultItems = true} = props;
+  const {width, height} = useWindowDimensions();
+  const {languageCode} = useLanguage();
+
+  const isHidden = (hide: ToolbarItemHide = false) => {
+    try {
+      return typeof hide === 'boolean'
+        ? hide
+        : typeof hide === 'function'
+        ? hide(width, height)
+        : false;
+    } catch (error) {
+      console.log('debugging isHidden error', error);
+      return false;
+    }
+  };
+
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
+
+  const startItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'start' && !isHidden(v?.hide),
+  );
+
+  const startItemsOrdered = CustomToolbarSorting(startItems);
+
+  const getCustomLabel = (label: ToolbarItemLabel) => {
+    if (label && typeof label === 'string') {
+      return label;
+    } else if (label && typeof label === 'function') {
+      return label(languageCode);
+    } else {
+      return null;
+    }
+  };
+
+  const renderContent = (orderedKeys: string[], type: 'start') => {
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      let label = null;
+      let onPress = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+        label = startItems[keyName]?.label;
+        onPress = startItems[keyName]?.onPress;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent
+            key={`top-toolbar-${type}` + index}
+            label={getCustomLabel(label)}
+            onPress={onPress}
+          />,
+        );
+      }
+    });
+
+    return renderContentItem;
+  };
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {renderContent(startItemsOrdered, 'start')}
+      </View>
+    </Toolbar>
+  );
+};
+export default NavbarMobile;
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    zIndex: 2,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 9,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});

package/template/src/components/Navigation.native.tsx

@@ -21,20 +21,7 @@ const processUrl = (url: string): string => {
 };
 
 const Navigation = () => {
-  const history = useHistory();
-  useEffect(() => {
-    const deepLinkUrl = (link: string | null) => {
-      if (link !== null) {
-        history.push(processUrl(link));
-      }
-    };
-    const deepLink = async () => {
-      const initialUrl = await Linking.getInitialURL();
-      Linking.addEventListener('url', (e) => deepLinkUrl(e.url));
-      deepLinkUrl(initialUrl);
-    };
-    deepLink();
-  }, [history]);
+  //moved deeplink handling into AuthProvider
   return (
     <>
       <BackButton />

package/template/src/components/{Settings.native.tsx → Navigation.sdk.tsx}

@@ -9,13 +9,24 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useEffect, useContext} from 'react';
+import {SdkApiContext} from './SdkApiContext';
+import {useHistory} from './Router';
+import isSDK from '../utils/isSDK';
 
-const Settings: React.FC = () => {
-  return <></>;
-};
-export const SettingsWithViewWrapper = () => {
+const Navigation = () => {
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
+  const history = useHistory();
+
+  useEffect(() => {
+    if (isSDK() && SdkJoinState.initialized) {
+      if (SdkJoinState.phrase) {
+        history.push(`/${SdkJoinState.phrase}`);
+      }
+    }
+  }, [SdkJoinState]);
   return <></>;
 };
 
-export default Settings;
+export default Navigation;

package/template/src/components/NetworkQualityContext.tsx

@@ -12,7 +12,7 @@
 import React, {createContext, useState} from 'react';
 import {UidType, useLocalUid} from '../../agora-rn-uikit';
 import useMount from './useMount';
-import icons from '../assets/icons';
+import {IconsInterface} from '../atoms/CustomIcon';
 import {NetworkQualities} from '../language/default-labels/videoCallScreenLabels';
 import {useRtc} from 'customization-api';
 
@@ -28,56 +28,62 @@ import {useRtc} from 'customization-api';
  * 7 - Unsupported
  * 8 - Loading
  */
+
+interface RtcConnection {
+  channelId?: string;
+  localUid?: number;
+}
+
 export const networkIconsObject: {
   [key: number]: {
-    icon: string;
+    icon: keyof IconsInterface;
     tint: string;
     text: NetworkQualities;
   };
 } = {
   0: {
-    icon: icons.networkIcons['Unsupported'],
-    tint: 'primary',
+    icon: 'connection-unsupported',
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unknown',
   },
   1: {
-    icon: icons.networkIcons['Excellent'],
-    tint: '#2BD900',
+    icon: 'connection-good',
+    tint: $config.SEMANTIC_SUCCESS,
     text: 'excellent',
   },
   2: {
-    icon: icons.networkIcons['Good'],
-    tint: '#FFEE00',
+    icon: 'connection-good',
+    tint: $config.SEMANTIC_SUCCESS,
     text: 'good',
   },
   3: {
-    icon: icons.networkIcons['Bad'],
-    tint: '#F8AA00',
+    icon: 'connection-bad',
+    tint: $config.SEMANTIC_WARNING,
     text: 'bad',
   },
   4: {
-    icon: icons.networkIcons['Bad'],
-    tint: '#F8AA00',
+    icon: 'connection-bad',
+    tint: $config.SEMANTIC_WARNING,
     text: 'bad',
   },
   5: {
-    icon: icons.networkIcons['VeryBad'],
-    tint: 'red',
+    icon: 'connection-very-bad',
+    tint: $config.SEMANTIC_ERROR,
     text: 'veryBad',
   },
   6: {
-    icon: icons.networkIcons['VeryBad'],
-    tint: 'red',
+    icon: 'connection-very-bad',
+    tint: $config.SEMANTIC_ERROR,
     text: 'veryBad',
   },
   7: {
-    icon: icons.networkIcons['Unsupported'],
-    tint: 'primary',
+    icon: 'connection-unpublished',
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unpublished',
   },
   8: {
-    icon: icons.networkIcons['Loading'],
-    tint: 'primary',
+    icon: 'connection-loading',
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'loading',
   },
 };
@@ -102,17 +108,18 @@ export const NetworkQualityProvider: React.FC = (props: {
     useState<NetworkQualityStatsInterface>({
       [localUid]: 0,
     });
-  const {RtcEngine} = useRtc();
+  const {RtcEngineUnsafe} = useRtc();
 
   useMount(() => {
     function handleNetworkQuality(
+      connection: RtcConnection,
       uid: UidType,
-      downlinkQuality: number,
       // Currently unused , potential use might be to take weighted average
       // of this alongside the downlink quality.
-      uplinkQuality: number,
+      uplinkQuality: keyof typeof networkIconsObject,
+      downlinkQuality: keyof typeof networkIconsObject,
     ) {
-      setNetworkQualityStats((prevNetworkQualityStats) => {
+      setNetworkQualityStats(prevNetworkQualityStats => {
         const updatedNetworkQualityStats = {...prevNetworkQualityStats};
         if (uid === 0) {
           const displayedNetworkQuality =
@@ -130,8 +137,7 @@ export const NetworkQualityProvider: React.FC = (props: {
         return updatedNetworkQualityStats;
       });
     }
-
-    RtcEngine.addListener('NetworkQuality', handleNetworkQuality);
+    RtcEngineUnsafe.addListener('onNetworkQuality', handleNetworkQuality);
   });
 
   return (