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

package/template/src/auth/useIDPAuth.tsx

@@ -0,0 +1,63 @@
+import {Linking} from 'react-native';
+import {useLocation} from '../components/Router';
+import {enableIDPAuth, getIDPAuthLoginURL} from './openIDPURL';
+import useTokenAuth from './useTokenAuth';
+import StorageContext from '../components/StorageContext';
+import {useContext} from 'react';
+
+export const useIDPAuth = () => {
+  const location = useLocation();
+  const {store, setStore} = useContext(StorageContext);
+  const {tokenLogout} = useTokenAuth();
+  const idpLogout = (dummy: any) => {
+    return new Promise((resolve, reject) => {
+      try {
+        //v1/idp/logout -> will generate and return URL for IDP logout(frontend need to call this)
+        fetch(`${$config.BACKEND_ENDPOINT}/v1/idp/logout`, {
+          credentials: 'include',
+          headers: {
+            authorization: store?.token ? `Bearer ${store?.token}` : '',
+          },
+        })
+          .then((response) => response.json())
+          .then((res: any) => {
+            if (res && res?.url) {
+              //Storing the URL in the local variable
+              // const IDPAuthLogoutURL =
+              //   res?.url + `&returnTo=${window.location.origin}`;
+              const IDPAuthLogoutURL =
+                res?.url +
+                `&returnTo=${encodeURIComponent(
+                  getIDPAuthLoginURL(location.pathname),
+                )}`;
+              //manage backend logout
+              //it will invalid the user session from the manage backend
+              //cookie logout -> true
+              //regular logout -> false
+              tokenLogout(false)
+                .then(() => {
+                  //open idp logout url
+                  Linking.openURL(IDPAuthLogoutURL);
+                  resolve(true);
+                })
+                .catch(() => {
+                  reject(false);
+                });
+            } else {
+              reject(false);
+            }
+          })
+          .catch((_) => {
+            reject(false);
+          });
+      } catch (error) {
+        reject(false);
+      }
+    });
+  };
+
+  return {
+    enableIDPAuth,
+    idpLogout,
+  };
+};

package/template/src/auth/useTokenAuth.tsx

