agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/utils/common.tsx

@@ -10,21 +10,11 @@
 *********************************************
 */
 import React from 'react';
-import {
-  Platform as ReactNativePlatform,
-  useWindowDimensions,
-} from 'react-native';
+import {Platform as ReactNativePlatform} from 'react-native';
 import Platform from '../subComponents/Platform';
 
 import * as ReactIs from 'react-is';
 
-const trimText = (text: string, length: number = 25) => {
-  if (!text) {
-    return '';
-  }
-  return text?.substring(0, length) + (text?.length > length ? '...' : '');
-};
-const maxInputLimit = 60;
 const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
   Component && ReactIs.isValidElementType(Component) ? true : false;
 
@@ -67,150 +57,10 @@ const isIOS = () => Platform === 'native' && ReactNativePlatform.OS === 'ios';
 //@ts-ignore
 const isDesktop = () => Platform === 'electron';
 
-/**
- * Checks whether the application is running on mobile device (user agent) and returns true/false.
- * @returns function
- */
-//@ts-ignore
-const isMobileUA = () => {
-  let check = false;
-  (function (a) {
-    if (
-      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-        a,
-      ) ||
-      isAndroid() ||
-      isIOS()
-    )
-      check = true;
-  })(navigator?.userAgent || navigator?.vendor || window?.opera);
-  return check;
-};
-
 const isArray = (data: any[]) =>
   data && Array.isArray(data) && data.length ? true : false ? true : false;
-
-interface calculatedPositionProps {
-  px: number;
-  py: number;
-  localWidth: number;
-  localHeight: number;
-  globalWidth: number;
-  globalHeight: number;
-  extra?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
-  popupWidth?: number;
-}
-const calculatePosition = (params: calculatedPositionProps) => {
-  const {
-    px,
-    py,
-    localWidth,
-    localHeight,
-    globalWidth,
-    globalHeight,
-    extra: {top = 0, bottom = 0, left = 0, right = 0} = {},
-    popupWidth = 220,
-  } = params;
-  //right hand side
-  if (px > globalWidth / 2) {
-    // if actionmenu overflow - horizontal
-    const w = globalWidth - px + popupWidth;
-    let minus = 0;
-    if (w > globalWidth) {
-      minus = w - globalWidth + 10;
-    }
-    //right bottom
-    if (py > globalHeight / 2) {
-      return {
-        bottom: globalHeight - py + bottom,
-        right: globalWidth - px - minus + right,
-      };
-    }
-    //right top
-    else {
-      return {
-        top: py + localHeight + top,
-        right: globalWidth - px - minus + right,
-      };
-    }
-  }
-  //left hand side
-  else {
-    // if actionmenu overflow - horizontal
-    const w = px + localWidth + popupWidth;
-    let minus = 0;
-    if (w > globalWidth) {
-      minus = w - globalWidth + 10;
-    }
-    //left bottom
-    if (py > globalHeight / 2) {
-      return {
-        bottom: globalHeight - py + bottom,
-        left: px + localWidth - minus + left,
-      };
-    }
-    //left top
-    else {
-      return {
-        top: py + localHeight + top + top,
-        left: px + localWidth - minus + left,
-      };
-    }
-  }
-};
-
-const BREAKPOINTS = {
-  xs: 360,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1330,
-  xxl: 1400,
-};
-
-const useIsDesktop = () => {
-  const {width, height} = useWindowDimensions();
-  return (from: 'default' | 'toolbar' | 'popup' = 'default') => {
-    if (from === 'default') {
-      return width > height ? true : false;
-    } else if (from === 'toolbar') {
-      return width > BREAKPOINTS.xl;
-    } else if (from === 'popup') {
-      return width > BREAKPOINTS.md;
-    }
-    return width >= BREAKPOINTS.xl;
-  };
-};
-const useIsSmall = () => {
-  const {width} = useWindowDimensions();
-  return (number = BREAKPOINTS.sm) => {
-    return width < number;
-  };
-};
-
-const useResponsive = () => {
-  const {width} = useWindowDimensions();
-  return (input: number) => {
-    if (width < BREAKPOINTS.xs) {
-      return input / 3;
-    } else if (width < BREAKPOINTS.md) {
-      return input / 2;
-    } else {
-      return input;
-    }
-  };
-};
 export {
-  useIsDesktop,
-  useIsSmall,
-  BREAKPOINTS,
   useHasBrandLogo,
-  isMobileUA,
   isAndroid,
   isIOS,
   isWebInternal,
@@ -219,8 +69,4 @@ export {
   shouldAuthenticate,
   isArray,
   isValidReactComponent,
-  maxInputLimit,
-  trimText,
-  calculatePosition,
-  useResponsive,
 };

package/template/src/utils/index.tsx

@@ -55,22 +55,3 @@ export function isEmptyObject(obj: object) {
   }
   return true;
 }
