agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -0,0 +1,215 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import React, {useCallback, useRef, useState} from 'react';
+import BottomSheet, {
+  BottomSheetModal,
+  BottomSheetModalProvider,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import KeyboardManager from 'react-native-keyboard-manager';
+
+import Chat from '../../components/Chat';
+import ParticipantView from '../../components/ParticipantsView';
+import SettingsView from '../../components/SettingsView';
+import ActionSheetContent from './ActionSheetContent';
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {useSidePanel} from '../../utils/useSidePanel';
+import {isIOS} from '../../utils/common';
+import ActionSheetHandle from './ActionSheetHandle';
+import Spacer from '../../atoms/Spacer';
+
+//topbar btn template is used to show icons without label text (as in desktop : bottomBar)
+
+const ActionSheet = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const {sidePanel, setSidePanel} = useSidePanel();
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const chatSheetRef = useRef<BottomSheetModal>(null);
+  const participantsSheetRef = useRef<BottomSheetModal>(null);
+  const settingsSheetRef = useRef<BottomSheetModal>(null);
+
+  // callbacks
+  const handleSheetChanges = useCallback((index: number) => {
+    bottomSheetRef.current?.snapToIndex(index);
+    index === 0 ? setIsExpanded(false) : setIsExpanded(true);
+  }, []);
+
+  React.useEffect(() => {
+    bottomSheetRef?.current.present();
+  }, []);
+
+  // updating on sidepanel changes
+  React.useEffect(() => {
+    switch (sidePanel) {
+      case SidePanelType.Participants: {
+        participantsSheetRef?.current.present();
+        break;
+      }
+      case SidePanelType.Chat: {
+        chatSheetRef?.current.present();
+        break;
+      }
+      case SidePanelType.Settings: {
+        settingsSheetRef?.current.present();
+        break;
+      }
+      case SidePanelType.None: {
+        chatSheetRef?.current.close();
+        participantsSheetRef?.current.close();
+        settingsSheetRef?.current.close();
+        handleSheetChanges(0);
+      }
+      default:
+        bottomSheetRef?.current.present();
+    }
+  }, [sidePanel]);
+
+  React.useEffect(() => {
+    if (isIOS()) {
+      KeyboardManager.setEnable(false);
+      return () => KeyboardManager.setEnable(true);
+    }
+  }, []);
+
+  function onDismiss() {
+    setSidePanel(SidePanelType.None);
+  }
+
+  return (
+    <BottomSheetModalProvider>
+      {isExpanded && (
+        <TouchableWithoutFeedback onPress={() => handleSheetChanges(0)}>
+          <View style={[styles.backDrop]} />
+        </TouchableWithoutFeedback>
+      )}
+      {/* Controls  Action Sheet*/}
+      <BottomSheetModal
+        snapPoints={[100, 350]}
+        ref={bottomSheetRef}
+        onChange={handleSheetChanges}
+        enablePanDownToClose={false}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        stackBehavior="push"
+        handleComponent={() => (
+          <>
+            <ActionSheetHandle sidePanel={SidePanelType.None} />
+            <Spacer size={12} />
+          </>
+        )}
+        handleIndicatorStyle={styles.handleIndicatorStyle}>
+        <BottomSheetView>
+          <ActionSheetContent
+            handleSheetChanges={handleSheetChanges}
+            isExpanded={isExpanded}
+          />
+        </BottomSheetView>
+      </BottomSheetModal>
+
+      {/* Chat Action Sheet */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        name="ChatSheet"
+        onDismiss={onDismiss}
+        ref={chatSheetRef}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Chat} />
+        )}
+        keyboardBehavior="extend"
+        stackBehavior="push">
+        <BottomSheetView>
+          <Chat showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
+
+      {/* Participants Action Sheet */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        ref={participantsSheetRef}
+        onDismiss={onDismiss}
+        name="ParticipantsSheet"
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Participants} />
+        )}
+        stackBehavior="push">
+        <BottomSheetView>
+          <ParticipantView showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
+
+      {/* Settings Action Sheet  */}
+      <BottomSheetModal
+        snapPoints={['100%']}
+        ref={settingsSheetRef}
+        name="SettingsSheet"
+        onDismiss={onDismiss}
+        style={styles.container}
+        backgroundStyle={styles.backgroundStyle}
+        handleIndicatorStyle={styles.handleIndicatorStyle}
+        enableContentPanningGesture={false}
+        handleComponent={() => (
+          <ActionSheetHandle sidePanel={SidePanelType.Settings} />
+        )}
+        stackBehavior="push">
+        <BottomSheetView>
+          <SettingsView showHeader={false} />
+        </BottomSheetView>
+      </BottomSheetModal>
+    </BottomSheetModalProvider>
+  );
+};
+
+export default ActionSheet;
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: 20,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    borderColor: '#EDF0F1',
+    flexWrap: 'wrap',
+  },
+
+  container: {
+    shadowColor: '#000000',
+    shadowOffset: {width: 0, height: -4},
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  backgroundStyle: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+  },
+
+  handleIndicatorStyle: {
+    // backgroundColor: $config.SEMANTIC_NEUTRAL,
+    // width: 40,
+    // height: 4,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    opacity: 0.5,
+  },
+});

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

