agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -0,0 +1,479 @@
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useContext} from 'react';
+import ImageIcon from '../../atoms/ImageIcon';
+import LocalAudioMute, {
+  LocalAudioMuteProps,
+} from '../../subComponents/LocalAudioMute';
+import LocalVideoMute, {
+  LocalVideoMuteProps,
+} from '../../subComponents/LocalVideoMute';
+import LocalEndcall, {
+  LocalEndcallProps,
+} from '../../subComponents/LocalEndCall';
+import CopyJoinInfo from '../../subComponents/CopyJoinInfo';
+import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
+import Recording from '../../subComponents/Recording';
+import ChatContext from '../../components/ChatContext';
+import {numFormatter} from '../../utils';
+import IconButton from '../../atoms/IconButton';
+import {useLayout} from '../../utils/useLayout';
+import useLayoutsData from '../../pages/video-call/useLayoutsData';
+import {useChangeDefaultLayout} from '../../pages/video-call/DefaultLayouts';
+import {PropsContext, ToggleState} from '../../../agora-rn-uikit';
+import {ClientRole} from '../../../agora-rn-uikit';
+import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+import LiveStreamControls from '../../components/livestream/views/LiveStreamControls';
+import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
+import {
+  ChatIconButton,
+  ParticipantsCountView,
+  ParticipantsIconButton,
+} from '../../../src/components/Navbar';
+import {useChatNotification} from '../../components/chat-notification/useChatNotification';
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {useSidePanel} from '../../utils/useSidePanel';
+import Settings from '../../components/Settings';
+import {useLocalUserInfo} from 'customization-api';
+import LayoutIconButton from '../../subComponents/LayoutIconButton';
+
+//Icon for expanding Action Sheet
+interface ShowMoreIconProps {
+  isExpanded: boolean;
+  showNotification: boolean;
+  onPress: () => void;
+}
+const ShowMoreIcon = (props: ShowMoreIconProps) => {
+  const {isExpanded, onPress, showNotification} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <TouchableOpacity onPress={onPress}>
+          <ImageIcon
+            name={isExpanded ? 'arrow-down' : 'more-menu'}
+            tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+          />
+        </TouchableOpacity>
+        {showNotification && <View style={styles.notification} />}
+      </View>
+    </View>
+  );
+};
+
+//Icon for Live Streaming Controls
+interface LiveStreamIconProps {
+  isHandRaised: boolean;
+  showLabel?: boolean;
+}
+const LiveStreamIcon = (props: LiveStreamIconProps) => {
+  const {isHandRaised, showLabel = $config.ICON_TEXT} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <LiveStreamControls
+          showControls={true}
+          isDesktop={false}
+          showLabel={false}
+        />
+      </View>
+      {showLabel && (
+        <Text style={styles.iconText}>
+          {isHandRaised ? 'Lower\nHand' : 'Raise\nHand'}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+//Icon for Chat
+interface ChatIconProps {
+  showLabel?: boolean;
+}
+const ChatIcon = (props: ChatIconProps) => {
+  const {showLabel = $config.ICON_TEXT} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <ChatIconButton isOnActionSheet={true} />
+      </View>
+      {showLabel && <Text style={styles.iconText}>Chat</Text>}
+    </View>
+  );
+};
+
+//Icon for Participants
+interface ParticipantsIconProps {
+  showNotification: boolean;
+}
+const ParticipantsIcon = (props: ParticipantsIconProps) => {
+  const {showNotification} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <ParticipantsIconButton isOnActionSheet={true} />
+      </View>
+      {$config.ICON_TEXT && <Text style={styles.iconText}>People</Text>}
+      {/* {showNotification && <View style={styles.notification} />} */}
+    </View>
+  );
+};
+
+//Icon for Recording
+interface RecordingIconProps {
+  showLabel?: boolean;
+}
+const RecordingIcon = (props: RecordingIconProps) => {
+  const {showLabel = $config.ICON_TEXT} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <Recording showLabel={false} isOnActionSheet={true} />
+      </View>
+      {showLabel && <Text style={styles.iconText}>Record</Text>}
+    </View>
+  );
+};
+
+interface SwitchCameraIconProps {
+  disabled: boolean;
+}
+const SwitchCameraIcon = (props: SwitchCameraIconProps) => {
+  const {disabled} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <LocalSwitchCamera showLabel={false} disabled={disabled} />
+      </View>
+      {$config.ICON_TEXT && (
+        <View>
+          <Text
+            style={[
+              styles.iconText,
+              {
+                color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
+              },
+            ]}>
+            Switch
+          </Text>
+          <Text
+            style={[
+              styles.iconText,
+              {
+                color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
+                marginTop: 0,
+              },
+            ]}>
+            Camera
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+interface SettingsIconProps {
+  onPress: () => void;
+}
+const SettingsIcon = (props: SettingsIconProps) => {
+  const {onPress} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <TouchableOpacity style={styles.iconContainer} onPress={onPress}>
+        <ImageIcon
+          name={'settings'}
+          tintColor={$config.SECONDARY_ACTION_COLOR}
+        />
+      </TouchableOpacity>
+      {$config.ICON_TEXT && <Text style={styles.iconText}>Settings</Text>}
+    </View>
+  );
+};
+
+const ShareIcon = () => {
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <CopyJoinInfo showLabel={false} isOnActionSheet={true} />
+      </View>
+      {$config.ICON_TEXT && <Text style={styles.iconText}>Invite</Text>}
+    </View>
+  );
+};
+
+interface AudioIconProps {
+  isMobileView: boolean;
+  isOnActionSheet: boolean;
+  showLabel: boolean;
+  disabled: boolean;
+}
+const AudioIcon = (props: AudioIconProps) => {
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <LocalAudioMute {...props} />
+      </View>
+    </View>
+  );
+};
+
+interface CamIconProps {
+  isMobileView: boolean;
+  isOnActionSheet: boolean;
+  showLabel: boolean;
+  disabled: boolean;
+}
+const CamIcon = (props: CamIconProps) => {
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <LocalVideoMute {...props} />
+      </View>
+    </View>
+  );
+};
+
+interface EndCallIconProps {
+  showLabel: boolean;
+  isOnActionSheet: boolean;
+}
+const EndCallIcon = (props: EndCallIconProps) => {
+  return (
+    <View style={styles.iconWithText}>
+      <View
+        style={[
+          styles.iconContainer,
+          {backgroundColor: $config.SEMANTIC_ERROR},
+        ]}>
+        <LocalEndcall {...props} />
+      </View>
+    </View>
+  );
+};
+
+interface LayoutIconProps {
+  showLabel?: boolean;
+}
+const LayoutIcon = (props: LayoutIconProps) => {
+  const {showLabel = $config.ICON_TEXT} = props;
+  return (
+    <View style={styles.iconWithText}>
+      <View style={styles.iconContainer}>
+        <LayoutIconButton showLabel={false} />
+      </View>
+      {showLabel && <Text style={styles.iconText}>Layout</Text>}
+    </View>
+  );
+};
+
+type ActionSheetComponentsProps = [
+  (props: AudioIconProps) => JSX.Element,
+  (props: CamIconProps) => JSX.Element,
+  (props: EndCallIconProps) => JSX.Element,
+  (props: ShowMoreIconProps) => JSX.Element,
+  (props: ChatIconProps) => JSX.Element,
+  (props: ParticipantsIconProps) => JSX.Element,
+  (props) => JSX.Element,
+  (props: SwitchCameraIconProps) => JSX.Element,
+  (props: LayoutIconProps) => JSX.Element,
+  (props: SettingsIconProps) => JSX.Element,
+  (props) => JSX.Element,
+];
+
+export const ActionSheetComponentsArray: ActionSheetComponentsProps = [
+  AudioIcon,
+  CamIcon,
+  EndCallIcon,
+  ShowMoreIcon,
+  ChatIcon,
+  ParticipantsIcon,
+  RecordingIcon,
+  SwitchCameraIcon,
+  LayoutIcon,
+  SettingsIcon,
+  ShareIcon,
+];
+
+const ActionSheetContent = (props) => {
+  const {handleSheetChanges, isExpanded} = props;
+  const {onlineUsersCount, localUid} = useContext(ChatContext);
+  const layouts = useLayoutsData();
+  const {currentLayout} = useLayout();
+  const changeLayout = useChangeDefaultLayout();
+  const {rtcProps} = useContext(PropsContext);
+  const {sidePanel, setSidePanel} = useSidePanel();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+  const {isPendingRequestToReview, raiseHandList} =
+    useContext(LiveStreamContext);
+  const {totalUnreadCount} = useChatNotification();
+  const layout = layouts.findIndex((item) => item.name === currentLayout);
+  const isLiveStream = $config.EVENT_MODE;
+  const isAudience = rtcProps?.role == ClientRole.Audience;
+  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+  const isHandRaised = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
+
+  const handleLayoutChange = () => {
+    changeLayout();
+  };
+
+  const isAudioRoom = $config.AUDIO_ROOM;
+  const isVoiceChatHost = !$config.EVENT_MODE && $config.AUDIO_ROOM && isHost;
+  const isVoiceChatAudience =
+    !$config.EVENT_MODE && $config.AUDIO_ROOM && isAudience;
+  const isAudioCastHost = $config.EVENT_MODE && $config.AUDIO_ROOM && isHost;
+  const isAudioCastAudience =
+    $config.EVENT_MODE && $config.AUDIO_ROOM && isAudience;
+
+  const isAudioVideoControlsDisabled =
+    isAudience && $config.EVENT_MODE && !$config.RAISE_HAND;
+  const isVideoDisabled = useLocalUserInfo().video === ToggleState.disabled;
+  return (
+    <View>
+      {/* Row Always Visible */}
+      <View
+        style={[
+          styles.row,
+          {borderBottomWidth: 1, paddingTop: 4, justifyContent: 'center'},
+        ]}>
+        {isAudioVideoControlsDisabled ? null : (
+          <AudioIcon
+            isMobileView={true}
+            isOnActionSheet={true}
+            showLabel={false}
+            disabled={isLiveStream && isAudience && !isBroadCasting}
+          />
+        )}
+
+        {/*For AudioCast Host:Chat ,Attendee:Raise Hand 
+          For VoiceChat Host:Chat, Attendee:Chat
+         */}
+
+        {(isAudioCastHost || isVoiceChatHost || isVoiceChatAudience) && (
+          <ChatIcon showLabel={false} />
+        )}
+        {(isAudioCastAudience && isLiveStream && isAudience) ||
+        (isBroadCasting && !isHost) ? (
+          $config.RAISE_HAND && isAudioRoom ? (
+            <LiveStreamIcon isHandRaised={isHandRaised} showLabel={false} />
+          ) : null
+        ) : null}
+
+        {!isAudioRoom &&
+          (isAudioVideoControlsDisabled ? null : (
+            <CamIcon
+              isOnActionSheet={true}
+              isMobileView={true}
+              showLabel={false}
+              disabled={isLiveStream && isAudience && !isBroadCasting}
+            />
+          ))}
+
+        <EndCallIcon showLabel={false} isOnActionSheet={true} />
+
+        <ShowMoreIcon
+          isExpanded={isExpanded}
+          showNotification={
+            (!isExpanded && totalUnreadCount !== 0) ||
+            ($config.EVENT_MODE && isPendingRequestToReview)
+          }
+          onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
+        />
+      </View>
+
+      {/* Rest Of Controls */}
+      <View style={styles.row}>
+        {/**
+         * In event mode when raise hand feature is active
+         * and audience is promoted to host, the audience can also
+         * demote himself
+         */}
+        {(isLiveStream && isAudience) || (isBroadCasting && !isHost) ? (
+          $config.RAISE_HAND && !isAudioRoom ? (
+            <LiveStreamIcon isHandRaised={isHandRaised} />
+          ) : null
+        ) : null}
+
+        {/* Layout view */}
+        <LayoutIcon />
+
+        {/* chat */}
+        {!(isAudioCastHost || isVoiceChatHost || isVoiceChatAudience) && (
+          <ChatIcon />
+        )}
+        {/* participants */}
+        <ParticipantsIcon
+          showNotification={$config.EVENT_MODE && isPendingRequestToReview}
+        />
+        {/* record */}
+        {isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null}
+
+        {/* switch camera */}
+        {!isAudioRoom &&
+          (isAudioVideoControlsDisabled ? null : (
+            <SwitchCameraIcon
+              disabled={
+                (isLiveStream && isAudience && !isBroadCasting) ||
+                isVideoDisabled
+              }
+            />
+          ))}
+
+        {/* settings */}
+        <SettingsIcon
+          onPress={() => {
+            setSidePanel(SidePanelType.Settings);
+          }}
+        />
+
+        {/* invite */}
+        <ShareIcon />
+      </View>
+    </View>
+  );
+};
+
+export default ActionSheetContent;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    paddingTop: 24,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    flexWrap: 'wrap',
+  },
+
+  iconContainer: {
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  iconWithText: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexBasis: '25%',
+    paddingBottom: 24,
+  },
+  iconText: {
+    color: $config.FONT_COLOR,
+    marginTop: 8,
+    fontSize: 12,
+    fontWeight: '400',
+    fontFamily: 'Source Sans Pro',
+    textAlign: 'center',
+  },
+  notification: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 6,
+    top: -1,
+    right: 5,
+  },
+});

