Add tooltips to participant list, fixes #299

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-05 20:08:11 +02:00
parent 6ca73e190f
commit 3710c3b3ac
20 changed files with 138 additions and 78 deletions

View File

@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import * as appPropTypes from '../../appPropTypes'; import * as appPropTypes from '../../appPropTypes';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import PanIcon from '@material-ui/icons/PanTool'; import PanIcon from '@material-ui/icons/PanTool';
import EmptyAvatar from '../../../images/avatar-empty.jpeg'; import EmptyAvatar from '../../../images/avatar-empty.jpeg';
@ -58,6 +59,13 @@ const ListMe = (props) =>
<div className={classes.peerInfo}> <div className={classes.peerInfo}>
{settings.displayName} {settings.displayName}
</div> </div>
<Tooltip
title={intl.formatMessage({
id : 'tooltip.raisedHand',
defaultMessage : 'Raise hand'
})}
placement='bottom'
>
<IconButton <IconButton
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id : 'tooltip.raisedHand', id : 'tooltip.raisedHand',
@ -75,6 +83,7 @@ const ListMe = (props) =>
> >
<PanIcon /> <PanIcon />
</IconButton> </IconButton>
</Tooltip>
</div> </div>
); );
}; };

View File

@ -7,6 +7,7 @@ import * as appPropTypes from '../../appPropTypes';
import { withRoomContext } from '../../../RoomContext'; import { withRoomContext } from '../../../RoomContext';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import VideocamIcon from '@material-ui/icons/Videocam'; import VideocamIcon from '@material-ui/icons/Videocam';
import VideocamOffIcon from '@material-ui/icons/VideocamOff'; import VideocamOffIcon from '@material-ui/icons/VideocamOff';
import VolumeUpIcon from '@material-ui/icons/VolumeUp'; import VolumeUpIcon from '@material-ui/icons/VolumeUp';
@ -99,6 +100,13 @@ const ListPeer = (props) =>
} }
</div> </div>
{ screenConsumer && { screenConsumer &&
<Tooltip
title={intl.formatMessage({
id : 'tooltip.muteScreenSharing',
defaultMessage : 'Mute participant share'
})}
placement='bottom'
>
<IconButton <IconButton
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id : 'tooltip.muteScreenSharing', id : 'tooltip.muteScreenSharing',
@ -121,7 +129,15 @@ const ListPeer = (props) =>
<ScreenOffIcon /> <ScreenOffIcon />
} }
</IconButton> </IconButton>
</Tooltip>
} }
<Tooltip
title={intl.formatMessage({
id : 'tooltip.muteParticipantVideo',
defaultMessage : 'Mute participant video'
})}
placement='bottom'
>
<IconButton <IconButton
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id : 'tooltip.muteParticipantVideo', id : 'tooltip.muteParticipantVideo',
@ -144,6 +160,14 @@ const ListPeer = (props) =>
<VideocamOffIcon /> <VideocamOffIcon />
} }
</IconButton> </IconButton>
</Tooltip>
<Tooltip
title={intl.formatMessage({
id : 'tooltip.muteParticipant',
defaultMessage : 'Mute participant'
})}
placement='bottom'
>
<IconButton <IconButton
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id : 'tooltip.muteParticipant', id : 'tooltip.muteParticipant',
@ -166,7 +190,15 @@ const ListPeer = (props) =>
<VolumeOffIcon /> <VolumeOffIcon />
} }
</IconButton> </IconButton>
</Tooltip>
{ isModerator && { isModerator &&
<Tooltip
title={intl.formatMessage({
id : 'tooltip.kickParticipant',
defaultMessage : 'Kick out participant'
})}
placement='bottom'
>
<IconButton <IconButton
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id : 'tooltip.kickParticipant', id : 'tooltip.kickParticipant',
@ -183,6 +215,7 @@ const ListPeer = (props) =>
> >
<ExitIcon /> <ExitIcon />
</IconButton> </IconButton>
</Tooltip>
} }
{children} {children}
</div> </div>

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "房间名称", "label.roomName": "房间名称",
"label.chooseRoomButton": "继续", "label.chooseRoomButton": "继续",

View File

