agora-appbuilder-core 4.0.0-api.1 → 4.0.0-api.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-api.1",
+  "version": "4.0.0-api.3",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/sub-components.ts

@@ -18,8 +18,6 @@ export {Icons} from '../agora-rn-uikit';
 //video call components
 export {
   ParticipantsView,
-  Controls,
-  Navbar,
   ChatBubble,
   ChatInput,
   Chat,
@@ -52,3 +50,11 @@ export {
   ClientRole as UikitClientRole,
   ChannelProfile as UikitChannelProfile,
 } from '../agora-rn-uikit';
+export {default as Toolbar} from '../src/atoms/Toolbar';
+export {default as ToolbarItem} from '../src/atoms/ToolbarItem';
+export {default as ToolbarPreset} from '../src/atoms/ToolbarPreset';
+export {default as ToolbarMenu} from '../src/atoms/ToolbarMenu';
+export type {
+  ToolbarCustomItem,
+  ToolbarPresetProps,
+} from '../src/atoms/ToolbarPreset';

package/template/customization-api/typeDefinition.ts

@@ -22,6 +22,7 @@ import {IconsInterface} from '../src/atoms/CustomIcon';
 export type {ContentInterface, ContentStateInterface, UidType};
 export type {ChatTextInputProps} from '../src/subComponents/ChatInput';
 import {ChatTextInputProps} from '../src/subComponents/ChatInput';
+import {ToolbarCustomItem} from './sub-components';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -59,12 +60,13 @@ export interface layoutItem {
   component: layoutComponent;
 }
 
+export type ToolbarType = React.ComponentType | Array<ToolbarCustomItem>;
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
-  topToolBar?: React.ComponentType;
-  bottomToolBar?: React.ComponentType;
-  leftToolBar?: React.ComponentType;
-  rightToolBar?: React.ComponentType;
+  topToolBar?: ToolbarType;
+  bottomToolBar?: ToolbarType;
+  leftToolBar?: ToolbarType;
+  rightToolBar?: ToolbarType;
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
   chat?: ChatCmpInterface;

package/template/customization-api/utils.ts

@@ -21,6 +21,9 @@ export {default as useIsPSTN} from '../src/utils/useIsPSTN';
 export {default as useIsAudioEnabled} from '../src/utils/useIsAudioEnabled';
 export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
 
+//hook to get active speaker uid
+export {default as useActiveSpeaker} from '../src/utils/useActiveSpeaker';
+
 //hooks used for navigation
 export {useHistory, useParams} from '../src/components/Router';
 

package/template/src/atoms/ToolbarMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+import {ToolbarMenuProvider} from '../utils/useMenu';
+
+export interface ToolbarMenuProps {
+  children: React.ReactNode;
+  containerStyle?: ViewStyle;
+}
+const ToolbarMenu = (props: ToolbarMenuProps) => {
+  const {children, containerStyle} = props;
+  if (!children) {
+    return null;
+  }
+  return (
+    <ToolbarMenuProvider>
+      <View style={[ToolbarMenuStyle.containerStyle, containerStyle]}>
+        {children}
+      </View>
+    </ToolbarMenuProvider>
+  );
+};
+export default ToolbarMenu;
+
+const ToolbarMenuStyle = StyleSheet.create({
+  containerStyle: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+});

package/template/src/atoms/ToolbarMenuItem.tsx

@@ -0,0 +1,104 @@
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacityProps,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+import {IconButtonProps} from './IconButton';
+import {isWebInternal} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ToolbarMenuItemProps extends IconButtonProps {
+  // disabled?: boolean;
+  // onPress: TouchableOpacityProps['onPress'];
+  // isHovered?: boolean;
+  // menuIcon?: string;
+  // menuText?: string;
+  // menuIconColor?: string;
+}
+const ToolbarMenuItem = (props: ToolbarMenuItemProps) => {
+  return (
+    <PlatformWrapper>
+      {(isHovered: boolean) => (
+        <>
+          <TouchableOpacity
+            disabled={props.disabled}
+            style={[
+              props.disabled ? {opacity: 0.4} : {},
+              isHovered
+                ? {
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['15%'],
+                  }
+                : {},
+              ToolbarMenuItemStyles.container,
+            ]}
+            onPress={props.onPress}>
+            <View style={ToolbarMenuItemStyles.iconContainer}>
+              <ImageIcon
+                base64={false}
+                iconType="plain"
+                iconSize={20}
+                name={props?.iconProps?.name}
+                tintColor={props?.iconProps?.tintColor}
+              />
+            </View>
+            <Text
+              style={[
+                ToolbarMenuItemStyles.textStyle,
+                props?.btnTextProps?.textStyle,
+                props?.btnTextProps?.textColor
+                  ? {color: props?.btnTextProps?.textColor}
+                  : {},
+              ]}>
+              {props?.btnTextProps?.text}
+            </Text>
+          </TouchableOpacity>
+        </>
+      )}
+    </PlatformWrapper>
+  );
+};
+export default ToolbarMenuItem;
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+const ToolbarMenuItemStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    marginVertical: 12,
+    marginLeft: 12,
+  },
+  textStyle: {
+    paddingVertical: 14,
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '400',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});

