Revert "Replace quality warning with tooltips on the local media butt…

…ons"

This reverts commit b92a161.

css/icons.scss

@@ -81,6 +81,9 @@
 		&.icon-screen-off {
 			background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
 		}
+		&.icon-error {
+			background-image: url(icon-color-path('error', 'actions', 'fff', 1, true));
+		}
 	}
 
 	.icon-favorite {

src/components/CallView/shared/LocalMediaControls.vue

@@ -110,18 +110,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		qualityWarningAudioTooltip: {
-			type: Object,
-			default: null,
-		},
-		qualityWarningVideoTooltip: {
-			type: Object,
-			default: null,
-		},
-		qualityWarningScreenTooltip: {
-			type: Object,
-			default: null,
-		},
 	},
 
 	data() {
@@ -152,10 +140,6 @@ export default {
 				}
 			}
 
-			if (this.qualityWarningAudioTooltip) {
-				return this.qualityWarningAudioTooltip
-			}
-
 			if (this.speakingWhileMutedNotification) {
 				return {
 					content: this.speakingWhileMutedNotification,
@@ -212,10 +196,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 +236,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')
 		},
 

src/components/CallView/shared/LocalVideo.vue

@@ -23,6 +23,12 @@
 		class="videoContainer videoView"
 		:class="videoContainerClass"
 		:aria-label="videoContainerAriaLabel">
+		<transition name="fade">
+			<span v-show="showQualityWarning"
+				v-tooltip="qualityWarningTooltip"
+				:aria-label="qualityWarningAriaLabel"
+				class="qualityWarning forced-white icon icon-error" />
+		</transition>
 		<video v-show="localMediaModel.attributes.videoEnabled"
 			id="localVideo"
 			ref="video"
@@ -51,9 +57,6 @@
 				: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"
 				@switchScreenToId="$emit('switchScreenToId', $event)" />
 		</transition>
 	</div>
@@ -75,6 +78,10 @@ export default {
 
 	name: 'LocalVideo',
 
+	directives: {
+		tooltip: Tooltip,
+	},
+
 	components: {
 		Avatar,
 		LocalMediaControls,
@@ -219,14 +226,29 @@ export default {
 		},
 
 		// 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.
+		// quality warning 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 warning.
 		showQualityWarningTooltip() {
 			return !this.qualityWarningWasRecentlyShownTimeout
 		},
 
+		qualityWarningTooltip() {
+			if (this.qualityWarningAudioTooltip) {
+				return this.qualityWarningAudioTooltip
+			}
+
+			if (this.qualityWarningVideoTooltip) {
+				return this.qualityWarningVideoTooltip
+			}
+
+			if (this.qualityWarningScreenTooltip) {
+				return this.qualityWarningScreenTooltip
+			}
+
+			return null
+		},
+
 		qualityWarningAudioTooltip() {
 			if (!this.showQualityWarning || !this.localMediaModel.attributes.audioEnabled) {
 				return null
@@ -433,4 +455,16 @@ export default {
 	}
 }
 
+.qualityWarning {
+	position: absolute;
+	right: 0;
+
+	width: 44px;
+	height: 44px;
+	background-size: 24px;
+
+	/* Needed to show in front of the avatar container. */
+	z-index: 10;
+}
+
 </style>