fine tuning

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/TopBar/CallTime.vue

@@ -20,14 +20,13 @@
 
 <template>
 	<NcPopover class="call-time"
-		auto-hide
 		:menu-title="callTime"
 		:shown.sync="showPopover"
-		:focus-trap=" isStartingRecording || isRecording "
+		:focus-trap=" isShowRecordingStatus "
 		:triggers="[]"
 		:container="container">
 		<template #trigger>
-			<NcButton :disabled="(!isShowRecordingStatus || !isModerator ) && !OneHourHintshown"
+			<NcButton :disabled="(!isShowRecordingStatus || !isModerator ) && !isCallDurationHintShown"
 				:wide="true"
 				:title="recordingButtonTitle"
 				type="tertiary"
@@ -45,28 +44,30 @@
 		</template>
 
 		<!--one hour hint-->
-		<span v-if="OneHourHintshown" class="one-hour-hint"> {{ t('spreed', 'The call has been running for one hour.') }} </span>
+		<span v-if="isCallDurationHintShown" class="one-hour-hint"> {{ t('spreed', 'The call has been running for one hour.') }} </span>
 
 		<!--Moderator's buttons-->
-		<hr v-if=" isStartingRecording || isRecording" class="solid">
-		<NcButton v-if="isStartingRecording"
-			type="tertiary-no-background"
-			:wide="true"
-			@click="stopRecording">
-			<template #icon>
-				<NcLoadingIcon :size="20" />
-			</template>
-			{{ t('spreed', 'Cancel recording start') }}
-		</NcButton>
-		<NcButton v-else-if="isRecording"
-			type="tertiary-no-background"
-			:wide="true"
-			@click="stopRecording">
-			<template #icon>
-				<StopIcon :size="20" />
-			</template>
-			{{ t('spreed', 'Stop recording') }}
-		</NcButton>
+		<template v-if="isShowRecordingStatus">
+			<hr v-if="isCallDurationHintShown" class="solid">
+			<NcButton v-if="isStartingRecording"
+				type="tertiary-no-background"
+				:wide="true"
+				@click="stopRecording">
+				<template #icon>
+					<NcLoadingIcon :size="20" />
+				</template>
+				{{ t('spreed', 'Cancel recording start') }}
+			</NcButton>
+			<NcButton v-else-if="isRecording"
+				type="tertiary-no-background"
+				:wide="true"
+				@click="stopRecording">
+				<template #icon>
+					<StopIcon :size="20" />
+				</template>
+				{{ t('spreed', 'Stop recording') }}
+			</NcButton>
+		</template>
 	</NcPopover>
 </template>
 
@@ -108,8 +109,9 @@ export default {
 		return {
 			callTime: undefined,
 			showPopover: false,
-			OneHourHintshown: false,
+			isCallDurationHintShown: false,
 			timer: null,
+			untilCallDurationHintShown: null,
 		}
 	},
 
@@ -187,16 +189,24 @@ export default {
 	mounted() {
 		// Start the timer when mounted
 		this.timer = setInterval(this.computeElapsedTime, 1000)
-		this.untilOneHourHint = (1000 * 60 * 60) - this.timer + 1
-		setTimeout(() => {
-			this.showOneHourHint()
-		}, this.untilOneHourHint)
 	},
 
 	beforeDestroy() {
 		clearInterval(this.timer)
 	},
 
+	watch: {
+
+		callTime(value) {
+			if (value && !this.untilCallDurationHintShown) {
+				this.untilCallDurationHintShown = (1000 * 35) - value + 1
+				setTimeout(() => {
+					this.showOneHourHint()
+				}, this.untilCallDurationHintShown)
+			}
+		},
+	},
+
 	methods: {
 		stopRecording() {
 			this.$store.dispatch('stopCallRecording', {
@@ -215,7 +225,7 @@ export default {
 		showOneHourHint() {
 
 			this.showPopover = true
-			this.OneHourHintshown = true
+			this.isCallDurationHintShown = true
 
 			// close the popover after 10 seconds
 			if (this.$store.getters.windowIsVisible()) {
@@ -236,11 +246,11 @@ export default {
 <style lang="scss" scoped>
 
 .solid {
-	margin: 0px;
+	margin: 0;
 }
-.one-hour-hint{
+.one-hour-hint {
 	display: flex;
-	padding: calc(var(--default-grid-baseline) * 2);;
+	padding: calc(var(--default-grid-baseline) * 2);
 }
 .call-time {
 	display: flex;