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

package/template/src/atoms/ActionMenu.tsx

@@ -0,0 +1,326 @@
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  ModalProps,
+  TouchableWithoutFeedback,
+  View,
+  Image,
+  TouchableOpacity,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native';
+import React, {SetStateAction, useState} from 'react';
+
+import ImageIcon from '../atoms/ImageIcon';
+import {IconsInterface} from '../atoms/CustomIcon';
+import ThemeConfig from '../theme';
+import {isWebInternal} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import Toggle from './Toggle';
+import {ToolbarItemHide} from './ToolbarPreset';
+
+export interface ActionMenuItem {
+  component?: React.ComponentType;
+  componentName?: string;
+  order?: number;
+  isExternalIcon?: boolean;
+  externalIconString?: string;
+  isBase64Icon?: boolean;
+  icon: keyof IconsInterface;
+  onHoverIcon?: keyof IconsInterface;
+  iconColor: string;
+  textColor: string;
+  title: string;
+  label?: string;
+  toggleStatus?: boolean;
+  onPress: () => void;
+  onHoverCallback?: (isHovered: boolean) => void;
+  onHoverContent?: JSX.Element;
+  disabled?: boolean;
+  iconSize?: number;
+  hide?: ToolbarItemHide;
+}
+export interface ActionMenuProps {
+  from: string;
+  actionMenuVisible: boolean;
+  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
+  modalPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  items: ActionMenuItem[];
+  hoverMode?: boolean;
+  onHover?: (hover: boolean) => void;
+  containerStyle?: ViewStyle;
+}
+
+const ActionMenu = (props: ActionMenuProps) => {
+  const {
+    actionMenuVisible,
+    setActionMenuVisible,
+    modalPosition,
+    items,
+    hoverMode = false,
+  } = props;
+  const {width, height} = useWindowDimensions();
+
+  const renderItems = () => {
+    return items?.map((item, index) => {
+      const {hide = false} = item;
+      if (typeof hide === 'boolean' && hide) {
+        return null;
+      }
+
+      try {
+        if (typeof hide === 'function' && hide && hide(width, height)) {
+          return null;
+        }
+      } catch (error) {}
+
+      const {
+        title,
+        label = null,
+        component: CustomActionItem = null,
+        icon = '',
+        onHoverIcon,
+        isBase64Icon = false,
+        isExternalIcon = false,
+        externalIconString = '',
+        toggleStatus,
+        onPress = () => {},
+        iconColor,
+        textColor,
+        disabled = false,
+        onHoverCallback = undefined,
+        onHoverContent = undefined,
+        iconSize = 20,
+      } = item;
+      return (
+        <PlatformWrapper key={props.from + '_' + title + index}>
+          {(isHovered: boolean) => (
+            <>
+              {/* {onHoverCallback && onHoverCallback(isHovered)} */}
+              {isHovered ? onHoverContent ? onHoverContent : <></> : <></>}
+              {CustomActionItem ? (
+                <TouchableOpacity
+                  disabled={disabled}
+                  onPress={onPress}
+                  style={[
+                    styles.row,
+                    isHovered && !disabled
+                      ? //first item should have border-radius on top left and top right
+                        index === 0
+                        ? styles.rowHoveredFirstChild
+                        : //last item should have border-radius on bottom left and top right
+                        items?.length - 1 === index
+                        ? styles.rowHoveredLastChild
+                        : //middle items don't need any border-radius
+                          styles.rowHoveredMiddleItems
+                      : {},
+                    disabled ? {opacity: 0.4} : {},
+                    items?.length - 1 === index
+                      ? {borderBottomColor: 'transparent'}
+                      : {},
+                  ]}>
+                  <CustomActionItem />
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  disabled={disabled}
+                  style={[
+                    styles.row,
+                    isHovered && !disabled
+                      ? //first item should have border-radius on top left and top right
+                        index === 0
+                        ? styles.rowHoveredFirstChild
+                        : //last item should have border-radius on bottom left and top right
+                        items?.length - 1 === index
+                        ? styles.rowHoveredLastChild
+                        : //middle items don't need any border-radius
+                          styles.rowHoveredMiddleItems
+                      : {},
+                    disabled ? {opacity: 0.4} : {},
+                    items?.length - 1 === index
+                      ? {borderBottomColor: 'transparent'}
+                      : {},
+                  ]}
+                  onPress={onPress}
+                  key={icon + index}>
+                  <View style={styles.iconContainer}>
+                    {isExternalIcon ? (
+                      <ImageIcon
+                        base64={isBase64Icon}
+                        base64TintColor={iconColor}
+                        iconType="plain"
+                        iconSize={iconSize}
+                        icon={externalIconString}
+                        tintColor={iconColor}
+                      />
+                    ) : (
+                      <ImageIcon
+                        base64={isBase64Icon}
+                        base64TintColor={iconColor}
+                        iconType="plain"
+                        iconSize={iconSize}
+                        name={
+                          isHovered && onHoverIcon && !disabled
+                            ? onHoverIcon
+                            : icon
+                        }
+                        tintColor={iconColor}
+                      />
+                    )}
+                  </View>
+                  <Text
+                    style={[styles.text, textColor ? {color: textColor} : {}]}>
+                    {label || title}
+                  </Text>
+                  {toggleStatus !== undefined && toggleStatus !== null ? (
+                    <View style={styles.toggleContainer}>
+                      <Toggle
+                        disabled={disabled}
+                        isEnabled={toggleStatus}
+                        toggleSwitch={onPress}
+                      />
+                    </View>
+                  ) : (
+                    <></>
+                  )}
+                </TouchableOpacity>
+              )}
+            </>
+          )}
+        </PlatformWrapper>
+      );
+    });
+  };
+
+  return (
+    <View>
+      {hoverMode ? (
+        actionMenuVisible && (
+          <View
+            style={[styles.modalView, props?.containerStyle, modalPosition]}>
+            <div
+              onMouseEnter={() => props?.onHover && props.onHover(true)}
+              onMouseLeave={() => props?.onHover && props.onHover(false)}>
+              {renderItems()}
+            </div>
+          </View>
+        )
+      ) : (
+        <Modal
+          testID="action-menu"
+          animationType="none"
+          transparent={true}
+          visible={actionMenuVisible}>
+          <TouchableWithoutFeedback
+            onPress={() => {
+              setActionMenuVisible(false);
+            }}>
+            <View style={styles.backDrop} />
+          </TouchableWithoutFeedback>
+          <View
+            style={[styles.modalView, props?.containerStyle, modalPosition]}>
+            {renderItems()}
+          </View>
+        </Modal>
+      )}
+    </View>
+  );
+};
+
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+
+export default ActionMenu;
+
+const styles = StyleSheet.create({
+  modalView: {
+    //don't added overflow: hidden, bottombar minimized version layout popup will be shown in the overflow
+    position: 'absolute',
+    // width: 230,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+    minWidth: 180,
+  },
+  rowHoveredMiddleItems: {
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
+  },
+  rowHoveredFirstChild: {
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+  },
+  rowHoveredLastChild: {
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+  row: {
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+    flexDirection: 'row',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    marginVertical: 12,
+    marginLeft: 12,
+  },
+  toggleContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+    marginLeft: 'auto',
+  },
+  text: {
+    paddingVertical: 14,
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '400',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginRight: 8,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/template/src/atoms/AnimatedActiveSpeaker.native.tsx

@@ -0,0 +1,71 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import Animated, {
+  interpolate,
+  withDelay,
+  withTiming,
+  withRepeat,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+interface AnimatedActiveSpeakerProps {
+  isSpeaking: boolean;
+}
+
+const Line = ({delay, styleProp, isSpeaking}) => {
+  const bar = useSharedValue(0);
+  const style = useAnimatedStyle(() => {
+    return {
+      height: interpolate(bar.value, [0, 1], [6, 12]),
+      //   transform: [
+      //     {
+      //       scale: interpolate(bar.value, [0, 1], [0.7, 1.2]),
+
+      //     },
+      //   ],
+    };
+  });
+  React.useEffect(() => {
+    bar.value = withDelay(
+      delay,
+      withRepeat(withTiming(1, {duration: 1200}), -1),
+    );
+  }, []);
+  return (
+    <Animated.View style={[styles.line, styleProp, isSpeaking && style]} />
+  );
+};
+
+const AnimatedActiveSpeaker = ({isSpeaking}: AnimatedActiveSpeakerProps) => {
+  return (
+    <View style={styles.container}>
+      <Line
+        delay={0}
+        styleProp={{height: 6, marginRight: 2.5}}
+        isSpeaking={isSpeaking}
+      />
+      <Line
+        delay={400}
+        styleProp={{height: 12, marginRight: 2.5}}
+        isSpeaking={isSpeaking}
+      />
+      <Line delay={800} styleProp={{height: 6}} isSpeaking={isSpeaking} />
+    </View>
+  );
+};
+
+export default AnimatedActiveSpeaker;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  line: {
+    width: 2.5,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRadius: 25,
+  },
+});

package/template/src/atoms/AnimatedActiveSpeaker.tsx

@@ -0,0 +1,84 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+
+interface AnimatedActiveSpeakerProps {
+  isSpeaking: boolean;
+}
+const AnimatedActiveSpeaker = ({isSpeaking}: AnimatedActiveSpeakerProps) => {
+  const css = `
+    .container-sk {
+    flex: 1;
+    display:flex;
+    flex-direction: row;
+    align-items: center
+    }
+    .line {
+        width: 2.5px;
+        background-color: ${$config.PRIMARY_ACTION_BRAND_COLOR};
+        border-radius: 25px;
+        height:6px;
+        animation: wave 1s ease-in-out  infinite normal;
+        animation-play-state: ${isSpeaking ? 'running' : 'paused'}
+
+    }
+    @keyframes wave{
+
+        0%{
+         
+            height:6px
+        }
+      
+        50%{
+         
+            height:12px
+        }
+      
+        100%{
+    
+            height:6px
+        }
+      
+      }
+      .line:nth-child(2){
+        animation-delay: .2s;
+      }
+      
+      .line:nth-child(3){
+        animation-delay: .5s;
+      }
+    #line1 {
+        margin-right:2.5px
+    }
+    #line2 {
+        margin-right:2.5px;
+        height:12px
+    }
+
+    `;
+  return (
+    <>
+      <style type="text/css">{css}</style>
+      <div className="container-sk">
+        <div className="line" id="line1" />
+        <div className="line" id="line2" />
+        <div className="line" id="line3" />
+      </div>
+    </>
+  );
+};
+
+export default AnimatedActiveSpeaker;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  line: {
+    width: 2.5,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRadius: 25,
+  },
+});

