agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/src/components/Router.sdk.ts

@@ -0,0 +1,20 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+export {
+  MemoryRouter as Router,
+  Switch,
+  Route,
+  Link,
+  Redirect,
+  useHistory,
+  useParams,
+} from 'react-router-dom';

package/template/src/components/SessionContext.tsx

@@ -24,7 +24,9 @@ interface SessionContextInterface {
   // setSessionStore: React.Dispatch<React.SetStateAction<SessionStoreInterface>> | null;
   joinSession: (arg0: joinSessionInterface) => void;
   joinStore: joinSessionInterface;
-  setJoinStore: React.Dispatch<React.SetStateAction<joinSessionInterface>> | null;
+  setJoinStore: React.Dispatch<
+    React.SetStateAction<joinSessionInterface>
+  > | null;
 }
 
 interface joinSessionInterface {
@@ -68,7 +70,8 @@ export const StorageConsumer = SessionContext.Consumer;
 export const SessionProvider = (props: {children: React.ReactNode}) => {
   const history = useHistory();
   // const [sessionStore, setSessionStore] = useState<SessionStoreInterface>(initStoreValue);
-  const [joinStore, setJoinStore] = useState<joinSessionInterface>(initJoinStoreValue);
+  const [joinStore, setJoinStore] =
+    useState<joinSessionInterface>(initJoinStoreValue);
   const joinSession = (data: joinSessionInterface) => {
     setJoinStore(data);
     // console.log({data});
@@ -83,7 +86,7 @@ export const SessionProvider = (props: {children: React.ReactNode}) => {
         joinStore,
         setJoinStore,
       }}>
-      {true ? props.children : <></>}
+      {props.children}
     </SessionContext.Provider>
   );
 };

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

@@ -14,5 +14,8 @@ import React from 'react';
 const Settings: React.FC = () => {
   return <></>;
 };
+export const SettingsWithViewWrapper = () => {
+  return <></>;
+};
 
 export default Settings;

package/template/src/components/Settings.tsx

@@ -9,46 +9,80 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext} from 'react';
-import {View, TouchableOpacity, Text, Image, StyleSheet} from 'react-native';
-import icons from '../assets/icons';
-import SelectDevice from '../subComponents/SelectDevice';
-import HostControlView from './HostControlView';
+import React, {useContext} from 'react';
+import {StyleSheet, View} from 'react-native';
 import ColorContext from './ColorContext';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {BtnTemplate} from '../../agora-rn-uikit';
+import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
+import {useSidePanel} from '../utils/useSidePanel';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import {useString} from '../utils/useString';
+import Styles from './styles';
 
-const Settings = (props: any) => {
+export interface SettingsIconButtonProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isPanelActive: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
+
+const Settings = (props: SettingsIconButtonProps) => {
   const {primaryColor} = useContext(ColorContext);
-  const {isHost, sidePanel, setSidePanel} = props;
+  const {sidePanel, setSidePanel} = useSidePanel();
+  //commented for v1 release
+  //const settingsLabel = useString('settingsLabel')();
+  const settingsLabel = 'Settings';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const isPanelActive = sidePanel === SidePanelType.Settings;
+  const onPress = () => {
+    isPanelActive
+      ? setSidePanel(SidePanelType.None)
+      : setSidePanel(SidePanelType.Settings);
+  };
+  let btnTemplateProps: BtnTemplateInterface = {
+    onPress: onPress,
+    name: isPanelActive ? 'settingsFilled' : 'settings',
+  };
+  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
+    btnTemplateProps.btnText = settingsLabel;
+    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
+  } else {
+    btnTemplateProps.style = [
+      style.localButtonWithMatchingStyle,
+      {borderColor: primaryColor},
+    ];
+  }
+  return props?.render ? (
+    props.render(onPress, isPanelActive, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
+  );
+};
 
+export const SettingsWithViewWrapper = (props: SettingsIconButtonProps) => {
   return (
-    <BtnTemplate
-      style={[style.localButtonWithMatchingStyle, {borderColor: primaryColor}]}
-      onPress={() => {
-        sidePanel === SidePanelType.Settings
-          ? setSidePanel(SidePanelType.None)
-          : setSidePanel(SidePanelType.Settings);
-      }}
-      name={
-        sidePanel === SidePanelType.Settings ? 'settingsFilled' : 'settings'
-      }
-    />
+    <View style={[style.navItem, style.navSmItem]}>
+      <Settings {...props} />
+    </View>
   );
 };
 
 const style = StyleSheet.create({
-  fullOverlay: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100%',
+  navItem: {
     height: '100%',
-    backgroundColor: '#000000aa',
-    justifyContent: 'space-evenly',
-    alignContent: 'center',
-    paddingVertical: 5,
-    zIndex: 50,
+    alignItems: 'center',
+    position: 'relative',
+  },
+  navSmItem: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: '15%',
   },
   main: {
     width: '50%',
@@ -107,11 +141,11 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     resizeMode: 'contain',
   },
-  localButtonWithMatchingStyle:{    
+  localButtonWithMatchingStyle: {
     width: '100%',
     height: '100%',
     resizeMode: 'contain',
-  }
+  },
 });
 
 export default Settings;

package/template/src/components/SettingsView.tsx

@@ -10,25 +10,31 @@
 *********************************************
 */
 import React from 'react';
-import {View, Text, StyleSheet, Platform} from 'react-native';
+import {View, Text, StyleSheet} from 'react-native';
 import SelectDevice from '../subComponents/SelectDevice';
 import HostControlView from './HostControlView';
+import {useString} from '../utils/useString';
+import LanguageSelector from '../subComponents/LanguageSelector';
+import {isWeb} from '../utils/common';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+
+const SettingsView = () => {
+  const {isHost} = useMeetingInfo();
+  //commented for v1 release
+  //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
+  const selectInputDeviceLabel = 'Select Input Device';
 
-const SettingsView = (props: any) => {
-  const {isHost} = props;
   return (
-    <View
-      style={
-        Platform.OS === 'web' ? style.settingsView : style.settingsViewNative
-      }>
+    <View style={isWeb ? style.settingsView : style.settingsViewNative}>
       <View style={style.main}>
         <View>
-          <Text style={style.heading}>Select Input Device</Text>
+          <Text style={style.heading}>{selectInputDeviceLabel}</Text>
           <View style={style.popupPickerHolder}>
             <SelectDevice />
           </View>
         </View>
         {isHost ? <HostControlView /> : <></>}
+        <LanguageSelector />
       </View>
     </View>
   );