[stable18] Warn user on high load

package.json

@@ -40,6 +40,7 @@
 		"vue-at": "^2.5.0-beta.2",
 		"vue-clipboard2": "^0.3.1",
 		"vue-fragment": "^1.5.1",
+		"vue-material-design-icons": "^4.7.1",
 		"vue-observe-visibility": "^0.4.6",
 		"vue-prevent-unload": "^0.2.3",
 		"vue-router": "^3.1.5",

src/components/CallView/LocalMediaControls.vue

@@ -80,13 +80,48 @@
 				</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 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 {
 
@@ -96,6 +131,11 @@ export default {
 		tooltip: Tooltip,
 	},
 
+	components: {
+		NetworkStrength2Alert,
+		Popover,
+	},
+
 	props: {
 		model: {
 			type: Object,
@@ -109,6 +149,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		qualityWarningAriaLabel: {
+			type: String,
+			default: '',
+		},
+		qualityWarningTooltip: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	data() {
@@ -117,6 +165,9 @@ export default {
 			speakingWhileMutedNotification: null,
 			screenSharingMenuOpen: false,
 			splitScreenSharingMenu: false,
+			boundaryElement: document.querySelector('.main-view'),
+			isQualityWarningTooltipDismissed: false,
+			mouseover: false,
 		}
 	},
 
@@ -246,6 +297,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() {
@@ -382,6 +437,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>
@@ -478,4 +545,24 @@ export default {
 #muteWrapper .icon-audio-off + .volume-indicator {
 	background: linear-gradient(0deg, gray, white 36px);
 }
+
+.network-connection-state {
+	position: absolute;
+	bottom: 0;
+	right: 2px;
+	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>

src/components/CallView/LocalVideo.vue

@@ -19,7 +19,7 @@
   -->
 
 <template>
-	<div id="localVideoContainer" class="videoContainer videoView" :class="{ speaking: localMediaModel.attributes.speaking }">
+	<div id="localVideoContainer" class="videoContainer videoView" :class="videoContainerClass">
 		<video v-show="localMediaModel.attributes.videoEnabled" id="localVideo" ref="video" />
 		<div v-if="!localMediaModel.attributes.videoEnabled" class="avatar-container">
 			<Avatar v-if="userId"
@@ -38,6 +38,8 @@
 			:model="localMediaModel"
 			:local-call-participant-model="localCallParticipantModel"
 			:screen-sharing-button-hidden="useConstrainedLayout"
+			:quality-warning-aria-label="qualityWarningAriaLabel"
+			:quality-warning-tooltip="qualityWarningTooltip"
 			@switchScreenToId="$emit('switchScreenToId', $event)" />
 	</div>
 </template>
@@ -49,6 +51,8 @@ import LocalMediaControls from './LocalMediaControls'
 import Hex from 'crypto-js/enc-hex'
 import SHA1 from 'crypto-js/sha1'
 import { showError } from '@nextcloud/dialogs'
+import { callAnalyzer } from '../../utils/webrtc/index'
+import { CONNECTION_QUALITY } from '../../utils/webrtc/analyzers/PeerConnectionAnalyzer'
 
 export default {
 
@@ -74,8 +78,21 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			callAnalyzer: callAnalyzer,
+			qualityWarningInGracePeriodTimeout: null,
+		}
+	},
+
 	computed: {
 
+		videoContainerClass() {
+			return {
+				'speaking': this.localMediaModel.attributes.speaking,
+			}
+		},
+
 		userId() {
 			return this.$store.getters.getUserId()
 		},
@@ -112,6 +129,93 @@ export default {
 			return this.localMediaModel.attributes.localStream && this.localMediaModel.attributes.localStreamRequestVideoError
 		},
 
+		showQualityWarning() {
+			return this.senderConnectionQualityIsBad || this.qualityWarningInGracePeriodTimeout
+		},
+
+		senderConnectionQualityIsBad() {
+			return this.senderConnectionQualityAudioIsBad
+				|| this.senderConnectionQualityVideoIsBad
+				|| this.senderConnectionQualityScreenIsBad
+		},
+
+		senderConnectionQualityAudioIsBad() {
+			return callAnalyzer
+				&& (callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.VERY_BAD
+				 || callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+		},
+
+		senderConnectionQualityVideoIsBad() {
+			return callAnalyzer
+				&& (callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.VERY_BAD
+				 || callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+		},
+
+		senderConnectionQualityScreenIsBad() {
+			return callAnalyzer
+				&& (callAnalyzer.attributes.senderConnectionQualityScreen === CONNECTION_QUALITY.VERY_BAD
+				 || callAnalyzer.attributes.senderConnectionQualityScreen === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+		},
+
+		qualityWarningAriaLabel() {
+			let label = ''
+			if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
+				label = t('spreed', 'Bad sent video and screen quality.')
+			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.localScreen) {
+				label = t('spreed', 'Bad sent screen quality.')
+			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled) {
+				label = t('spreed', 'Bad sent video quality.')
+			} else if (this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
+				label = t('spreed', 'Bad sent audio, video and screen quality.')
+			} else if (this.localMediaModel.attributes.localScreen) {
+				label = t('spreed', 'Bad sent audio and screen quality.')
+			} else if (this.localMediaModel.attributes.videoEnabled) {
+				label = t('spreed', 'Bad sent audio and video quality.')
+			} else {
+				label = t('spreed', 'Bad sent audio quality.')
+			}
+
+			return label
+		},
+
+		qualityWarningTooltip() {
+			if (!this.showQualityWarning) {
+				return null
+			}
+
+			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) {
+				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 {
+				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 tooltip
+		},
 	},
 
 	watch: {
@@ -131,6 +235,20 @@ export default {
 			},
 		},
 
+		senderConnectionQualityIsBad: function(senderConnectionQualityIsBad) {
+			if (!senderConnectionQualityIsBad) {
+				return
+			}
+
+			if (this.qualityWarningInGracePeriodTimeout) {
+				window.clearTimeout(this.qualityWarningInGracePeriodTimeout)
+			}
+
+			this.qualityWarningInGracePeriodTimeout = window.setTimeout(() => {
+				this.qualityWarningInGracePeriodTimeout = null
+			}, 10000)
+		},
+
 	},
 
 	mounted() {
@@ -165,4 +283,5 @@ export default {
 @import '../../assets/avatar.scss';
 @include avatar-mixin(64px);
 @include avatar-mixin(128px);
+
 </style>