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

package/template/src/components/Share.tsx

@@ -36,8 +36,21 @@ import LinkButton from '../atoms/LinkButton';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
-
-const isLiveStream = $config.EVENT_MODE;
+import IDPLogoutComponent from '../auth/IDPLogoutComponent';
+import Clipboard from '../subComponents/Clipboard';
+import {
+  shareRoomAttendeeLinkLabel,
+  shareRoomAttendeeLinkSubText,
+  shareRoomCopyBtnText,
+  shareRoomCopyBtnTooltipText,
+  shareRoomHostLinkLabel,
+  shareRoomHostLinkSubText,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+  shareRoomPSTNSubText,
+  shareRoomStartBtnText,
+} from '../language/default-labels/shareLinkScreenLabels';
 
 export interface CopyMeetingInfoProps {
   showSubLabel?: boolean;
@@ -45,62 +58,34 @@ export interface CopyMeetingInfoProps {
 export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
   const {copyShareLinkToClipboard, getShareLink} = useShareLink();
   const {
-    data: {roomId, isHost, pstn, isSeparateHostLink, meetingTitle},
+    data: {roomId, isHost, pstn, isSeparateHostLink},
   } = useRoomInfo();
   const {showSubLabel = true} = props;
-  //commented for v1 release
-  // const meetingUrlText = useString('meetingUrlLabel')();
-  // const meetingIdText = useString('meetingIdLabel')();
-  // const hostIdText = useString('hostIdLabel')();
-  // const attendeeUrlLabel = useString('attendeeUrlLabel')();
-  // const attendeeIdLabel = useString('attendeeIdLabel')();
-  // const hostUrlLabel = useString('hostUrlLabel')();
-  // const pstnLabel = useString('pstnLabel')();
-  // const pstnNumberLabel = useString('pstnNumberLabel')();
-  // const pinLabel = useString('pin')();
-  // const enterMeetingAfterCreateButton = useString(
-  //   'enterMeetingAfterCreateButton',
-  // )();
-  // const copyInviteButton = useString('copyInviteButton')();
-  const meetingUrlText = 'Room Link';
-  const meetingIdText = 'Room ID';
-  const hostIdText = 'Host ID';
-  const attendeeUrlLabel = 'Attendee Link';
-  const attendeeIdLabel = 'Attendee ID';
-  const hostUrlLabel = 'Host Link';
-  const pstnLabel = 'PSTN';
-  const pstnNumberLabel = 'Number';
-  const pinLabel = 'Pin';
-  const enterMeetingAfterCreateButton = isLiveStream
-    ? 'Start Stream (as host)'
-    : 'Start Room (as host)';
-  const copyInviteButton = 'Copy invite to clipboard';
-  const history = useHistory();
-  const enterMeeting = () => {
-    if (roomId?.host) {
-      history.push(roomId.host);
-    }
-  };
+
   const isSDK = isSDKCheck();
   const isWebCheck =
     $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
-  const getAttendeeLabel = () =>
-    isWebCheck ? attendeeUrlLabel : attendeeIdLabel;
+  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 getHostLabel = () => {
-    if (isSeparateHostLink) {
-      if (isWebCheck) {
-        return hostUrlLabel;
-      }
-      return hostIdText;
-    } else {
-      if (isWebCheck) {
-        return meetingUrlText;
-      }
-      return meetingIdText;
-    }
-  };
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+
+  const getAttendeeLabel = () => shareRoomAttendeeLink;
+
+  const getHostLabel = () => shareRoomHostLink;
 
   const clipboardIconButton = (type: SHARE_LINK_CONTENT_TYPE) => {
     return (
@@ -120,7 +105,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
               <Spacer size={8} horizontal={true} />
             </>
           }
-          toolTipMessage="Copied to clipboard"
+          toolTipMessage={copiedToClipboard}
           renderContent={(isToolTipVisible, setToolTipVisible) => {
             return (
               <TouchableOpacity
@@ -169,7 +154,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
             <>
               <Spacer size={14} />
               <Text style={style.helpText}>
-                Share this with attendees you want to invite.
+                {shareRoomAttendeeLinkSubTextLocal}
               </Text>
             </>
           )}
@@ -203,7 +188,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
             <>
               <Spacer size={14} />
               <Text style={style.helpText}>
-                Share this with other co-hosts you want to invite.
+                {shareRoomHostLinkSubTextLocal}
               </Text>
             </>
           )}
@@ -212,9 +197,9 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
       ) : (
         <></>
       )}