@ -79,6 +79,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Jméno místnosti", "label.roomName": "Jméno místnosti",
"label.chooseRoomButton": "Pokračovat", "label.chooseRoomButton": "Pokračovat",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Name des Raums", "label.roomName": "Name des Raums",
"label.chooseRoomButton": "Weiter", "label.chooseRoomButton": "Weiter",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Værelsesnavn", "label.roomName": "Værelsesnavn",
"label.chooseRoomButton": "Fortsæt", "label.chooseRoomButton": "Fortsæt",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Όνομα δωματίου", "label.roomName": "Όνομα δωματίου",
"label.chooseRoomButton": "Συνέχεια", "label.chooseRoomButton": "Συνέχεια",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": "Mute participant", "tooltip.muteParticipant": "Mute participant",
"tooltip.muteParticipantVideo": "Mute participant video", "tooltip.muteParticipantVideo": "Mute participant video",
"tooltip.raisedHand": "Raise hand", "tooltip.raisedHand": "Raise hand",
"tooltip.muteScreenSharing": "Mute participant share",
"label.roomName": "Room name", "label.roomName": "Room name",
"label.chooseRoomButton": "Continue", "label.chooseRoomButton": "Continue",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Nombre de la sala", "label.roomName": "Nombre de la sala",
"label.chooseRoomButton": "Continuar", "label.chooseRoomButton": "Continuar",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Nom de la salle", "label.roomName": "Nom de la salle",
"label.chooseRoomButton": "Continuer", "label.chooseRoomButton": "Continuer",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": "Utišaj sudionika", "tooltip.muteParticipant": "Utišaj sudionika",
"tooltip.muteParticipantVideo": "Ne primaj video sudionika", "tooltip.muteParticipantVideo": "Ne primaj video sudionika",
"tooltip.raisedHand": "Podigni ruku", "tooltip.raisedHand": "Podigni ruku",
"tooltip.muteScreenSharing": null,
"label.roomName": "Naziv sobe", "label.roomName": "Naziv sobe",
"label.chooseRoomButton": "Nastavi", "label.chooseRoomButton": "Nastavi",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": "Résztvevő némítása", "tooltip.muteParticipant": "Résztvevő némítása",
"tooltip.muteParticipantVideo": "Résztvevő video némítása", "tooltip.muteParticipantVideo": "Résztvevő video némítása",
"tooltip.raisedHand": "Jelentkezés", "tooltip.raisedHand": "Jelentkezés",
"tooltip.muteScreenSharing": null,
"label.roomName": "Konferencia", "label.roomName": "Konferencia",
"label.chooseRoomButton": "Tovább", "label.chooseRoomButton": "Tovább",

View File

@ -79,6 +79,7 @@
"tooltip.muteParticipant": "Muta partecipante", "tooltip.muteParticipant": "Muta partecipante",
"tooltip.muteParticipantVideo": "Ferma video partecipante", "tooltip.muteParticipantVideo": "Ferma video partecipante",
"tooltip.raisedHand": "Mano alzata", "tooltip.raisedHand": "Mano alzata",
"tooltip.muteScreenSharing": null,
"label.roomName": "Nome della stanza", "label.roomName": "Nome della stanza",
"label.chooseRoomButton": "Continua", "label.chooseRoomButton": "Continua",

View File

@ -79,6 +79,7 @@
"tooltip.muteParticipant": "Noklusināt dalībnieku", "tooltip.muteParticipant": "Noklusināt dalībnieku",
"tooltip.muteParticipantVideo": "Atslēgt dalībnieka video", "tooltip.muteParticipantVideo": "Atslēgt dalībnieka video",
"tooltip.raisedHand": "Pacelt roku", "tooltip.raisedHand": "Pacelt roku",
"tooltip.muteScreenSharing": null,
"label.roomName": "Sapulces telpas nosaukums (ID)", "label.roomName": "Sapulces telpas nosaukums (ID)",
"label.chooseRoomButton": "Turpināt", "label.chooseRoomButton": "Turpināt",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": "Demp deltaker", "tooltip.muteParticipant": "Demp deltaker",
"tooltip.muteParticipantVideo": "Demp deltakervideo", "tooltip.muteParticipantVideo": "Demp deltakervideo",
"tooltip.raisedHand": "Rekk opp hånden", "tooltip.raisedHand": "Rekk opp hånden",
"tooltip.muteScreenSharing": "Demp deltaker skjermdeling",
"label.roomName": "Møtenavn", "label.roomName": "Møtenavn",
"label.chooseRoomButton": "Fortsett", "label.chooseRoomButton": "Fortsett",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Nazwa konferencji", "label.roomName": "Nazwa konferencji",
"label.chooseRoomButton": "Kontynuuj", "label.chooseRoomButton": "Kontynuuj",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Nome da sala", "label.roomName": "Nome da sala",
"label.chooseRoomButton": "Continuar", "label.chooseRoomButton": "Continuar",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Numele camerei", "label.roomName": "Numele camerei",
"label.chooseRoomButton": "Continuare", "label.chooseRoomButton": "Continuare",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Oda adı", "label.roomName": "Oda adı",
"label.chooseRoomButton": "Devam", "label.chooseRoomButton": "Devam",

View File

@ -80,6 +80,7 @@
"tooltip.muteParticipant": null, "tooltip.muteParticipant": null,
"tooltip.muteParticipantVideo": null, "tooltip.muteParticipantVideo": null,
"tooltip.raisedHand": null, "tooltip.raisedHand": null,
"tooltip.muteScreenSharing": null,
"label.roomName": "Назва кімнати", "label.roomName": "Назва кімнати",
"label.chooseRoomButton": "Продовжити", "label.chooseRoomButton": "Продовжити",