Create tooltip objects and add actions

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

Author: Marco Ambrosini

src/components/CallView/shared/LocalMediaControls.vue

@@ -82,17 +82,33 @@
 		</div>
 		<div class="network-connection-state">
 			<Popover
+				v-if="hasQualityWarning"
 				:boundaries-element="boundaryElement"
-				trigger="manual"
+				trigger="hover"
 				:open="showQualityWarningTooltip">
 				<NetworkStrength2Alert
 					slot="trigger"
 					fill-color="#e9322d"
 					title=""
-					:size="24" />
-				<template>
-					<span>{{ qualityWarningTooltip }}</span>
-				</template>
+					:size="24"
+					@mouseover="mouseover = true"
+					@mouseleave="mouseover = false" />
+				<div class="hint">
+					<span>{{ qualityWarningTooltip.message }}</span>
+					<div class="hint__actions">
+						<button
+							v-if="!mouseover && !isQualityWarningTooltipDismissed"
+							@click="isQualityWarningTooltipDismissed = true">
+							{{ t('spreed', 'Dismiss') }}
+						</button>
+						<button
+							v-if="hasQualitywarningTooltipAction"
+							class="primary"
+							@click="lowerUploadRate">
+							{{ qualityWarningTooltip.actionLabel }}
+						</button>
+					</div>
+				</div>
 			</Popover>
 		</div>
 	</div>
@@ -137,8 +153,8 @@ export default {
 			default: '',
 		},
 		qualityWarningTooltip: {
-			type: String,
-			default: '',
+			type: Object,
+			required: true,
 		},
 	},
 
@@ -149,6 +165,8 @@ export default {
 			screenSharingMenuOpen: false,
 			splitScreenSharingMenu: false,
 			boundaryElement: document.querySelector('.main-view'),
+			isQualityWarningTooltipDismissed: false,
+			mouseover: false,
 		}
 	},
 
@@ -278,8 +296,20 @@ export default {
 			return (this.model.attributes.localScreen || this.splitScreenSharingMenu) ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
 		},
 
+		hasQualityWarning() {
+			return this.qualityWarningTooltip.message !== ''
+		},
+
+		hasQualityWarningTooltip() {
+			return this.hasQualityWarning && !this.isQualityWarningTooltipDismissed
+		},
+
+		hasQualitywarningTooltipAction() {
+			return this.qualityWarningTooltip.action !== ''
+		},
+
 		showQualityWarningTooltip() {
-			return this.qualityWarningTooltip !== ''
+			return this.hasQualityWarningTooltip && !this.isQualityWarningTooltipDismissed
 		},
 
 	},
@@ -418,6 +448,18 @@ export default {
 				}
 			})
 		},
+		lowerUploadRate() {
+			if (this.qualityWarningTooltip.action === '') {
+				return
+			}
+			if (this.qualityWarningTooltip.action === 'disableScreenShare') {
+				this.model.disableScreen() // check the method
+				this.isQualityWarningTooltipDismissed = true
+			} else if (this.qualityWarningTooltip.action === 'disableVideo') {
+				this.model.disableVideo()
+				this.isQualityWarningTooltipDismissed = true
+			}
+		},
 	},
 }
 </script>
@@ -525,4 +567,14 @@ export default {
 	width: 32px;
 	height: 32px;
 }
+
+.hint {
+	padding: 4px;
+	text-align: left;
+	&__actions{
+		display: flex;
+		justify-content: space-between;
+		padding-top:4px;
+	}
+}
 </style>

src/components/CallView/shared/LocalVideo.vue

@@ -170,23 +170,23 @@ export default {
 
 		senderConnectionQualityIsBad() {
 			return true
-			return this.senderConnectionQualityAudioIsBad
-				|| this.senderConnectionQualityVideoIsBad
-				|| this.senderConnectionQualityScreenIsBad
+			// return this.senderConnectionQualityAudioIsBad
+			// || this.senderConnectionQualityVideoIsBad
+			// || this.senderConnectionQualityScreenIsBad
 		},
 
 		senderConnectionQualityAudioIsBad() {
 			return true
-			return callAnalyzer
-				&& (callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.VERY_BAD
-				 || callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+			// return callAnalyzer
+			// && (callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.VERY_BAD
+			// || callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
 		},
 
 		senderConnectionQualityVideoIsBad() {
 			return true
-			return callAnalyzer
-				&& (callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.VERY_BAD
-				 || callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+			// return callAnalyzer
+			// && (callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.VERY_BAD
+			// || callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
 		},
 
 		senderConnectionQualityScreenIsBad() {
@@ -227,7 +227,11 @@ export default {
 
 		qualityWarningTooltip() {
 			if (!this.showQualityWarning) {
-				return ''
+				return {
+					message: '',
+					actionLabel: '',
+					action: '',
+				}
 			}
 
 			return this.qualityWarningScreenTooltip
@@ -240,41 +244,57 @@ export default {
 				return ''
 			}
 
-			return t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.')
+			return {
+				message: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.'),
+				actionLabel: '',
+				action: '',
+			}
 		},
 
 		qualityWarningVideoTooltip() {
 			if (!this.showQualityWarning || !this.localMediaModel.attributes.videoEnabled) {
 				return ''
 			}
 
-			let message = ''
+			const tooltip = {}
 			if (this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.localScreen) {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.')
+				tooltip.message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.')
+				tooltip.actionLabel = t('spreed', 'Disable Video')
+				tooltip.action = 'disableVideo'
 			} else if (this.localMediaModel.attributes.audioEnabled) {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.')
+				tooltip.message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.')
+				tooltip.actionLabel = t('spreed', 'Disable Video')
+				tooltip.action = 'disableVideo'
 			} else if (this.localMediaModel.attributes.localScreen) {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you. To improve the situation try to disable your video while doing a screenshare.')
+				tooltip.message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you. To improve the situation try to disable your video while doing a screenshare.')
+				tooltip.actionLabel = t('spreed', 'Disable Video')
+				tooltip.action = 'disableVideo'
 			} else {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
+				tooltip.message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
+				tooltip.actionLabel = t('spreed', '')
+				tooltip.action = ''
 			}
 
-			return message
+			return tooltip
 		},
 
 		qualityWarningScreenTooltip() {
 			if (!this.showQualityWarning || !this.localMediaModel.attributes.localScreen || this.localMediaModel.attributes.videoEnabled) {
 				return ''
 			}
 
-			let message = ''
+			const tooltip = {}
 			if (this.localMediaModel.attributes.audioEnabled) {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see your screen. To improve the situation try to disable your screenshare.')
+				tooltip.message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see your screen. To improve the situation try to disable your screenshare.')
+				tooltip.actionLabel = t('spreed', 'Disable screenshare')
+				tooltip.action = 'disableScreenShare'
 			} else {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
+				tooltip.message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
+				tooltip.actionLabel = t('spreed', '')
+				tooltip.action = ''
 			}
 
-			return message
+			return tooltip
 		},
 	},