Add a phone icon for SIP phone users

Signed-off-by: Joas Schilling <coding@schilljs.com>

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,