agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/subComponents/SelectDeviceSettings.backup.tsx

@@ -1,207 +0,0 @@
-/*
-********************************************
- 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. 
-*********************************************
-*/
-import React, {useContext, useEffect} from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
-import DeviceContext from '../components/DeviceContext';
-import ColorContext from '../components/ColorContext';
-import {useString} from '../utils/useString';
-import Spacer from '../atoms/Spacer';
-import Dropdown from '../atoms/Dropdown';
-import {usePreCall} from '../components/precall/usePreCall';
-import ThemeConfig from '../theme';
-// import {dropdown} from '../../theme.json';
-/**
- * A component to diplay a dropdown and select a device.
- * It will add the selected device to the device context.
- */
-const useSelectDevice = (): [boolean, string] => {
-  const {rtcProps} = useContext(PropsContext);
-  const {primaryColor} = useContext(ColorContext);
-  const [btnTheme, setBtnTheme] = React.useState<string>(primaryColor);
-  const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
-      setPickerDisabled(true);
-      setBtnTheme('rgba(16, 16, 16, 0.3)');
-    } else {
-      setPickerDisabled(false);
-      setBtnTheme(primaryColor);
-    }
-  }, [rtcProps?.role]);
-  return [isPickerDisabled, btnTheme];
-};
-
-interface SelectVideoDeviceProps {
-  render?: (
-    selectedCam: string,
-    setSelectedCam: (cam: string) => void,
-    deviceList: MediaDeviceInfo[],
-    isDisabled: boolean,
-  ) => JSX.Element;
-}
-
-const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
-  const {selectedCam, setSelectedCam, deviceList} = useContext(DeviceContext);
-  const [isPickerDisabled, btnTheme] = useSelectDevice();
-  const [isFocussed, setIsFocussed] = React.useState(false);
-  const data = deviceList
-    .filter((device: any) => {
-      if (device.kind === 'videoinput') {
-        return true;
-      }
-    })
-    ?.map((device) => {
-      return {
-        label: device.label,
-        value: device.deviceId,
-      };
-    });
-
-  return props?.render ? (
-    props.render(selectedCam, setSelectedCam, deviceList, isPickerDisabled)
-  ) : (
-    <>
-      <Text style={[style.label]}>Camera</Text>
-      <Dropdown
-        icon={'video-on'}
-        enabled={!isPickerDisabled}
-        label={!data || !data.length ? 'No Camera Detected' : ''}
-        data={data}
-        onSelect={({label, value}) => {
-          setIsFocussed(true);
-          setSelectedCam(value);
-        }}
-        selectedValue={selectedCam}
-      />
-    </>
-  );
-};
-
-interface SelectAudioDeviceProps {
-  render?: (
-    selectedMic: string,
-    setSelectedMic: (mic: string) => void,
-    deviceList: MediaDeviceInfo[],
-    isDisabled: boolean,
-  ) => JSX.Element;
-}
-
-const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
-  const {selectedMic, setSelectedMic, deviceList} = useContext(DeviceContext);
-  const [isPickerDisabled, btnTheme] = useSelectDevice();
-  const [isFocussed, setIsFocussed] = React.useState(false);
-
-  const data = deviceList
-    .filter((device) => {
-      if (device.kind === 'audioinput') {
-        return true;
-      }
-    })
-    ?.map((device: any) => {
-      if (device.kind === 'audioinput') {
-        return {
-          label: device.label,
-          value: device.deviceId,
-        };
-      }
-    });
-  return props?.render ? (
-    props.render(selectedMic, setSelectedMic, deviceList, isPickerDisabled)
-  ) : (
-    <>
-      <Text style={[style.label]}>Microphone</Text>
-      <Dropdown
-        icon="mic-on"
-        enabled={!isPickerDisabled}
-        selectedValue={selectedMic}
-        label={!data || !data.length ? 'No Microphone Detected' : ''}
-        data={data}
-        onSelect={({label, value}) => {
-          setIsFocussed(true);
-          setSelectedMic(value);
-        }}
-      />
-    </>
-  );
-};
-
-const SelectDeviceSettings = () => {
-  const [isPickerDisabled] = useSelectDevice();
-  const {deviceList} = useContext(DeviceContext);
-  const {setCameraAvailable, setMicAvailable} = usePreCall();
-
-  const audioDevices = deviceList.filter((device) => {
-    if (device.kind === 'audioinput') {
-      return true;
-    }
-  });
-  const videoDevices = deviceList.filter((device) => {
-    if (device.kind === 'videoinput') {
-      return true;
-    }
-  });
-
-  useEffect(() => {
-    if (audioDevices && audioDevices.length) {
-      setMicAvailable(true);
-    }
-  }, [audioDevices]);
-
-  useEffect(() => {
-    if (videoDevices && videoDevices.length) {
-      setCameraAvailable(true);
-    }
-  }, [videoDevices]);
-
-  //commented for v1 release
-  // const settingScreenInfoMessage = useString('settingScreenInfoMessage')();
-  const settingScreenInfoMessage = $config.AUDIO_ROOM
-    ? 'Audio sharing is disabled for attendees. Raise hand to request permission to share.'
-    : 'Video and Audio sharing is disabled for attendees. Raise hand to request permission to share.';
-  return (
-    <View>
-      <View>
-        {!$config.AUDIO_ROOM && <SelectVideoDevice />}
-        <Spacer size={20} />
-        <SelectAudioDevice />
-      </View>
-      {$config.EVENT_MODE && isPickerDisabled && (
-        <View>
-          <Text style={style.infoTxt}>{settingScreenInfoMessage}</Text>
-        </View>
-      )}
-    </View>
-  );
-};
-export const SelectDeviceSettingsComponentsArray: [
-  (props: SelectVideoDeviceProps) => JSX.Element,
-  (props: SelectAudioDeviceProps) => JSX.Element,
-] = [SelectVideoDevice, SelectAudioDevice];
-
-const style = StyleSheet.create({
-  infoTxt: {
-    textAlign: 'center',
-    fontSize: 12,
-    color: '#FF0000',
-  },
-  label: {
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    marginBottom: 12,
-    lineHeight: ThemeConfig.FontSize.small,
-  },
-});
-
-export default SelectDeviceSettings;

