agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/components/Controls.tsx

@@ -9,8 +9,8 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect, useRef} from 'react';
-import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+import React, {useState, useContext} from 'react';
+import {View, Dimensions, StyleSheet} from 'react-native';
 import {PropsContext} from '../../agora-rn-uikit';
 import LocalAudioMute, {
   LocalAudioMuteProps,
@@ -25,365 +25,83 @@ import LocalSwitchCamera, {
 import ScreenshareButton, {
   ScreenshareButtonProps,
 } from '../subComponents/screenshare/ScreenshareButton';
+import {controlsHolder} from '../../theme.json';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {ClientRole} from '../../agora-rn-uikit';
 import LiveStreamControls, {
   LiveStreamControlsProps,
 } from './livestream/views/LiveStreamControls';
-import {
-  BREAKPOINTS,
-  calculatePosition,
-  isWebInternal,
-  useIsDesktop,
-} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
-import Spacer from '../atoms/Spacer';
-import LayoutIconButton from '../subComponents/LayoutIconButton';
-import CopyJoinInfo from '../subComponents/CopyJoinInfo';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import IconButton from '../atoms/IconButton';
-import ActionMenu, {ActionMenuItem} from '../atoms/ActionMenu';
-import useLayoutsData from '../pages/video-call/useLayoutsData';
-import {
-  SidePanelType,
-  useChatUIControl,
-  useLayout,
-  useRecording,
-  useSidePanel,
-} from 'customization-api';
-import {useVideoCall} from './useVideoCall';
-import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
-import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
 
-const MoreButton = () => {
-  const {rtcProps} = useContext(PropsContext);
-  const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isHoveredOnModal, setIsHoveredOnModal] = useState(false);
-  const moreBtnRef = useRef(null);
-  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const layouts = useLayoutsData();
-  const {currentLayout, setLayout} = useLayout();
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
-  const {setSidePanel, sidePanel} = useSidePanel();
-  const {
-    data: {isHost},
-  } = useMeetingInfo();
-  const {
-    showLayoutOption,
-    setShowInvitePopup,
-    setShowStopRecordingPopup,
-    setShowLayoutOption,
-  } = useVideoCall();
-  const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
-    useScreenshare();
-  const {isRecordingActive, startRecording, inProgress} = useRecording();
-  const {setGroupActive} = useChatUIControl();
-  const actionMenuitems: ActionMenuItem[] = [];
-
-  if (globalWidth <= BREAKPOINTS.sm) {
-    actionMenuitems.push({
-      icon: 'participants',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: 'People',
-      callback: () => {
-        setActionMenuVisible(false);
-        setSidePanel(SidePanelType.Participants);
-      },
-    });
-    actionMenuitems.push({
-      icon: 'chat-nav',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: 'Chat',
-      callback: () => {
-        setActionMenuVisible(false);
-        setGroupActive(true);
-        setSidePanel(SidePanelType.Chat);
-      },
-    });
-
-    if ($config.SCREEN_SHARING) {
-      if (
-        !(
-          rtcProps.role == ClientRole.Audience &&
-          $config.EVENT_MODE &&
-          !$config.RAISE_HAND
-        )
-      ) {
-        actionMenuitems.push({
-          disabled:
-            rtcProps.role == ClientRole.Audience &&
-            $config.EVENT_MODE &&
-            $config.RAISE_HAND &&
-            !isHost,
-          icon: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
-          iconColor: isScreenshareActive
-            ? $config.SEMANTIC_ERROR
-            : $config.SECONDARY_ACTION_COLOR,
-          textColor: isScreenshareActive
-            ? $config.SEMANTIC_ERROR
-            : $config.FONT_COLOR,
-          title: isScreenshareActive ? 'Stop Share' : 'Share',
-          callback: () => {
-            setActionMenuVisible(false);
-            isScreenshareActive
-              ? stopUserScreenShare()
-              : startUserScreenshare();
-          },
-        });
-      }
-    }
-    if (isHost && $config.CLOUD_RECORDING) {
-      actionMenuitems.push({
-        disabled: inProgress,
-        icon: isRecordingActive ? 'stop-recording' : 'recording',
-        iconColor: isRecordingActive
-          ? $config.SEMANTIC_ERROR
-          : $config.SECONDARY_ACTION_COLOR,
-        textColor: isRecordingActive
-          ? $config.SEMANTIC_ERROR
-          : $config.FONT_COLOR,
-        title: isRecordingActive ? 'Stop Recording' : 'Record',
-        callback: () => {
-          setActionMenuVisible(false);
-          if (!isRecordingActive) {
-            startRecording();
-          } else {
-            setShowStopRecordingPopup(true);
-          }
-        },
-      });
-    }
-  }
-
-  if (globalWidth <= BREAKPOINTS.md) {
-    actionMenuitems.push({
-      icon: layouts[layout]?.iconName,
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: 'Layout',
-      callback: () => {
-        //setShowLayoutOption(true);
-      },
-      onHoverCallback: (isHovered) => {
-        setShowLayoutOption(isHovered);
-      },
-      onHoverContent: (
-        <LayoutIconDropdown
-          onHoverPlaceHolder="vertical"
-          setShowDropdown={() => {}}
-          showDropdown={true}
-          modalPosition={
-            globalWidth <= BREAKPOINTS.sm
-              ? {bottom: 65, left: -150}
-              : {bottom: 20, left: -150}
-          }
-          caretPosition={{bottom: 45, right: -10}}
-        />
-      ),
-    });
-    actionMenuitems.push({
-      icon: 'share',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: 'Invite',
-      callback: () => {
-        setActionMenuVisible(false);
-        setShowInvitePopup(true);
-      },
-    });
-  }
-
-  if (globalWidth <= BREAKPOINTS.sm) {
-    actionMenuitems.push({
-      icon: 'settings',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: 'Settings',
-      callback: () => {
-        setActionMenuVisible(false);
-        setSidePanel(SidePanelType.Settings);
-      },
-    });
-  }
-
-  useEffect(() => {
-    if (isHovered) {
-      setActionMenuVisible(true);
-    }
-  }, [isHovered]);
-
-  useEffect(() => {
-    //hide action menu when user change layout
-    setActionMenuVisible(false);
-  }, [currentLayout]);
-
-  return (
-    <>
-      <ActionMenu
-        containerStyle={{width: 180}}
-        hoverMode={true}
-        onHover={(isVisible) => setIsHoveredOnModal(isVisible)}
-        from={'control-bar'}
-        actionMenuVisible={(isHovered || isHoveredOnModal) && actionMenuVisible}
-        setActionMenuVisible={setActionMenuVisible}
-        modalPosition={{
-          bottom: 8,
-          left: 0,
-        }}
-        items={actionMenuitems}
-      />
-      <div
-        onMouseEnter={() => {
-          setIsHovered(true);
-        }}
-        onMouseLeave={() => {
-          setIsHovered(false);
-        }}>
-        {/** placeholder to hovering */}
-        <View
-          style={{
-            position: 'absolute',
-            top: -20,
-            zIndex: -1,
-            height: '50%',
-            width: '100%',
-            backgroundColor: 'transparent',
-          }}
-        />
-        <IconButton
-          setRef={(ref) => {
-            moreBtnRef.current = ref;
-          }}
-          onPress={() => {
-            //setActionMenuVisible(true);
-          }}
-          iconProps={{
-            name: 'more-menu',
-            tintColor: $config.SECONDARY_ACTION_COLOR,
-          }}
-          btnTextProps={{
-            text: $config.ICON_TEXT ? 'More' : '',
-            textColor: $config.FONT_COLOR,
-          }}
-        />
-      </div>
-    </>
-  );
-};
 const Controls = () => {
   const {rtcProps} = useContext(PropsContext);
-  const isDesktop = useIsDesktop();
+
+  let onLayout = (e: any) => {
+    setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
+  };
+  const [dim, setDim] = useState([
+    Dimensions.get('window').width,
+    Dimensions.get('window').height,
+    Dimensions.get('window').width > Dimensions.get('window').height,
+  ]);
+  const isDesktop = dim[0] > 1224;
   const {
     data: {isHost},
   } = useMeetingInfo();
-  const {width} = useWindowDimensions();
-
   return (
     <View
-      testID="videocall-controls"
       style={[
-        style.container,
+        style.controlsHolder,
         {
-          paddingHorizontal: isDesktop('toolbar') ? 32 : 16,
+          paddingHorizontal: isDesktop ? '25%' : '1%',
+          backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
         },
-      ]}>
-      {width >= BREAKPOINTS.md && (
-        <View style={style.leftContent}>
-          <View
-            testID="layout-btn"
-            style={{marginRight: 10}}
-            collapsable={false}>
-            {/**
-             * .measure returns undefined on Android unless collapsable=false or onLayout are specified
-             * so added collapsable property
-             * https://github.com/facebook/react-native/issues/29712
-             * */}
-            <LayoutIconButton />
-          </View>
-          <View testID="invite-btn" style={{marginHorizontal: 10}}>
-            <CopyJoinInfo />
-          </View>
-        </View>
-      )}
-      <View style={style.centerContent}>
-        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-          <LiveStreamControls
-            showControls={true}
-            isDesktop={isDesktop('toolbar')}
-          />
-        ) : (
-          <></>
-        )}
+      ]}
+      onLayout={onLayout}>
+      {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+        <LiveStreamControls showControls={true} />
+      ) : (
         <>
           {/**
            * In event mode when raise hand feature is active
            * and audience is promoted to host, the audience can also
            * demote himself
            */}
-          {$config.EVENT_MODE ? (
+          {$config.EVENT_MODE && (
             <LiveStreamControls
-              isDesktop={isDesktop('toolbar')}
               showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
             />
-          ) : (
-            <></>
           )}
-          <View testID="localAudio-btn" style={{marginHorizontal: 10}}>
-            <LocalAudioMute showToolTip={true} />
+          <View style={{alignSelf: 'center'}}>
+            <LocalAudioMute />
           </View>
           {!$config.AUDIO_ROOM && (
-            <View
-              testID="localVideo-btn"
-              style={{
-                marginHorizontal: 10,
-              }}>
-              <LocalVideoMute showToolTip={true} />
+            <View style={{alignSelf: 'center'}}>
+              <LocalVideoMute />
             </View>
           )}
           {!$config.AUDIO_ROOM && isMobileOrTablet() && (
-            <View
-              testID="switchCamera-btn"
-              style={{
-                marginHorizontal: 10,
-              }}>
+            <View style={{alignSelf: 'center'}}>
               <LocalSwitchCamera />
             </View>
           )}
-          {width > BREAKPOINTS.sm &&
-            $config.SCREEN_SHARING &&
-            !isMobileOrTablet() && (
-              <View
-                testID="screenShare-btn"
-                style={{
-                  marginHorizontal: 10,
-                }}>
-                <ScreenshareButton />
-              </View>
-            )}
-          {width > BREAKPOINTS.sm && isHost && $config.CLOUD_RECORDING && (
-            <View
-              testID="recording-btn"
-              style={{
-                marginHorizontal: 10,
-              }}>
+          {$config.SCREEN_SHARING && !isMobileOrTablet() && (
+            <View style={{alignSelf: 'center'}}>
+              <ScreenshareButton />
+            </View>
+          )}
+          {isHost && $config.CLOUD_RECORDING && (
+            <View style={{alignSelf: 'center'}}>
               <Recording />
             </View>
           )}
         </>
-        {width < BREAKPOINTS.md && (
-          <View testID="more-btn" style={{marginHorizontal: 10}}>
-            <MoreButton />
-          </View>
-        )}
-        <View testID="endCall-btn" style={{marginHorizontal: 10}}>
-          <LocalEndcall />
-        </View>
+      )}
+      <View style={{alignSelf: 'center'}}>
+        <LocalEndcall />
       </View>
-      {width >= BREAKPOINTS.md && <View style={style.rightContent}></View>}
     </View>
   );
 };
@@ -409,28 +127,10 @@ export const ControlsComponentsArray: ControlsComponentsArrayProps = [
 ];
 
 const style = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingTop: 10,
-    paddingBottom: 16,
-    backgroundColor: $config.TOOLBAR_COLOR,
-  },
-  leftContent: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  centerContent: {
-    zIndex: 2,
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  rightContent: {
-    flex: 1,
+  // @ts-ignore
+  controlsHolder: {
+    flex: isWebInternal() ? 1.3 : 1.6,
+    ...controlsHolder,
   },
 });