From fbe88b73150400c2e540ab1c5fd61314840ba83c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Sun, 25 Feb 2024 21:43:56 +0100
Subject: [PATCH] refactor: add examples

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Participant/Participant.vue               |  2 +-
 src/components/TopBar/CallTime.vue            |  2 +-
 .../VolumeIndicator/VolumeIndicator.vue       | 28 ++++++++++---------
 .../{formattedTime.js => formattedTime.ts}    |  7 ++---
 4 files changed, 20 insertions(+), 19 deletions(-)
 rename src/utils/{formattedTime.js => formattedTime.ts} (70%)

diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index 6ba481ea524f..0aaa0bfb7499 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -376,7 +376,7 @@ import {
 	callSIPUnmutePhone,
 	callSIPSendDTMF,
 } from '../../../../../services/callsService.js'
-import { formattedTime } from '../../../../../utils/formattedTime.js'
+import { formattedTime } from '../../../../../utils/formattedTime.ts'
 import { readableNumber } from '../../../../../utils/readableNumber.js'
 import { getStatusMessage } from '../../../../../utils/userStatus.js'
 
diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index f887489bdda3..db6a13b269e2 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/src/components/TopBar/CallTime.vue
@@ -81,7 +81,7 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 import { CALL } from '../../constants.js'
-import { formattedTime } from '../../utils/formattedTime.js'
+import { formattedTime } from '../../utils/formattedTime.ts'
 
 export default {
 	name: 'CallTime',
diff --git a/src/components/VolumeIndicator/VolumeIndicator.vue b/src/components/VolumeIndicator/VolumeIndicator.vue
index e47cd6e94622..e6cd5ad6c701 100644
--- a/src/components/VolumeIndicator/VolumeIndicator.vue
+++ b/src/components/VolumeIndicator/VolumeIndicator.vue
@@ -39,7 +39,7 @@
 	</span>
 </template>
 
-<script>
+<script lang="ts">
 import Microphone from 'vue-material-design-icons/Microphone.vue'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
 
@@ -99,25 +99,29 @@ export default {
 	},
 
 	computed: {
-		iconOffsetBottom() {
+		iconOffsetBottom(): number {
 			return this.size / 8
 		},
 
-		iconPrimaryHeight() {
+		iconSizeWithoutOffset(): number {
+			return this.size - this.iconOffsetBottom
+		},
+
+		iconPrimaryHeight(): number {
 			return this.audioPreviewAvailable
-				? this.size - this.iconOffsetBottom - this.currentVolumeIndicatorHeight
+				? this.iconSizeWithoutOffset - this.currentVolumeIndicatorHeight
 				: this.size
 		},
 
-		iconOverlayHeight() {
+		iconOverlayHeight(): number {
 			return this.iconOffsetBottom / 2 + this.currentVolumeIndicatorHeight
 		},
 
-		hasOverload() {
-			return this.audioPreviewAvailable && this.currentVolumeIndicatorHeight === this.size - this.iconOffsetBottom
+		hasOverload(): boolean {
+			return this.audioPreviewAvailable && this.currentVolumeIndicatorHeight === this.iconSizeWithoutOffset
 		},
 
-		currentVolumeIndicatorHeight() {
+		currentVolumeIndicatorHeight(): number {
 			if (!this.audioPreviewAvailable) {
 				return 0
 			}
@@ -129,17 +133,15 @@ export default {
 				return 0
 			}
 
-			return (this.size - this.iconOffsetBottom) * this.computeVolumeLevel()
+			return (this.iconSizeWithoutOffset) * this.computeVolumeLevel()
 		},
 	},
 
 	methods: {
-		computeVolumeLevel() {
+		computeVolumeLevel(): number {
 			const computedLevel = (this.volumeThreshold - this.currentVolume) / (this.volumeThreshold - this.overloadLimit)
 
-			if (computedLevel < 0) return 0
-			else if (computedLevel > 1) return 1
-			else return computedLevel
+			return Math.min(1, Math.max(0, computedLevel))
 		},
 	},
 }
diff --git a/src/utils/formattedTime.js b/src/utils/formattedTime.ts
similarity index 70%
rename from src/utils/formattedTime.js
rename to src/utils/formattedTime.ts
index 9a528b10ddd5..dab7c9bc39c0 100644
--- a/src/utils/formattedTime.js
+++ b/src/utils/formattedTime.ts
@@ -1,11 +1,10 @@
 /**
  * Calculates the stopwatch string given the time (ms)
  *
- * @param {number} time the time in ms
- * @param {boolean} [condensed=false] the format of string to show
- * @return {string} The formatted time
+ * @param time the time in ms
+ * @param [condensed=false] the format of string to show
  */
-function formattedTime(time, condensed = false) {
+function formattedTime(time: number, condensed: boolean = false): string {
 	if (!time) {
 		return condensed ? '--:--' : '-- : --'
 	}