Add volume indicator for the local audio

The volume is shown as a vertical bar next to the audio icon that grows
and shrinks (with a fixed bottom position) depending on the volume
level. The bar is coloured with a gradient from green to yellow to red
for better clarity of the current volume.

The previous way of indicating speech (a pulse animation in the audio
icon) has not been modified; this is an additional visualization (only
for the local audio) to provide a more noticeable feedback to the user.

Both the existing button and the new bar had to be wrapped in a helper
div to include the volume bar in the old layout.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 27 insertions, 0 deletions

diff --git a/css/video.scss b/css/video.scss
index 8a0d909a4..981e50b4e 100644
--- a/css/video.scss
+++ b/css/video.scss
@@ -446,3 +446,30 @@ video {
 		opacity: 1;
 	}
 }
+
+
+
+#muteWrapper {
+	display: inline-block;
+
+	/* Make the wrapper the positioning context of the volume indicator. */
+	position: relative;
+}
+
+#muteWrapper .volume-indicator {
+	position: absolute;
+
+	width: 3px;
+	right: 0px;
+
+	/* The button height is 44px; the volume indicator button is 36px at
+	 * maximum, but its value will be changed based on the current volume; the
+	 * height change will reveal more or less of the gradient, which has
+	 * absolute dimensions and thus does not change when the height changes. */
+	height: 36px;
+	bottom: 4px;
+
+	background: linear-gradient(0deg, green, yellow, red 36px);
+
+	opacity: 0.7;
+}