Remove selected participant when switching to gridview

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

package-lock.json

@@ -2520,6 +2520,11 @@
 				}
 			}
 		},
+		"@mdi/font": {
+			"version": "5.1.45",
+			"resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.1.45.tgz",
+			"integrity": "sha512-7H1UMwUpEp8mthdPlpAi7bhEyvTbvtK1TlA89scc0cXMpQy0UFygdkaf+6fveIxpBcRNgw0gnGSEonlsfYocXg=="
+		},
 		"@mrmlnc/readdir-enhanced": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@juliushaertl/vue-richtext": "^0.3.1",
+		"@mdi/font": "^5.1.45",
 		"@nextcloud/auth": "^1.2.3",
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/dialogs": "^1.3.0",

src/components/CallView/shared/Video.vue

@@ -33,6 +33,7 @@
 		<transition name="fade">
 			<div v-if="!placeholderForPromoted" v-show="!model.attributes.videoAvailable || !sharedData.videoEnabled" class="avatar-container">
 				<VideoBackground v-if="isGrid"
+					:show-promoted-placeholder="isPromoted && isStripe"
 					:display-name="model.attributes.name"
 					:user="model.attributes.userId" />
 				<Avatar v-if="model.attributes.userId"
@@ -83,7 +84,7 @@
 			</transition>
 		</div>
 		<div v-if="isSpeaking && showTalkingHighlight" class="speaking-shadow" />
-		<div v-if="mouseover" class="hover-shadow" />
+		<div v-if="mouseover || (isStripe && isPromoted)" class="hover-shadow" />
 	</div>
 </template>
 
@@ -150,6 +151,7 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		// Is the current promoted participant
 		isPromoted: {
 			type: Boolean,
 			default: false,

src/components/CallView/shared/VideoBackground.vue

@@ -22,12 +22,14 @@
 <template>
 	<div
 		:style="{'background-color': backgroundColor }"
-		class="video-background">
+		class="video-back">
 		<img
 			v-if="hasPicture"
 			:src="backgroundImage"
 			class="video-background__picture">
 		<div class="darken" />
+		<div v-if="showPromotedPlaceholder"
+			class="mdi-voice" />
 	</div>
 </template>
 
@@ -47,6 +49,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		showPromotedPlaceholder: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {

src/components/TopBar/TopBar.vue

@@ -25,7 +25,7 @@
 			class="top-bar__button primary"
 			@click="handlefollowSpeaker">
 			<span
-				class="icon-user-white" />
+				class="mdi mdi-voice" />
 			{{ followSpeakerLabel }}
 		</button>
 		<CallButton class="top-bar__button" />
@@ -423,6 +423,7 @@ export default {
 
 		changeView() {
 			this.$store.dispatch('isGrid', !this.isGrid)
+			this.$store.dispatch('selectedVideoPeerId', null)
 			this.showLayoutHint = false
 		},
 		async toggleGuests() {