package/template/src/atoms/AnimatedRings.native.tsx

@@ -0,0 +1,68 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import Animated, {
+  interpolate,
+  withDelay,
+  withTiming,
+  withRepeat,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+const Ring = ({delay}) => {
+  const ring = useSharedValue(0);
+  const style = useAnimatedStyle(() => {
+    return {
+      opacity: 0.8 - ring.value,
+      transform: [
+        {
+          scale: interpolate(ring.value, [0, 1], [0, 4]),
+        },
+      ],
+    };
+  });
+  React.useEffect(() => {
+    ring.value = withDelay(
+      delay,
+      withRepeat(withTiming(1, {duration: 4000}), -1),
+    );
+  }, []);
+
+  return <Animated.View style={[styles.ring, style]} />;
+};
+
+const AnimatedRings = ({isActiveSpeaker, children, isMobileView}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      {isActiveSpeaker ? (
+        <>
+          <Ring delay={0} />
+          <Ring delay={1000} />
+          <Ring delay={2000} />
+          <Ring delay={3000} />
+        </>
+      ) : (
+        <></>
+      )}
+      {children}
+    </View>
+  );
+};
+
+export default AnimatedRings;
+
+const styles = StyleSheet.create({
+  ring: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    borderWidth: 3,
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    position: 'absolute',
+  },
+});