package/template/src/pages/video-call/ActionSheetHandle.tsx

@@ -0,0 +1,38 @@
+import {StyleSheet, View} from 'react-native';
+import React from 'react';
+
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+
+import {ChatHeader, PeopleHeader, SettingsHeader} from './SidePanelHeader';
+
+const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
+  const Header = null;
+
+  const {sidePanel} = props;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.handleIndicatorStyle} />
+
+      {sidePanel === SidePanelType.Participants && <PeopleHeader />}
+      {sidePanel === SidePanelType.Chat && <ChatHeader />}
+      {sidePanel === SidePanelType.Settings && <SettingsHeader />}
+    </View>
+  );
+};
+
+export default ActionSheetHandle;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 0,
+  },
+  handleIndicatorStyle: {
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
+    width: 40,
+    height: 4,
+    alignSelf: 'center',
+    borderRadius: 4,
+    marginTop: 12,
+  },
+});

package/template/src/pages/video-call/ActionSheetStyles.css

@@ -0,0 +1,138 @@
+
+  :root {
+    --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
+    --rsbs-bg: #fff;
+    --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
+    --rsbs-max-w: auto;
+    --rsbs-ml: env(safe-area-inset-left);
+    --rsbs-mr: env(safe-area-inset-right);
+    --rsbs-overlay-rounded: 16px;
+    --handleColor: $config.PRIMARY_ACTION_BRAND_COLOR;
+  }
+
+ 
+  [data-rsbs-overlay] {
+    border-top-left-radius: var(--rsbs-overlay-rounded);
+    border-top-right-radius: var(--rsbs-overlay-rounded);
+    display: flex;
+    background: var(--sheet-background); /* var(--rsbs-bg);*/
+    flex-direction: column;
+    height: var(--rsbs-overlay-h);
+    transform: translate3d(0, var(--rsbs-overlay-translate-y), 0);
+    will-change: height;
+  }
+  
+  [data-rsbs-overlay]:focus {
+    outline: none;
+  }
+  [data-rsbs-is-blocking="false"] [data-rsbs-overlay] {
+    box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),
+      0 -1px 0 rgba(38, 89, 115, 0.05);
+  }
+  [data-rsbs-overlay],
+  [data-rsbs-root]:after {
+    max-width: var(--rsbs-max-w);
+    margin-left: var(--rsbs-ml);
+    margin-right: var(--rsbs-mr);
+  }
+  [data-rsbs-overlay],
+  [data-rsbs-backdrop],
+  [data-rsbs-root]:after {
+    z-index: 3;
+    overscroll-behavior: none;
+    touch-action: none;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+  [data-rsbs-backdrop] {
+    top: -60px;
+    bottom: -60px;
+    background-color: var(--rsbs-backdrop-bg);
+    will-change: opacity;
+    cursor: pointer;
+    opacity: 1;
+  }
+  [data-rsbs-is-dismissable="false"] [data-rsbs-backdrop] {
+    cursor: ns-resize;
+  }
+  
+  [data-rsbs-root]:after {
+    content: "";
+    pointer-events: none;
+    background: var(--rsbs-bg);
+    height: 1px;
+    transform-origin: bottom;
+    transform: scale3d(1, var(--rsbs-antigap-scale-y), 1);
+    will-change: transform;
+  }
+  [data-rsbs-footer],
+  [data-rsbs-header] {
+    flex-shrink: 0;
+    cursor: ns-resize;
+   
+  }
+  [data-rsbs-header] {
+    text-align: center;
+    user-select: none;
+    box-shadow: 0 1px 0
+      rgba(46, 59, 66, calc(var(--rsbs-content-opacity) * 0.125));
+    z-index: 1;
+   /* padding-top: calc(20px + env(safe-area-inset-top));
+    padding-bottom: 16px; */
+  
+  }
+  [data-rsbs-header]:before {
+    /* position: absolute;
+    content: "";
+    display: block;
+    width: 36px;
+    height: 4px;
+    top: calc(8px + env(safe-area-inset-top));
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px; */
+    background-color: var(--handle-background); /*var(--rsbs-handle-bg); */
+  }
+  @media (min-resolution: 2dppx) {
+    [data-rsbs-header]:before {
+      transform: translateX(-50%) scaleY(0.75);
+    }
+  }
+  [data-rsbs-has-header="false"] [data-rsbs-header] {
+    box-shadow: none;
+    padding-top: calc(12px + env(safe-area-inset-top));
+  }
+  
+  [data-rsbs-scroll] {
+    flex-shrink: 1;
+    flex-grow: 1;
+    -webkit-tap-highlight-color: revert;
+    -webkit-touch-callout: revert;
+    -webkit-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  [data-rsbs-state="opening"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+
+  [data-rsbs-state="open"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+  [data-rsbs-state="dragging"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+  [data-rsbs-state="snapping"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+
+

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -7,14 +7,14 @@ import {useLayout} from '../../utils/useLayout';
 export const DefaultLayouts: layoutObjectType[] = [
   {
     name: 'grid',
-    label: 'Grid Layout',
-    iconName: 'gridLayoutIcon',
+    label: 'Grid',
+    iconName: 'grid',
     component: GridVideo,
   },
   {
     name: 'pinned',
-    label: 'Pinned Layout',
-    iconName: 'pinnedLayoutIcon',
+    label: 'Pinned',
+    iconName: 'pinned',
     component: PinnedVideo,
   },
 ];