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

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,250 @@
+import React from 'react';
+import {Text, View, ScrollView, Linking, TouchableOpacity} from 'react-native';
+import {style} from './style';
+import Pagination from '../../atoms/pagination/Pagination';
+import Clipboard from '../../subComponents/Clipboard';
+import {downloadRecording, getDuration, getRecordedDateTime} from './utils';
+import Tooltip from '../../atoms/Tooltip';
+import IconButtonWithToolTip from '../../atoms/IconButton';
+import Loading from '../../subComponents/Loading';
+import ImageIcon from '../../atoms/ImageIcon';
+import Spacer from '../../atoms/Spacer';
+import PlatformWrapper from '../../utils/PlatformWrapper';
+
+function RTableHeader() {
+  return (
+    <View style={style.thead}>
+      <View style={style.throw}>
+        <View style={[style.th, style.plzero]}>
+          <Text style={style.thText}>Date</Text>
+        </View>
+        <View style={[style.th]}>
+          <Text style={style.thText}>Time</Text>
+        </View>
+        <View style={[style.th]}>
+          <Text style={style.thText}>Duration</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 (
+        <View style={style.infotextContainer}>
+          <View>
+            <ImageIcon
+              iconType="plain"
+              name="info"
+              tintColor={'#777777'}
+              iconSize={32}
+            />
+          </View>
+          <View>
+            <Text style={[style.infoText, style.pt10, style.pl10]}>
+              No recordings found for this meeting
+            </Text>
+          </View>
+        </View>
+      );
+    }
+    return (
+      <>
+        {recordings.map(item => {
+          const [date, time] = getRecordedDateTime(item.created_at);
+          const recordingStatus = item.status;
+          if (
+            recordingStatus === 'STOPPING' ||
+            recordingStatus === 'STARTED' ||
+            (recordingStatus === 'INPROGRESS' && !item?.download_url)
+          ) {
+            return (
+              <View key={item.id} style={style.pt12}>
+                <View style={[style.infotextContainer, style.captionContainer]}>
+                  <ImageIcon
+                    iconSize={20}
+                    iconType="plain"
+                    name="info"
+                    tintColor={$config.SEMANTIC_NEUTRAL}
+                  />
+                  <Text style={[style.captionText]}>
+                    Current recording is ongoing. Once it concludes, we'll
+                    generate the link
+                  </Text>
+                </View>
+              </View>
+            );
+          }
+          return (
+            <View style={style.tbrow} key={item.id}>
+              <View style={[style.td, style.plzero]}>
+                <Text style={style.ttime}>{date}</Text>
+              </View>
+              <View style={[style.td]}>
+                <Text style={style.ttime}>{time}</Text>
+              </View>
+              <View style={[style.td]}>
+                <Text style={style.ttime}>
+                  {getDuration(item.created_at, item.ended_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}>
+                      <View>
+                        <IconButtonWithToolTip
+                          hoverEffect={true}
+                          hoverEffectStyle={style.iconButtonHoverEffect}
+                          containerStyle={style.iconButton}
+                          iconProps={{
+                            name: 'download',
+                            iconType: 'plain',
+                            iconSize: 20,
+                            tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
+                          }}
+                          onPress={() => {
+                            downloadRecording(link);
+                          }}
+                        />
+                      </View>
+                      <View style={style.pl15}>
+                        <IconButtonWithToolTip
+                          // placement="bottom"
+                          // toolTipMessage="Share"
+                          hoverEffect={true}
+                          hoverEffectStyle={style.iconButtonHoverEffect}
+                          containerStyle={style.iconButton}
+                          iconProps={{
+                            name: 'link-share',
+                            iconType: 'plain',
+                            iconSize: 20,
+                            tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
+                          }}
+                          onPress={async () => {
+                            if (await Linking.canOpenURL(link)) {
+                              await Linking.openURL(link);
+                            }
+                          }}
+                        />
+                      </View>
+                      <View style={[style.pl15]}>
+                        <View>
+                          <Tooltip
+                            isClickable
+                            placement="left"
+                            toolTipMessage="Link Copied"
+                            onPress={() => {
+                              Clipboard.setString(link);
+                            }}
+                            toolTipIcon={
+                              <>
+                                <ImageIcon
+                                  iconType="plain"
+                                  name="tick-fill"
+                                  tintColor={$config.SEMANTIC_SUCCESS}
+                                  iconSize={20}
+                                />
+                                <Spacer size={8} horizontal={true} />
+                              </>
+                            }
+                            fontSize={12}
+                            renderContent={() => {
+                              return (
+                                <PlatformWrapper>
+                                  {(isHovered: boolean) => (
+                                    <TouchableOpacity
+                                      style={[
+                                        isHovered
+                                          ? style.iconButtonHoverEffect
+                                          : {},
+                                        style.iconShareLink,
+                                      ]}
+                                      onPress={() => {
+                                        Clipboard.setString(link);
+                                      }}>
+                                      <ImageIcon
+                                        iconType="plain"
+                                        name="copy-link"
+                                        iconSize={20}
+                                        tintColor={
+                                          $config.SECONDARY_ACTION_COLOR
+                                        }
+                                      />
+                                    </TouchableOpacity>
+                                  )}
+                                </PlatformWrapper>
+                              );
+                            }}
+                          />
+                        </View>
+                      </View>
+                    </View>
+                  ))
+                ) : (
+                  <View style={(style.tactions, {marginTop: 0})}>
+                    <Text style={style.placeHolder}>No recordings found</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,238 @@
+import {StyleSheet} from 'react-native';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+
+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',
+    marginTop: -8,
+  },
+  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
+  captionContainer: {
+    height: 44,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    padding: 12,
+    borderRadius: 4,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  captionText: {
+    fontSize: 12,
+    fontWeight: '400',
+    fontFamily: 'Source Sans Pro',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
+    paddingLeft: 8,
+  },
+  infotextContainer: {
+    display: 'flex',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  infoText: {
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: 'Source Sans Pro',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low,
+  },
+  iconButtonContainer: {
+    marginTop: -8,
+  },
+  iconButton: {
+    width: 32,
+    height: 32,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+  },
+  iconButtonHoverEffect: {
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%'],
+    borderRadius: 16,
+  },
+  iconShareLink: {
+    width: 32,
+    height: 32,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  zeroHPadding: {
+    paddingHorizontal: 0,
+  },
+  pushRight: {
+    marginLeft: 'auto',
+  },
+  pl10: {
+    paddingLeft: 10,
+  },
+  plzero: {
+    paddingLeft: 0,
+  },
+  pt10: {
+    paddingTop: 10,
+  },
+  pt12: {
+    paddingTop: 12,
+  },
+  pv10: {
+    paddingVertical: 10,
+  },
+  ph20: {
+    paddingHorizontal: 20,
+  },
+  pl15: {
+    paddingLeft: 15,
+  },
+});