package/template/src/subComponents/SidePanelHeader.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import {View, StyleSheet, ViewStyle} from 'react-native';
-import IconButton from '../atoms/IconButton';
-import ThemeConfig from '../theme';
-import {IconsInterface} from '../atoms/CustomIcon';
-import {isWebInternal} from '../utils/common';
-
-export interface SidePanelHeaderProps {
-  centerComponent?: React.ReactNode;
-  leadingIconName?: keyof IconsInterface;
-  leadingIconOnPress?: () => void;
-  trailingIconName?: keyof IconsInterface;
-  trailingIconOnPress?: () => void;
-  isChat?: boolean;
-}
-const SidePanelHeader = (props: SidePanelHeaderProps) => {
-  const {isChat = false} = props;
-  return (
-    <View
-      style={[
-        SidePanelStyles.sidePanelHeader,
-        isChat ? SidePanelStyles.chatPadding : {},
-      ]}>
-      {props?.leadingIconName ? (
-        <View>
-          <IconButton
-            hoverEffect={true}
-            hoverEffectStyle={{
-              backgroundColor: $config.ICON_BG_COLOR,
-              borderRadius: 20,
-            }}
-            iconProps={{
-              iconType: 'plain',
-              iconContainerStyle: {
-                padding: 5,
-              },
-              iconSize: 20,
-              name: props.leadingIconName,
-              tintColor: $config.SECONDARY_ACTION_COLOR,
-            }}
-            onPress={() => {
-              props?.leadingIconOnPress && props.leadingIconOnPress();
-            }}
-          />
-        </View>
-      ) : isChat ? (
-        <View style={{width: 30, height: 'auto'}}></View>
-      ) : (
-        <></>
-      )}
-      {props?.centerComponent ? props.centerComponent : <></>}
-      <View>
-        {props?.trailingIconName ? (
-          <IconButton
-            hoverEffect={true}
-            hoverEffectStyle={{
-              backgroundColor: $config.ICON_BG_COLOR,
-              borderRadius: 20,
-            }}
-            iconProps={{
-              iconType: 'plain',
-              iconContainerStyle: {
-                padding: 5,
-              },
-              iconSize: 20,
-              name: props?.trailingIconName,
-              tintColor: $config.SECONDARY_ACTION_COLOR,
-            }}
-            onPress={() => {
-              props?.trailingIconOnPress && props.trailingIconOnPress();
-            }}
-          />
-        ) : (
-          <></>
-        )}
-      </View>
-    </View>
-  );
-};
-
-export const SidePanelStyles = StyleSheet.create({
-  sidePanelHeader: {
-    height: isWebInternal() ? 60 : 'auto',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 22,
-    borderBottomWidth: 1,
-    borderBottomColor: $config.CARD_LAYER_3_COLOR,
-  },
-  chatPadding: {
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-  },
-  heading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: 1.6 * ThemeConfig.FontSize.normal,
-    fontWeight: '600',
-    color: $config.FONT_COLOR,
-    alignSelf: 'center',
-  },
-  alignCenterNoPadding: {
-    padding: 0,
-    display: 'flex',
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-export default SidePanelHeader;

package/template/src/theme/index.ts

@@ -1,46 +0,0 @@
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-
-const EmphasisOpacity = {
-  high: 1,
-  medium: 0.85,
-  disabled: 0.4,
-};
-const EmphasisPlus = {
-  high: '',
-  medium: hexadecimalTransparency['85%'],
-  disabled: hexadecimalTransparency['40%'],
-};
-const FontSize: {
-  extraLarge: 32;
-  large: 20;
-  medium: 18;
-  normal: 16;
-  small: 14;
-  tiny: 12;
-} = {
-  extraLarge: 32,
-  large: 20,
-  medium: 18,
-  normal: 16,
-  small: 14,
-  tiny: 12,
-};
-const FontFamily = {
-  sansPro: 'Source Sans Pro',
-};
-
-const BorderRadius: {small: 4; medium: 8; large: 12; extraLarge: 20} = {
-  small: 4,
-  medium: 8,
-  large: 12,
-  extraLarge: 20,
-};
-
-const ThemeConfig = {
-  EmphasisOpacity,
-  EmphasisPlus,
-  FontSize,
-  FontFamily,
-  BorderRadius,
-};
-export default ThemeConfig;

package/template/src/utils/PlatformWrapper.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {useState} from 'react';
-import {isWebInternal} from './common';
-
-const PlatformWrapper = ({children}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  return isWebInternal() ? (
-    <div
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children(isHovered)}
-    </div>
-  ) : (
-    <>{children(false)}</>
-  );
-};
-export default PlatformWrapper;

package/template/src/utils/hexadecimalTransparency.ts

@@ -1,108 +0,0 @@
-/**
- * Hexadecimal color code for transparency
- * ref https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
- */
-const hexadecimalTransparency = {
-  '100%': 'FF',
-  '99%': 'FC',
-  '98%': 'FA',
-  '97%': 'F7',
-  '96%': 'F5',
-  '95%': 'F2',
-  '94%': 'F0',
-  '93%': 'ED',
-  '92%': 'EB',
-  '91%': 'E8',
-  '90%': 'E6',
-  '89%': 'E3',
-  '88%': 'E0',
-  '87%': 'DE',
-  '86%': 'DB',
-  '85%': 'D9',
-  '84%': 'D6',
-  '83%': 'D4',
-  '82%': 'D1',
-  '81%': 'CF',
-  '80%': 'CC',
-  '79%': 'C9',
-  '78%': 'C7',
-  '77%': 'C4',
-  '76%': 'C2',
-  '75%': 'BF',
-  '74%': 'BD',
-  '73%': 'BA',
-  '72%': 'B8',
-  '71%': 'B5',
-  '70%': 'B3',
-  '69%': 'B0',
-  '68%': 'AD',
-  '67%': 'AB',
-  '66%': 'A8',
-  '65%': 'A6',
-  '64%': 'A3',
-  '63%': 'A1',
-  '62%': '9E',
-  '61%': '9C',
-  '60%': '99',
-  '59%': '96',
-  '58%': '94',
-  '57%': '91',
-  '56%': '8F',
-  '55%': '8C',
-  '54%': '8A',
-  '53%': '87',
-  '52%': '85',
-  '51%': '82',
-  '50%': '80',
-  '49%': '7D',
-  '48%': '7A',
-  '47%': '78',
-  '46%': '75',
-  '45%': '73',
-  '44%': '70',
-  '43%': '6E',
-  '42%': '6B',
-  '41%': '69',
-  '40%': '66',
-  '39%': '63',
-  '38%': '61',
-  '37%': '5E',
-  '36%': '5C',
-  '35%': '59',
-  '34%': '57',
-  '33%': '54',
-  '32%': '52',
-  '31%': '4F',
-  '30%': '4D',
-  '29%': '4A',
-  '28%': '47',
-  '27%': '45',
-  '26%': '42',
-  '25%': '40',
-  '24%': '3D',
-  '23%': '3B',
-  '22%': '38',
-  '21%': '36',
-  '20%': '33',
-  '19%': '30',
-  '18%': '2E',
-  '17%': '2B',
-  '16%': '29',
-  '15%': '26',
-  '14%': '24',
-  '13%': '21',
-  '12%': '1F',
-  '11%': '1C',
-  '10%': '1A',
-  '9%': '17',
-  '8%': '14',
-  '7%': '12',
-  '6%': '0F',
-  '5%': '0D',
-  '4%': '0A',
-  '3%': '08',
-  '2%': '05',
-  '1%': '03',
-  '0%': '00',
-};
-export default hexadecimalTransparency;

package/template/src/utils/pendingStateUpdateHelper.ts

@@ -1,19 +0,0 @@
-/**
- * Wrapper around 200ms buffered updates.
- * @param action - The asynchronous action that causes update
- * @param cb - Callback method called with true if 200ms exceeded in performing 
-   * provided action and called with false after action completed
- */
-const pendingStateUpdateHelper = async (
-  action: () => Promise<any>,
-  cb: (exceeded200ms: boolean) => void,
-) => {
-  const pendingTimeout = setTimeout(() => {
-    cb(true);
-  }, 200);
-  await action();
-  clearTimeout(pendingTimeout);
-  cb(false);
-};
-
-export default pendingStateUpdateHelper;

package/template/src/utils/useFocus.tsx

@@ -1,46 +0,0 @@
-/*
-********************************************
- 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. 
-*********************************************
-*/
-
-import React, {SetStateAction} from 'react';
-import {createHook} from 'customization-implementation';
-
-export interface currentFocus {
-  editName: boolean;
-}
-export interface FocusContextInterface {
-  currentFocus: currentFocus;
-  setFocus: React.Dispatch<SetStateAction<currentFocus>>;
-}
-
-const FocusContext = React.createContext<FocusContextInterface>({
-  currentFocus: {editName: false},
-  setFocus: () => {},
-});
-
-interface FocusProviderProps {
-  value: FocusContextInterface;
-  children: React.ReactNode;
-}
-const FocusProvider = (props: FocusProviderProps) => {
-  return (
-    <FocusContext.Provider value={{...props.value}}>
-      {props.children}
-    </FocusContext.Provider>
-  );
-};
-
-/**
- * The Focus app state governs the chatinput and editname.
- */
-const useFocus = createHook(FocusContext);
-
-export {FocusProvider, useFocus};

package/template/src/utils/useIsActiveSpeaker.ts

@@ -1,27 +0,0 @@
-/*
-********************************************
- 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. 
-*********************************************
-*/
-import {useRender} from 'customization-api';
-import {UidType} from '../../agora-rn-uikit';
-
-/**
- * Returns a function that checks whether the given uid is a active speaker and returns true/false
- * @returns function
- */
-function useIsActiveSpeaker() {
-  const {activeSpeaker, renderList} = useRender();
-  const isActiveSpeaker = (uid: UidType) => {
-    return renderList[uid].audio && activeSpeaker === uid;
-  };
-  return isActiveSpeaker;
-}
-
-export default useIsActiveSpeaker;

package/template/src/utils/useIsHandRaised.ts

@@ -1,13 +0,0 @@
-import {useContext} from 'react';
-import {UidType} from '../../agora-rn-uikit';
-import LiveStreamContext from '../components/livestream/LiveStreamContext';
-import {RaiseHandValue} from '../components/livestream/Types';
-
-const useIsHandRaised = () => {
-  const {raiseHandList} = useContext(LiveStreamContext);
-  const isHandRaised = (uid: UidType) => {
-    return raiseHandList[uid]?.raised === RaiseHandValue.TRUE;
-  };
-  return isHandRaised;
-};
-export default useIsHandRaised;

package/template/src/utils/useRemoteEndScreenshare.ts

@@ -1,26 +0,0 @@
-import {controlMessageEnum} from '../components/ChatContext';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import {UidType} from '../../agora-rn-uikit';
-import events, {EventPersistLevel} from '../rtm-events-api';
-
-/**
- * Returns a function to end the screenshare for a remote user with the given uid.
- */
-const useRemoteEndScreenshare = () => {
-  const {
-    data: {isHost},
-  } = useMeetingInfo();
-  return (uid: UidType) => {
-    if (isHost && uid) {
-      events.send(
-        controlMessageEnum.kickScreenshare,
-        '',
-        EventPersistLevel.LEVEL1,
-        uid,
-      );
-    } else {
-      console.error('A host can only remove the screenshare from the call.');
-    }
-  };
-};
-export default useRemoteEndScreenshare;