add new away button
This commit is contained in:
parent
4100fd11e8
commit
6fea058cb0
@ -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>
|
||||
|
@ -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,
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
@ -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,
|
||||
|
@ -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),
|
||||
)),
|
||||
|
Loading…
Reference in New Issue
Block a user