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

package/template/src/components/recordings/utils.ts

@@ -0,0 +1,122 @@
+export function getRecordedDateTime(ipDate: string) {
+  try {
+    let rdate = new Date(ipDate);
+    let ryear = rdate.getFullYear();
+    if (ryear === 1) {
+      throw Error(`Invalid end date, ${ipDate}`);
+    }
+    let rmonth = rdate.getMonth() + 1;
+    let rdt = rdate.getDate();
+    let hour = rdate.getHours();
+    let minute = rdate.getMinutes();
+    let ampm = hour >= 12 ? 'pm' : 'am';
+    hour = hour % 12;
+    hour = hour ? hour : 12; // the hour '0' should be '12'
+    minute = minute < 10 ? minute : minute;
+
+    const formattedHHMM = `${String(hour)}:${String(minute).padStart(
+      2,
+      '0',
+    )} ${ampm}`;
+
+    let today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+
+    let compDate = new Date(ryear, rmonth - 1, rdt); // month - 1 because January == 0
+    let diff = today.getTime() - compDate.getTime(); // get the difference between today(at 00:00:00) and the date
+
+    if (compDate.getTime() == today.getTime()) {
+      return ['Today', `${formattedHHMM}`];
+    } else if (diff <= 24 * 60 * 60 * 1000) {
+      return ['Yesterday', `${formattedHHMM}`];
+    } else {
+      let fulldate = rdate.toDateString();
+      fulldate = fulldate.substring(fulldate.indexOf(' ') + 1);
+      return [fulldate, `${formattedHHMM}`];
+    }
+  } catch (error) {
+    console.error('error while converting recorded time: ', error);
+    return ipDate;
+  }
+}
+
+export const getFileName = (url: string) => {
+  return url.split('#')[0].split('?')[0].split('/').pop();
+};
+
+export const downloadRecording = (url: string) => {
+  const fileName = getFileName(url);
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function (_) {
+    var blob = new Blob([xhr.response], {type: 'video/mp4'});
+    // render `blob` url ✅
+    const downloadUrl = URL.createObjectURL(blob);
+    // anchor element to download
+    const anchor = document.createElement('a');
+    anchor.setAttribute('download', fileName);
+    anchor.href = downloadUrl;
+    // click to dowload the file
+    anchor.click();
+    // revoke download url
+    URL.revokeObjectURL(downloadUrl);
+  };
+  xhr.send();
+  // fetch(url, {method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer'})
+  //   .then(res => res.blob())
+  //   .then(res => {
+  //     const anchor = document.createElement('a');
+  //     anchor.setAttribute('download', fileName);
+  //     const downloadUrl = URL.createObjectURL(res);
+  //     anchor.href = downloadUrl;
+  //     anchor.setAttribute('target', '_blank');
+  //     anchor.click();
+  //     URL.revokeObjectURL(downloadUrl);
+  //   })
+  //   .catch(error => {
+  //     console.log('supriya error', error); // OUTPUT ERRORS, SUCH AS CORS WHEN TESTING NON LOCALLY
+  //   });
+};
+
+export const getDuration = (start: string, end: string): string => {
+  try {
+    const date_future = new Date(end).valueOf();
+    if (date_future < 0) {
+      throw new Error(`Not a valid end date, ${end}`);
+    }
+    const date_now = new Date(start).valueOf();
+    let delta = Math.abs(date_future - date_now) / 1000;
+    // calculate (and subtract) whole days
+    const days = Math.floor(delta / 86400);
+    delta -= days * 86400;
+    // calculate (and subtract) whole hours
+    const hours = Math.floor(delta / 3600) % 24;
+    delta -= hours * 3600;
+    // calculate (and subtract) whole minutes
+    const minutes = Math.floor(delta / 60) % 60;
+    delta -= minutes * 60;
+    // what's left is seconds
+    const seconds = Math.floor(delta) % 60;
+
+    // console.log(`date ${hours}:${minutes}:${seconds}`);
+    let formattedHHMM = '';
+    if (seconds) {
+      formattedHHMM = `${String(seconds)}s`;
+    }
+    if (minutes) {
+      formattedHHMM = `${String(minutes)}m ${String(seconds)}s`;
+    }
+    if (hours) {
+      formattedHHMM = `${String(hours)}h ${String(minutes)}m ${String(
+        seconds,
+      )}s`;
+    }
+    return formattedHHMM;
+  } catch (error) {
+    return '-';
+  }
+};

