diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2023-01-24 19:57:59 +0100 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2023-01-24 20:05:17 +0100 |
commit | 852d07a6a57ce600e1a2b8e96748f9c5150d41d1 (patch) | |
tree | 295a980fb99a74ef17e892385daf5f5d028ec039 | |
parent | ec67637a44de6a9bfccb092f265f942b5e56fd57 (diff) |
apply changes after code-reviews
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
-rw-r--r-- | src/components/CallView/shared/LocalMediaControls.vue | 2 | ||||
-rw-r--r-- | src/components/DeviceChecker/DeviceChecker.vue | 2 | ||||
-rw-r--r-- | src/components/MediaDevicesPreview.vue | 12 | ||||
-rw-r--r-- | src/components/VolumeIndicator/VolumeIndicator.vue | 62 |
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; |