Display hand icon in participant list

- added call store attribute for storing the current hand raised state,
  to expose it from the webrtc models to the participant list
- call icon is replaced with a hand when a hand is raised, also for
  oneself
- when leaving a call, clear raised hands from the store
- when a user leaves a call, clear that user's hand raised state

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

src/components/CallView/CallView.vue

@@ -404,6 +404,7 @@ export default {
 				this.raisedHandUnwatchers[removedModelId]()
 				// Not reactive, but not a problem
 				delete this.raisedHandUnwatchers[removedModelId]
+			    this.$store.dispatch('setParticipantHandRaised', { peerId: removedModelId, raised: false })
 
 				const index = this.speakers.findIndex(speaker => speaker.id === removedModelId)
 				this.speakers.splice(index, 1)
@@ -494,6 +495,9 @@ export default {
 					showMessage(t('spreed', 'A participant lowered their hand.'))
 				}
 			}
+
+			// update in callViewStore
+			this.$store.dispatch('setParticipantHandRaised', { peerId: callParticipantModel.attributes.peerId, raised: raisedHand })
 		},
 
 		_setScreenAvailable(id, screen) {

src/components/CallView/shared/LocalMediaControls.vue

@@ -548,12 +548,14 @@ export default {
 		},
 
 		toggleHandRaised() {
-			if (this.model.attributes.raisedHand) {
-				showMessage(t('spreed', 'You are no longer raising your hand.'))
-			} else {
+			const raisedHand = !this.model.attributes.raisedHand
+			if (raisedHand) {
 				showMessage(t('spreed', 'You are now raising your hand.'))
+			} else {
+				showMessage(t('spreed', 'You are no longer raising your hand.'))
 			}
-			this.model.toggleHandRaised(!this.model.attributes.raisedHand)
+			this.model.toggleHandRaised(raisedHand)
+			this.$store.dispatch('setParticipantHandRaised', { peerId: this.localCallParticipantModel.attributes.peerId, raised: raisedHand })
 		},
 
 		shareScreen() {

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -86,6 +86,11 @@
 				:size="24"
 				title=""
 				decorative />
+			<Hand
+				v-if="callIcon === 'hand'"
+				:size="24"
+				title=""
+				decorative />
 		</div>
 		<Actions
 			v-if="canModerate && !isSearched"
@@ -126,6 +131,7 @@ 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 Hand from 'vue-material-design-icons/Hand'
 import { CONVERSATION, PARTICIPANT } from '../../../../../constants'
 import UserStatus from '../../../../../mixins/userStatus'
 import isEqual from 'lodash/isEqual'
@@ -142,6 +148,7 @@ export default {
 		Microphone,
 		Phone,
 		Video,
+		Hand,
 	},
 
 	directives: {
@@ -267,10 +274,20 @@ export default {
 		label() {
 			return this.participant.label
 		},
+		raisedHand() {
+			if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG_DISCONNECTED) {
+				return false
+			}
+
+			return this.$store.getters.isParticipantRaisedHand(this.participant.sessionId)
+		},
 		callIcon() {
 			if (this.isSearched || this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 				return ''
 			}
+			if (this.raisedHand) {
+				return 'hand'
+			}
 			const withVideo = this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO
 			if (withVideo) {
 				return 'video'
@@ -288,6 +305,8 @@ export default {
 				return t('spreed', 'Joined with video')
 			} else if (this.callIcon === 'phone') {
 				return t('spreed', 'Joined via phone')
+			} else if (this.callIcon === 'hand') {
+				return t('spreed', 'Raised their hand')
 			}
 			return null
 		},

src/store/callViewStore.js

@@ -33,6 +33,7 @@ const state = {
 	presentationStarted: false,
 	selectedVideoPeerId: null,
 	videoBackgroundBlur: 1,
+	participantRaisedHands: {},
 }
 
 const getters = {
@@ -47,6 +48,7 @@ const getters = {
 	getBlurFilter: (state) => (width, height) => {
 		return `filter: blur(${(width * height * state.videoBackgroundBlur) / 1000}px)`
 	},
+	isParticipantRaisedHand: (state) => (peerId) => !!state.participantRaisedHands[peerId],
 }
 
 const mutations = {
@@ -69,6 +71,16 @@ const mutations = {
 	presentationStarted(state, value) {
 		state.presentationStarted = value
 	},
+	setParticipantHandRaised(state, { peerId, raised }) {
+		if (raised) {
+			state.participantRaisedHands[peerId] = raised
+		} else {
+			delete state.participantRaisedHands[peerId]
+		}
+	},
+	clearParticipantHandRaised(state) {
+		state.participantRaisedHands = {}
+	},
 }
 
 const actions = {
@@ -96,6 +108,11 @@ const actions = {
 		context.dispatch('setCallViewMode', { isGrid: isGrid, isStripeOpen: isStripeOpen })
 	},
 
+	leaveCall(context) {
+		// clear raised hands as they were specific to the call
+		context.commit('clearParticipantHandRaised')
+	},
+
 	/**
 	 * Sets the current call view mode and saves it in preferences.
 	 * If clearLast is false, also remembers it in separate properties.
@@ -125,6 +142,10 @@ const actions = {
 		}
 	},
 
+	setParticipantHandRaised(context, { peerId, raised }) {
+		context.commit('setParticipantHandRaised', { peerId, raised })
+	},
+
 	/**
 	 * Starts presentation mode.
 	 *