Merge pull request #3923 from nextcloud/backport/3907/stable19

[stable19] Dedicated connection warning icon

2 files changed, 116 insertions, 107 deletions

diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index d68481bca..5b801b81d 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -80,14 +80,49 @@
 				</li>
 			</ul>
 		</div>
+		<div class="network-connection-state">
+			<Popover
+				v-if="qualityWarningTooltip"
+				:boundaries-element="boundaryElement"
+				:aria-label="qualityWarningAriaLabel"
+				trigger="hover"
+				:auto-hide="false"
+				:open="showQualityWarningTooltip">
+				<NetworkStrength2Alert
+					slot="trigger"
+					fill-color="#e9322d"
+					title=""
+					:size="24"
+					@mouseover="mouseover = true"
+					@mouseleave="mouseover = false" />
+				<div class="hint">
+					<span>{{ qualityWarningTooltip.content }}</span>
+					<div class="hint__actions">
+						<button
+							v-if="qualityWarningTooltip.action"
+							class="primary"
+							@click="executeQualityWarningTooltipAction">
+							{{ qualityWarningTooltip.actionLabel }}
+						</button>
+						<button
+							v-if="!isQualityWarningTooltipDismissed"
+							@click="isQualityWarningTooltipDismissed = true">
+							{{ t('spreed', 'Dismiss') }}
+						</button>
+					</div>
+				</div>
+			</Popover>
+		</div>
 	</div>
 </template>
 
 <script>
 import escapeHtml from 'escape-html'
 import { showMessage } from '@nextcloud/dialogs'
+import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner'
+import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert'
 
 export default {
 
@@ -97,6 +132,11 @@ export default {
 		tooltip: Tooltip,
 	},
 
+	components: {
+		NetworkStrength2Alert,
+		Popover,
+	},
+
 	props: {
 		model: {
 			type: Object,
@@ -110,15 +150,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		qualityWarningAudioTooltip: {
-			type: Object,
-			default: null,
-		},
-		qualityWarningVideoTooltip: {
-			type: Object,
-			default: null,
+		qualityWarningAriaLabel: {
+			type: String,
+			default: '',
 		},
-		qualityWarningScreenTooltip: {
+		qualityWarningTooltip: {
 			type: Object,
 			default: null,
 		},
@@ -130,6 +166,9 @@ export default {
 			speakingWhileMutedNotification: null,
 			screenSharingMenuOpen: false,
 			splitScreenSharingMenu: false,
+			boundaryElement: document.querySelector('.main-view'),
+			isQualityWarningTooltipDismissed: false,
+			mouseover: false,
 		}
 	},
 
@@ -152,10 +191,6 @@ export default {
 				}
 			}
 
-			if (this.qualityWarningAudioTooltip) {
-				return this.qualityWarningAudioTooltip
-			}
-
 			if (this.speakingWhileMutedNotification) {
 				return {
 					content: this.speakingWhileMutedNotification,
@@ -212,10 +247,6 @@ export default {
 				return t('spreed', 'No camera')
 			}
 
-			if (this.qualityWarningVideoTooltip) {
-				return this.qualityWarningVideoTooltip
-			}
-
 			if (this.model.attributes.videoEnabled) {
 				return t('spreed', 'Disable video (v)')
 			}
@@ -256,10 +287,6 @@ export default {
 				return null
 			}
 
-			if (this.qualityWarningScreenTooltip) {
-				return this.qualityWarningScreenTooltip
-			}
-
 			return (this.model.attributes.localScreen || this.splitScreenSharingMenu) ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
 		},
 
@@ -271,6 +298,10 @@ export default {
 			return (this.model.attributes.localScreen || this.splitScreenSharingMenu) ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
 		},
 
+		showQualityWarningTooltip() {
+			return this.qualityWarningTooltip && (!this.isQualityWarningTooltipDismissed || this.mouseover)
+		},
+
 	},
 
 	created() {
@@ -407,6 +438,18 @@ export default {
 				}
 			})
 		},
+		executeQualityWarningTooltipAction() {
+			if (this.qualityWarningTooltip.action === '') {
+				return
+			}
+			if (this.qualityWarningTooltip.action === 'disableScreenShare') {
+				this.model.stopSharingScreen()
+				this.isQualityWarningTooltipDismissed = true
+			} else if (this.qualityWarningTooltip.action === 'disableVideo') {
+				this.model.disableVideo()
+				this.isQualityWarningTooltipDismissed = true
+			}
+		},
 	},
 }
 </script>
@@ -506,4 +549,24 @@ export default {
 #muteWrapper .icon-audio-off + .volume-indicator {
 	background: linear-gradient(0deg, gray, white 36px);
 }
