agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/GraphQLProvider.tsx

@@ -15,60 +15,106 @@ import {
   InMemoryCache,
   ApolloProvider,
   NormalizedCacheObject,
+  ApolloLink,
+  // from,
 } from '@apollo/client';
-import {setContext} from '@apollo/client/link/context';
-// import useMount from './useMount';
-import React, {createContext, useContext, useRef} from 'react';
+import React, {createContext, useContext, useEffect, useState} from 'react';
+import getUniqueID from '../../src/utils/getUniqueID';
 import StorageContext from './StorageContext';
-import AsyncStorage from '@react-native-community/async-storage';
 
 export const GraphQLContext = createContext<{
   client: ApolloClient<NormalizedCacheObject>;
-}>({client: {}});
+}>({
+  //@ts-ignore
+  client: {},
+});
 
-const GraphQLProvider = (props: {children: React.ReactNode}) => {
-  const httpLink = createHttpLink({
-    uri: `${$config.BACKEND_ENDPOINT}/query`,
-  });
-  const {store} = useContext(StorageContext);
-  const authLink = setContext(async (_, {headers}) => {
-    // get the authentication token from local storage if it exists
-    // return the headers to the context so httpLink can read them
-    const storeString = await AsyncStorage.getItem('store');
-    let token;
-    if (storeString) {
-      token = JSON.parse(storeString).token;
-    }
+const httpLink = createHttpLink({
+  uri: `${$config.BACKEND_ENDPOINT}/v1/query`,
+  credentials: 'include',
+});
+
+const cache = new InMemoryCache();
+
+const DEFAULT_CLIENT = new ApolloClient({
+  link: httpLink,
+  cache: cache,
+});
+
+const authLink = (token: string) => {
+  /**
+   * Below we create a new link, whenever a token changes, set
+   * context with headers and forward the link so as to
+   * execute the next link in the chain
+   */
+  return new ApolloLink((operation, forward) => {
     if (token) {
-      return {
+      operation.setContext(({headers = {}}) => ({
         headers: {
           ...headers,
-          authorization: token ? `Bearer ${token}` : '',
+          'X-Project-ID': $config.PROJECT_ID,
+          'X-Platform-ID': 'turnkey_web',
+          ...(token && {
+            authorization: token ? `Bearer ${token}` : '',
+          }),
         },
-      };
-    } else {
-      return headers;
+      }));
     }
+    return forward(operation);
   });
+};
 
-  const client = useRef(
-    new ApolloClient({
-      link: authLink.concat(httpLink),
-      cache: new InMemoryCache(),
-    }),
-  );
+const GraphQLProvider = (props: {children: React.ReactNode}) => {
+  const {store} = useContext(StorageContext);
+  const [client, setClient] = useState(DEFAULT_CLIENT);
 
   // useEffect(() => {
-  //   console.log("store changed", store)
-  //   client.current = new ApolloClient({
-  //     link: authLink.concat(httpLink),
-  //     cache: new InMemoryCache(),
-  //   });
-  // }, [authLink, httpLink, store]);
+  //   setClient(
+  //     new ApolloClient({
+  //       link: authLink(store?.token).concat(httpLink),
+  //       cache: new InMemoryCache(),
+  //     }),
+  //   );
+  // }, [store?.token]);
+
+  useEffect(() => {
+    if (!store?.token) {
+      return;
+    }
+    (async () => {
+      const link = authLink(store?.token).concat(httpLink);
+      setClient(new ApolloClient({link, cache}));
+    })();
+  }, [store?.token]);
+
+  // const errorLink = onError(
+  //   ({graphQLErrors, networkError, operation, forward}) => {
+  //     // To retry on network errors, we recommend the RetryLink
+  //     // instead of the onError link. This just logs the error.
+  //     if (networkError) {
+
+  //       // switch (err.extensions.code) {
+  //       //   // Apollo Server sets code to UNAUTHENTICATED
+  //       //   // when an AuthenticationError is thrown in a resolver
+  //       //   case 'UNAUTHENTICATED':
+  //       //     // Modify the operation context with a new token
+  //       //     const oldHeaders = operation.getContext().headers;
+  //       //     operation.setContext({
+  //       //       headers: {
+  //       //         ...oldHeaders,
+  //       //         authorization: getNewToken(),
+  //       //       },
+  //       //     });
+  //       //     // Retry the request, returning the new observable
+  //       //     return forward(operation);
+  //       // }
+  //     }
+  //   },
+  // );
 
   return (
-    <GraphQLContext.Provider value={{client: client.current}}>
-      <ApolloProvider client={client.current}>{props.children}</ApolloProvider>
+    <GraphQLContext.Provider value={{client: client}}>
+      <ApolloProvider client={client}>{props.children}</ApolloProvider>
     </GraphQLContext.Provider>
   );
 };

package/template/src/components/GridVideo.tsx

@@ -9,12 +9,19 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {layoutComponent, useRtc} from 'customization-api';
-import React, {useMemo, useState} from 'react';
-import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
-import {isWebInternal} from '../utils/common';
+import {LayoutComponent, useContent} from 'customization-api';
+import React, {useContext, useMemo, useState} from 'react';
+import {View, StyleSheet, Pressable, Text} from 'react-native';
+import {isWebInternal, useIsDesktop} from '../utils/common';
 import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
 import RenderComponent from '../pages/video-call/RenderComponent';
+import {
+  ClientRoleType,
+  DispatchContext,
+  PropsContext,
+} from '../../agora-rn-uikit';
+import LiveStreamAttendeeLandingTile from './livestream/views/LiveStreamAttendeeLandingTile';
+
 const layout = (len: number, isDesktop: boolean = true) => {
   const rows = Math.round(Math.sqrt(len));
   const cols = Math.ceil(len / rows);
@@ -33,43 +40,58 @@ const layout = (len: number, isDesktop: boolean = true) => {
   };
 };
 
-const GridVideo: layoutComponent = ({renderData}) => {
-  const {dispatch} = useRtc();
-  let onLayout = (e: any) => {
-    setDim([
-      e.nativeEvent.layout.width,
-      e.nativeEvent.layout.height,
-      e.nativeEvent.layout.width > e.nativeEvent.layout.height,
-    ]);
-  };
-  const [dim, setDim] = useState<[number, number, boolean]>([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  const isDesktop = dim[0] > dim[1] + 100;
+const GridVideo: LayoutComponent = ({renderData}) => {
+  const {dispatch} = useContext(DispatchContext);
+  const {rtcProps} = useContext(PropsContext);
+  const {activeUids, customContent, pinnedUid, secondaryPinnedUid} =
+    useContent();
+  const isDesktop = useIsDesktop();
 
   let {matrix, dims} = useMemo(
-    () => layout(renderData.length, isDesktop),
-    [renderData.length, isDesktop],
+    () => layout(renderData.length, isDesktop()),
+    [renderData.length, isDesktop()],
   );
 
   const setPinnedLayout = useSetPinnedLayout();
+
+  //livestreaming audience will see this if no host joined the call
+  if (
+    $config.EVENT_MODE &&
+    rtcProps?.role === ClientRoleType.ClientRoleAudience &&
+    activeUids.filter(i => !customContent[i]).length === 0
+  ) {
+    return <LiveStreamAttendeeLandingTile />;
+  }
+
   return (
-    <View
-      style={[style.full, {paddingHorizontal: isDesktop ? 50 : 0}]}
-      onLayout={onLayout}>
+    <View style={[style.full]}>
       {matrix.map((r, ridx) => (
-        <View style={style.gridRow} key={ridx}>
+        <View
+          style={[
+            style.gridRow,
+            {paddingBottom: ridx === matrix.length - 1 ? 0 : 4},
+          ]}
+          key={ridx}>
           {r.map((c, cidx) => (
             <Pressable
+              disabled={renderData.length === 1}
               onPress={() => {
-                if (!(ridx === 0 && cidx === 0)) {
-                  dispatch({
-                    type: 'SwapVideo',
-                    value: [renderData[ridx * dims.c + cidx]],
-                  });
-                }
+                //if (!(ridx === 0 && cidx === 0)) {
+                //const currentUid = renderData[ridx * dims.c + cidx];
+                // if (
+                //   currentUid !== pinnedUid &&
+                //   currentUid !== secondaryPinnedUid
+                // ) {
+                //   dispatch({
+                //     type: 'ActiveSpeaker',
+                //     value: [renderData[ridx * dims.c + cidx]],
+                //   });
+                // }
+                //}
+                dispatch({
+                  type: 'UserPin',
+                  value: [renderData[ridx * dims.c + cidx]],
+                });
                 setPinnedLayout();
               }}
               style={{
@@ -77,7 +99,25 @@ const GridVideo: layoutComponent = ({renderData}) => {
                 marginHorizontal: 'auto',
               }}
               key={cidx}>
-              <View style={style.gridVideoContainerInner}>
+              <View
+                style={[
+                  style.gridVideoContainerInner,
+                  //if only one item no margin required
+                  r?.length > 1
+                    ? //first item will have marginRight in the row
+                      cidx === 0
+                      ? {marginRight: 4}
+                      : //last item will have marginLeft in the row
+                      cidx === r?.length - 1
+                      ? {marginLeft: 4}
+                      : //middle item will have marginHorizontal
+                        {marginHorizontal: 4}
+                    : //if more than one row than add marginHorizontal
+                    //for ex: 7 people in the call with 3 column layout. last person tile should be aligned propert
+                    ridx > 1
+                    ? {marginHorizontal: 4}
+                    : {},
+                ]}>
                 <RenderComponent uid={renderData[ridx * dims.c + cidx]} />
               </View>
             </Pressable>
@@ -91,39 +131,32 @@ const GridVideo: layoutComponent = ({renderData}) => {
 const style = StyleSheet.create({
   full: {
     flex: 1,
-    // padding: 20,
   },
   gridRow: {
     flex: 1,
     flexDirection: 'row',
     width: '100%',
-    paddingVertical: 10,
+    paddingTop: 4,
   },
   gridVideoContainerInner: {
-    // borderColor: '#fff',
-    // borderWidth:2,
-    // width: '100%',
-    borderRadius: 15,
+    //borderRadius: 12,
     flex: 1,
     overflow: 'hidden',
-    // margin: 1,
-    marginHorizontal: 10,
   },
-  MicBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignSelf: 'center',
-    marginHorizontal: 10,
-    marginRight: 20,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    display: 'flex',
+  infoTextContainer: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
     justifyContent: 'center',
+    marginHorizontal: 'auto',
+    marginVertical: 4,
   },
-  MicIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
+  infoTextStyle: {
+    fontFamily: 'Source Sans Pro',
+    fontWeight: '600',
+    fontSize: 32,
+    color: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    textAlign: 'center',
+    padding: 12,
   },
 });
 export default GridVideo;

package/template/src/components/HostControlView.tsx

@@ -9,27 +9,78 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
-import SecondaryButton from '../atoms/SecondaryButton';
+import React, {useRef, useState} from 'react';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {useString} from '../utils/useString';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
+import TertiaryButton from '../atoms/TertiaryButton';
+import Spacer from '../atoms/Spacer';
+import RemoteMutePopup from '../subComponents/RemoteMutePopup';
+import {calculatePosition} from '../utils/common';
+import {
+  I18nMuteType,
+  peoplePanelMuteAllMicBtnText,
+  peoplePanelTurnoffAllCameraBtnText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface MuteAllAudioButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 
 export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
+  const [showAudioMuteModal, setShowAudioMuteModal] = useState(false);
+  const audioBtnRef = useRef(null);
+  const [modalPosition, setModalPosition] = useState({});
   const muteRemoteAudio = useRemoteMute();
-  //commented for v1 release
-  //const muteAllAudioButton = useString('muteAllAudioButton')();
-  const muteAllAudioButton = 'Mute all audios';
-  const onPress = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
-
+  const muteAllAudioButton = useString(peoplePanelMuteAllMicBtnText)();
+  const onPressAction = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const showAudioModal = () => {
+    audioBtnRef?.current?.measure(
+      (_fx, _fy, localWidth, localHeight, px, py) => {
+        const data = calculatePosition({
+          px,
+          py,
+          localHeight,
+          localWidth,
+          globalHeight,
+          globalWidth,
+          extra: {
+            bottom: 10,
+            left: localWidth / 2,
+            right: -(localWidth / 2),
+          },
+          popupWidth: 290,
+        });
+        setModalPosition(data);
+        setShowAudioMuteModal(true);
+      },
+    );
+  };
+  const onPress = () => {
+    showAudioModal();
+  };
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <SecondaryButton onPress={onPress} text={muteAllAudioButton} />
+    <>
+      <RemoteMutePopup
+        type={I18nMuteType.audio}
+        actionMenuVisible={showAudioMuteModal}
+        setActionMenuVisible={setShowAudioMuteModal}
+        name={null}
+        modalPosition={modalPosition}
+        onMutePress={() => {
+          onPressAction();
+          setShowAudioMuteModal(false);
+        }}
+      />
+      <TertiaryButton
+        setRef={ref => (audioBtnRef.current = ref)}
+        onPress={onPress}
+        text={muteAllAudioButton}
+      />
+    </>
   );
 };
 
@@ -37,53 +88,78 @@ export interface MuteAllVideoButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
+  const [showVideoMuteModal, setShowVideoMuteModal] = useState(false);
+  const videoBtnRef = useRef(null);
+  const [modalPosition, setModalPosition] = useState({});
   const muteRemoteVideo = useRemoteMute();
-
-  //commented for v1 release
-  //const muteAllVideoButton = useString('muteAllVideoButton')();
-  const muteAllVideoButton = 'Mute all videos';
-  const onPress = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
-
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const muteAllVideoButton = useString(peoplePanelTurnoffAllCameraBtnText)();
+  const onPressAction = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
+  const showVideoModal = () => {
+    videoBtnRef?.current?.measure(
+      (_fx, _fy, localWidth, localHeight, px, py) => {
+        const data = calculatePosition({
+          px,
+          py,
+          localHeight,
+          localWidth,
+          globalHeight,
+          globalWidth,
+          extra: {
+            bottom: 10,
+            left: globalWidth < 720 ? 0 : localWidth / 2,
+            right: globalHeight < 720 ? 0 : -(localWidth / 2),
+          },
+          popupWidth: 290,
+        });
+        setModalPosition(data);
+        setShowVideoMuteModal(true);
+      },
+    );
+  };
+  const onPress = () => {
+    showVideoModal();
+  };
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <SecondaryButton onPress={onPress} text={muteAllVideoButton} />
+    <>
+      <RemoteMutePopup
+        type={I18nMuteType.video}
+        actionMenuVisible={showVideoMuteModal}
+        setActionMenuVisible={setShowVideoMuteModal}
+        name={null}
+        modalPosition={modalPosition}
+        onMutePress={() => {
+          onPressAction();
+          setShowVideoMuteModal(false);
+        }}
+      />
+      <TertiaryButton
+        setRef={ref => (videoBtnRef.current = ref)}
+        onPress={onPress}
+        text={muteAllVideoButton}
+      />
+    </>
   );
 };
 
 const HostControlView = () => {
-  //commented for v1 release
-  //const hostControlsLabel = useString('hostControlsLabel')();
-  const hostControlsLabel = 'Host Controls';
   return (
-    <>
-      <Text style={style.heading}>{hostControlsLabel}</Text>
-      <View>
-        <View style={style.btnContainer}>
-          <MuteAllAudioButton />
-        </View>
-        {!$config.AUDIO_ROOM && (
-          <View style={style.btnContainer}>
-            <MuteAllVideoButton />
-          </View>
-        )}
-      </View>
-    </>
+    <View style={style.container}>
+      {!$config.AUDIO_ROOM && <MuteAllVideoButton />}
+      <Spacer horizontal size={16} />
+      <MuteAllAudioButton />
+    </View>
   );
 };
 
 const style = StyleSheet.create({
-  heading: {
-    fontSize: 20,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    // marginBottom: 20,
-    alignSelf: 'center',
-  },
-  btnContainer: {
-    alignItems: 'center',
-    marginVertical: 15,
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
+  btn: {},
 });
 
 export default HostControlView;

package/template/src/components/JoinPhrase.tsx

@@ -16,7 +16,6 @@ import SessionContext from './SessionContext';
 const JoinPhrase = () => {
   const {phrase} = useParams();
   const {joinSession} = useContext(SessionContext);
-  console.log({phrase});
   joinSession({phrase});
   return <></>;
 };

package/template/src/components/Leftbar.tsx

@@ -0,0 +1,129 @@
+/*
+********************************************
+ 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 {View, StyleSheet, useWindowDimensions} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {CustomToolbarMerge, CustomToolbarSorting} from '../utils/common';
+import {ToolbarItemHide, ToolbarLeftPresetProps} from '../atoms/ToolbarPreset';
+import {filterObject} from '../utils';
+
+const defaultItems: ToolbarLeftPresetProps['items'] = {};
+
+export interface LeftbarProps {
+  items?: ToolbarLeftPresetProps['items'];
+  includeDefaultItems?: boolean;
+}
+const Leftbar = (props: LeftbarProps) => {
+  const {includeDefaultItems = true, items = {}} = props;
+  const {width, height} = useWindowDimensions();
+
+  const isHidden = (hide: ToolbarItemHide = false) => {
+    try {
+      return typeof hide === 'boolean'
+        ? hide
+        : typeof hide === 'function'
+        ? hide(width, height)
+        : false;
+    } catch (error) {
+      console.log('debugging isHidden error', error);
+      return false;
+    }
+  };
+
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
+
+  const startItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'start' && !isHidden(v?.hide),
+  );
+  const centerItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'center' && !isHidden(v?.hide),
+  );
+  const endItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'end' && !isHidden(v?.hide),
+  );
+
+  const startItemsOrdered = CustomToolbarSorting(startItems);
+  const centerItemsOrdered = CustomToolbarSorting(centerItems);
+  const endItemsOrdered = CustomToolbarSorting(endItems);
+
+  const renderContent = (
+    orderedKeys: string[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+      } else if (type === 'center') {
+        ToolbarComponent = centerItems[keyName]?.component;
+      } else {
+        ToolbarComponent = endItems[keyName]?.component;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent key={`top-toolbar-${type}` + index} />,
+        );
+      }
+    });
+
+    return renderContentItem;
+  };
+
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {renderContent(startItemsOrdered, 'start')}
+      </View>
+      <View style={style.centerContent}>
+        {renderContent(centerItemsOrdered, 'center')}
+      </View>
+      <View style={style.endContent}>
+        {renderContent(endItemsOrdered, 'end')}
+      </View>
+    </Toolbar>
+  );
+};
+
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});
+
+export default Leftbar;