[stable21] Fix quality warning tooltip not staying dismissed

src/components/CallView/shared/LocalMediaControls.vue

@@ -146,7 +146,7 @@
 						<button
 							v-if="!isQualityWarningTooltipDismissed"
 							class="hint__button"
-							@click="isQualityWarningTooltipDismissed = true">
+							@click="dismissQualityWarningTooltip">
 							{{ t('spreed', 'Dismiss') }}
 						</button>
 					</div>
@@ -212,7 +212,6 @@ export default {
 			screenSharingMenuOpen: false,
 			splitScreenSharingMenu: false,
 			boundaryElement: document.querySelector('.main-view'),
-			isQualityWarningTooltipDismissed: false,
 			mouseover: false,
 			callAnalyzer: callAnalyzer,
 			qualityWarningInGracePeriodTimeout: null,
@@ -349,6 +348,10 @@ export default {
 			return (this.model.attributes.localScreen || this.splitScreenSharingMenu) ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
 		},
 
+		isQualityWarningTooltipDismissed() {
+			return this.$store.getters.isQualityWarningTooltipDismissed
+		},
+
 		showQualityWarningTooltip() {
 			return this.qualityWarningTooltip && (!this.isQualityWarningTooltipDismissed || this.mouseover)
 		},
@@ -664,12 +667,16 @@ export default {
 			}
 			if (this.qualityWarningTooltip.action === 'disableScreenShare') {
 				this.model.stopSharingScreen()
-				this.isQualityWarningTooltipDismissed = true
+				this.dismissQualityWarningTooltip()
 			} else if (this.qualityWarningTooltip.action === 'disableVideo') {
 				this.model.disableVideo()
-				this.isQualityWarningTooltipDismissed = true
+				this.dismissQualityWarningTooltip()
 			}
 		},
+
+		dismissQualityWarningTooltip() {
+			this.$store.dispatch('dismissQualityWarningTooltip')
+		},
 	},
 }
 </script>

src/store/callViewStore.js

@@ -33,6 +33,7 @@ const state = {
 	lastIsStripeOpen: null,
 	presentationStarted: false,
 	selectedVideoPeerId: null,
+	qualityWarningTooltipDismissed: false,
 	participantRaisedHands: {},
 	backgroundImageAverageColorCache: {},
 }
@@ -46,6 +47,7 @@ const getters = {
 	selectedVideoPeerId: (state) => {
 		return state.selectedVideoPeerId
 	},
+	isQualityWarningTooltipDismissed: (state) => state.qualityWarningTooltipDismissed,
 	getParticipantRaisedHand: (state) => (sessionId) => {
 		return state.participantRaisedHands[sessionId] || { state: false, timestamp: null }
 	},
@@ -77,6 +79,9 @@ const mutations = {
 	presentationStarted(state, value) {
 		state.presentationStarted = value
 	},
+	setQualityWarningTooltipDismissed(state, { qualityWarningTooltipDismissed }) {
+		state.qualityWarningTooltipDismissed = qualityWarningTooltipDismissed
+	},
 	setParticipantHandRaised(state, { sessionId, raisedHand }) {
 		if (!sessionId) {
 			throw new Error('Missing or empty sessionId argument in call to setParticipantHandRaised')
@@ -115,6 +120,8 @@ const actions = {
 			isGrid = (isGrid === 'true')
 		}
 		context.dispatch('setCallViewMode', { isGrid: isGrid, isStripeOpen: true })
+
+		context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: false })
 	},
 
 	leaveCall(context) {
@@ -206,6 +213,10 @@ const actions = {
 		})
 		context.commit('presentationStarted', false)
 	},
+
+	dismissQualityWarningTooltip(context) {
+		context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: true })
+	},
 }
 
 export default { state, mutations, getters, actions }