agora-appbuilder-core 4.0.0 → 4.0.1

package/template/src/components/recordings/ViewRecordingsModal.tsx

@@ -0,0 +1,51 @@
+import React, {SetStateAction, Dispatch} from 'react';
+import {View} from 'react-native';
+import RecordingsModal from './RecordingsModal';
+import {style} from './style';
+import RecordingsDateTable from './RecordingsDateTable';
+import {useString} from '../../utils/useString';
+import {recordingModalTitleIntn} from '../../language/default-labels/videoCallScreenLabels';
+
+interface ViewRecordingsModalProps {
+  setModalOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+// interface FetchRecordingResponse {
+//   pagination: {
+//     limit: number;
+//     total: number;
+//     page: number;
+//   };
+//   recordings: [
+//     {
+//       id: string;
+//       download_url: string;
+//       title: string;
+//       created_at: string;
+//     },
+//   ];
+// }
+// interface ViewRecordingsState {
+//   status: 'idle' | 'pending' | 'resolved' | 'rejected';
+//   data: FetchRecordingResponse;
+//   error: null;
+// }
+export default function ViewRecordingsModal(props: ViewRecordingsModalProps) {
+  const {setModalOpen} = props;
+
+  const recordingModalTitle = useString(recordingModalTitleIntn)();
+
+  return (
+    <RecordingsModal
+      modalVisible={true}
+      setModalVisible={setModalOpen}
+      showCloseIcon={true}
+      title={recordingModalTitle}
+      cancelable={false}
+      contentContainerStyle={style.mContainer}>
+      <View style={style.mbody}>
+        <RecordingsDateTable />
+      </View>
+    </RecordingsModal>
+  );
+}

package/template/src/components/recordings/recording-table.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import {Text, View, ScrollView, Linking} from 'react-native';
+import {style} from './style';
+import Pagination from '../../atoms/pagination/Pagination';
+import Clipboard from '../../subComponents/Clipboard';
+import {downloadRecording, getRecordedDate} from './utils';
+import Tooltip from '../../atoms/Tooltip';
+
+import Loading from '../../subComponents/Loading';
+
+function RTableHeader() {
+  return (
+    <View style={style.thead}>
+      <View style={style.throw}>
+        <View style={[style.th, style.plzero]}>
+          <Text style={style.thText}>Date/Time</Text>
+        </View>
+        <View style={style.th}>
+          <Text style={style.thText}>Actions</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function RTableBody({status, recordings}) {
+  const renderTableBodyContent = () => {
+    if (status === 'idle' || status === 'pending') {
+      return <Loading background="transparent" text="Fetching recordings.." />;
+    }
+    if (status === 'resolved' && recordings.length === 0) {
+      return (
+        <Text style={[style.ttime, style.pt10, style.pl10]}>
+          No recordings found for this meeting
+        </Text>
+      );
+    }
+    return (
+      <>
+        {recordings.map(item => (
+          <View style={style.tbrow} key={item.id}>
+            <View style={[style.td, style.plzero]}>
+              <Text style={style.ttime}>
+                {getRecordedDate(item.created_at)}
+              </Text>
+            </View>
+            <View style={style.td}>
+              {item?.download_url?.length > 0 ? (
+                item?.download_url?.map((link: string, i: number) => (
+                  <View style={style.tactions} key={i}>
+                    <Text
+                      style={style.tlink}
+                      onPress={async () => {
+                        if (await Linking.canOpenURL(link)) {
+                          await Linking.openURL(link);
+                        }
+                      }}>
+                      View
+                    </Text>
+                    <Text
+                      style={[style.tlink, style.pl15]}
+                      onPress={() => {
+                        downloadRecording(link);
+                      }}>
+                      Download
+                    </Text>
+                    <View>
+                      <Tooltip
+                        isClickable
+                        placement="right"
+                        toolTipMessage="Link Copied"
+                        onPress={() => {
+                          Clipboard.setString(link);
+                        }}
+                        fontSize={12}
+                        renderContent={(
+                          isToolTipVisible,
+                          setToolTipVisible,
+                        ) => {
+                          return (
+                            <Text
+                              style={[style.tlink, style.pl15]}
+                              onPress={() => {
+                                Clipboard.setString(link);
+                                setToolTipVisible(true);
+                              }}>
+                              Copy shareable link
+                            </Text>
+                          );
+                        }}
+                      />
+                    </View>
+                  </View>
+                ))
+              ) : (
+                <View style={style.tactions}>
+                  <Text style={style.placeHolder}>
+                    Recording is in progress
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <ScrollView contentContainerStyle={style.scrollgrow}>
+      <ScrollView horizontal={true} contentContainerStyle={style.scrollgrow}>
+        <View style={style.tbody}>{renderTableBodyContent()}</View>
+      </ScrollView>
+    </ScrollView>
+  );
+}
+
+function RTableFooter({currentPage, setCurrentPage, pagination}) {
+  if (!pagination || (pagination && Object.keys(pagination).length === 0)) {
+    return (
+      <View style={style.mfooter}>
+        <Text> </Text>
+      </View>
+    );
+  }
+  const limit = pagination?.limit || 10;
+  const total = pagination?.total || 1;
+  const showing =
+    total <= limit
+      ? total
+      : limit * currentPage >= total
+      ? total
+      : limit * currentPage;
+
+  return (
+    <View style={style.mfooter}>
+      <Text style={style.mfooterTitle}>
+        Showing {showing} of {total}
+      </Text>
+      <View style={style.pushRight}>
+        <View style={style.pagination}>
+          <Pagination
+            currentPage={currentPage}
+            totalCount={pagination?.total}
+            pageSize={pagination?.limit}
+            onPageChange={(page: number) => setCurrentPage(page)}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export {RTableHeader, RTableBody, RTableFooter};

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

@@ -0,0 +1,183 @@
+import {StyleSheet} from 'react-native';
+import ThemeConfig from '../../theme';
+
+export const style = StyleSheet.create({
+  scrollgrow: {
+    flexGrow: 1,
+  },
+  mContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    flexShrink: 0,
+    // width: 620,
+    width: '100%',
+    maxWidth: 620,
+    minWidth: 340,
+    height: 620,
+    maxHeight: 620,
+    borderRadius: 4,
+    zIndex: 2,
+  },
+  mHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: 60,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    alignItems: 'center',
+    gap: 20,
+    flexShrink: 0,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+  },
+  mbody: {
+    width: '100%',
+    flex: 1,
+  },
+  mfooter: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: 60,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexShrink: 0,
+    borderTopWidth: 1,
+    borderTopColor: $config.CARD_LAYER_3_COLOR,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+  },
+  ttable: {
+    flex: 1,
+  },
+  // Header styles start
+  thead: {
+    display: 'flex',
+    height: 40,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    flexShrink: 0,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+  },
+  throw: {
+    flex: 1,
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+  },
+  th: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  thText: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+    fontSize: ThemeConfig.FontSize.small,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    lineHeight: 16,
+  },
+  // Header style ends
+  // Body style starts
+  tbody: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    paddingHorizontal: 20,
+    flex: 1,
+  },
+  tbrow: {
+    display: 'flex',
+    alignSelf: 'stretch',
+    minHeight: 50,
+    flexDirection: 'row',
+    paddingBottom: 10,
+    paddingTop: 20,
+  },
+  td: {
+    flex: 1,
+    alignSelf: 'flex-start',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    // height: 100,
+    gap: 10,
+  },
+  tpreview: {
+    width: '100%',
+    height: 76,
+    padding: 4,
+    backgroundColor: 'black',
+    border: '1px solid grey',
+    color: $config.FONT_COLOR,
+  },
+  ttime: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+    fontSize: ThemeConfig.FontSize.small,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    lineHeight: 16,
+  },
+  tname: {
+    color: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    lineHeight: 16,
+  },
+  tactions: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  tlink: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    lineHeight: 12,
+  },
+  // footer start
+  mfooterTitle: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+    fontSize: ThemeConfig.FontSize.small,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    lineHeight: 16,
+  },
+  pagination: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_4_COLOR,
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+  },
+  placeHolder: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+  },
+  // footer ends
+  zeroHPadding: {
+    paddingHorizontal: 0,
+  },
+  pushRight: {
+    marginLeft: 'auto',
+  },
+  pl10: {
+    paddingLeft: 10,
+  },
+  plzero: {
+    paddingLeft: 0,
+  },
+  pt10: {
+    paddingTop: 10,
+  },
+  pv10: {
+    paddingVertical: 10,
+  },
+  ph20: {
+    paddingHorizontal: 20,
+  },
+  pl15: {
+    paddingLeft: 15,
+  },
+});

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

@@ -0,0 +1,80 @@
+export function getRecordedDate(ipDate: string) {
+  try {
+    let rdate = new Date(ipDate);
+    let ryear = rdate.getFullYear();
+    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\n${formattedHHMM}`;
+    } else if (diff <= 24 * 60 * 60 * 1000) {
+      return `Yesterday\n${formattedHHMM}`;
+    } else {
+      let fulldate = rdate.toDateString();
+      fulldate = fulldate.substring(fulldate.indexOf(' ') + 1);
+      return `${fulldate}\n${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
+  //   });
+};

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

@@ -0,0 +1,128 @@
+/*
+********************************************
+ 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';
+
+export enum WaitingRoomStatus {
+  NOT_REQUESTED = 1,
+  REQUESTED = 2,
+  APPROVED = 3,
+  REJECTED = 4,
+}
+export interface RoomInfoContextInterface {
+  isJoinDataFetched?: boolean;
+  data?: {
+    isHost: boolean;
+    meetingTitle: string;
+    roomId: {
+      attendee: string;
+      host?: string;
+    };
+    pstn?: {
+      number: string;
+      pin: string;
+    };
+    whiteboard?: {
+      room_uuid: string;
+      room_token: string;
+    };
+    isSeparateHostLink: boolean;
+    channel?: string;
+    uid?: UidType;
+    token?: string;
+    rtmToken?: string;
+    encryptionSecret?: string;
+    encryptionSecretSalt?: Uint8Array;
+    screenShareUid?: string;
+    screenShareToken?: string;
+  };
+  isInWaitingRoom?: boolean;
+  waitingRoomStatus?: WaitingRoomStatus;
+  isWhiteBoardOn?: boolean;
+  boardColor?: BoardColor;
+  whiteboardLastImageUploadPosition?: {
+    height: number;
+  };
+  sttLanguage?: {
+    username?: string;
+    prevLang?: LanguageType[];
+    newLang?: LanguageType[];
+    uid?: UidType;
+    langChanged?: Boolean;
+  };
+  isSTTActive?: boolean;
+}
+
+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,
+  },
+};
+
+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};