+
+.network-connection-state {
+	position: absolute;
+	bottom: 0;
+	right: 16px;
+	width: 32px;
+	height: 32px;
+	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
+}
+
+.hint {
+	padding: 4px;
+	text-align: left;
+	&__actions{
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: space-between;
+		padding-top:4px;
+	}
+}
 </style>
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index ce4b70bc2..17dac3c51 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -21,8 +21,7 @@
 <template>
 	<div id="localVideoContainer"
 		class="videoContainer videoView"
-		:class="videoContainerClass"
-		:aria-label="videoContainerAriaLabel">
+		:class="videoContainerClass">
 		<video v-show="localMediaModel.attributes.videoEnabled"
 			id="localVideo"
 			ref="video"
@@ -51,9 +50,8 @@
 				:model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
 				:screen-sharing-button-hidden="isSidebar"
-				:quality-warning-audio-tooltip="qualityWarningAudioTooltip"
-				:quality-warning-video-tooltip="qualityWarningVideoTooltip"
-				:quality-warning-screen-tooltip="qualityWarningScreenTooltip"
+				:quality-warning-aria-label="qualityWarningAriaLabel"
+				:quality-warning-tooltip="qualityWarningTooltip"
 				@switchScreenToId="$emit('switchScreenToId', $event)" />
 		</transition>
 	</div>
@@ -110,7 +108,6 @@ export default {
 		return {
 			callAnalyzer: callAnalyzer,
 			qualityWarningInGracePeriodTimeout: null,
-			qualityWarningWasRecentlyShownTimeout: null,
 		}
 	},
 
@@ -121,18 +118,9 @@ export default {
 				'speaking': this.localMediaModel.attributes.speaking,
 				'video-container-grid': this.isGrid,
 				'video-container-stripe': this.isStripe,
-				'bad-connection-quality': this.showQualityWarning,
 			}
 		},
 
-		videoContainerAriaLabel() {
-			if (!this.showQualityWarning) {
-				return null
-			}
-
-			return this.qualityWarningAriaLabel
-		},
-
 		userId() {
 			return this.$store.getters.getUserId()
 		},
@@ -218,64 +206,43 @@ export default {
 			return label
 		},
 
-		// The quality warning tooltip is automatically shown only if the
-		// quality warning (dimmed video) has not been shown in the last minute.
-		// Otherwise the tooltip is hidden even if the warning is shown,
-		// although the tooltip can be shown anyway by hovering on the media
-		// button.
-		showQualityWarningTooltip() {
-			return !this.qualityWarningWasRecentlyShownTimeout
-		},
-
-		qualityWarningAudioTooltip() {
-			if (!this.showQualityWarning || !this.localMediaModel.attributes.audioEnabled || this.localMediaModel.attributes.videoEnabled || this.localMediaModel.attributes.localScreen) {
-				return null
-			}
-
-			return {
-				content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.'),
-				show: this.showQualityWarningTooltip,
-			}
-		},
-
-		qualityWarningVideoTooltip() {
-			if (!this.showQualityWarning || !this.localMediaModel.attributes.videoEnabled) {
+		qualityWarningTooltip() {
+			if (!this.showQualityWarning) {
 				return null
 			}
 
-			let message = ''
-			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.')
-			} 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.')
+			const tooltip = {}
+			if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
+				tooltip.content = 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 if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.localScreen) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
+				tooltip.actionLabel = ''
+				tooltip.action = ''
+			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
+				tooltip.actionLabel = ''
+				tooltip.action = ''
+			} else if (this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
+				tooltip.content = 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.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.')
-			} else {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
-			}
-
-			return {
-				content: message,
-				show: this.showQualityWarningTooltip,
-			}
-		},
-
-		qualityWarningScreenTooltip() {
-			if (!this.showQualityWarning || !this.localMediaModel.attributes.localScreen || this.localMediaModel.attributes.videoEnabled) {
-				return null
-			}
-
-			let message = ''
-			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.content = 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 if (this.localMediaModel.attributes.videoEnabled) {
+				tooltip.content = 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 {
-				message = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.')
+				tooltip.actionLabel = ''
+				tooltip.action = ''
 			}
 
-			return {
-				content: message,
-				show: this.showQualityWarningTooltip,
-			}
+			return tooltip
 		},
 	},
 
@@ -325,20 +292,6 @@ export default {
 			}, 10000)
 		},
 
-		showQualityWarning: function(showQualityWarning) {
-			if (showQualityWarning) {
-				return
-			}
-
-			if (this.qualityWarningWasRecentlyShownTimeout) {
-				window.clearTimeout(this.qualityWarningWasRecentlyShownTimeout)
-			}
-
-			this.qualityWarningWasRecentlyShownTimeout = window.setTimeout(() => {
-				this.qualityWarningWasRecentlyShownTimeout = null
-			}, 60000)
-		},
-
 	},
 
 	mounted() {
@@ -426,11 +379,4 @@ export default {
 	margin: auto;
 }
 
-.bad-connection-quality {
-	.video,
-	.avatar-container {
-		opacity: 0.5
-	}
-}
-
 </style>