agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -0,0 +1,62 @@
+import React, {useState, useEffect} from 'react';
+import {View, Text} from 'react-native';
+import {style} from './style';
+import {RTableHeader, RTableBody, RTableFooter} from './recording-table';
+import {useRecording} from '../../subComponents/recording/useRecording';
+
+function RecordingsDateTable() {
+  const [state, setState] = React.useState({
+    status: 'idle',
+    data: {
+      pagination: {},
+      recordings: [],
+    },
+    error: null,
+  });
+  const {
+    status,
+    data: {pagination, recordings},
+    error,
+  } = state;
+
+  const {fetchRecordings} = useRecording();
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    setState(prev => ({...prev, status: 'pending'}));
+    fetchRecordings(currentPage).then(
+      response =>
+        setState(prev => ({
+          ...prev,
+          status: 'resolved',
+          data: {
+            recordings: response?.recordings || [],
+            pagination: response?.pagination || {},
+          },
+        })),
+      error => setState(prev => ({...prev, status: 'rejected', error})),
+    );
+  }, [fetchRecordings, currentPage]);
+
+  if (status === 'rejected') {
+    return (
+      <Text style={[style.ttime, style.pv10, style.ph20]}>
+        {error?.message}
+      </Text>
+    );
+  }
+  return (
+    <View style={style.ttable}>
+      <RTableHeader />
+      <RTableBody status={status} recordings={recordings} />
+      <RTableFooter
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        pagination={pagination}
+      />
+    </View>
+  );
+}
+
+export default RecordingsDateTable;

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

@@ -0,0 +1,135 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  ModalProps,
+  ViewStyle,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import IconButton from '../../atoms/IconButton';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {isMobileUA, useIsDesktop} from '../../utils/common';
+
+interface RecordingsModalProps extends ModalProps {
+  title?: string;
+  subtitle?: string;
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  showCloseIcon?: boolean;
+  children: React.ReactNode;
+  contentContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  cancelable?: boolean;
+}
+const RecordingsModal = (props: RecordingsModalProps) => {
+  const {
+    title,
+    modalVisible,
+    setModalVisible,
+    children,
+    cancelable = false,
+  } = props;
+
+  const isDesktop = useIsDesktop()('popup');
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(false);
+      }}>
+      <View style={[styles.centeredView, isDesktop && {alignItems: 'center'}]}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            cancelable && setModalVisible(false);
+          }}>
+          <View style={styles.backDrop} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.modalView, props?.contentContainerStyle]}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{title}</Text>
+            <View>
+              <IconButton
+                hoverEffect={true}
+                hoverEffectStyle={{
+                  backgroundColor: $config.ICON_BG_COLOR,
+                  borderRadius: 20,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: isMobileUA() ? 0 : 5,
+                  },
+                  name: 'close',
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                }}
+                onPress={() => {
+                  setModalVisible(false);
+                }}
+              />
+            </View>
+          </View>
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default RecordingsModal;
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  modalView: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    maxWidth: 650,
+  },
+  backDrop: {
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    width: '100%',
+  },
+  title: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.xLarge,
+    lineHeight: 32,
+    fontWeight: '500',
+    alignSelf: 'center',
+  },
+});

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
+  //   });
+};