package/template/src/components/room-info/useRoomInfo.tsx

@@ -0,0 +1,142 @@
+/*
+********************************************
+ 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, {createContext} from 'react';
+import {createHook} from 'customization-implementation';
+import {UidType} from '../../../agora-rn-uikit';
+import {LanguageType} from '../../subComponents/caption/utils';
+import {BoardColor} from '../whiteboard/WhiteboardConfigure';
+import {joinRoomPreference} from '../../utils/useJoinRoom';
+
+export enum WaitingRoomStatus {
+  NOT_REQUESTED = 1,
+  REQUESTED = 2,
+  APPROVED = 3,
+  REJECTED = 4,
+}
+
+export interface RoomData {
+  isHost: boolean;
+  meetingTitle: string;
+  roomId: {
+    attendee: string;
+    host?: string;
+  };
+  pstn?: {
+    number: string;
+    pin: string;
+  };
+  whiteboard?: {
+    room_uuid: string;
+    room_token: string;
+  };
+  chat?: {
+    user_token: string;
+    group_id: string;
+    is_group_owner: boolean;
+  };
+  isSeparateHostLink: boolean;
+  channel?: string;
+  uid?: UidType;
+  token?: string;
+  rtmToken?: string;
+  encryptionSecret?: string;
+  encryptionSecretSalt?: Uint8Array;
+  screenShareUid?: string;
+  screenShareToken?: string;
+}
+
+export interface RoomInfoContextInterface {
+  isJoinDataFetched?: boolean;
+  data?: RoomData;
+  isInWaitingRoom?: boolean;
+  waitingRoomStatus?: WaitingRoomStatus;
+  isWhiteBoardOn?: boolean;
+  boardColor?: BoardColor;
+  whiteboardLastImageUploadPosition?: {
+    height: number;
+  };
+  sttLanguage?: {
+    username?: string;
+    prevLang?: LanguageType[];
+    newLang?: LanguageType[];
+    uid?: UidType;
+    langChanged?: boolean;
+  };
+  isSTTActive?: boolean;
+  roomPreference?: joinRoomPreference;
+}
+
+export const validateMeetingInfoData = (
+  roomInfo: Partial<RoomInfoContextInterface['data']>,
+) => {
+  const {
+    channel,
+    encryptionSecret,
+    rtmToken,
+    screenShareToken,
+    screenShareUid,
+    token,
+    uid,
+  } = roomInfo;
+  if ($config.ENCRYPTION_ENABLED && !encryptionSecret) {
+    return false;
+  }
+  if ($config.SCREEN_SHARING && (!screenShareToken || !screenShareUid)) {
+    return false;
+  }
+  if (!channel || !rtmToken || !token || !uid) {
+    return false;
+  }
+  return true;
+};
+
+export const RoomInfoDefaultValue: RoomInfoContextInterface = {
+  isJoinDataFetched: false,
+  isInWaitingRoom: false,
+  waitingRoomStatus: WaitingRoomStatus.NOT_REQUESTED,
+  isWhiteBoardOn: false,
+  sttLanguage: null,
+  isSTTActive: false,
+  data: {
+    isHost: false,
+    meetingTitle: '',
+    roomId: {
+      attendee: '',
+    },
+    isSeparateHostLink: true,
+  },
+  roomPreference: {
+    disableShareTile: false,
+    disableVideoProcessors: false,
+  },
+};
+
+const RoomInfoContext = createContext(RoomInfoDefaultValue);
+
+interface RoomInfoProviderProps {
+  children: React.ReactNode;
+  value: RoomInfoContextInterface;
+}
+
+const RoomInfoProvider = (props: RoomInfoProviderProps) => {
+  return (
+    <RoomInfoContext.Provider value={{...props.value}}>
+      {props.children}
+    </RoomInfoContext.Provider>
+  );
+};
+/**
+ * The MeetingInfo app state contains information about the active meeting.
+ */
+const useRoomInfo = createHook(RoomInfoContext);
+
+export {RoomInfoProvider, useRoomInfo};

