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

package/template/src/pages/video-call/CustomLayout.ts

@@ -0,0 +1,17 @@
+import {useFpe} from 'fpe-api';
+import {DefaultLayouts} from './DefaultLayouts';
+
+function useCustomLayout() {
+  const fpeLayouts = useFpe((config) => {
+    if (
+      typeof config?.components?.videoCall === 'object' &&
+      config?.components?.videoCall?.customLayout
+    ) {
+      return config.components.videoCall.customLayout(DefaultLayouts);
+    } else {
+      return DefaultLayouts;
+    }
+  });
+  return fpeLayouts;
+}
+export default useCustomLayout;

package/template/src/pages/video-call/CustomUserContextHolder.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {useFpe} from 'fpe-api';
+
+const CustomUserContextHolder: React.FC<{children: any}> = (props) => {
+  //commented for v1 release
+  // const fpeCustomContext = useFpe((config) => config?.customUserContext);
+  // if (fpeCustomContext) {
+  //   fpeCustomContext();
+  // }
+  return props.children;
+};
+export default CustomUserContextHolder;

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -0,0 +1,65 @@
+import {layoutObjectType} from 'fpe-api';
+import GridVideo from '../../components/GridVideo';
+import PinnedVideo from '../../components/PinnedVideo';
+import useCustomLayout from './CustomLayout';
+import {useLayout} from '../../utils/useLayout';
+
+export const DefaultLayouts: layoutObjectType[] = [
+  {
+    name: 'grid',
+    label: 'Grid Layout',
+    iconName: 'gridLayoutIcon',
+    component: GridVideo,
+  },
+  {
+    name: 'pinned',
+    label: 'Pinned Layout',
+    iconName: 'pinnedLayoutIcon',
+    component: PinnedVideo,
+  },
+];
+
+export const getPinnedLayoutName = () => DefaultLayouts[1].name;
+export const getGridLayoutName = () => DefaultLayouts[0].name;
+
+export const useSetPinnedLayout = () => {
+  const {setActiveLayoutName} = useLayout();
+  const layouts = useCustomLayout();
+  const pinnedLayoutName = getPinnedLayoutName();
+  let checkPinnedLayoutExist = false;
+  if (layouts && Array.isArray(layouts) && layouts.length) {
+    let data = layouts.filter((item) => item.name === pinnedLayoutName);
+    if (data && data.length) {
+      checkPinnedLayoutExist = true;
+    }
+  }
+  if (!checkPinnedLayoutExist) {
+    return () => {};
+  }
+  return () => {
+    setActiveLayoutName(pinnedLayoutName);
+  };
+};
+
+export const useChangeDefaultLayout = () => {
+  const {setActiveLayoutName} = useLayout();
+  const layout = useCustomLayout();
+
+  if (!layout) {
+    return () => {};
+  }
+
+  if (
+    layout &&
+    Array.isArray(layout) &&
+    (layout.length === 0 || layout.length === 1)
+  ) {
+    return () => {};
+  }
+
+  return () => {
+    setActiveLayoutName((activeLayout: string) =>
+      activeLayout === layout[1].name ? layout[0].name : layout[1].name,
+    );
+  };
+};

package/template/src/pages/video-call/NameWithMicStatus.tsx