-
-export const randomNameGenerator = (num: number) => {
-  let res = '';
-  for (let i = 0; i < num; i++) {
-    const random = Math.floor(Math.random() * 10);
-    res += String.fromCharCode(97 + random);
-  }
-  return res;
-};
-export function formatAMPM(date) {
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
-  var ampm = hours >= 12 ? 'pm' : 'am';
-  hours = hours % 12;
-  hours = hours ? hours : 12; // the hour '0' should be '12'
-  minutes = minutes < 10 ? '0' + minutes : minutes;
-  var strTime = hours + ':' + minutes + ' ' + ampm;
-  return strTime;
-}

package/template/src/utils/isMobileOrTablet.ts

@@ -13,19 +13,14 @@ const isMobileOrTablet = () => {
   (function (a) {
     if (
       /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-        a
+        a,
       ) ||
       /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-        a.substr(0, 4)
+        a.substr(0, 4),
       )
     )
       check = true;
   })(navigator?.userAgent || navigator?.vendor || window?.opera);
-  check =
-    (/Macintosh/i.test(navigator?.userAgent) &&
-      navigator?.maxTouchPoints &&
-      navigator?.maxTouchPoints > 1) ||
-    check;
   return check;
 };
 

package/template/src/utils/useButtonTemplate.tsx

