agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -1,40 +1,58 @@
 import React, {useState, useRef, useContext, useEffect} from 'react';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {
-  View,
-  StyleSheet,
-  Platform,
-  TouchableOpacity,
-  useWindowDimensions,
-} from 'react-native';
-import {PropsContext, RenderInterface, UidType} from '../../../agora-rn-uikit';
+  PropsContext,
+  DispatchContext,
+  ContentInterface,
+} from '../../../agora-rn-uikit';
 import ScreenShareNotice from '../../subComponents/ScreenShareNotice';
 import {MaxVideoView} from '../../../agora-rn-uikit';
 import FallbackLogo from '../../subComponents/FallbackLogo';
 import NetworkQualityPill from '../../subComponents/NetworkQualityPill';
 import NameWithMicIcon from './NameWithMicIcon';
-import useIsActiveSpeaker from '../../utils/useIsActiveSpeaker';
-import {useLayout, useRender, useRtc} from 'customization-api';
-import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
+import {useLayout, useContent, useRtc, customEvents} from 'customization-api';
+import {
+  DefaultLayouts,
+  getGridLayoutName,
+  getPinnedLayoutName,
+} from './DefaultLayouts';
 import IconButton from '../../atoms/IconButton';
 import UserActionMenuOptionsOptions from '../../components/participants/UserActionMenuOptions';
 import {isMobileUA, isWebInternal} from '../../utils/common';
 import ThemeConfig from '../../theme';
+import {createHook} from 'customization-implementation';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import ZoomableWrapper from './ZoomableWrapper';
 import {isAndroid} from '../../utils/common';
 import {isIOS} from '../../utils/common';
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import useActiveSpeaker from '../../utils/useActiveSpeaker';
+import {useVideoCall} from '../../components/useVideoCall';
+import VisibilitySensor from './VisibilitySensor';
+import ImageIcon from '../../atoms/ImageIcon';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import {useString} from '../../utils/useString';
+import {
+  moreBtnViewInLarge,
+  moreBtnViewWhiteboard,
+} from '../../language/default-labels/videoCallScreenLabels';
 interface VideoRendererProps {
-  user: RenderInterface;
+  user: ContentInterface;
   isMax?: boolean;
+  CustomChild?: React.ComponentType;
 }