package/template/src/atoms/AnimatedRings.tsx

@@ -0,0 +1,70 @@
+import {StyleSheet, Text, View} from 'react-native';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import React from 'react';
+
+const Ring = ({isMobileView}) => {
+  const css = `.ring {
+    width: ${isMobileView ? '60px' : '100px'};
+    height: ${isMobileView ? '60px' : '100px'};
+    border-radius: 50%;
+    position: absolute;
+    background-color: transparent;
+    border: 3px ${$config.PRIMARY_ACTION_BRAND_COLOR} solid;
+    -webkit-animation-name: ani; 
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-direction: normal;
+   
+}
+
+@-webkit-keyframes ani {
+    0% {-webkit-transform: scale(0.5); opacity: 0} 
+    1% {-webkit-transform: scale(0.5); opacity: 1} 
+    95% {-webkit-transform: scale(1.5); opacity: .5;}
+    100% {-webkit-transform: scale(1.5); opacity: 0;}
+}
+#r2 { -webkit-animation-delay: -1s;}
+#r3 { -webkit-animation-delay: -2s;}
+`;
+  return (
+    <div>
+      <style type="text/css">{css}</style>
+      <div id="r1" className="ring"></div>
+      <div id="r2" className="ring"></div>
+      <div id="r3" className="ring"></div>
+    </div>
+  );
+};
+
+const AnimatedRings = ({isActiveSpeaker, children, isMobileView}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignSelf: 'center',
+        justifyContent: 'center',
+      }}>
+      {isActiveSpeaker ? (
+        <View style={{position: 'relative', left: -2, top: -2}}>
+          <Ring isMobileView={isMobileView} />
+        </View>
+      ) : (
+        <></>
+      )}
+      {children}
+    </View>
+  );
+};
+
+export default AnimatedRings;
+
+const styles = StyleSheet.create({
+  container: {
+    width: 140,
+    height: 140,
+    borderRadius: 80,
+    alignSelf: 'center',
+    justifyContent: 'center',
+  },
+});

package/template/src/atoms/Avatar.tsx

@@ -0,0 +1,51 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+import {isWeb} from '../utils/common';
+
+const Avatar = ({name, containerStyle, textStyle}) => {
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          alignSelf: 'center',
+          alignContent: 'center',
+          justifyContent: 'center',
+        },
+      ]}>
+      <PlatformWrapper>
+        <Text
+          style={[
+            textStyle,
+            {
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              alignSelf: 'center',
+              textAlign: 'center',
+            },
+          ]}>
+          {name}
+        </Text>
+      </PlatformWrapper>
+    </View>
+  );
+};
+
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default Avatar;