diff options
author | Joas Schilling <coding@schilljs.com> | 2020-10-14 18:13:14 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2020-10-30 12:38:08 +0300 |
commit | 61504d5c6f5cde31d0f880c69aabd4f30bde5246 (patch) | |
tree | 4448c8869ed5c0017f0710ff86c94506f8a6f877 /src | |
parent | a4543ae3ccd81450def0dc0450c9707d7071fc86 (diff) |
Add a phone icon for SIP phone users
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue | 38 | ||||
-rw-r--r-- | src/constants.js | 1 |
2 files changed, 32 insertions, 7 deletions
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue index 9efcf4e89..d488bdf59 100644 --- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue +++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue @@ -48,7 +48,21 @@ <span>{{ getStatusMessage(participant) }}</span> </div> </div> - <div v-if="callIconClass" class="icon callstate-icon" :class="callIconClass" /> + <div v-if="callIcon" + class="participant-row__callstate-icon"> + <Microphone + v-if="callIcon === 'audio'" + :size="24" + decorative /> + <Phone + v-if="callIcon === 'phone'" + :size="24" + decorative /> + <Video + v-if="callIcon === 'video'" + :size="24" + decorative /> + </div> <Actions v-if="canModerate && !isSearched" :aria-label="t('spreed', 'Participant settings')" @@ -77,6 +91,9 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import Actions from '@nextcloud/vue/dist/Components/Actions' +import Microphone from 'vue-material-design-icons/Microphone' +import Phone from 'vue-material-design-icons/Phone' +import Video from 'vue-material-design-icons/Video' import { CONVERSATION, PARTICIPANT } from '../../../../../constants' import UserStatus from '../../../../../mixins/userStatus' import isEqual from 'lodash/isEqual' @@ -89,6 +106,9 @@ export default { Actions, ActionButton, AvatarWrapper, + Microphone, + Phone, + Video, }, mixins: [ @@ -166,15 +186,19 @@ export default { label() { return this.participant.label }, - callIconClass() { + callIcon() { if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) { return '' } - const hasVideo = this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO - if (hasVideo) { - return 'icon-video' + const withVideo = this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO + if (withVideo) { + return 'video' + } + const withPhone = this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE + if (withPhone) { + return 'phone' } - return 'icon-audio' + return 'audio' }, participantType() { return this.participant.participantType @@ -336,7 +360,7 @@ export default { margin-right: 28px; } - .callstate-icon { + &__callstate-icon { opacity: .4; display: inline-block; height: 44px; diff --git a/src/constants.js b/src/constants.js index 0c5abe7d4..e5a5cfb09 100644 --- a/src/constants.js +++ b/src/constants.js @@ -47,6 +47,7 @@ export const PARTICIPANT = { IN_CALL: 1, WITH_AUDIO: 2, WITH_VIDEO: 4, + WITH_PHONE: 8, }, NOTIFY: { DEFAULT: 0, |