-const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
-  const {dispatch, RtcEngine} = useRtc();
+const VideoRenderer: React.FC<VideoRendererProps> = ({
+  user,
+  isMax = false,
+  CustomChild,
+}) => {
   const {height, width} = useWindowDimensions();
-  const isActiveSpeaker = useIsActiveSpeaker();
-  const {pinnedUid, activeUids} = useRender();
-  const activeSpeaker = isActiveSpeaker(user.uid);
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useRtc();
+  const {pinnedUid, secondaryPinnedUid} = useContent();
+  const activeSpeaker = useActiveSpeaker();
+  const isActiveSpeaker = activeSpeaker === user.uid;
   const [isHovered, setIsHovered] = useState(false);
   const {rtcProps} = useContext(PropsContext);
   const {currentLayout} = useLayout();
@@ -49,6 +67,13 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
   const [avatarSize, setAvatarSize] = useState(100);
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
+  const {setVideoTileInViewPortState} = useVideoCall();
+  const {
+    getWhiteboardUid = () => 0,
+    isWhiteboardOnFullScreen,
+    setWhiteboardOnFullScreen,
+    whiteboardActive,
+  } = useWhiteboard();
   const [landscapeMode, setLandscapeMode] = useState(
     isAndroid() || isIOS() ? true : false,
   );
@@ -70,24 +95,24 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
     //if screenshare is on fullscreen then get the width/height to set landscape mode
     if (isScreenShareOnFullView) {
       if (isAndroid() || isIOS()) {
-        const cb = (args) => {
+        const cb = (connection, stats) => {
           if (
-            args?.uid == user.uid &&
-            args?.width &&
-            args?.height &&
-            args.height > args.width
+            stats?.uid == user.uid &&
+            stats?.width &&
+            stats?.height &&
+            stats.height > stats.width
           ) {
             landscapeModeRef.current.landscapeMode && setLandscapeMode(false);
           }
         };
-        const subscription = RtcEngine.addListener('RemoteVideoStats', cb);
+        RtcEngineUnsafe.addListener('onRemoteVideoStats', cb);
         setTimeout(() => {
-          subscription.remove();
+          RtcEngineUnsafe.removeAllListeners('onRemoteVideoStats');
         }, 5000);
       } else {
         if (screenShareData && screenShareData?.[user.uid] && isMobileUA()) {
           //@ts-ignore
-          const data = RtcEngine.getRemoteVideoStats(user.uid);
+          const data = RtcEngineUnsafe.getRemoteVideoStats(user.uid);
           if (
             data &&
             data?.receiveResolutionHeight &&
@@ -102,14 +127,24 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
   }, [screenShareData, isScreenShareOnFullView]);
 
   const isNativeScreenShareActive =
-    (isAndroid() || isIOS()) && isScreenshareActive;
-  const enableExpandButton = isNativeScreenShareActive ? false : true;
+    (isAndroid() || isIOS() || isMobileUA()) && user?.type === 'screenshare';
+
+  const isNativeWhiteboardActive =
+    (isAndroid() || isIOS() || isMobileUA()) && whiteboardActive;
+
+  const enableExpandButton =
+    isNativeScreenShareActive || isNativeWhiteboardActive ? true : false;
+
+  const {enablePinForMe} = useVideoCall();
+
+  const viewinlargeLabel = useString(moreBtnViewInLarge)();
+  const viewwhiteboardlabel = useString(moreBtnViewWhiteboard)();
 
   return (
     <>
       <UserActionMenuOptionsOptions
         actionMenuVisible={actionMenuVisible}
-        setActionMenuVisible={(flag) => {
+        setActionMenuVisible={flag => {
           //once user clicks action menu item -> hide the action menu and set parent isHovered false
           if (!flag) {
             setIsHovered(false);
@@ -132,7 +167,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           }}
           style={[
             maxStyle.container,
-            activeSpeaker
+            !CustomChild && isActiveSpeaker
               ? maxStyle.activeContainerStyle
               : user.video
               ? maxStyle.noVideoStyle
@@ -141,13 +176,37 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           {!showReplacePin && !showPinForMe && (
             <ScreenShareNotice uid={user.uid} isMax={isMax} />
           )}
-          {enableExpandButton &&
-          screenShareData &&
-          screenShareData?.[user.uid] &&
-          isMobileUA() ? (
+          {currentLayout === DefaultLayouts[1].name &&
+          user.uid === secondaryPinnedUid ? (
+            <View
+              style={{
+                position: 'absolute',
+                zIndex: 2,
+                borderRadius: 50,
+                padding: 8,
+                top: 8,
+                left: 8,
+                backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+              }}>
+              <ImageIcon
+                iconType="plain"
+                name={'pin-filled'}
+                iconSize={16}
+                tintColor={$config.FONT_COLOR}
+              />
+            </View>
+          ) : (
+            <></>
+          )}
+          {(enableExpandButton &&
+            screenShareData &&
+            screenShareData?.[user.uid] &&
+            isMobileUA()) ||
+          (isMobileUA() && enableExpandButton && user?.type == 'whiteboard') ? (
             <IconButton
               containerStyle={
-                isScreenShareOnFullView && landscapeMode
+                (isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
+                landscapeMode
                   ? {
                       position: 'absolute',
                       top: 8,
@@ -156,6 +215,14 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
                       zIndex: 999,
                       elevation: 999,
                     }
+                  : user?.type == 'whiteboard'
+                  ? {
+                      position: 'absolute',
+                      top: 8,
+                      left: 8,
+                      zIndex: 999,
+                      elevation: 999,
+                    }
                   : {
                       position: 'absolute',
                       top: 8,
@@ -163,25 +230,29 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
                         pinnedUid &&
                         pinnedUid == user.uid &&
                         !isScreenShareOnFullView
-                          ? 100
+                          ? 160 + (isAndroid() ? 15 : 0)
                           : 8,
                       zIndex: 999,
                       elevation: 999,
                     }
               }
               onPress={() => {
-                setScreenShareOnFullView(
-                  !screenShareData[user.uid]?.isExpanded,
-                );
-                setScreenShareData((prevState) => {
-                  return {
-                    ...prevState,
-                    [user.uid]: {
-                      ...prevState[user.uid],
-                      isExpanded: !prevState[user.uid]?.isExpanded,
-                    },
-                  };
-                });
+                if (user?.type == 'whiteboard') {
+                  setWhiteboardOnFullScreen(!isWhiteboardOnFullScreen);
+                } else {
+                  setScreenShareOnFullView(
+                    !screenShareData[user.uid]?.isExpanded,
+                  );
+                  setScreenShareData(prevState => {
+                    return {
+                      ...prevState,
+                      [user.uid]: {
+                        ...prevState[user.uid],
+                        isExpanded: !prevState[user.uid]?.isExpanded,
+                      },
+                    };
+                  });
+                }
               }}
               iconProps={{
                 iconContainerStyle: {
@@ -191,6 +262,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
                   transform: [{rotate: '-45deg'}],
                 },
                 name:
+                  isWhiteboardOnFullScreen ||
                   screenShareData?.[user?.uid]?.isExpanded === true
                     ? 'collapse'
                     : 'expand',
@@ -201,7 +273,9 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           ) : (
             <></>
           )}
-          {!isScreenShareOnFullView && <NetworkQualityPill user={user} />}
+          {!isScreenShareOnFullView && !CustomChild && (
+            <NetworkQualityPill uid={user?.uid} />
+          )}
           <ZoomableWrapper
             enableZoom={
               isScreenShareOnFullView &&
@@ -210,42 +284,70 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
                 ? true
                 : false
             }>
-            <MaxVideoView
-              fallback={() => {
-                return FallbackLogo(
-                  user?.name,
-                  activeSpeaker,
-                  (showReplacePin || showPinForMe) && !isMobileUA()
-                    ? true
-                    : false,
-                  isMax,
-                  avatarSize,
-                );
-              }}
-              user={isNativeScreenShareActive ? {...user, video: 0} : user}
-              containerStyle={{
-                width:
-                  landscapeMode && isScreenShareOnFullView ? height : '100%',
-                height:
-                  landscapeMode && isScreenShareOnFullView ? width : '100%',
-                // width: '100%',
-                // height: '100%',
-              }}
-              key={user.uid}
-              landscapeMode={
-                landscapeMode && isScreenShareOnFullView ? true : false
-              }
-            />
+            <VisibilitySensor
+              trigger={activeSpeaker}
+              onChange={isVisible => {
+                setVideoTileInViewPortState(user.uid, isVisible);
+              }}>
+              {CustomChild ? (
+                <CustomChild />
+              ) : (
+                <MaxVideoView
+                  fallback={() => {
+                    return FallbackLogo(
+                      user?.name,
+                      isActiveSpeaker,
+                      enablePinForMe &&
+                        (showReplacePin || showPinForMe) &&
+                        !isMobileUA()
+                        ? true
+                        : false,
+                      isMax,
+                      avatarSize,
+                    );
+                  }}
+                  user={user}
+                  containerStyle={{
+                    width:
+                      landscapeMode && isScreenShareOnFullView
+                        ? height
+                        : '100%',
+                    height:
+                      landscapeMode && isScreenShareOnFullView ? width : '100%',
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                  }}
+                  key={user.uid}
+                  landscapeMode={
+                    landscapeMode && isScreenShareOnFullView ? true : false
+                  }
+                />
+              )}
+            </VisibilitySensor>
           </ZoomableWrapper>
-          {!isScreenShareOnFullView && (
-            <NameWithMicIcon
-              videoTileWidth={videoTileWidth}
-              user={user}
-              isMax={isMax}
-            />
+          {(!isScreenShareOnFullView && !CustomChild) ||
+          (CustomChild &&
+            !isWhiteboardOnFullScreen &&
+            (pinnedUid !== getWhiteboardUid() || currentLayout === 'grid')) ? (
+            <VideoContainerProvider value={{videoTileWidth}}>
+              <NameWithMicIcon
+                name={user.name}
+                muted={CustomChild ? undefined : !user.audio}
+                customBgColor={
+                  CustomChild ? $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR : null
+                }
+                customTextColor={
+                  CustomChild
+                    ? $config.FONT_COLOR + hexadecimalTransparency['80%']
+                    : null
+                }
+              />
+            </VideoContainerProvider>
+          ) : (
+            <></>
           )}
-          {!isScreenShareOnFullView &&
-          user.uid !== rtcProps?.screenShareUid &&
+          {!(isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
+          // user.uid !== rtcProps?.screenShareUid &&
           (isHovered || actionMenuVisible || isMobileUA()) ? (
             <MoreMenu
               videoMoreMenuRef={videoMoreMenuRef}
@@ -254,27 +356,41 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
           ) : (
             <></>
           )}
-          {(showReplacePin || showPinForMe) && !isMobileUA() ? (
+          {enablePinForMe &&
+          (showReplacePin || showPinForMe) &&
+          !isMobileUA() ? (
             <IconButton
               onPress={() => {
                 dispatch({type: 'UserPin', value: [user.uid]});
               }}
-              containerStyle={maxStyle.replacePinContainer}
+              containerStyle={
+                user.uid === getWhiteboardUid()
+                  ? maxStyle.replacePinContainer2
+                  : maxStyle.replacePinContainer
+              }
               btnTextProps={{
-                text: showReplacePin ? 'Replace Pin' : 'Pin for me',
+                //text: showReplacePin ? 'Replace Pin' : 'View in large',
+                text:
+                  user.uid === getWhiteboardUid()
+                    ? viewwhiteboardlabel
+                    : viewinlargeLabel,
                 textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
                 textStyle: {
                   marginTop: 0,
                   fontWeight: '700',
-                  marginLeft: 6,
+                  marginLeft: user.uid === getWhiteboardUid() ? 0 : 6,
                 },
               }}
-              iconProps={{
-                name: 'pin-filled',
-                iconSize: 20,
-                iconType: 'plain',
-                tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-              }}
+              iconProps={
+                user.uid === getWhiteboardUid()
+                  ? null
+                  : {
+                      name: 'pin-filled',
+                      iconSize: 20,
+                      iconType: 'plain',
+                      tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+                    }
+              }
             />
           ) : (
             <></>
@@ -290,12 +406,11 @@ interface MoreMenuProps {
   videoMoreMenuRef: any;
 }
 const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
-  const {activeUids} = useRender();
+  const {activeUids, customContent} = useContent();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const {currentLayout} = useLayout();
   const reduceSpace =
-    isMobileUA() &&
-    activeUids.length > 4 &&
-    currentLayout === getGridLayoutName();
+    isMobileUA() && activeUidsLen > 4 && currentLayout === getGridLayoutName();
   return (
     <>
       <View
@@ -313,8 +428,10 @@ const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
           }}
           iconProps={{
             iconContainerStyle: {
-              padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
-              backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+              padding: reduceSpace && activeUidsLen > 12 ? 2 : 8,
+              backgroundColor:
+                $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR +
+                hexadecimalTransparency['25%'],
             },
             name: 'more-menu',
             iconSize: 20,
@@ -329,7 +446,7 @@ const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
 const PlatformWrapper = ({children, setIsHovered, isHovered}) => {
   return isWebInternal() && !isMobileUA() ? (
     <div
-      style={{width: '100%', height: '100%'}}
+      style={{width: '100%', height: '100%', borderRadius: 4}}
       /**
        * why onMouseOver is used instead of onMouseEnter
        * when user clicks close icon the participant then video tile will expand and
@@ -369,6 +486,23 @@ const maxStyle = StyleSheet.create({
     maxWidth: 120,
     maxHeight: 32,
   },
+  replacePinContainer2: {
+    justifyContent: 'center',
+    zIndex: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    borderRadius: 8,
+    flexDirection: 'row',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+    maxWidth: 120,
+    maxHeight: 32,
+  },
   container: {
     width: '100%',
     height: '100%',
@@ -376,6 +510,7 @@ const maxStyle = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: ThemeConfig.BorderRadius.small,
     borderWidth: 2,
+    borderColor: 'red',
   },
   activeContainerStyle: {
     borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
@@ -388,4 +523,8 @@ const maxStyle = StyleSheet.create({
   },
 });
 
+const VideoContainerContext = React.createContext({videoTileWidth: 0});
+const VideoContainerProvider = VideoContainerContext.Provider;
+export const useVideoContainer = createHook(VideoContainerContext);
+
 export default VideoRenderer;

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

@@ -0,0 +1,104 @@
+import React, {useEffect, useState, useRef, ReactNode, FC} from 'react';
+import {View, Dimensions} from 'react-native';
+
+export interface IDimensionData {
+  rectTop: number;
+  rectBottom: number;
+  rectWidth: number;
+}
+
+export interface Props {
+  /** Function that is triggered when component enters the viewport */
+  onChange(visible: boolean): any;
+  /** The component that needs to be in the viewport */
+  children: ReactNode;
+  trigger: any;
+}
+
+const RNView = View as any;
+
+const VisibilitySensor: FC<Props> = ({children, onChange, trigger}) => {
+  const myView: any = useRef(null);
+  const [lastValue, setLastValue] = useState<boolean>(false);
+  const [dimensions, setDimensions] = useState<IDimensionData>({
+    rectTop: 0,
+    rectBottom: 0,
+    rectWidth: 0,
+  });
+
+  let interval: any = null;
+
+  useEffect(() => {
+    setLastValue(false);
+    startWatching();
+    isInViewPort();
+    return stopWatching;
+  }, [
+    dimensions.rectTop,
+    dimensions.rectBottom,
+    dimensions.rectWidth,
+    trigger,
+  ]);
+
+  const startWatching = () => {
+    if (interval) {
+      return;
+    }
+
+    interval = setInterval(() => {
+      if (!myView || !myView.current) {
+        return;
+      }
+
+      myView.current.measure(
+        async (
+          _x: number,
+          _y: number,
+          width: number,
+          height: number,
+          pageX: number,
+          pageY: number,
+        ) => {
+          setDimensions({
+            rectTop: pageY,
+            rectBottom: pageY + height,
+            rectWidth: pageX + width,
+          });
+        },
+      );
+    }, 1000);
+  };
+
+  const stopWatching = () => {
+    interval = clearInterval(interval);
+  };
+
+  const isInViewPort = () => {
+    const window = Dimensions.get('window');
+    const isVisible =
+      dimensions.rectBottom != 0 &&
+      dimensions.rectTop >= 0 &&
+      dimensions.rectBottom <= window.height &&
+      dimensions.rectWidth > 0 &&
+      dimensions.rectWidth <= window.width;
+
+    if (lastValue !== isVisible) {
+      setLastValue(isVisible);
+      onChange(isVisible);
+    } else {
+      onChange(isVisible);
+    }
+  };
+
+  return (
+    <RNView
+      style={{width: '100%', height: '100%'}}
+      collapsable={false}
+      ref={myView}>
+      {children}
+      <View />
+    </RNView>
+  );
+};
+
+export default VisibilitySensor;

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

@@ -1,20 +1,54 @@
 import ParticipantsView from '../../components/ParticipantsView';
 import Chat from '../../components/Chat';
-import Navbar, {NavBarComponentsArray} from '../../components/Navbar';
-import SettingsView from '../../components/SettingsView';
-import Controls, {ControlsComponentsArray} from '../../components/Controls';
+import Navbar, {
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
+} from '../../components/Navbar';
+import Controls, {
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
+} from '../../components/Controls';
 import ChatBubble from '../../subComponents/ChatBubble';
-import {ChatTextInput, ChatSendButton} from '../../subComponents/ChatInput';
+import {ChatInput} from '../../subComponents/ChatInput';
+import SettingsView from '../../components/SettingsView';
+import WhiteboardButton from '../../components/whiteboard/WhiteboardButton';
 
+const ToolbarComponents = {
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
+  WhiteboardToolbarItem: WhiteboardButton,
+};
 export {
   ParticipantsView,
   Chat,
   Navbar,
-  NavBarComponentsArray,
   SettingsView,
   Controls,
-  ControlsComponentsArray,
   ChatBubble,
-  ChatTextInput,
-  ChatSendButton,
+  ChatInput,
+  ToolbarComponents,
 };