package/template/src/components/{meeting-info/useSetMeetingInfo.tsx → room-info/useSetRoomInfo.tsx}

@@ -11,28 +11,28 @@
 */
 import React, {createContext, SetStateAction} from 'react';
 import {createHook} from 'customization-implementation';
-import {MeetingInfoContextInterface} from './useMeetingInfo';
+import {RoomInfoContextInterface} from './useRoomInfo';
 
-export interface SetMeetingInfoContextInterface {
-  setMeetingInfo: React.Dispatch<SetStateAction<MeetingInfoContextInterface>>;
+export interface SetRoomInfoContextInterface {
+  setRoomInfo: React.Dispatch<SetStateAction<RoomInfoContextInterface>>;
 }
 
-const SetMeetingInfoContext = createContext<SetMeetingInfoContextInterface>({
-  setMeetingInfo: () => {},
+const SetRoomInfoContext = createContext<SetRoomInfoContextInterface>({
+  setRoomInfo: () => {},
 });
 
-interface SetMeetingInfoProviderProps {
+interface SetRoomInfoProviderProps {
   children: React.ReactNode;
-  value: SetMeetingInfoContextInterface;
+  value: SetRoomInfoContextInterface;
 }
 
-const SetMeetingInfoProvider = (props: SetMeetingInfoProviderProps) => {
+const SetRoomInfoProvider = (props: SetRoomInfoProviderProps) => {
   return (
-    <SetMeetingInfoContext.Provider value={{...props.value}}>
+    <SetRoomInfoContext.Provider value={{...props.value}}>
       {props.children}
-    </SetMeetingInfoContext.Provider>
+    </SetRoomInfoContext.Provider>
   );
 };
-const useSetMeetingInfo = createHook(SetMeetingInfoContext);
+const useSetRoomInfo = createHook(SetRoomInfoContext);
 
-export {SetMeetingInfoProvider, useSetMeetingInfo};
+export {SetRoomInfoProvider, useSetRoomInfo};

package/template/src/components/styles.ts

@@ -9,19 +9,22 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import ThemeConfig from '../theme';
 import {isWebInternal} from '../utils/common';
 
 const styles = {
   temp: {
     width: '100%',
     height: '100%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    borderRadius: 15,
+    borderRadius: 0,
+    borderWidth: 0,
   },
   bottomBar: {
     flex: isWebInternal() ? 1.3 : 1.6,
     paddingHorizontal: isWebInternal() ? '20%' : '1%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
+    backgroundColor:
+      $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
     flexDirection: 'row',
     justifyContent: 'space-evenly',
     position: 'relative',
@@ -29,21 +32,30 @@ const styles = {
     bottom: 0,
   },
   localButton: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
-    borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
-    borderWidth: 0,
-    width: 40,
-    height: 40,
-    padding: 3,
     display: 'flex',
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  actionSheetButton: {
+    width: 25,
+    height: 25,
+  },
+  localButtonSmall: {
+    display: 'flex',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  localButtonText: {
+    fontFamily: 'Source Sans Pro',
+    fontSize: 12,
+    marginTop: 4,
+    fontWeight: '400',
+  },
   localButtonWithoutBG: {
     borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     borderWidth: 0,
     width: 40,
     height: 40,
@@ -59,15 +71,24 @@ const styles = {
     resizeMode: 'contain',
   },
   endCall: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
-    borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
-    borderWidth: 0,
-    width: 40,
-    height: 40,
-    alignSelf: 'center',
-    alignItems: 'center',
+    width: 20,
+    height: 20,
+  },
+  endCallContainer: {
+    flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 8,
+  },
+  endCallText: {
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 12,
+    marginLeft: 8,
+    fontWeight: '700',
   },
   remoteButton: {
     width: 25,
@@ -80,7 +101,7 @@ const styles = {
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
+    backgroundColor: $config.SECONDARY_ACTION_COLOR, //'#fff',
   },
   liveStreamHostControlBtns: {
     width: 20,
@@ -93,7 +114,7 @@ const styles = {
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    backgroundColor: $config.SECONDARY_ACTION_COLOR,
   },
   minCloseBtn: {
     alignItems: 'center',

package/template/src/components/useShareLink.tsx

@@ -14,11 +14,16 @@ import {createHook} from 'customization-implementation';
 import React from 'react';
 import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
-import Toast from '../../react-native-toast-message';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {useRoomInfo} from './room-info/useRoomInfo';
 import platform from '../subComponents/Platform';
 import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
 import Clipboard from '../subComponents/Clipboard';
+import {
+  shareRoomCopyInviteToClipboardContent,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+} from '../language/default-labels/shareLinkScreenLabels';
 
 export const GetMeetingInviteURL = (
   baseUrl: string,
@@ -80,7 +85,10 @@ export enum SHARE_LINK_CONTENT_TYPE {
 }
 
 export interface ShareLinkContextInterface {
-  copyShareLinkToClipboard: (type: SHARE_LINK_CONTENT_TYPE) => void;
+  copyShareLinkToClipboard: (
+    type: SHARE_LINK_CONTENT_TYPE,
+    callbackFn?: () => void,
+  ) => void;
   getShareLink: (type: SHARE_LINK_CONTENT_TYPE) => string;
 }
 const ShareLinkContext = React.createContext<ShareLinkContextInterface>({
@@ -95,63 +103,16 @@ interface ShareLinkProvideProps {
 const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   const {
     data: {meetingTitle, roomId, pstn, isSeparateHostLink, isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
-  //commmented for v1 release
-  // const copiedToClipboardText = useString(
-  //   'copiedToClipboardNotificationLabel',
-  // )();
-  // const meetingIdText = useString('meetingIdLabel')();
-  // const PSTNNumberText = useString('PSTNNumber')();
-  // const PSTNPinText = useString('PSTNPin')();
-  // const meetingInviteText =
-  //   useString<MeetingInviteInterface>('meetingInviteText');
-  const copiedToClipboardText = 'Copied to Clipboard';
-  const meetingIdText = 'Meeting ID';
-  const PSTNNumberText = 'PSTN Number';
-  const PSTNPinText = 'PSTN Pin';
-  const meetingInviteText = ({
-    meetingName,
-    id,
-    url,
-    pstn,
-    isHost,
-    isSeparateHostLink,
-  }: MeetingInviteInterface) => {
-    let inviteContent = '';
-    if (url) {
-      //for host
-      if (isHost) {
-        if (isSeparateHostLink) {
-          //seperate link for host and attendee
-          inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
-        } else {
-          //single link for everyone
-          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.host}`;
-        }
-      }
-      //for attendee
-      else {
-        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}`;
-      }
-    } else {
-      if (isHost) {
-        if (isSeparateHostLink) {
-          inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
-        } else {
-          inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.host}`;
-        }
-      } else {
-        //copy this label on videocall screen
-        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
-      }
-    }
-    // Adding pstn data into meeting data if present
-    if (pstn?.number && pstn?.pin) {
-      inviteContent += `\nPSTN Number: ${pstn.number}\nPSTN Pin: ${pstn.pin}`;
-    }
-    return inviteContent;
-  };
+  const pstnLabel = useString(shareRoomPSTNLabel)();
+  const pstnNumberLabel = useString(shareRoomPSTNNumberLabel)();
+  const pinLabel = useString(shareRoomPSTNPinLabel)();
+  const meetingInviteText = useString<MeetingInviteInterface>(
+    shareRoomCopyInviteToClipboardContent,
+  );
+  const PSTNNumberText = `${pstnLabel} ${pstnNumberLabel}`;
+  const PSTNPinText = `${pstnLabel} ${pinLabel}`;
 
   const isSDK = isSDKCheck();
 
@@ -178,10 +139,11 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   };
 
   const getBaseURL = () => {
-    let baseURL =
-      platform === 'web' && !isSDK
-        ? $config.FRONTEND_ENDPOINT || window.location.origin
-        : undefined;
+    let baseURL = !isSDK
+      ? platform === 'web'
+        ? window.location.origin
+        : $config.FRONTEND_ENDPOINT
+      : undefined;
     return baseURL;
   };
 
@@ -213,7 +175,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
 
   const getPstn = () => {
     let stringToCopy = '';
-    if (pstn && pstn?.number && pstn?.pin) {
+    if (pstn && pstn?.number && pstn.pin) {
       stringToCopy += `${PSTNNumberText}: ${pstn.number} ${PSTNPinText}: ${pstn.pin}`;
     }
 
@@ -234,13 +196,17 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
       case SHARE_LINK_CONTENT_TYPE.PSTN:
         stringToCopy = getPstn();
+        break;
       default:
         break;
     }
     return stringToCopy;
   };
 
-  const copyShareLinkToClipboard = (input: SHARE_LINK_CONTENT_TYPE) => {
+  const copyShareLinkToClipboard = (
+    input: SHARE_LINK_CONTENT_TYPE,
+    callbackFn?: () => void,
+  ) => {
     let stringToCopy = '';
     switch (input) {
       case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
@@ -254,15 +220,12 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
       case SHARE_LINK_CONTENT_TYPE.PSTN:
         stringToCopy = getPstn();
+        break;
       default:
         break;
     }
     Clipboard.setString(stringToCopy);
-    Toast.show({
-      type: 'success',
-      text1: copiedToClipboardText,
-      visibilityTime: 1000,
-    });
+    callbackFn && callbackFn();
   };
 
   return (

package/template/src/{utils/useButtonTemplate.tsx → components/useToast.tsx}

@@ -9,35 +9,33 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-
-import React from 'react';
+import React, {useState} from 'react';
 import {createHook} from 'customization-implementation';
 
-export enum ButtonTemplateName {
-  topBar,
-  bottomBar,
-}
-
-export interface ButtonTemplateInferface {
-  buttonTemplateName?: ButtonTemplateName;
+interface ToastContextInterface {
+  isActionSheetVisible: boolean;
+  setActionSheetVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const ButtonTemplateContext = React.createContext<ButtonTemplateInferface>({
-  buttonTemplateName: undefined,
+const ToastContext = React.createContext<ToastContextInterface>({
+  isActionSheetVisible: false,
+  setActionSheetVisible: () => {},
 });
 
-interface ButtonTemplateProviderProps {
-  value: ButtonTemplateInferface;
-  children: React.ReactNode;
-}
-const ButtonTemplateProvider = (props: ButtonTemplateProviderProps) => {
+const ToastProvider = (props: {children: React.ReactNode}) => {
+  const [isActionSheetVisible, setActionSheetVisible] = useState(false);
+
   return (
-    <ButtonTemplateContext.Provider value={{...props.value}}>
+    <ToastContext.Provider
+      value={{
+        isActionSheetVisible,
+        setActionSheetVisible,
+      }}>
       {props.children}
-    </ButtonTemplateContext.Provider>
+    </ToastContext.Provider>
   );
 };
 
-const useButtonTemplate = createHook(ButtonTemplateContext);
+const useToast = createHook(ToastContext);
 
-export {ButtonTemplateProvider, useButtonTemplate};
+export {useToast, ToastContext, ToastProvider};