add new away button

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import CaptionsButtonContainer from '/imports/ui/components/captions/button/container';
 import deviceInfo from '/imports/utils/deviceInfo';
 import { ActionsBarItemType, ActionsBarPosition } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/actions-bar-item/enums';
+import { defineMessages } from 'react-intl';
 import Styled from './styles';
 import ActionsDropdown from './actions-dropdown/container';
 import AudioCaptionsButtonContainer from '/imports/ui/components/audio/audio-graphql/audio-captions/button/component';
@@ -17,6 +18,17 @@ import Button from '/imports/ui/components/common/button/component';
 import Settings from '/imports/ui/services/settings';
 import { LAYOUT_TYPE } from '../layout/enums';
 
+const messages = defineMessages({
+  awayLabel: {
+    id: 'app.userList.menu.away',
+    description: 'Text for identifying away user',
+  },
+  notAwayLabel: {
+    id: 'app.userList.menu.notAway',
+    description: 'Text for identifying not away user',
+  },
+});
+
 class ActionsBar extends PureComponent {
   constructor(props) {
     super(props);
@@ -27,6 +39,7 @@ class ActionsBar extends PureComponent {
 
     this.setCaptionsReaderMenuModalIsOpen = this.setCaptionsReaderMenuModalIsOpen.bind(this);
     this.setRenderRaiseHand = this.renderRaiseHand.bind(this);
+    this.setRenderAwayButton = this.renderAwayButton.bind(this);
     this.actionsBarRef = React.createRef();
     this.renderPluginsActionBarItems = this.renderPluginsActionBarItems.bind(this);
   }
@@ -95,6 +108,28 @@ class ActionsBar extends PureComponent {
     );
   }
 
+  renderAwayButton() {
+    const { intl, currentUser, setUserAway } = this.props;
+    const { away } = currentUser;
+
+    const awayLabel = away
+      ? intl.formatMessage(messages.notAwayLabel)
+      : intl.formatMessage(messages.awayLabel);
+
+    return (
+      <Button
+        onClick={() => setUserAway(!away)}
+        hideLabel
+        color={away ? 'primary' : 'default'}
+        ghost={!away}
+        icon="time"
+        size="lg"
+        circle
+        label={awayLabel}
+      />
+    );
+  }
+
   render() {
     const {
       amIPresenter,
@@ -210,6 +245,7 @@ class ActionsBar extends PureComponent {
             />
           )}
           {isRaiseHandButtonCentered && this.renderRaiseHand()}
+          {this.renderAwayButton()}
           {this.renderPluginsActionBarItems(ActionsBarPosition.RIGHT)}
         </Styled.Center>
         <Styled.Right>

bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx

@@ -20,6 +20,11 @@ import MediaService from '../media/service';
 import useMeeting from '/imports/ui/core/hooks/useMeeting';
 import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
 import { EXTERNAL_VIDEO_STOP } from '../external-video-player/mutations';
+import { SET_AWAY } from '/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/user-actions/mutations';
+import { toggleVoice } from '/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/user-actions/service';
+import VideoService from '/imports/ui/components/video-provider/service';
+import AudioService from '/imports/ui/components/audio/service';
+import useToggleVoice from '/imports/ui/components/audio/audio-graphql/hooks/useToggleVoice';
 
 const ActionsBarContainer = (props) => {
   const actionsBarStyle = layoutSelectOutput((i) => i.actionBar);
@@ -49,10 +54,38 @@ const ActionsBarContainer = (props) => {
     presenter: user.presenter,
     emoji: user.emoji,
     isModerator: user.isModerator,
+    away: user.away,
+    voice: user.voice,
   }));
 
   const [stopExternalVideoShare] = useMutation(EXTERNAL_VIDEO_STOP);
-  const currentUser = { userId: Auth.userID, emoji: currentUserData?.emoji };
+  const [setAway] = useMutation(SET_AWAY);
+  const voiceToggle = useToggleVoice();
+
+  const muteAway = (away) => {
+    const isMuted = currentUserData?.voice?.muted;
+
+    if (isMuted === away) {
+      AudioService.toggleMuteMicrophone(toggleVoice, voiceToggle);
+    }
+
+    VideoService.setTrackEnabled(away);
+  };
+
+  const setUserAway = (away) => {
+    muteAway(!away);
+    setAway({
+      variables: {
+        away,
+      },
+    });
+  };
+
+  const currentUser = {
+    userId: Auth.userID,
+    emoji: currentUserData?.emoji,
+    away: currentUserData?.away,
+  };
   const amIPresenter = currentUserData?.presenter;
   const amIModerator = currentUserData?.isModerator;
 
@@ -71,6 +104,7 @@ const ActionsBarContainer = (props) => {
         isThereCurrentPresentation,
         isSharingVideo,
         stopExternalVideoShare,
+        setUserAway,
       }
     }
     />

bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-controls/input-stream-live-selector/buttons/muteToggle.tsx

@@ -6,6 +6,7 @@ import { useShortcut } from '/imports/ui/core/hooks/useShortcut';
 import Settings from '/imports/ui/services/settings';
 import useToggleVoice from '../../../hooks/useToggleVoice';
 import { SET_AWAY } from '/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/user-actions/mutations';
+import VideoService from '/imports/ui/components/video-provider/service';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - temporary while settings are still in .js
@@ -48,6 +49,7 @@ export const Mutetoggle: React.FC<MuteToggleProps> = ({
     e.stopPropagation();
 
     if (muted) {
+      VideoService.setTrackEnabled(true);
       setAway({
         variables: {
           away: false,

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/user-actions/component.tsx

@@ -6,7 +6,6 @@ import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
 import logger from '/imports/startup/client/logger';
 import { UserListDropdownItemType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/user-list-dropdown-item/enums';
 import {
-  SET_AWAY,
   SET_ROLE,
   USER_EJECT_CAMERAS,
   CHAT_CREATE_WITH_USER,
@@ -28,9 +27,6 @@ import {
   isVoiceOnlyUser,
 } from './service';
 
-import VideoService from '/imports/ui/components/video-provider/service';
-import AudioService from '/imports/ui/components/audio/service';
-
 import { isChatEnabled } from '/imports/ui/services/features';
 import { layoutDispatch } from '/imports/ui/components/layout/context';
 import { PANELS, ACTIONS } from '/imports/ui/components/layout/enums';
@@ -153,14 +149,6 @@ const messages = defineMessages({
     id: 'app.audio.backLabel',
     description: 'label for option to hide emoji menu',
   },
-  awayLabel: {
-    id: 'app.userList.menu.away',
-    description: 'Text for identifying away user',
-  },
-  notAwayLabel: {
-    id: 'app.userList.menu.notAway',
-    description: 'Text for identifying not away user',
-  },
 });
 const makeDropdownPluginItem: (
   userDropdownItems: PluginSdk.UserListDropdownInterface[]) => DropdownItem[] = (
@@ -284,7 +272,6 @@ const UserActions: React.FC<UserActionsProps> = ({
     allowUserLookup,
     allowedToRemove,
     allowedToEjectCameras,
-    allowedToSetAway,
   } = actionsnPermitions;
 
   const userLocked = user.locked
@@ -306,7 +293,6 @@ const UserActions: React.FC<UserActionsProps> = ({
     (page: { pageId: string; userId: string }) => (page.pageId === pageId && page.userId === user.userId),
   );
 
-  const [setAway] = useMutation(SET_AWAY);
   const [setRole] = useMutation(SET_ROLE);
   const [chatCreateWithUser] = useMutation(CHAT_CREATE_WITH_USER);
   const [setCameraPinned] = useMutation(SET_CAMERA_PINNED);
@@ -337,25 +323,6 @@ const UserActions: React.FC<UserActionsProps> = ({
     }
   };
 
-  const muteAway = () => {
-    const isMuted = user.voice?.muted;
-    const prevAwayMuted = prevMutedRef.current;
-
-    if (!isMuted && !user.away && !prevAwayMuted) {
-      AudioService.toggleMuteMicrophone(toggleVoice, voiceToggle);
-      prevMutedRef.current = true;
-    } else if (isMuted && user.away && prevAwayMuted) {
-      AudioService.toggleMuteMicrophone(toggleVoice, voiceToggle);
-      prevMutedRef.current = false;
-    }
-
-    if (!user.away) {
-      VideoService.setTrackEnabled(false);
-    } else {
-      VideoService.setTrackEnabled(true);
-    }
-  };
-
   const dropdownOptions = [
     ...makeDropdownPluginItem(userDropdownItems.filter(
       (item: PluginSdk.UserListDropdownInterface) => (item?.type === UserListDropdownItemType.INFORMATION),
@@ -587,21 +554,6 @@ const UserActions: React.FC<UserActionsProps> = ({
       icon: 'video_off',
       dataTest: 'ejectCamera',
     },
-    {
-      allowed: allowedToSetAway,
-      key: 'setAway',
-      label: intl.formatMessage(user.away ? messages.notAwayLabel : messages.awayLabel),
-      onClick: () => {
-        muteAway();
-        setAway({
-          variables: {
-            away: !user.away,
-          },
-        });
-        setOpenUserAction(null);
-      },
-      icon: 'time',
-    },
     ...makeDropdownPluginItem(userDropdownItems.filter(
       (item: PluginSdk.UserListDropdownInterface) => (item?.type !== UserListDropdownItemType.INFORMATION),
     )),