package/template/src/atoms/ToolbarPreset.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Controls from '../components/Controls';
+import Leftbar from '../components/Leftbar';
+import Rightbar from '../components/Rightbar';
+
+export interface ToolbarCustomItem {
+  component: () => JSX.Element;
+  align: 'start' | 'center' | 'end';
+  hide: 'yes' | 'no' | 'never';
+  order?: number;
+}
+
+export interface ToolbarPresetProps {
+  align: 'top' | 'left' | 'bottom' | 'right';
+  customItems?: Array<ToolbarCustomItem>;
+}
+
+const ToolbarPreset = (props: ToolbarPresetProps) => {
+  const {align} = props;
+  if (!align) {
+    console.log(
+      'ToolbarPreset align prop is empty. please provide align prop to get the corresponding toolbar preset',
+    );
+    return null;
+  }
+  if (align === 'left') {
+    return <Leftbar customItems={props?.customItems} />;
+  } else if (align === 'right') {
+    return <Rightbar customItems={props?.customItems} />;
+  } else if (align === 'top') {
+    return <Navbar customItems={props?.customItems} />;
+  } else if (align === 'bottom') {
+    return <Controls customItems={props?.customItems} />;
+  } else {
+    return null;
+  }
+};
+export default ToolbarPreset;

package/template/src/components/Controls.tsx

@@ -10,38 +10,21 @@
 *********************************************
 */
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {PropsContext} from '../../agora-rn-uikit';
-import LocalAudioMute, {
-  LocalAudioMuteProps,
-} from '../subComponents/LocalAudioMute';
-import LocalVideoMute, {
-  LocalVideoMuteProps,
-} from '../subComponents/LocalVideoMute';
-import Recording, {RecordingButtonProps} from '../subComponents/Recording';
-import LocalSwitchCamera, {
-  LocalSwitchCameraProps,
-} from '../subComponents/LocalSwitchCamera';
-import ScreenshareButton, {
-  ScreenshareButtonProps,
-} from '../subComponents/screenshare/ScreenshareButton';
+import LocalAudioMute from '../subComponents/LocalAudioMute';
+import LocalVideoMute from '../subComponents/LocalVideoMute';
+import Recording from '../subComponents/Recording';
+import LocalSwitchCamera from '../subComponents/LocalSwitchCamera';
+import ScreenshareButton from '../subComponents/screenshare/ScreenshareButton';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {ClientRole} from '../../agora-rn-uikit';
-import LiveStreamControls, {
-  LiveStreamControlsProps,
-} from './livestream/views/LiveStreamControls';
-import {
-  BREAKPOINTS,
-  calculatePosition,
-  isWebInternal,
-  useIsDesktop,
-} from '../utils/common';
+import LiveStreamControls from './livestream/views/LiveStreamControls';
+import {BREAKPOINTS, useIsDesktop} from '../utils/common';
 import {useRoomInfo} from './room-info/useRoomInfo';
-import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
-import Spacer from '../atoms/Spacer';
+import LocalEndcall from '../subComponents/LocalEndCall';
 import LayoutIconButton from '../subComponents/LayoutIconButton';
 import CopyJoinInfo from '../subComponents/CopyJoinInfo';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import IconButton from '../atoms/IconButton';
 import ActionMenu, {ActionMenuItem} from '../atoms/ActionMenu';
 import useLayoutsData from '../pages/video-call/useLayoutsData';
