apply changes after code-reviews

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

4 files changed, 40 insertions, 38 deletions

diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 462aa5ac7..33ccccad4 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -71,7 +71,7 @@
 						:current-volume="model.attributes.currentVolume"
 						:volume-threshold="model.attributes.volumeThreshold"
 						primary-color="#ffffff"
-						overlay-color="#999999" />
+						overlay-muted-color="#888888" />
 				</template>
 			</NcButton>
 			<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['v']"
diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 1f710dc90..2393926d2 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -71,7 +71,7 @@
 							:audio-enabled="audioOn"
 							:current-volume="currentVolume"
 							:volume-threshold="volumeThreshold"
-							:overlay-color="'#999999'" />
+							overlay-muted-color="#888888" />
 					</template>
 				</NcButton>
 
diff --git a/src/components/MediaDevicesPreview.vue b/src/components/MediaDevicesPreview.vue
index 33c6932f7..7cd75fe1d 100644
--- a/src/components/MediaDevicesPreview.vue
+++ b/src/components/MediaDevicesPreview.vue
@@ -102,18 +102,6 @@ export default {
 	},
 
 	mixins: [devices],
-
-	data() {
-		return {
-			mounted: false,
-			currentVolume: -100,
-			volumeThreshold: -100,
-		}
-	},
-
-	mounted() {
-		this.mounted = true
-	},
 }
 </script>
 
diff --git a/src/components/VolumeIndicator/VolumeIndicator.vue b/src/components/VolumeIndicator/VolumeIndicator.vue
index 5df23b73e..c4739c468 100644
--- a/src/components/VolumeIndicator/VolumeIndicator.vue
+++ b/src/components/VolumeIndicator/VolumeIndicator.vue
@@ -20,25 +20,23 @@
 -->
 
 <template>
-	<span class="volume-indicator"
+	<span class="volume-indicator-wrapper"
 		:style="{ height: size + 'px', width: size + 'px' }">
-		<span class="volume-indicator-primary"
+		<span class="volume-indicator volume-indicator-primary"
 			:style="{
-				height: size - 1 - currentVolumeIndicatorHeight + 'px',
+				height: size - 2 - currentVolumeIndicatorHeight + 'px',
 			}">
 			<Microphone v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
 			<MicrophoneOff v-else :size="size" :fill-color="primaryColor" />
 		</span>
 
 		<span v-show="audioPreviewAvailable"
-			class="volume-indicator-overlay"
+			class="volume-indicator volume-indicator-overlay"
 			:class="{ 'volume-indicator-overlay-mute': !audioEnabled }"
 			:style="{
 				height: currentVolumeIndicatorHeight + 'px',
 			}">
-			<Microphone v-if="audioEnabled"
-				:size="size"
-				:fill-color="overlayMutedColor" />
+			<Microphone v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
 			<MicrophoneOff v-else :size="size" :fill-color="overlayMutedColor" />
 		</span>
 	</span>
@@ -91,6 +89,11 @@ export default {
 			type: String,
 			default: undefined,
 		},
+
+		overlayMutedColor: {
+			type: String,
+			default: undefined,
+		},
 	},
 
 	computed: {
@@ -102,45 +105,56 @@ export default {
 				return 0
 			}
 
-			return this.size * (1 - this.currentVolume / this.volumeThreshold)
+			return this.size * this.computeVolumeLevel(20)
 		},
+	},
 
-		overlayMutedColor() {
-			return !this.audioEnabled ? this.overlayColor : undefined
+	methods: {
+		/**
+		 * Compute volume proportion based on currentVolume [-100, 0]
+		 * and volumeThreshold. Returns number between [0, 1]
+		 *
+		 * @param {number} overload to visually increase volume level
+		 */
+		computeVolumeLevel(overload = 0) {
+			const computedLevel
+				= (this.volumeThreshold - this.currentVolume)
+				/ (this.volumeThreshold + overload)
+
+			if (computedLevel < 0) return 0
+			else if (computedLevel > 1) return 1
+			else return computedLevel
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-.volume-indicator {
+.volume-indicator-wrapper {
 	position: relative;
 }
 
-.volume-indicator-primary {
+.volume-indicator {
 	position: absolute;
-	top: 0;
 	left: 50%;
 	transform: translateX(-50%);
 
+	width: 100%;
+	height: 100%;
+
 	overflow: hidden;
+
+	transition: height 0.2s linear;
 }
 
-.volume-indicator-overlay {
-	/* The button height is 44px; the volume indicator covers primary icon and has
-	* the same size, but its height value will be changed based on the current volume */
-	width: 100%;
-	height: 100%;
+.volume-indicator-primary {
+	top: 0;
+}
 
-	/* Position of container with overlay icon is centered to cover primary icon */
-	position: absolute;
+.volume-indicator-overlay {
 	bottom: 0;
-	left: 50%;
-	transform: translateX(-50%);
 	pointer-events: none;
 
-	overflow: hidden;
-
 	& > span {
 		position: absolute;
 		bottom: 0;