agora-appbuilder-core 4.0.0-api.4 → 4.0.0-api.6

package/template/src/components/meeting-info-invite/MeetingInfoGridTile.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import {View, StyleSheet, Text, ScrollView} from 'react-native';
+import MeetingInfo from './MeetingInfo';
+import MeetingInfoCardHeader from './MeetingInfoCardHeader';
+import MeetingInfoLinks from './MeetingInfoLinks';
+import ThemeConfig from '../../theme';
+import Spacer from '../../atoms/Spacer';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import {SHARE_LINK_CONTENT_TYPE, useShareLink} from '../useShareLink';
+import useGetName from '../../utils/useGetName';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {isMobileUA, isValidReactComponent} from '../../utils/common';
+import Avatar from '../../atoms/Avatar';
+import {useCustomization} from 'customization-implementation';
+import {useString} from '../../utils/useString';
+import {
+  inviteTileCopyInviteBtnText,
+  inviteTileNoElseJoinedYetText,
+  inviteTileWelcomeText,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const waveHandEmoji = '👋';
+
+export default function MeetingInfoGridTile() {
+  const isMobile = isMobileUA();
+  const welcomeLabel = useString(inviteTileWelcomeText)();
+  const copyInviteButtonLabel = useString(inviteTileCopyInviteBtnText)();
+  const copyInviteButton = copyInviteButtonLabel;
+  const {copyShareLinkToClipboard} = useShareLink();
+  const username = useGetName();
+  const noOneElseJoinedYet = useString(inviteTileNoElseJoinedYetText)();
+  const {InvitePopupContent, InvitePopupTitle} = useCustomization(data => {
+    let components: {
+      InvitePopupContent?: React.ComponentType;
+      InvitePopupTitle?: string;
+    } = {
+      InvitePopupContent: null,
+      InvitePopupTitle: null,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      if (
+        data?.components?.videoCall?.invitePopup?.renderComponent &&
+        typeof data?.components?.videoCall?.invitePopup?.renderComponent !==
+          'object' &&
+        isValidReactComponent(
+          data?.components?.videoCall?.invitePopup?.renderComponent,
+        )
+      ) {
+        components.InvitePopupContent =
+          data?.components?.videoCall.invitePopup.renderComponent;
+      }
+      if (data?.components?.videoCall?.invitePopup?.title) {
+        components.InvitePopupTitle =
+          data?.components?.videoCall.invitePopup.title;
+      }
+    }
+    return components;
+  });
+
+  return (
+    <View style={style.root}>
+      <ScrollView
+        contentContainerStyle={[style.scroll, !isMobile && {paddingLeft: 0}]}>
+        <View style={style.inviteContainerTile}>
+          <View style={style.inviteTile}>
+            <MeetingInfo
+              padding="dense"
+              margin="dense"
+              cardContainerStyle={{maxWidth: 420}}>
+              <MeetingInfoCardHeader
+                avatar={
+                  isMobile ? null : (
+                    <Avatar
+                      name={waveHandEmoji}
+                      containerStyle={style.avatarContainerStyle}
+                      textStyle={[style.avatarTextStyle]}
+                    />
+                  )
+                }>
+                <>
+                  <View style={style.flexRow}>
+                    {isMobile && (
+                      <Text
+                        style={{
+                          marginRight: 5,
+                          transform: [{scaleX: -1}],
+                        }}>
+                        {waveHandEmoji}
+                      </Text>
+                    )}
+                    <Text
+                      style={[style.heading, {flexShrink: 1}]}
+                      numberOfLines={1}>
+                      {welcomeLabel} {username}
+                    </Text>
+                  </View>
+                  {isMobile && <Spacer size={10} />}
+                  <View style={{flexDirection: 'row'}}>
+                    <Text style={[style.subheading, {flexShrink: 1}]}>
+                      {noOneElseJoinedYet}
+                    </Text>
+                  </View>
+                </>
+              </MeetingInfoCardHeader>
+              {InvitePopupContent ? (
+                <>
+                  <Spacer size={20} />
+                  <InvitePopupContent />
+                  <Spacer size={20} />
+                </>
+              ) : (
+                <>
+                  {isMobile ? <Spacer size={20} /> : <Spacer size={30} />}
+                  {!isMobile && (
+                    <MeetingInfoLinks variant="secondary" size="tiny" />
+                  )}
+                  <View>
+                    <Spacer size={20} />
+                    <TertiaryButton
+                      text={copyInviteButton}
+                      containerStyle={{
+                        width: '100%',
+                        height: 48,
+                        paddingVertical: 12,
+                        paddingHorizontal: 12,
+                        borderRadius: ThemeConfig.BorderRadius.medium,
+                      }}
+                      textStyle={{
+                        fontSize: ThemeConfig.FontSize.normal,
+                        lineHeight: 24,
+                      }}
+                      {...(isMobile && {
+                        iconName: 'share',
+                        iconSize: 20,
+                        iconColor: $config.SECONDARY_ACTION_COLOR,
+                      })}
+                      onPress={() => {
+                        copyShareLinkToClipboard(
+                          SHARE_LINK_CONTENT_TYPE.MEETING_INVITE,
+                        );
+                      }}
+                    />
+                  </View>
+                </>
+              )}
+            </MeetingInfo>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const style = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexShrink: 0,
+  },
+  scroll: {
+    flexGrow: 1,
+    padding: 4,
+  },
+  inviteContainerTile: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.small,
+  },
+  inviteTile: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    paddingHorizontal: isMobileUA() ? 0 : 35,
+    borderRadius: 2,
+  },
+  flexRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  heading: {
+    fontSize: isMobileUA()
+      ? ThemeConfig.FontSize.small
+      : ThemeConfig.FontSize.tiny,
+    fontWeight: '400',
+    lineHeight: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    paddingVertical: 2,
+  },
+  subheading: {
+    fontSize: ThemeConfig.FontSize.large,
+    fontWeight: '600',
+    lineHeight: ThemeConfig.FontSize.large,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    paddingVertical: 2,
+  },
+  avatarContainerStyle: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+  },
+  avatarTextStyle: {
+    fontSize: ThemeConfig.FontSize.large + 4,
+    lineHeight: 12,
+    fontWeight: '400',
+    textAlignVertical: 'center',
+    transform: [{scaleX: -1}],
+    display: 'flex',
+  },
+});