@@ -57,8 +40,8 @@ import {useVideoCall} from './useVideoCall';
 import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
 import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
 import Toolbar from '../atoms/Toolbar';
-import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
 
 const MoreButton = () => {
   const {rtcProps} = useContext(PropsContext);
@@ -278,117 +261,272 @@ const MoreButton = () => {
     </>
   );
 };
-const Controls = () => {
+export const LayoutToolbarItem = () => (
+  <ToolbarItem testID="layout-btn" collapsable={false}>
+    {/**
+     * .measure returns undefined on Android unless collapsable=false or onLayout are specified
+     * so added collapsable property
+     * https://github.com/facebook/react-native/issues/29712
+     * */}
+    <LayoutIconButton />
+  </ToolbarItem>
+);
+export const InviteToolbarItem = () => {
+  return (
+    <ToolbarItem testID="invite-btn">
+      <CopyJoinInfo />
+    </ToolbarItem>
+  );
+};
+const defaultStartItems: Array<ToolbarCustomItem> = [
+  {
+    align: 'start',
+    component: LayoutToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: InviteToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+];
+
+export const RaiseHandToolbarItem = () => {
   const {rtcProps} = useContext(PropsContext);
   const isDesktop = useIsDesktop();
   const {
     data: {isHost},
   } = useRoomInfo();
-  const {isHorizontal} = useToolbar();
+  return $config.EVENT_MODE ? (
+    rtcProps.role == ClientRole.Audience ? (
+      <LiveStreamControls
+        showControls={true}
+        isDesktop={isDesktop('toolbar')}
+      />
+    ) : rtcProps?.role == ClientRole.Broadcaster ? (
+      /**
+       * In event mode when raise hand feature is active
+       * and audience is promoted to host, the audience can also
+       * demote himself
+       */
+      <LiveStreamControls
+        isDesktop={isDesktop('toolbar')}
+        showControls={!isHost}
+      />
+    ) : (
+      <></>
+    )
+  ) : (
+    <></>
+  );
+};
+
+export const LocalAudioToolbarItem = () => {
+  return (
+    <ToolbarItem testID="localAudio-btn">
+      <LocalAudioMute showToolTip={true} />
+    </ToolbarItem>
+  );
+};
+
+export const LocalVideoToolbarItem = () => {
+  return (
+    !$config.AUDIO_ROOM && (
+      <ToolbarItem testID="localVideo-btn">
+        <LocalVideoMute showToolTip={true} />
+      </ToolbarItem>
+    )
+  );
+};
+
+export const SwitchCameraToolbarItem = () => {
+  return (
+    !$config.AUDIO_ROOM &&
+    isMobileOrTablet() && (
+      <ToolbarItem testID="switchCamera-btn">
+        <LocalSwitchCamera />
+      </ToolbarItem>
+    )
+  );
+};
+
+export const ScreenShareToolbarItem = () => {
+  const {width} = useWindowDimensions();
+  return (
+    width > BREAKPOINTS.sm &&
+    $config.SCREEN_SHARING &&
+    !isMobileOrTablet() && (
+      <ToolbarItem testID="screenShare-btn">
+        <ScreenshareButton />
+      </ToolbarItem>
+    )
+  );
+};
+export const RecordingToolbarItem = () => {
+  const {width} = useWindowDimensions();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  return (
+    width > BREAKPOINTS.sm &&
+    isHost &&
+    $config.CLOUD_RECORDING && (
+      <ToolbarItem testID="recording-btn">
+        <Recording />
+      </ToolbarItem>
+    )
+  );
+};
+
+export const MoreButtonToolbarItem = () => {
   const {width} = useWindowDimensions();
+  return (
+    width < BREAKPOINTS.md && (
+      <ToolbarItem testID="more-btn">
+        <MoreButton />
+      </ToolbarItem>
+    )
+  );
+};
+export const LocalEndcallToolbarItem = () => {
+  return (
+    <ToolbarItem testID="endCall-btn">
+      <LocalEndcall />
+    </ToolbarItem>
+  );
+};
+
+const defaultCenterItems: ToolbarCustomItem[] = [
+  {
+    align: 'start',
+    component: RaiseHandToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: LocalAudioToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: LocalVideoToolbarItem,
+    order: 2,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: SwitchCameraToolbarItem,
+    order: 3,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: ScreenShareToolbarItem,
+    order: 4,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: RecordingToolbarItem,
+    order: 5,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: MoreButtonToolbarItem,
+    order: 6,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: LocalEndcallToolbarItem,
+    order: 7,
+    hide: 'no',
+  },
+];
+
+const defaultEndItems: ToolbarCustomItem[] = [];
+
+export interface ControlsProps {
+  customItems?: ToolbarCustomItem[];
+}
+const Controls = (props: ControlsProps) => {
+  const {customItems = []} = props;
+  const {width} = useWindowDimensions();
+
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+  const customStartItems = customItems
+    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.concat(defaultStartItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.concat(defaultCenterItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customEndItems = customItems
+    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.concat(defaultEndItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`bottom-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
   return (
     <Toolbar>
       {width >= BREAKPOINTS.md && (
-        <View
-          style={[
-            style.leftContent,
-            isHorizontal ? {flexDirection: 'row'} : {flexDirection: 'column'},
-          ]}>
-          <ToolbarItem testID="layout-btn" collapsable={false}>
-            {/**
-             * .measure returns undefined on Android unless collapsable=false or onLayout are specified
-             * so added collapsable property
-             * https://github.com/facebook/react-native/issues/29712
-             * */}
-            <LayoutIconButton />
-          </ToolbarItem>
-          <ToolbarItem testID="invite-btn">
-            <CopyJoinInfo />
-          </ToolbarItem>
+        <View style={[style.startContent]}>
+          {renderContent(customStartItems, 'start')}
         </View>
       )}
-      <View
-        style={[
-          style.centerContent,
-          isHorizontal ? {flexDirection: 'row'} : {flexDirection: 'column'},
-        ]}>
-        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-          <LiveStreamControls
-            showControls={true}
-            isDesktop={isDesktop('toolbar')}
-          />
-        ) : (
-          <></>
-        )}
-        <>
-          {/**
-           * In event mode when raise hand feature is active
-           * and audience is promoted to host, the audience can also
-           * demote himself
-           */}
-          {$config.EVENT_MODE ? (
-            <LiveStreamControls
-              isDesktop={isDesktop('toolbar')}
-              showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
-            />
-          ) : (
-            <></>
-          )}
-          <ToolbarItem testID="localAudio-btn">
-            <LocalAudioMute showToolTip={true} />
-          </ToolbarItem>
-          {!$config.AUDIO_ROOM && (
-            <ToolbarItem testID="localVideo-btn">
-              <LocalVideoMute showToolTip={true} />
-            </ToolbarItem>
-          )}
-          {!$config.AUDIO_ROOM && isMobileOrTablet() && (
-            <ToolbarItem testID="switchCamera-btn">
-              <LocalSwitchCamera />
-            </ToolbarItem>
-          )}
-          {width > BREAKPOINTS.sm &&
-            $config.SCREEN_SHARING &&
-            !isMobileOrTablet() && (
-              <ToolbarItem testID="screenShare-btn">
-                <ScreenshareButton />
-              </ToolbarItem>
-            )}
-          {width > BREAKPOINTS.sm && isHost && $config.CLOUD_RECORDING && (
-            <ToolbarItem testID="recording-btn">
-              <Recording />
-            </ToolbarItem>
-          )}
-        </>
-        {width < BREAKPOINTS.md && (
-          <ToolbarItem testID="more-btn">
-            <MoreButton />
-          </ToolbarItem>
-        )}
-        <ToolbarItem testID="endCall-btn">
-          <LocalEndcall />
-        </ToolbarItem>
+      <View style={[style.centerContent]}>
+        {renderContent(customCenterItems, 'center')}
       </View>
-      {width >= BREAKPOINTS.md && <View style={style.rightContent}></View>}
+      {width >= BREAKPOINTS.md && (
+        <View style={style.endContent}>
+          {renderContent(customEndItems, 'end')}
+        </View>
+      )}
     </Toolbar>
   );
 };
 
 const style = StyleSheet.create({
-  leftContent: {
+  startContent: {
     flex: 1,
-
+    flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
   },
   centerContent: {
     zIndex: 2,
     flex: 1,
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  rightContent: {
+  endContent: {
     flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
   },
 });