From c20602d3d6dbff92f56223dee27a7d39affb4e16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Mon, 26 Apr 2021 12:50:14 +0200
Subject: [PATCH] Fix quality warning tooltip not staying dismissed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The flag that keep track of whether the quality warning tooltip was
dismissed was a local data of the LocalMediaControls component, so it
was reset when a new instance of the component was created again. As a
new instance could be created several times during the same call (for
example, when switching between speaker and grid mode) the warning
tooltip could appear again after being dismissed. Now the flag is kept
in the store and shared between different instances.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 .../CallView/shared/LocalMediaControls.vue        | 15 +++++++++++----
 src/store/callViewStore.js                        | 13 +++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index f637e030ae8..d7aebdb1ca2 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -118,7 +118,7 @@
 						<button
 							v-if="!isQualityWarningTooltipDismissed"
 							class="hint__button"
-							@click="isQualityWarningTooltipDismissed = true">
+							@click="dismissQualityWarningTooltip">
 							{{ t('spreed', 'Dismiss') }}
 						</button>
 					</div>
@@ -183,7 +183,6 @@ export default {
 			screenSharingMenuOpen: false,
 			splitScreenSharingMenu: false,
 			boundaryElement: document.querySelector('.main-view'),
-			isQualityWarningTooltipDismissed: false,
 			mouseover: false,
 		}
 	},
@@ -314,6 +313,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)
 		},
@@ -469,16 +472,20 @@ 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()
 			}
 		},
 
 		handleStopFollowing() {
 			this.$store.dispatch('selectedVideoPeerId', null)
 		},
+
+		dismissQualityWarningTooltip() {
+			this.$store.dispatch('dismissQualityWarningTooltip')
+		},
 	},
 }
 </script>
diff --git a/src/store/callViewStore.js b/src/store/callViewStore.js
index ee1391a5984..fc7bad8f0e0 100644
--- a/src/store/callViewStore.js
+++ b/src/store/callViewStore.js
@@ -25,6 +25,7 @@ import Vue from 'vue'
 const state = {
 	isGrid: false,
 	selectedVideoPeerId: null,
+	qualityWarningTooltipDismissed: false,
 	backgroundImageAverageColorCache: {},
 }
 
@@ -35,6 +36,7 @@ const getters = {
 	selectedVideoPeerId: (state) => {
 		return state.selectedVideoPeerId
 	},
+	isQualityWarningTooltipDismissed: (state) => state.qualityWarningTooltipDismissed,
 	getCachedBackgroundImageAverageColor: (state) => (videoBackgroundId) => {
 		return state.backgroundImageAverageColorCache[videoBackgroundId]
 	},
@@ -48,6 +50,9 @@ const mutations = {
 	selectedVideoPeerId(state, value) {
 		state.selectedVideoPeerId = value
 	},
+	setQualityWarningTooltipDismissed(state, { qualityWarningTooltipDismissed }) {
+		state.qualityWarningTooltipDismissed = qualityWarningTooltipDismissed
+	},
 	setCachedBackgroundImageAverageColor(state, { videoBackgroundId, backgroundImageAverageColor }) {
 		Vue.set(state.backgroundImageAverageColorCache, videoBackgroundId, backgroundImageAverageColor)
 	},
@@ -64,6 +69,10 @@ const actions = {
 		context.commit('selectedVideoPeerId', value)
 	},
 
+	joinCall(context, { token }) {
+		context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: false })
+	},
+
 	leaveCall(context) {
 		context.commit('clearBackgroundImageAverageColorCache')
 	},
@@ -71,6 +80,10 @@ const actions = {
 	setCachedBackgroundImageAverageColor(context, { videoBackgroundId, backgroundImageAverageColor }) {
 		context.commit('setCachedBackgroundImageAverageColor', { videoBackgroundId, backgroundImageAverageColor })
 	},
+
+	dismissQualityWarningTooltip(context) {
+		context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: true })
+	},
 }
 
 export default { state, mutations, getters, actions }