@@ -0,0 +1,62 @@
+import React, {useContext} from 'react';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {ImageIcon, RenderInterface} from '../../../agora-rn-uikit';
+import TextWithTooltip from '../../subComponents/TextWithTooltip';
+import ColorContext from '../../components/ColorContext';
+import {useString} from '../../utils/useString';
+
+export const NameWithMicStatus = ({user}: {user: RenderInterface}) => {
+  const {primaryColor} = useContext(ColorContext);
+  const {height, width} = useWindowDimensions();
+  //commented for v1 release
+  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
+  const remoteUserDefaultLabel = 'User';
+  return (
+    <>
+      <View style={[style.MicBackdrop]}>
+        <ImageIcon
+          name={user.audio ? 'mic' : 'micOff'}
+          color={user.audio ? primaryColor : 'red'}
+          style={style.MicIcon}
+        />
+      </View>
+      <View style={{flex: 1}}>
+        <TextWithTooltip
+          value={user.name || remoteUserDefaultLabel}
+          style={[
+            style.name,
+            {
+              fontSize: RFValue(14, height > width ? height : width),
+            },
+          ]}
+        />
+      </View>
+    </>
+  );
+};
+
+const style = StyleSheet.create({
+  name: {
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 25,
+    fontWeight: '700',
+    flexShrink: 1,
+  },
+  MicBackdrop: {
+    width: 20,
+    height: 20,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    display: 'flex',
+    alignSelf: 'center',
+    justifyContent: 'center',
+  },
+  MicIcon: {
+    width: '80%',
+    height: '80%',
+    alignSelf: 'center',
+    resizeMode: 'contain',
+  },
+});