-      {pstn ? (
+      {$config.PSTN && pstn && pstn?.number && pstn?.pin ? (
         <>
-          <Text style={style.urlTitle}>{pstnLabel}</Text>
+          <Text style={style.urlTitle}>{shareRoomPSTN}</Text>
           <Spacer size={11} />
           <View style={style.container}>
             <View style={[style.urlContainer, style.urlPadding]}>
@@ -225,8 +210,8 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                     //@ts-ignore
                     isWebCheck ? urlWeb : {opacity: 1},
                   ]}>
-                  {pstnNumberLabel} - {pstn?.number} {' | '} {pinLabel} -{' '}
-                  {pstn?.pin}
+                  {shareRoomPSTNNumber} - {pstn?.number} {' | '}{' '}
+                  {shareRoomPSTNPin} - {pstn?.pin}
                 </Text>
               </View>
             </View>
@@ -236,9 +221,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>
-                Share this phone number and pin to dial from phone.
-              </Text>
+              <Text style={style.helpText}>{shareRoomPSTNSubTextLocal}</Text>
             </>
           )}
           {/* <Spacer size={25} /> */}
@@ -250,8 +233,86 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
   );
 };
 
+const ClipboardIconButtonURL = ({url}) => {
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+  return (
+    <View style={style.iconContainer}>
+      <Tooltip
+        isClickable
+        onPress={() => {
+          Clipboard.setString(url);
+        }}
+        toolTipIcon={
+          <>
+            <ImageIcon
+              iconType="plain"
+              name="tick-fill"
+              tintColor={$config.SEMANTIC_SUCCESS}
+            />
+            <Spacer size={8} horizontal={true} />
+          </>
+        }
+        toolTipMessage={copiedToClipboard}
+        renderContent={(isToolTipVisible, setToolTipVisible) => {
+          return (
+            <TouchableOpacity
+              onPress={() => {
+                Clipboard.setString(url);
+                setToolTipVisible(true);
+              }}>
+              <ImageIcon
+                iconType="plain"
+                name="clipboard"
+                tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+              />
+            </TouchableOpacity>
+          );
+        }}
+      />
+    </View>
+  );
+};
+export interface ShowInputURLProps {
+  label: string;
+  url: string;
+}
+export const ShowInputURL = (props: ShowInputURLProps) => {
+  const {label, url} = props;
+  if (!url) {
+    return null;
+  }
+  return (
+    <>
+      {label ? (
+        <>
+          <Text style={style.urlTitle}>{label}</Text>
+          <Spacer size={11} />
+        </>
+      ) : (
+        <></>
+      )}
+      <View style={style.container}>
+        <View style={style.urlContainer}>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              style.url,
+              style.urlPadding,
+              //@ts-ignore
+              urlWeb,
+            ]}>
+            {url}
+          </Text>
+        </View>
+        <ClipboardIconButtonURL url={url} />
+      </View>
+    </>
+  );
+};
+
 const Share = () => {
-  const {FpeShareComponent} = useCustomization((data) => {
+  const {FpeShareComponent} = useCustomization(data => {
     let components: {
       FpeShareComponent?: React.ElementType;
     } = {};
@@ -274,28 +335,45 @@ const Share = () => {
     data: {roomId, meetingTitle},
   } = useRoomInfo();
 
-  const enterMeetingAfterCreateButton = isLiveStream
-    ? 'Start Stream (as host)'
-    : 'Start Room (as host)';
-  const copyInviteButton = 'Copy invite to clipboard';
+  const shareRoomStartBtnTextLocal = useString<any>(shareRoomStartBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const copyInviteButton = useString(shareRoomCopyBtnText)();
   const history = useHistory();
   const enterMeeting = () => {
     if (roomId?.host) {
       history.push(roomId.host);
     }
   };
-  const isSDK = isSDKCheck();
-  const isWebCheck =
-    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
   return FpeShareComponent ? (
     <FpeShareComponent />
   ) : (
     <View style={style.root}>
+      {!isMobileUA() ? (
+        <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
+      ) : (
+        <></>
+      )}
       <ScrollView contentContainerStyle={style.scrollMain}>
         <Card>
           <View>
-            <Logo />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Logo />
+              {isMobileUA() ? (
+                <IDPLogoutComponent
+                  containerStyle={{marginTop: 0, marginRight: 0}}
+                />
+              ) : (
+                <></>
+              )}
+            </View>
             <Spacer size={20} />
             <Text style={style.heading} numberOfLines={1}>
               {trimText(meetingTitle)}
@@ -309,7 +387,7 @@ const Share = () => {
               iconName="video-on"
               onPress={() => enterMeeting()}
               containerStyle={isMobileUA() && {width: '100%'}}
-              text={enterMeetingAfterCreateButton.toUpperCase()}
+              text={shareRoomStartBtnTextLocal}
             />
             <Spacer size={16} />
             <LinkButton

package/template/src/components/StorageContext.tsx

@@ -10,8 +10,9 @@
 *********************************************
 */
 import React, {createContext, ReactChildren, useEffect, useState} from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage'; // '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import useMount from './useMount';
+import {ENABLE_AUTH} from '../auth/config';
 
 type rememberedDevicesListEntries = Record<
   string,
@@ -78,13 +79,17 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
         } else {
           const storeFromStorage = JSON.parse(storeString);
           Object.keys(initStoreValue).forEach((key) => {
-            if (!storeFromStorage[key])
+            if (!storeFromStorage[key]) {
               storeFromStorage[key] = initStoreValue[key];
+            }
           });
+          //unauth flow delete token from the localstoage if any
+          if (!ENABLE_AUTH) {
+            storeFromStorage['token'] = null;
+          }
           setStore(storeFromStorage);
           setReady(true);
         }
-        console.log('store hydrated', storeString);
         setReady(true);
       } catch (e) {
         console.error('problem hydrating store', e);
@@ -97,14 +102,23 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
   useEffect(() => {
     const syncStore = async () => {
       try {
-        await AsyncStorage.setItem('store', JSON.stringify(store));
-        console.log('store synced with value', store);
+        /**
+         * if authentication is not enabled then store react state will have the token
+         * but it won't be saved in the localstorage
+         * Fix: if we duplicate browser tab and join the same meeting, we will create new session
+         */
+        let tempStore = JSON.parse(JSON.stringify(store));
+        if (!ENABLE_AUTH) {
+          tempStore['token'] = null;
+        }
+        await AsyncStorage.setItem('store', JSON.stringify(tempStore));
       } catch (e) {
         console.log('problem syncing the store', e);
       }
     };
     ready && syncStore();
   }, [store, ready]);
+
   return (
     <StorageContext.Provider value={{store, setStore}}>
       {ready ? props.children : <></>}

package/template/src/components/ToastComponent.tsx

@@ -3,6 +3,9 @@ import Toast from '../../react-native-toast-message';
 import ToastConfig from '../subComponents/ToastConfig';
 
 const ToastComponent = () => {
+  // if ($config.TOAST_NOTIFICATIONS) {
+  //   return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+  // } else return <></>;
   return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
 };
 export default ToastComponent;

package/template/src/components/WhiteboardLayout.tsx

@@ -0,0 +1,291 @@
+/*
+********************************************
+ 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, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  StyleSheet,
+  Pressable,
+  FlatList,
+  useWindowDimensions,
+  Text,
+} from 'react-native';
+import {layoutProps} from '../../theme.json';
+import {useLocalUid, useContent} from 'customization-api';
+import RenderComponent from '../pages/video-call/RenderComponent';
+import IconButton from '../atoms/IconButton';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {BREAKPOINTS, isMobileUA} from '../utils/common';
+import {DispatchContext} from '../../agora-rn-uikit';
+import WhiteboardConfigure, {
+  whiteboardContext,
+} from './whiteboard/WhiteboardConfigure';
+import WhiteboardView from './whiteboard/WhiteboardView';
+
+const {topPinned} = layoutProps;
+
+const WhiteboardLayout = ({renderData}) => {
+  const {pinnedUid, defaultContent, activeUids} = useContent();
+  const activeSpeaker = undefined;
+  const [collapse, setCollapse] = useState(false);
+  const localUid = useLocalUid();
+  const {width, height} = useWindowDimensions();
+  const isDesktop = width > BREAKPOINTS.xl;
+  const isSidePinnedlayout = topPinned === true ? false : isDesktop; // if either explicity set to false or auto evaluation
+  //const [maxUid, ...minUids] = renderData;
+  const {dispatch} = useContext(DispatchContext);
+  const [uids, setUids] = useState(renderData);
+
+  const [screenShareOn, setScreenShareOn] = useState(false);
+
+  useEffect(() => {
+    const nonPinnedUids = activeUids.filter(uid => uid !== pinnedUid);
+
+    const nonActiveSpeakerUids = nonPinnedUids.filter(
+      uid => uid !== activeSpeaker,
+    );
+
+    const remoteScreenShareUids = nonActiveSpeakerUids.filter(uid => {
+      return (
+        defaultContent[uid]?.type === 'screenshare' &&
+        defaultContent[uid]?.parentUid !== localUid
+      );
+    });
+
+    const localScreenShareUids = nonActiveSpeakerUids.filter(uid => {
+      return (
+        defaultContent[uid]?.type === 'screenshare' &&
+        defaultContent[uid]?.parentUid === localUid
+      );
+    });
+    if (remoteScreenShareUids?.length || localScreenShareUids?.length) {
+      setScreenShareOn(true);
+    }
+
+    const restOfTheUids = nonActiveSpeakerUids.filter(
+      uid => defaultContent[uid]?.type !== 'screenshare',
+    );
+
+    /**
+     * Order for pinned layout -
+     * - [1] means only one user
+     * - [N] means multiple users
+     * 1.Pinned User[1]
+     * 2.Remote screenshare users[N]
+     * 3.Active Speaker[1]
+     * 4.Local Screenshare[1]
+     * 5 and etc.Other Users[N]
+     */
+
+    const updatedOrder = [
+      pinnedUid,
+      ...remoteScreenShareUids,
+      pinnedUid !== activeSpeaker ? activeSpeaker : 0,
+      ...localScreenShareUids,
+      ...restOfTheUids,
+    ].filter(uid => uid !== undefined && uid !== 0);
+
+    setUids(updatedOrder);
+  }, [activeUids, defaultContent, activeSpeaker, pinnedUid]);
+
+  //whiteboard changes
+  const {whiteboardActive} = useContext(whiteboardContext);
+  //whiteboard changes
+
+  if (!whiteboardActive) {
+    return (
+      <View style={style.infoTextContainer}>
+        <Text style={style.infoTextStyle}>No Active Whiteboard.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={{
+        flexDirection: isSidePinnedlayout ? 'row' : 'column',
+        flex: 1,
+      }}>
+      {!collapse && (
+        <ScrollView
+          horizontal={!isSidePinnedlayout}
+          showsHorizontalScrollIndicator={isMobileUA() ? false : true}
+          decelerationRate={0}
+          style={
+            isSidePinnedlayout
+              ? {
+                  width: '20%',
+                  paddingRight: 8,
+                }
+              : {
+                  flex: 1,
+                  minHeight: 160,
+                  marginBottom: 8,
+                }
+          }>
+          {/* Pinned Video Top View(Desktop minimized and Mobile native and Mobile web) / Side View(Desktop maximized)*/}
+          {uids?.map((minUid, i) => {
+            //first item -> maximized view so returning null
+            if (i === 0 && !whiteboardActive) return null;
+            //remaining items -> minimized view
+            {
+              /**Rendering minimized views */
+            }
+            return (
+              <Pressable
+                //old
+                //if user pinned somebody then side panel items should not be clickable - swap video should be called
+                //instead we will show replace pin button on hovering the video tile
+                //old
+                disabled={
+                  //old fix
+                  //activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+
+                  //latest fix : pinned video sidepanel layout should not be clickable
+                  //if user hover on it we will show pin for me/replace pin(if someone already pinned) button
+                  true
+                }
+                style={
+                  isSidePinnedlayout
+                    ? {
+                        width: '100%',
+                        height: width * 0.1125 + 2, // width * 20/100 * 9/16 + 2
+                        zIndex: 40,
+                        paddingBottom: 8,
+                      }
+                    : {
+                        // width: ((height / 3) * 16) / 9 / 2 + 12, //dim[1] /4.3
+                        width: 254,
+                        height: '100%',
+                        zIndex: 40,
+                        marginRight: 8,
+                      }
+                }
+                key={'minVideo' + i}
+                onPress={() => {}}>
+                <RenderComponent uid={minUid} />
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      )}
+      {uids && uids?.length && (
+        <View
+          style={
+            isSidePinnedlayout
+              ? collapse
+                ? style.width100
+                : style.width80
+              : style.flex8
+          }>
+          <View style={style.flex1} key={'maxVideo' + uids[0]}>
+            {isSidePinnedlayout && (
+              <IconButton
+                containerStyle={{
+                  position: 'absolute',
+                  top: 8,
+                  left: 8,
+                  zIndex: 999,
+                  elevation: 999,
+                }}
+                onPress={() => setCollapse(!collapse)}
+                iconProps={{
+                  iconContainerStyle: {
+                    padding: 8,
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['10%'],
+                  },
+                  name: collapse ? 'collapse' : 'expand',
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                  iconSize: 24,
+                }}
+              />
+            )}
+            {pinnedUid ? (
+              <IconButton
+                containerStyle={{
+                  paddingHorizontal: 8,
+                  paddingVertical: 10,
+                  backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+                  borderRadius: 8,
+                  flexDirection: 'row',
+                  position: 'absolute',
+                  top: 8,
+                  left: 8 + (isSidePinnedlayout ? 32 + 12 + 8 : 0),
+                  zIndex: 999,
+                  elevation: 999,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: 0,
+                  },
+                  name: 'unpin-filled',
+                  iconSize: 20,
+                  tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+                }}
+                onPress={() => {
+                  dispatch({type: 'UserPin', value: [0]});
+                }}
+                btnTextProps={{
+                  text: 'Unpin',
+                  textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+                  textStyle: {
+                    marginTop: 0,
+                    marginLeft: 6,
+                    marginRight: 2,
+                    fontWeight: '700',
+                  },
+                }}
+              />
+            ) : (
+              <></>
+            )}
+            {/** Render the maximized view */}
+            {whiteboardActive ? (
+              <WhiteboardView showToolbox={true} />
+            ) : (
+              <RenderComponent uid={uids[0]} isMax={true} />
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  width80: {width: '80%'},
+  width100: {width: '100%'},
+  flex2: {flex: 2},
+  flex8: {flex: 8},
+  flex1: {flex: 1},
+  infoTextContainer: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    justifyContent: 'center',
+    marginHorizontal: 'auto',
+    marginVertical: 4,
+  },
+  infoTextStyle: {
+    fontFamily: 'Source Sans Pro',
+    fontWeight: '600',
+    fontSize: 32,
+    color: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    textAlign: 'center',
+    padding: 12,
+  },
+});
+
+export default WhiteboardLayout;