agora-appbuilder-core 3.0.10 → 3.0.12

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

@@ -1,479 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,138 +0,0 @@
-
-  :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%;
-  }
-
-