@@ -16,7 +16,6 @@ import {createHook} from 'customization-implementation';
 export enum ButtonTemplateName {
   topBar,
   bottomBar,
-  actionBar,
 }
 
 export interface ButtonTemplateInferface {

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,11 +10,7 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
-import {useContext, useEffect, useRef, useState} from 'react';
-
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
-import {isMobileUA, isWebInternal} from './common';
-import {AppState} from 'react-native';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -27,48 +23,6 @@ function useMuteToggleLocal() {
   const {RtcEngine, dispatch} = useRtc();
   const local = useLocalUserInfo();
 
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-  const isCamON = useRef(local.video);
-
-  useEffect(() => {
-    if ($config.AUDIO_ROOM || !isMobileUA()) return;
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-    });
-
-    return () => {
-      subscription?.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
-    if (appStateVisible === 'background') {
-      isCamON.current = local.video;
-      if (isCamON.current) {
-        isWebInternal()
-          ? RtcEngine.muteLocalVideoStream(true)
-          : RtcEngine.enableLocalVideo(false);
-
-        dispatch({
-          type: 'LocalMuteVideo',
-          value: [0],
-        });
-      }
-    }
-    if (appStateVisible === 'active' && isCamON.current) {
-      isWebInternal()
-        ? RtcEngine.muteLocalVideoStream(false)
-        : RtcEngine.enableLocalVideo(true);
-      dispatch({
-        type: 'LocalMuteVideo',
-        value: [1],
-      });
-    }
-  }, [appStateVisible]);
-
   return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
@@ -128,14 +82,9 @@ function useMuteToggleLocal() {
           });
 
           try {
-            //enableLocalVideo not available on web
-            isWebInternal()
-              ? await RtcEngine.muteLocalVideoStream(
-                  localVideoState === ToggleState.enabled ? true : false,
-                )
-              : await RtcEngine.enableLocalVideo(
-                  localVideoState === ToggleState.enabled ? false : true,
-                );
+            await RtcEngine.muteLocalVideoStream(
+              localVideoState === ToggleState.enabled ? true : false,
+            );
 
             // Enable UI
             dispatch({

package/template/web/index.html

@@ -3,14 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <!-- moved to template/src/assets/font-styles.css as it was not available for sdks-->
-    <!-- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> -->
 
     <base href="/">
     <title><%= htmlWebpackPlugin.options.title %></title>
-
 </head>
 <body>
     <style>

package/template/webpack.commons.js

@@ -34,15 +34,15 @@ module.exports = {
   plugins: [
     // Using html webpack plugin to utilize our index.html
     !isSdk &&
-    new HtmlWebpackPlugin({
-      title: configVars['$config.APP_NAME'],
-      template: isElectron ? 'electron/index.html' : 'web/index.html',
-    }),
+      new HtmlWebpackPlugin({
+        title: configVars['$config.APP_NAME'],
+        template: isElectron ? 'electron/index.html' : 'web/index.html',
+      }),
     isDevelopment &&
-    !isSdk &&
-    new ReactRefreshWebpackPlugin({
-      overlay: false,
-    }),
+      !isSdk &&
+      new ReactRefreshWebpackPlugin({
+        overlay: false,
+      }),
   ].filter(Boolean),
   resolve: {
     alias: {
@@ -139,11 +139,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-
     ],
   },
 };

package/template/webpack.web.config.js

@@ -28,7 +28,6 @@ module.exports = merge(commons, {
   // Webpack dev server config
   devServer: {
     port: 9000,
-    // https: true,
     historyApiFallback: true, // Support for react-router
     static: './', // same as contentBase from webpack v4 config
     client:{

package/template/agora-rn-uikit/src/Reducer/ActiveSpeakerDetected.ts

@@ -1,11 +0,0 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
-
-export default function ActiveSpeakerDetected(
-  state: RenderStateInterface,
-  action: ActionType<'ActiveSpeakerDetected'>,
-) {
-  return {
-    ...state,
-    activeSpeaker: action?.value && action.value?.length ? action.value[0] : '',
-  };
-}

package/template/agora-rn-uikit/src/Reducer/LocalPermissionState.ts

@@ -1,24 +0,0 @@
-import {
-  ActionType,
-  RenderStateInterface,
-  UidType,
-} from '../Contexts/RtcContext';
-
-export default function LocalPermissionState(
-  state: RenderStateInterface,
-  action: ActionType<'LocalPermissionState'>,
-  localUid: UidType,
-) {
-  let stateUpdate: RenderStateInterface = {
-    activeSpeaker: state.activeSpeaker,
-    renderList: {
-      ...state.renderList,
-      [localUid]: {
-        ...state.renderList[localUid],
-        permissionStatus: action.value[0],
-      },
-    },
-    activeUids: [...state.activeUids],
-  };
-  return stateUpdate;
-}

package/template/agora-rn-uikit/src/Reducer/UserPin.ts

@@ -1,11 +0,0 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
-
-export default function UserPin(
-  state: RenderStateInterface,
-  action: ActionType<'UserPin'>,
-) {
-  return {
-    ...state,
-    pinnedUid: action?.value && action.value?.length ? action.value[0] : '',
-  };
-}

package/template/android/app/src/main/res/values/colors.xml

@@ -1,7 +0,0 @@
-<resources>
-    <item  name="blue"  type="color">#099DFD
-    </item>
-    <integer-array  name="androidcolors">
-    <item>@color/blue</item>
-    </integer-array>
-</resources>

package/template/react-native-toast-message/src/components/checkbox.js

@@ -1,178 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { View, TouchableOpacity, Text, Pressable } from 'react-native';
-import PropTypes from 'prop-types';
-import { stylePropType } from '../utils/prop-types';
-import styles, { HEIGHT } from './base/styles';
-import Checkbox from '../../../src/subComponents/Checkbox';
-import { PrimaryButton } from 'customization-api';
-import TertiaryButton from '../../../src/atoms/TertiaryButton';
-
-function BaseToast({
-  leadingIcon,
-  trailingIcon,
-  text1,
-  text2,
-  onPress,
-  style,
-  contentContainerStyle,
-  text1Style,
-  text2Style,
-  subTextStyle,
-  activeOpacity,
-  text1NumberOfLines,
-  text2NumberOfLines,
-  primaryBtn,
-  secondaryBtn,
-  checkbox
-}) {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <TouchableOpacity
-      testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
-      onPress={onPress}
-      activeOpacity={onPress ? activeOpacity : 1}>
-      <View
-        testID='contentContainer'
-        style={[styles.contentContainer, contentContainerStyle]}>
-        {(text1 || text1?.length > 0) && (
-          <View
-            style={{
-              flex: 1,
-              flexDirection: 'row',
-              justifyContent: 'space-between'
-            }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                flex: 1
-              }}>
-              {leadingIcon ? leadingIcon : <></>}
-              <Text
-                testID='text1'
-                style={[styles.text1, text1Style]}
-                numberOfLines={text1NumberOfLines}>
-                {text1}
-              </Text>
-            </View>
-            <View style={{ justifyContent: 'flex-start', alignSelf: 'center' }}>
-              {trailingIcon ? trailingIcon : <></>}
-            </View>
-          </View>
-        )}
-        {(text2 || text2?.length > 0) && (
-          <View>
-            <Text
-              testID='text2'
-              style={[styles.text2, text2Style]}
-              numberOfLines={text2NumberOfLines}>
-              {text2}
-            </Text>
-          </View>
-        )}
-        {checkbox && (
-          <Pressable
-            style={{
-              flex: 1,
-              flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 8,
-              marginLeft: 4
-            }}
-            onPress={() => {
-              setChecked((e) => !e);
-            }}>
-            <Checkbox
-              {...checkbox}
-              value={checked}
-              onValueChange={setChecked}
-              style={{
-                marginRight: 8
-              }}
-            />
-            <Text style={subTextStyle}>{checkbox.text}</Text>
-          </Pressable>
-        )}
-        {primaryBtn || secondaryBtn ? (
-          <View
-            style={{
-              flex: 1,
-              flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 24
-            }}>
-            {primaryBtn && (
-              <PrimaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
-                containerStyle={{
-                  height: 40,
-                  borderRadius: 4,
-                  paddingVertical: 0,
-                  paddingHorizontal: 12,
-                  minWidth: 'unset'
-                }}
-                {...primaryBtn}
-                onPress={(e) => {
-                  primaryBtn.onPress(checked, e);
-                  setChecked(false);
-                }}
-              />
-            )}
-            {secondaryBtn && (
-              <TertiaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
-                containerStyle={{
-                  height: 40,
-                  marginLeft: 16,
-                  paddingVertical: 0
-                }}
-                {...secondaryBtn}
-                onPress={(e) => {
-                  secondaryBtn.onPress(checked, e);
-                  setChecked(false);
-                }}
-              />
-            )}
-          </View>
-        ) : (
-          <></>
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-BaseToast.HEIGHT = HEIGHT;
-
-BaseToast.propTypes = {
-  leadingIcon: PropTypes.node,
-  trailingIcon: PropTypes.node,
-  text1: PropTypes.string,
-  text2: PropTypes.string || PropTypes.element || PropTypes.any,
-  onPress: PropTypes.func,
-  style: stylePropType,
-  contentContainerStyle: stylePropType,
-  text1Style: stylePropType,
-  text2Style: stylePropType,
-  activeOpacity: PropTypes.number,
-  text1NumberOfLines: PropTypes.number,
-  text2NumberOfLines: PropTypes.number
-};
-
-BaseToast.defaultProps = {
-  leadingIcon: null,
-  trailingIcon: null,
-  text1: undefined,
-  text2: undefined,
-  onPress: undefined,
-  style: undefined,
-  contentContainerStyle: undefined,
-  text1Style: undefined,
-  text2Style: undefined,
-  activeOpacity: 0.8,
-  text1NumberOfLines: 1,
-  text2NumberOfLines: 2
-};
-
-export default BaseToast;

package/template/react-native.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-    project: {
-        ios: {},
-        android: {},
-    },
-    assets: ["./src/assets/fonts"]
-}