agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/components/GraphQLProvider.tsx

@@ -15,62 +15,105 @@ 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 StorageContext from './StorageContext';
-import AsyncStorage from '@react-native-async-storage/async-storage'; //'@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;
-    }
-    console.log('link module token', storeString);
+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]);
-  console.log('GraphQL render triggered', 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,13 +9,19 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {layoutComponent, useRender, useRtc} from 'customization-api';
+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 {ClientRole, PropsContext} from '../../agora-rn-uikit';
+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);
@@ -34,10 +40,11 @@ const layout = (len: number, isDesktop: boolean = true) => {
   };
 };
 
-const GridVideo: layoutComponent = ({renderData}) => {
-  const {dispatch} = useRtc();
+const GridVideo: LayoutComponent = ({renderData}) => {
+  const {dispatch} = useContext(DispatchContext);
   const {rtcProps} = useContext(PropsContext);
-  const {activeUids} = useRender();
+  const {activeUids, customContent, pinnedUid, secondaryPinnedUid} =
+    useContent();
   const isDesktop = useIsDesktop();
 
   let {matrix, dims} = useMemo(
@@ -50,30 +57,37 @@ const GridVideo: layoutComponent = ({renderData}) => {
   //livestreaming audience will see this if no host joined the call
   if (
     $config.EVENT_MODE &&
-    rtcProps?.role === ClientRole.Audience &&
-    activeUids.length === 0
+    rtcProps?.role === ClientRoleType.ClientRoleAudience &&
+    activeUids.filter(i => !customContent[i]).length === 0
   ) {
-    return (
-      <View style={style.infoTextContainer}>
-        <Text style={style.infoTextStyle}>Waiting for the host to join...</Text>
-      </View>
-    );
+    return <LiveStreamAttendeeLandingTile />;
   }
 
   return (
     <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)) {
+                //if (!(ridx === 0 && cidx === 0)) {
+                const currentUid = renderData[ridx * dims.c + cidx];
+                if (
+                  currentUid !== pinnedUid &&
+                  currentUid !== secondaryPinnedUid
+                ) {
                   dispatch({
-                    type: 'SwapVideo',
+                    type: 'ActiveSpeaker',
                     value: [renderData[ridx * dims.c + cidx]],
                   });
                 }
+                //}
                 setPinnedLayout();
               }}
               style={{
@@ -118,7 +132,7 @@ const style = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     width: '100%',
-    paddingVertical: 4,
+    paddingTop: 4,
   },
   gridVideoContainerInner: {
     //borderRadius: 12,

package/template/src/components/HostControlView.tsx

@@ -11,13 +11,17 @@
 */
 import React, {useRef, useState} from 'react';
 import {View, StyleSheet, useWindowDimensions} from 'react-native';
-import SecondaryButton from '../atoms/SecondaryButton';
 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;
@@ -28,9 +32,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
   const audioBtnRef = useRef(null);
   const [modalPosition, setModalPosition] = useState({});
   const muteRemoteAudio = useRemoteMute();
-  //commented for v1 release
-  //const muteAllAudioButton = useString('muteAllAudioButton')();
-  const muteAllAudioButton = 'Mute all';
+  const muteAllAudioButton = useString(peoplePanelMuteAllMicBtnText)();
   const onPressAction = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const showAudioModal = () => {
@@ -63,7 +65,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
   ) : (
     <>
       <RemoteMutePopup
-        type="audio"
+        type={I18nMuteType.audio}
         actionMenuVisible={showAudioMuteModal}
         setActionMenuVisible={setShowAudioMuteModal}
         name={null}
@@ -74,7 +76,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
         }}
       />
       <TertiaryButton
-        setRef={(ref) => (audioBtnRef.current = ref)}
+        setRef={ref => (audioBtnRef.current = ref)}
         onPress={onPress}
         text={muteAllAudioButton}
       />
@@ -91,9 +93,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
   const [modalPosition, setModalPosition] = useState({});
   const muteRemoteVideo = useRemoteMute();
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  //commented for v1 release
-  //const muteAllVideoButton = useString('muteAllVideoButton')();
-  const muteAllVideoButton = 'Turn off all cameras';
+  const muteAllVideoButton = useString(peoplePanelTurnoffAllCameraBtnText)();
   const onPressAction = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
   const showVideoModal = () => {
     videoBtnRef?.current?.measure(
@@ -125,7 +125,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
   ) : (
     <>
       <RemoteMutePopup
-        type="video"
+        type={I18nMuteType.video}
         actionMenuVisible={showVideoMuteModal}
         setActionMenuVisible={setShowVideoMuteModal}
         name={null}
@@ -136,7 +136,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
         }}
       />
       <TertiaryButton
-        setRef={(ref) => (videoBtnRef.current = ref)}
+        setRef={ref => (videoBtnRef.current = ref)}
         onPress={onPress}
         text={muteAllVideoButton}
       />
@@ -145,9 +145,6 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
 };
 
 const HostControlView = () => {
-  //commented for v1 release
-  //const hostControlsLabel = useString('hostControlsLabel')();
-
   return (
     <View style={style.container}>
       {!$config.AUDIO_ROOM && <MuteAllVideoButton />}

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,110 @@
+/*
+********************************************
+ 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} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {CustomToolbarSort} from '../utils/common';
+
+const defaultStartItems: ToolbarCustomItem[] = [];
+const defaultCenterItems: ToolbarCustomItem[] = [];
+const defaultEndItems: ToolbarCustomItem[] = [];
+
+export interface LeftbarProps {
+  customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
+}
+const Leftbar = (props: LeftbarProps) => {
+  const {customItems = [], includeDefaultItems = true} = props;
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+  const customStartItems = customItems
+    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
+    ?.sort(CustomToolbarSort);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
+    ?.sort(CustomToolbarSort);
+
+  const customEndItems = customItems
+    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
+    ?.sort(CustomToolbarSort);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`left-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {customStartItems && customStartItems?.length ? (
+          renderContent(customStartItems, 'start')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.centerContent}>
+        {customCenterItems && customCenterItems?.length ? (
+          renderContent(customCenterItems, 'center')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.endContent}>
+        {customEndItems && customEndItems?.length ? (
+          renderContent(customEndItems, '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;