package/template/src/components/meeting-info-invite/MeetingInfoLinks.tsx

@@ -0,0 +1,122 @@
+/*
+********************************************
+ 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 from 'react';
+import platform from '../../subComponents/Platform';
+import {SHARE_LINK_CONTENT_TYPE, useShareLink} from '../useShareLink';
+import isSDKCheck from '../../utils/isSDK';
+import {useRoomInfo} from '../room-info/useRoomInfo';
+import {FontSizes} from '../../theme';
+import MeetingLink from '../../atoms/MeetingLink';
+import {useString} from '../../utils/useString';
+import {
+  shareRoomAttendeeLinkLabel,
+  shareRoomAttendeeLinkSubText,
+  shareRoomHostLinkLabel,
+  shareRoomHostLinkSubText,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+  shareRoomPSTNSubText,
+} from '../../language/default-labels/shareLinkScreenLabels';
+
+export interface MeetingInfoBodyProps {
+  showHelperText?: boolean;
+  size?: keyof FontSizes;
+  variant?: 'primary' | 'secondary';
+}
+export const MeetingInfoLinks = (props?: MeetingInfoBodyProps) => {
+  const {showHelperText = false, variant = 'primary', size = 'medium'} = props;
+  const {
+    data: {isHost, pstn, isSeparateHostLink},
+  } = useRoomInfo();
+  const {getShareLink} = useShareLink();
+
+  const isSDK = isSDKCheck();
+  const isWebCheck =
+    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
+
+  const shareRoomHostLink = useString<any>(shareRoomHostLinkLabel)(isWebCheck);
+  const shareRoomHostLinkSubTextLocal = useString<any>(
+    shareRoomHostLinkSubText,
+  )();
+  const shareRoomAttendeeLink = useString<any>(shareRoomAttendeeLinkLabel)(
+    isWebCheck,
+  );
+  const shareRoomAttendeeLinkSubTextLocal = useString<any>(
+    shareRoomAttendeeLinkSubText,
+  )();
+  const shareRoomPSTN = useString<any>(shareRoomPSTNLabel)();
+  const shareRoomPSTNNumber = useString<any>(shareRoomPSTNNumberLabel)();
+  const shareRoomPSTNPin = useString<any>(shareRoomPSTNPinLabel)();
+  const shareRoomPSTNSubTextLocal = useString<any>(shareRoomPSTNSubText)();
+
+  const getAttendeeLabel = () => shareRoomAttendeeLink;
+
+  const getHostLabel = () => shareRoomHostLink;
+
+  return (
+    <>
+      {isSeparateHostLink ? (
+        <>
+          <MeetingLink
+            styleProps={{
+              size,
+              variant,
+            }}
+            label={getAttendeeLabel()}
+            link={getShareLink(SHARE_LINK_CONTENT_TYPE.ATTENDEE)}
+            linkToCopy={SHARE_LINK_CONTENT_TYPE.ATTENDEE}
+            helperText={showHelperText ? shareRoomAttendeeLinkSubTextLocal : ''}
+            gutterBottom
+          />
+        </>
+      ) : (
+        <></>
+      )}
+      {isHost ? (
+        <>
+          <MeetingLink
+            styleProps={{
+              size,
+              variant,
+            }}
+            label={getHostLabel()}
+            link={getShareLink(SHARE_LINK_CONTENT_TYPE.HOST)}
+            linkToCopy={SHARE_LINK_CONTENT_TYPE.HOST}
+            helperText={showHelperText ? shareRoomHostLinkSubTextLocal : ''}
+            gutterBottom
+          />
+        </>
+      ) : (
+        <></>
+      )}
+      {$config.PSTN && pstn && pstn?.number && pstn?.pin ? (
+        <>
+          <MeetingLink
+            styleProps={{
+              size,
+              variant,
+            }}
+            label={shareRoomPSTN}
+            link={`${shareRoomPSTNNumber} - ${pstn?.number}  |  ${shareRoomPSTNPin} - ${pstn?.pin}`}
+            linkToCopy={SHARE_LINK_CONTENT_TYPE.PSTN}
+            helperText={showHelperText ? shareRoomPSTNSubTextLocal : ''}
+            gutterBottom
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+export default MeetingInfoLinks;

package/template/src/components/participants/AllAudienceParticipants.tsx

@@ -13,6 +13,7 @@ import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
 import {useScreenContext} from '../contexts/ScreenShareContext';
 import ScreenshareParticipants from './ScreenshareParticipants';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
 const AllAudienceParticipants = (props: any) => {
   const {screenShareData} = useScreenContext();
@@ -25,9 +26,7 @@ const AllAudienceParticipants = (props: any) => {
   } = props;
   const {defaultContent} = useContent();
   const {localUid} = useContext(chatContext);
-  //commented for v1 release
-  //const participantListPlaceholder = useString('participantListPlaceholder')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const getParticipantName = (uid: UidType) => {
     return defaultContent[uid]?.name || remoteUserDefaultLabel;
   };
@@ -70,7 +69,7 @@ const AllAudienceParticipants = (props: any) => {
       ) : (
         <>
           {/**Audience should see his name first */}
