refactor: add examples

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

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'
 

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',

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))
 		},
 	},
 }

src/utils/formattedTime.js → 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 ? '--:--' : '-- : --'
 	}