package/template/src/pages/video-call/RenderComponent.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {MaxVideoRenderer} from './VideoRenderer';
+import {UidType} from '../../../agora-rn-uikit';
+import {
+  renderComponentObjectInterface,
+  useFpe,
+  useRenderContext,
+} from 'fpe-api';
+import {isValidReactComponent} from '../../utils/common';
+
+export type RenderComponentType = {[key: string]: React.FC<any>};
+
+const DefaultRenderComponent: RenderComponentType = {
+  rtc: MaxVideoRenderer,
+  screenshare: MaxVideoRenderer,
+};
+interface RenderComponentProps {
+  uid: UidType;
+}
+const RenderComponent = ({uid}: RenderComponentProps) => {
+  const {renderList} = useRenderContext();
+  const FpeRenderComponent = useFpe((config) =>
+    typeof config?.components?.videoCall === 'object' &&
+    typeof config?.components?.videoCall?.customContent === 'object'
+      ? config?.components?.videoCall?.customContent
+      : undefined,
+  );
+
+  const getRenderComponent = (type: keyof renderComponentObjectInterface) => {
+    //checking FPE providing the render component and whether its valid react element
+    const FPEComp =
+      FpeRenderComponent &&
+      FpeRenderComponent[type] &&
+      isValidReactComponent(FpeRenderComponent[type])
+        ? FpeRenderComponent[type]
+        : false;
+    //if its valid element then return fpe comp other return the default component
+    if (FPEComp) {
+      return FPEComp;
+    } else {
+      return DefaultRenderComponent[type]
+        ? DefaultRenderComponent[type]
+        : DefaultRenderComponent['rtc'];
+    }
+  };
+
+  const RenderComp = getRenderComponent(renderList[uid]?.type);
+
+  return <RenderComp user={renderList[uid]} />;
+};
+
+export default RenderComponent;

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -0,0 +1,191 @@
+import React, {useContext, useEffect} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useFpe} from 'fpe-api';
+import Navbar from '../../components/Navbar';
+import ParticipantsView from '../../components/ParticipantsView';
+import SettingsView from '../../components/SettingsView';
+import Controls from '../../components/Controls';
+import Chat from '../../components/Chat';
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {isValidReactComponent, isWeb} from '../../utils/common';
+import {useSidePanel} from '../../utils/useSidePanel';
+import VideoComponent from './VideoComponent';
+import {videoView} from '../../../theme.json';
+import {
+  ButtonTemplateProvider,
+  ButtonTemplateName,
+} from '../../utils/useButtonTemplate';
+import SDKEvents from '../../utils/SdkEvents';
+import {RtcContext} from '../../../agora-rn-uikit';
+import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+
+const VideoCallScreen = () => {
+  const {sidePanel} = useSidePanel();
+  const rtc = useContext(RtcContext);
+  const {meetingTitle, isHost} = useMeetingInfo();
+  const {
+    ChatComponent,
+    VideocallComponent,
+    BottombarComponent,
+    ParticipantsComponent,
+    SettingsComponent,
+    TopbarComponent,
+    VideocallBeforeView,
+    VideocallAfterView,
+  } = useFpe((data) => {
+    let components: {
+      VideocallComponent?: React.ComponentType;
+      ChatComponent: React.ComponentType;
+      BottombarComponent: React.ComponentType;
+      ParticipantsComponent: React.ComponentType;
+      SettingsComponent: React.ComponentType;
+      TopbarComponent: React.ComponentType;
+      VideocallBeforeView: React.ComponentType;
+      VideocallAfterView: React.ComponentType;
+    } = {
+      BottombarComponent: Controls,
+      TopbarComponent: Navbar,
+      ChatComponent: Chat,
+      ParticipantsComponent: ParticipantsView,
+      SettingsComponent: SettingsView,
+      VideocallAfterView: React.Fragment,
+      VideocallBeforeView: React.Fragment,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall !== 'object' &&
+      isValidReactComponent(data?.components?.videoCall)
+    ) {
+      components.VideocallComponent = data?.components?.videoCall;
+    }
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall?.after &&
+      //   isValidReactComponent(data?.components?.videoCall?.after)
+      // ) {
+      //   components.VideocallAfterView = data?.components?.videoCall?.after;
+      // }
+
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall?.before &&
+      //   isValidReactComponent(data?.components?.videoCall?.before)
+      // ) {
+      //   components.VideocallBeforeView = data?.components?.videoCall?.before;
+      // }
+
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall.chat &&
+      //   typeof data?.components?.videoCall.chat !== 'object' &&
+      //   isValidReactComponent(data?.components?.videoCall.chat)
+      // ) {
+      //   components.ChatComponent = data?.components?.videoCall.chat;
+      // }
+
+      if (
+        data?.components?.videoCall.bottomBar &&
+        typeof data?.components?.videoCall.bottomBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.bottomBar)
+      ) {
+        components.BottombarComponent = data?.components?.videoCall.bottomBar;
+      }
+
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall.topBar &&
+      //   typeof data?.components?.videoCall.topBar !== 'object' &&
+      //   isValidReactComponent(data?.components?.videoCall.topBar)
+      // ) {
+      //   components.TopbarComponent = data?.components?.videoCall.topBar;
+      // }
+
+      if (
+        data?.components?.videoCall.participantsPanel &&
+        typeof data?.components?.videoCall.participantsPanel !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.participantsPanel)
+      ) {
+        components.ParticipantsComponent =
+          data?.components?.videoCall.participantsPanel;
+      }
+
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall.settingsPanel &&
+      //   typeof data?.components?.videoCall.settingsPanel !== 'object' &&
+      //   isValidReactComponent(data?.components?.videoCall.settingsPanel)
+      // ) {
+      //   components.SettingsComponent =
+      //     data?.components?.videoCall.settingsPanel;
+      // }
+    }
+
+    return components;
+  });
+
+  useEffect(() => {
+    new Promise((res) =>
+      rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
+        res(devices);
+      }),
+    ).then((devices: MediaDeviceInfo[]) => {
+      SDKEvents.emit('join', meetingTitle, devices, isHost);
+    });
+  }, []);
+
+  return VideocallComponent ? (
+    <VideocallComponent />
+  ) : (
+    <>
+      <VideocallBeforeView />
+      <View style={style.full}>
+        <ButtonTemplateProvider
+          value={{buttonTemplateName: ButtonTemplateName.topBar}}>
+          <TopbarComponent />
+        </ButtonTemplateProvider>
+        <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
+          <VideoComponent />
+          {sidePanel === SidePanelType.Participants ? (
+            <ParticipantsComponent />
+          ) : (
+            <></>
+          )}
+          {sidePanel === SidePanelType.Chat ? (
+            $config.CHAT ? (
+              <ChatComponent />
+            ) : (
+              <></>
+            )
+          ) : (
+            <></>
+          )}
+          {sidePanel === SidePanelType.Settings ? <SettingsComponent /> : <></>}
+        </View>
+        {!isWeb && sidePanel === SidePanelType.Chat ? (
+          <></>
+        ) : (
+          <ButtonTemplateProvider
+            value={{buttonTemplateName: ButtonTemplateName.bottomBar}}>
+            <BottombarComponent />
+          </ButtonTemplateProvider>
+        )}
+      </View>
+      <VideocallAfterView />
+    </>
+  );
+};
+export default VideoCallScreen;
+//change these to inline styles or sth
+const style = StyleSheet.create({
+  full: {
+    flex: 1,
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
+  //@ts-ignore
+  videoView: videoView,
+});

package/template/src/pages/video-call/VideoComponent.tsx

@@ -0,0 +1,34 @@
+import React, {useEffect, useState} from 'react';
+import useCustomLayout from './CustomLayout';
+import {isArray, isValidReactComponent} from '../../utils/common';
+import {useLayout} from '../../utils/useLayout';
+import {useRenderContext} from 'fpe-api';
+
+const VideoComponent = () => {
+  const [layout, setLayoutIndex] = useState(0);
+  const fpeLayouts = useCustomLayout();
+  const {activeLayoutName} = useLayout();
+  const {renderPosition} = useRenderContext();
+  useEffect(() => {
+    if (isArray(fpeLayouts)) {
+      let index = fpeLayouts.findIndex(
+        (item) => item.name === activeLayoutName,
+      );
+      if (index >= 0) {
+        setLayoutIndex(index);
+      }
+    }
+  }, [activeLayoutName]);
+
+  if (
+    fpeLayouts &&
+    fpeLayouts[layout] &&
+    isValidReactComponent(fpeLayouts[layout].component)
+  ) {
+    const CurrentLayout = fpeLayouts[layout].component;
+    return <CurrentLayout renderData={renderPosition} />;
+  } else {
+    return <></>;
+  }
+};
+export default VideoComponent;

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -0,0 +1,86 @@
+import React, {useContext} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {RenderInterface, UidType} from '../../../agora-rn-uikit';
+import ScreenShareNotice from '../../subComponents/ScreenShareNotice';
+import {MaxVideoView} from '../../../agora-rn-uikit';
+import FallbackLogo from '../../subComponents/FallbackLogo';
+import ColorContext from '../../components/ColorContext';
+import {NetworkQualityPill} from '../../subComponents/NetworkQualityPill';
+import {NameWithMicStatus} from './NameWithMicStatus';
+
+interface MaxVideoRendererInterface {
+  user: RenderInterface;
+}
+const MaxVideoRenderer: React.FC<MaxVideoRendererInterface> = ({user}) => {
+  const {primaryColor} = useContext(ColorContext);
+  return (
+    <View style={maxStyle.container}>
+      <ScreenShareNotice uid={user.uid} />
+      <NetworkQualityPill
+        user={user}
+        primaryColor={primaryColor}
+        rootStyle={{
+          marginLeft: 25,
+          top: 8,
+          right: 10,
+        }}
+        small
+      />
+      <MaxVideoView
+        fallback={() => {
+          return FallbackLogo(user?.name);
+        }}
+        user={user}
+        key={user.uid}
+      />
+      <View style={maxStyle.nameHolder}>
+        <NameWithMicStatus user={user} />
+      </View>
+    </View>
+  );
+};
+
+const maxStyle = StyleSheet.create({
+  container: {width: '100%', height: '100%'},
+  width80: {width: '80%'},
+  width100: {width: '100%'},
+  flex2: {flex: 2},
+  flex4: {flex: 4, backgroundColor: '#ffffff00'},
+  flex1: {flex: 1},
+  nameHolder: {
+    marginTop: -25,
+    backgroundColor: $config.SECONDARY_FONT_COLOR + 'aa',
+    alignSelf: 'flex-end',
+    paddingHorizontal: 8,
+    height: 25,
+    borderTopLeftRadius: 15,
+    borderBottomRightRadius: 15,
+    flexDirection: 'row',
+    zIndex: 5,
+    maxWidth: '100%',
+  },
+  name: {
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 25,
+    fontWeight: '700',
+    flexShrink: 1,
+  },
+  MicBackdrop: {
+    width: 20,
+    height: 20,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    display: 'flex',
+    alignSelf: 'center',
+    justifyContent: 'center',
+  },
+  MicIcon: {
+    width: '80%',
+    height: '80%',
+    alignSelf: 'center',
+    resizeMode: 'contain',
+  },
+});
+
+export {MaxVideoRenderer};

package/template/src/pages/video-call/index.ts

@@ -0,0 +1,20 @@
+import ParticipantsView from '../../components/ParticipantsView';
+import Chat from '../../components/Chat';
+import Navbar, {NavBarComponentsArray} from '../../components/Navbar';
+import SettingsView from '../../components/SettingsView';
+import Controls, {ControlsComponentsArray} from '../../components/Controls';
+import ChatBubble from '../../subComponents/ChatBubble';
+import {ChatTextInput, ChatSendButton} from '../../subComponents/ChatInput';
+
+export {
+  ParticipantsView,
+  Chat,
+  Navbar,
+  NavBarComponentsArray,
+  SettingsView,
+  Controls,
+  ControlsComponentsArray,
+  ChatBubble,
+  ChatTextInput,
+  ChatSendButton,
+};

package/template/src/rtm/RTMEngine.ts

@@ -0,0 +1,58 @@
+/*
+********************************************
+ Copyright © 2022 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. 
+*********************************************
+*/
+
+import RtmEngine from 'agora-react-native-rtm';
+
+class RTMEngine {
+  engine!: RtmEngine;
+  private localUID: string = '';
+  private channelId: string = '';
+
+  private static _instance: RTMEngine | null = null;
+
+  public static getInstance() {
+    if (!RTMEngine._instance) {
+      return new RTMEngine();
+    }
+    return RTMEngine._instance;
+  }
+
+  private async createClientInstance() {
+    await this.engine.createClient($config.APP_ID);
+  }
+
+  private constructor() {
+    if (RTMEngine._instance) {
+      return RTMEngine._instance;
+    }
+    RTMEngine._instance = this;
+    this.engine = new RtmEngine();
+    this.localUID = '';
+    this.channelId = '';
+    this.createClientInstance();
+
+    return RTMEngine._instance;
+  }
+
+  setLoginInfo(localUID: string, channelID: string) {
+    this.localUID = localUID;
+    this.channelId = channelID;
+  }
+  get localUid() {
+    return this.localUID;
+  }
+  get channelUid() {
+    return this.channelId;
+  }
+}
+
+export default RTMEngine;

package/template/src/rtm/utils.ts

@@ -0,0 +1,28 @@
+export const hasJsonStructure = (str: string) => {
+  if (typeof str !== 'string') return false;
+  try {
+    const result = JSON.parse(str);
+    const type = Object.prototype.toString.call(result);
+    return type === '[object Object]' || type === '[object Array]';
+  } catch (err) {
+    return false;
+  }
+};
+
+export const safeJsonParse = (str: string) => {
+  try {
+    return [null, JSON.parse(str)];
+  } catch (err) {
+    return [err];
+  }
+};
+
+export const adjustUID = (uid: number): number => {
+  let adjustedUID = uid;
+  if (adjustedUID < 0) {
+    adjustedUID = uid + parseInt('0xffffffff') + 1;
+  }
+  return adjustedUID;
+};
+
+export const timeNow = () => new Date().getTime();