-          {uids.filter((i) => i === localUid).length ? (
+          {uids.filter(i => i === localUid).length ? (
             <>
               <Participant
                 isLocal={true}
@@ -102,7 +101,7 @@ const AllAudienceParticipants = (props: any) => {
           )}
           {/* Others Audience in the call */}
           {uids
-            .filter((i) => i !== localUid)
+            .filter(i => i !== localUid)
             .map((uid: any, index: number) => (
               <>
                 <Participant

package/template/src/components/participants/AllHostParticipants.tsx

@@ -9,13 +9,12 @@ import Spacer from '../../atoms/Spacer';
 import {useVideoMeetingData} from '../contexts/VideoMeetingDataContext';
 import {useScreenContext} from '../contexts/ScreenShareContext';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
 export default function AllHostParticipants(props: any) {
   const localUid = useLocalUid();
   const {screenShareData} = useScreenContext();
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const {defaultContent} = useContent();
   const getParticipantName = (uid: UidType) => {
     return defaultContent[uid]?.name || remoteUserDefaultLabel;
@@ -67,7 +66,7 @@ export default function AllHostParticipants(props: any) {
         <>
           <Spacer size={4} />
           {/* User should see his name first */}
-          {uids.filter((uid) => uid === localUid).length > 0 ? (
+          {uids.filter(uid => uid === localUid).length > 0 ? (
             <>
               <Participant
                 isLocal={true}
@@ -89,10 +88,10 @@ export default function AllHostParticipants(props: any) {
           {/* Others Users in the call */}
           {uids
             .filter(
-              (uid) => uid !== localUid && defaultContent[uid].type === 'rtc',
+              uid => uid !== localUid && defaultContent[uid].type === 'rtc',
             )
             .map(
-              (uid) => (
+              uid => (
                 // defaultContent[uid]?.type === 'screenshare' ? (
                 //   <ScreenshareParticipants
                 //     name={getParticipantName(uid)}

package/template/src/components/participants/Participant.tsx

@@ -13,7 +13,7 @@ import React, {useContext, useRef, useState} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import RemoteAudioMute from '../../subComponents/RemoteAudioMute';
 import RemoteVideoMute from '../../subComponents/RemoteVideoMute';
-import {ClientRole, ContentInterface} from '../../../agora-rn-uikit';
+import {ClientRole, ContentInterface, UidType} from '../../../agora-rn-uikit';
 import UserAvatar from '../../atoms/UserAvatar';
 import {isMobileUA, isWebInternal} from '../../utils/common';
 import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
@@ -46,6 +46,13 @@ import {
 } from 'customization-api';
 import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
 import UserActionMenuOptionsOptions from './UserActionMenuOptions';
+
+import WaitingRoomButton from '../../subComponents/waiting-rooms/WaitingRoomControls';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelMeText,
+  peoplePanelPresenterText,
+} from '../../language/default-labels/videoCallScreenLabels';
 interface ParticipantInterface {
   isLocal: boolean;
   name: string;
@@ -54,11 +61,16 @@ interface ParticipantInterface {
   isHostUser: boolean;
   isAudienceUser: boolean;
   isMobile?: boolean;
+  waitingRoomUser?: boolean;
   handleClose: () => {};
   updateActionSheet: (screenName: 'chat' | 'participants' | 'settings') => {};
+  uid?: UidType;
+  screenUid?: UidType;
 }
 
 const Participant = (props: ParticipantInterface) => {
+  const metext = useString(peoplePanelMeText)();
+  const presentertext = useString(peoplePanelPresenterText)();
   const {coHostUids} = useContext(LiveStreamContext);
   const [isHovered, setIsHovered] = React.useState(false);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
@@ -74,14 +86,18 @@ const Participant = (props: ParticipantInterface) => {
     isMobile = false,
     handleClose,
     updateActionSheet,
+    waitingRoomUser = false,
+    uid,
+    screenUid,
   } = props;
   const {
     data: {isHost},
   } = useRoomInfo();
 
   const showModal = () => {
-    setActionMenuVisible((state) => !state);
+    setActionMenuVisible(state => !state);
   };
+
   return (
     <>
       <UserActionMenuOptionsOptions
@@ -104,17 +120,18 @@ const Participant = (props: ParticipantInterface) => {
             <Text style={styles.participantNameText} numberOfLines={1}>
               {name}
             </Text>
-            {isLocal && <Text style={styles.subText}>{'Me'}</Text>}
+            {isLocal && <Text style={styles.subText}>{metext}</Text>}
             {!isLocal &&
             $config.EVENT_MODE &&
             coHostUids.indexOf(user.uid) !== -1 ? (
-              <Text style={styles.subText}>{'Presenter'}</Text>
+              <Text style={styles.subText}>{presentertext}</Text>
             ) : (
               <></>
             )}
           </View>
           <View style={styles.iconContainer}>
-            {isHovered || actionMenuVisible || isMobileUA() ? (
+            {(isHovered || actionMenuVisible || isMobileUA()) &&
+            !waitingRoomUser ? (
               <View
                 ref={moreIconRef}
                 collapsable={false}
@@ -149,6 +166,23 @@ const Participant = (props: ParticipantInterface) => {
             ) : (
               <Spacer size={24} horizontal={true} />
             )}
+            {waitingRoomUser ? (
+              <>
+                <WaitingRoomButton
+                  uid={uid}
+                  screenUid={screenUid}
+                  isAccept={false}
+                />
+                <Spacer horizontal={true} size={8} />
+                <WaitingRoomButton
+                  uid={uid}
+                  screenUid={screenUid}
+                  isAccept={true}
+                />
+              </>
+            ) : (
+              <></>
+            )}
             {showControls ? (
               <>
                 <Spacer horizontal={true} size={8} />
@@ -171,8 +205,6 @@ const Participant = (props: ParticipantInterface) => {
                                   : $config.SEMANTIC_ERROR,
                               };
                             }}
-                            showLabel={false}
-                            isMobileView={isMobile}
                           />
                         </View>
                       )
@@ -204,8 +236,6 @@ const Participant = (props: ParticipantInterface) => {
                                 : $config.SEMANTIC_ERROR,
                             };
                           }}
-                          showLabel={false}
-                          isMobileView={isMobile}
                         />
                       </View>
                     )
@@ -285,6 +315,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     paddingHorizontal: 20,
     paddingVertical: 8,
   },

package/template/src/components/participants/ParticipantSectionTitle.tsx

@@ -12,6 +12,9 @@ interface PropsInterface {
 
 export default function ParticipantSectionTitle(props: PropsInterface) {
   const {title, count = 0} = props;
+  if (!count) {
+    return null;
+  }
   return (
     <TouchableOpacity
       style={style.container}
@@ -43,8 +46,8 @@ const style = StyleSheet.create({
     fontSize: 12,
     fontFamily: 'Source Sans Pro',
     fontWeight: '700',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    paddingVertical: 12,
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+    paddingVertical: 8,
     alignSelf: 'center',
   },
   iconView: {

package/template/src/components/participants/ScreenshareParticipants.tsx

@@ -25,7 +25,7 @@ const ScreenshareParticipants = (props: {user: ContentInterface}) => {
   const [actionMenuVisible, setActionMenuVisible] = useState(false);
 
   const showModal = () => {
-    setActionMenuVisible((state) => !state);
+    setActionMenuVisible(state => !state);
   };
   return (
     <>
@@ -39,17 +39,17 @@ const ScreenshareParticipants = (props: {user: ContentInterface}) => {
       />
       <PlatformWrapper showModal={showModal} setIsHovered={setIsHovered}>
         <View style={styles.container}>
-          <View style={styles.userInfoContainer}>
-            <View style={styles.bgContainerStyle}>
-              <UserAvatar
-                name={props.user.name}
-                containerStyle={styles.containerStyle}
-                textStyle={styles.textStyle}
-              />
-            </View>
-            <View style={{alignSelf: 'center'}}>
-              <Text style={styles.participantNameText}>{props.user.name}</Text>
-            </View>
+          <View style={styles.bgContainerStyle}>
+            <UserAvatar
+              name={props.user.name}
+              containerStyle={styles.containerStyle}
+              textStyle={styles.textStyle}
+            />
+          </View>
+          <View style={{flex: 1, marginHorizontal: 8, alignSelf: 'center'}}>
+            <Text style={styles.participantNameText} numberOfLines={1}>
+              {props.user.name}
+            </Text>
           </View>
           {true ? (
             <View
@@ -88,11 +88,11 @@ const ScreenshareParticipants = (props: {user: ContentInterface}) => {
                   />
                 </View>
               ) : (
-                <></>
+                <View style={{width: 24, height: 24, opacity: 0}} />
               )}
             </View>
           ) : (
-            <></>
+            <View style={{width: 24, height: 24, opacity: 0}} />
           )}
         </View>
       </PlatformWrapper>
@@ -123,7 +123,6 @@ const styles = StyleSheet.create({
     width: 36,
     height: 36,
     borderRadius: 18,
-    marginRight: 8,
   },
   containerStyle: {
     width: 36,
@@ -132,14 +131,13 @@ const styles = StyleSheet.create({
   },
   textStyle: {
     fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 10,
+    lineHeight: 12,
     fontWeight: '400',
     color: $config.CARD_LAYER_1_COLOR,
   },
   participantNameText: {
     fontWeight: '400',
     fontSize: 12,
-    lineHeight: 15,
     fontFamily: ThemeConfig.FontFamily.sansPro,
     flexDirection: 'row',
     color: $config.FONT_COLOR,