@@ -0,0 +1,226 @@
+import {StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native';
+import React, {useRef, useCallback, useLayoutEffect, useEffect} from 'react';
+import {BottomSheet, BottomSheetRef} from 'react-spring-bottom-sheet';
+import './ActionSheetStyles.css';
+import ActionSheetContent from './ActionSheetContent';
+import {SpringEvent} from 'react-spring-bottom-sheet/dist/types';
+import Chat from '../../components/Chat';
+import ParticipantView from '../../components/ParticipantsView';
+import SettingsView from '../../components/SettingsView';
+
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {useSidePanel} from '../../utils/useSidePanel';
+import ToastComponent from '../../components/ToastComponent';
+import {isMobileUA} from '../../utils/common';
+import {useToast} from '../../components/useToast';
+import ActionSheetHandle from './ActionSheetHandle';
+import Spacer from '../../atoms/Spacer';
+
+const ActionSheet = () => {
+  const {setActionSheetVisible} = useToast();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isChatOpen, setIsChatOpen] = React.useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+  const [isParticipantsOpen, setIsParticipantsOpen] = React.useState(false);
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+  const chatSheetRef = useRef<BottomSheetRef>(null);
+  const participantsSheetRef = useRef<BottomSheetRef>(null);
+  const settingsSheetRef = useRef<BottomSheetRef>(null);
+  const ToastComponentRender =
+    isMobileUA() && (isChatOpen || isSettingsOpen || isParticipantsOpen) ? (
+      <ToastComponent />
+    ) : (
+      <></>
+    );
+  const {sidePanel, setSidePanel} = useSidePanel();
+  const [showOverlay, setShowOverlay] = React.useState(false);
+  const handleSheetChanges = useCallback((index: number) => {
+    bottomSheetRef.current?.snapTo(({snapPoints}) => snapPoints[index]);
+    index === 0 ? setIsExpanded(false) : setIsExpanded(true);
+  }, []);
+
+  const root = document.documentElement;
+
+  useEffect(() => {
+    root.style.setProperty('--sheet-background', $config.CARD_LAYER_1_COLOR);
+    root.style.setProperty('--handle-background', $config.SEMANTIC_NEUTRAL);
+  }, []);
+
+  useEffect(() => {
+    if (isChatOpen || isSettingsOpen || isParticipantsOpen) {
+      setActionSheetVisible(true);
+    } else {
+      setActionSheetVisible(false);
+    }
+  }, [isChatOpen, isSettingsOpen, isParticipantsOpen]);
+
+  // updating on sidepanel changes
+  useEffect(() => {
+    switch (sidePanel) {
+      case SidePanelType.Participants: {
+        setIsParticipantsOpen(true);
+        break;
+      }
+      case SidePanelType.Chat: {
+        setIsChatOpen(true);
+        break;
+      }
+      case SidePanelType.Settings: {
+        setIsSettingsOpen(true);
+        break;
+      }
+      case SidePanelType.None: {
+        setIsChatOpen(false);
+        setIsParticipantsOpen(false);
+        setIsSettingsOpen(false);
+        handleSheetChanges(0);
+      }
+      default:
+    }
+  }, [sidePanel]);
+
+  function onDismiss() {
+    setSidePanel(SidePanelType.None);
+  }
+
+  const handleSpringStart = (event: SpringEvent) => {
+    if (event.type == 'SNAP') {
+      setShowOverlay(true); // as soon drag start show overlay
+    }
+  };
+  const handleSpringEnd = (event: SpringEvent) => {
+    if (event.type == 'SNAP') {
+      const isMinmized = bottomSheetRef.current.height === 100;
+      isMinmized && setShowOverlay(false);
+      if (event.source === 'dragging') {
+        if (isMinmized) {
+          setIsExpanded(false);
+        } else {
+          setIsExpanded(true);
+        }
+      }
+    }
+  };
+
+  const updateActionSheet = (
+    screenName: 'chat' | 'participants' | 'settings',
+  ) => {
+    switch (screenName) {
+      case 'chat':
+        setIsChatOpen(true);
+        break;
+      case 'participants':
+        setIsParticipantsOpen(true);
+        break;
+      case 'settings':
+        console.warn('settings selected');
+        setIsSettingsOpen(true);
+        break;
+      default:
+    }
+  };
+  return (
+    <>
+      {showOverlay && (
+        <TouchableWithoutFeedback
+          onPress={() => {
+            handleSheetChanges(0);
+          }}>
+          <View style={[styles.backDrop]} />
+        </TouchableWithoutFeedback>
+      )}
+      <View>
+        {/* Controls Action Sheet */}
+
+        <BottomSheet
+          scrollLocking={false}
+          ref={bottomSheetRef}
+          open={true}
+          onSpringStart={handleSpringStart}
+          onSpringEnd={handleSpringEnd}
+          // skipInitialTransition={true}
+          expandOnContentDrag={true}
+          snapPoints={({maxHeight}) => [100, 350]}
+          defaultSnap={({lastSnap, snapPoints}) =>
+            lastSnap ?? Math.min(...snapPoints)
+          }
+          header={
+            <>
+              <ActionSheetHandle sidePanel={SidePanelType.None} />
+              <Spacer size={12} />
+            </>
+          }
+          blocking={false}>
+          <ActionSheetContent
+            handleSheetChanges={handleSheetChanges}
+            isExpanded={isExpanded}
+          />
+        </BottomSheet>
+        {/* Chat  Action Sheet */}
+        <BottomSheet
+          sibling={ToastComponentRender}
+          ref={chatSheetRef}
+          onDismiss={onDismiss}
+          scrollLocking={false}
+          open={isChatOpen}
+          blocking={false}
+          expandOnContentDrag={false}
+          snapPoints={({maxHeight}) => [1 * maxHeight]}
+          header={<ActionSheetHandle sidePanel={SidePanelType.Chat} />}
+          defaultSnap={({lastSnap, snapPoints}) => snapPoints[0]}>
+          <Chat showHeader={false} />
+        </BottomSheet>
+        {/* Participants Action Sheet */}
+        <BottomSheet
+          sibling={ToastComponentRender}
+          ref={participantsSheetRef}
+          onDismiss={onDismiss}
+          open={isParticipantsOpen}
+          expandOnContentDrag={false}
+          snapPoints={({maxHeight}) => [1 * maxHeight]}
+          defaultSnap={({lastSnap, snapPoints}) => snapPoints[0]}
+          scrollLocking={false}
+          header={<ActionSheetHandle sidePanel={SidePanelType.Participants} />}
+          blocking={false}>
+          <ParticipantView showHeader={false} />
+        </BottomSheet>
+        {/* Settings  Action Sheet */}
+        <BottomSheet
+          sibling={ToastComponentRender}
+          ref={settingsSheetRef}
+          onDismiss={onDismiss}
+          open={isSettingsOpen}
+          expandOnContentDrag={false}
+          snapPoints={({maxHeight}) => [1 * maxHeight]}
+          defaultSnap={({lastSnap, snapPoints}) => snapPoints[0]}
+          header={<ActionSheetHandle sidePanel={SidePanelType.Settings} />}
+          blocking={false}>
+          <SettingsView showHeader={false} />
+        </BottomSheet>
+      </View>
+    </>
+  );
+};
+
+export default ActionSheet;
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderColor: 'red',
+  },
+  content: {
+    borderWidth: 1,
+    borderColor: 'yellow',
+    flex: 1,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    opacity: 0.5,
+  },
+});