@@ -0,0 +1,194 @@
+import React, {useEffect, useContext, useRef} from 'react';
+import jwt_decode from 'jwt-decode';
+import StorageContext from '../components/StorageContext';
+import SdkEvents from '../utils/SdkEvents';
+import isSDK from '../utils/isSDK';
+import {getPlatformId} from './config';
+const REFRESH_TOKEN_DURATION_IN_SEC = 59;
+
+const useTokenAuth = () => {
+  const tokenRef = useRef(null);
+  const {setStore, store} = useContext(StorageContext);
+  const [tokenExpiresAt, setTokenExpiresAt] = React.useState(0);
+  const timerRef = useRef(null);
+  const updateToken = (token: string) => {
+    setStore && setStore(store => ({...store, token}));
+  };
+
+  const validateToken = (token: string) => {
+    if (token && token.trim() !== '') {
+      const decoded = jwt_decode(token);
+      // @ts-ignore
+      const expiresAt = decoded?.exp * 1000;
+      if (Date.now() >= expiresAt) {
+        if (isSDK()) {
+          SdkEvents.emit('did-token-expire');
+        }
+        throw 'Token expired. Pass a new token';
+      }
+    } else {
+      if (isSDK()) {
+        SdkEvents.emit('token-not-found');
+      }
+      throw 'Token is missing in the options';
+    }
+    return true;
+  };
+
+  const getRefreshToken = async () => {
+    if (store?.token) {
+      await fetch(`${$config.BACKEND_ENDPOINT}/v1/token/refresh`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store?.token ? `Bearer ${store.token}` : '',
+          'X-Platform-ID': getPlatformId(),
+        },
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data?.token) {
+            updateToken(data.token);
+            if (isSDK()) {
+              SdkEvents.emit('token-refreshed');
+            }
+          }
+        });
+    } else {
+      //'debugging no token to refresh'
+    }
+  };
+
+  useEffect(() => {
+    if (!tokenExpiresAt) return;
+
+    timerRef.current = setInterval(() => {
+      const diffInSeconds = Math.floor(
+        Math.abs(tokenExpiresAt - Date.now()) / 1000,
+      );
+      // const minutesLeft = Math.floor(diffInSeconds / 60) % 60;
+      // const secondsLeft = (diffInSeconds - minutes * 60) % 60;
+
+      if (diffInSeconds < REFRESH_TOKEN_DURATION_IN_SEC) {
+        try {
+          if (isSDK()) {
+            SdkEvents.emit('will-token-expire');
+          }
+          getRefreshToken();
+          clearInterval(timerRef.current);
+        } catch (error) {
+          clearInterval(timerRef.current);
+        }
+      }
+      if (diffInSeconds < 0) {
+        clearInterval(timerRef.current);
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(timerRef.current);
+    };
+  }, [tokenExpiresAt]);
+
+  useEffect(() => {
+    const syncToken = async () => {
+      if (!store?.token) {
+        try {
+          timerRef.current && clearInterval(timerRef.current);
+        } catch (error) {
+          console.log('debugging error on clearing interval');
+        }
+      } else {
+        const decoded = jwt_decode(store.token);
+        // @ts-ignore
+        const expiresAt = decoded?.exp * 1000;
+        if (Date.now() >= expiresAt) {
+          if (isSDK()) {
+            SdkEvents.emit('did-token-expire');
+          }
+          //token expired
+        } else {
+          setTokenExpiresAt(expiresAt);
+        }
+      }
+    };
+    tokenRef.current = store.token;
+    syncToken();
+  }, [store?.token]);
+
+  const enableTokenAuth = async (tokenparam?: string) => {
+    return new Promise(async (resolve, reject) => {
+      let token = '';
+      let updateTokenInStore = false;
+      try {
+        if (tokenparam) {
+          token = tokenparam;
+          updateTokenInStore = true;
+        } else {
+          token = store?.token;
+        }
+        if (token) {
+          try {
+            if (validateToken(token)) {
+              if (updateTokenInStore) {
+                updateToken(token);
+              }
+              setTimeout(() => {
+                resolve(true);
+              });
+            } else {
+              if (isSDK()) {
+                SdkEvents.emit('did-token-expire');
+              }
+            }
+          } catch (e) {
+            reject('Token expired');
+          }
+        } else {
+          if (isSDK()) {
+            SdkEvents.emit('token-not-found');
+          }
+          reject('Token not found');
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  };
+
+  const tokenLogout = async (cookieLogout: boolean = false) => {
+    return new Promise((resolve, reject) => {
+      try {
+        fetch(
+          `${$config.BACKEND_ENDPOINT}/v1/logout`,
+          cookieLogout
+            ? {credentials: 'include'}
+            : {
+                headers: {
+                  authorization: tokenRef.current
+                    ? `Bearer ${tokenRef.current}`
+                    : '',
+                },
+              },
+        )
+          .then(response => response.text())
+          .then(_ => {
+            resolve(true);
+            updateToken(null);
+          })
+          .catch(_ => {
+            reject(false);
+          });
+      } catch (error) {
+        reject(false);
+      }
+    });
+  };
+
+  return {
+    enableTokenAuth,
+    tokenLogout,
+  };
+};
+
+export default useTokenAuth;

package/template/src/components/Chat.tsx

@@ -28,7 +28,6 @@ import {ChatType, useChatUIControls} from './chat-ui/useChatUIControls';
 import {useCustomization} from 'customization-implementation';
 import {UidType} from '../../agora-rn-uikit';
 import {ChatBubbleProps} from './ChatContext';
-import {ChatTextInputProps} from '../subComponents/ChatInput';
 import {useSidePanel} from '../utils/useSidePanel';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import IconButton from '../atoms/IconButton';
@@ -39,6 +38,7 @@ import CommonStyles from './CommonStyles';
 import {useLayout} from '../utils/useLayout';
 import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import {ChatHeader} from '../pages/video-call/SidePanelHeader';
+import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
 
 export interface ChatProps {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
@@ -48,12 +48,6 @@ export interface ChatProps {
 
 const Chat = (props?: ChatProps) => {
   // commented for v1 release
-  // const groupChatLabel = useString('groupChatLabel')();
-  // const privateChatLabel = useString('privateChatLabel')();
-  const chatLabel = 'Chat';
-  const groupChatLabel = 'Group';
-  const privateChatLabel = 'Private';
-
   const isSmall = useIsSmall();
   const {setSidePanel} = useSidePanel();
   const {showHeader = true} = props;
@@ -70,6 +64,7 @@ const Chat = (props?: ChatProps) => {
   } = useChatNotification();
 
   const {primaryColor} = useContext(ColorContext);
+  const {transcriptHeight} = useCaptionWidth();
 
   React.useEffect(() => {
     return () => {
@@ -95,7 +90,7 @@ const Chat = (props?: ChatProps) => {
   };
 
   const {ChatAfterView, ChatBeforeView, ChatInputComponent} = useCustomization(
-    (data) => {
+    data => {
       let components: {
         ChatAfterView: React.ComponentType;
         ChatBeforeView: React.ComponentType;
@@ -164,6 +159,8 @@ const Chat = (props?: ChatProps) => {
           isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
             ? {marginVertical: 4}
             : {},
+          // @ts-ignore
+          transcriptHeight && !isMobileUA() && {height: transcriptHeight},
         ]}>
         {/**
          * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view

package/template/src/components/ChatContext.ts

@@ -22,6 +22,7 @@ export interface ChatBubbleProps {
   msgId: string;
   isDeleted: boolean;
   isSameUser: boolean;
+  previousMessageCreatedTimestamp?: string;
   render?: (
     isLocal: boolean,
     message: string,
@@ -31,6 +32,7 @@ export interface ChatBubbleProps {
     isDeleted: boolean,
     updatedTimestamp: string,
     isSameUser: boolean,
+    previousMessageCreatedTimestamp?: string,
   ) => JSX.Element;
 }
 
@@ -64,6 +66,8 @@ export enum controlMessageEnum {
   requestAudio = '7',
   //newUserJoined = '8',
   kickScreenshare = '9',
+  disableButton = '10',
+  endCallForEveryone = '11',
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/ColorConfigure.tsx

@@ -14,7 +14,6 @@ import ColorContext from './ColorContext';
 
 const ColorConfigure = (props: {children: React.ReactNode}) => {
   const primaryColor = $config.PRIMARY_ACTION_BRAND_COLOR;
-  console.log(primaryColor);
   return (
     <ColorContext.Provider
       value={{

package/template/src/components/CommonStyles.ts

@@ -1,12 +1,19 @@
 import {StyleSheet} from 'react-native';
 import ThemeConfig from '../theme';
+
+export const SIDE_PANEL_MAX_WIDTH = '20%';
+export const SIDE_PANEL_MIN_WIDTH = 338;
+export const SIDE_PANEL_GAP = 8;
+export const CAPTION_CONTAINER_HEIGHT = 144;
+export const MOBILE_CAPTION_CONTAINER_HEIGHT = 115;
+
 const CommonStyles = StyleSheet.create({
   sidePanelContainerWeb: {
     flex: 1,
-    maxWidth: '20%',
+    maxWidth: SIDE_PANEL_MAX_WIDTH,
     minWidth: 338,
     borderRadius: ThemeConfig.BorderRadius.small,
-    marginLeft: 12,
+    marginLeft: SIDE_PANEL_GAP,
     backgroundColor: $config.CARD_LAYER_1_COLOR,
     borderColor: $config.CARD_LAYER_3_COLOR,
     borderWidth: 1,