diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index 405bf11eead..d43fa740eed 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/src/components/TopBar/CallTime.vue
@@ -20,17 +20,17 @@
-
+ @click="showPopover = !showPopover">
-
-
-
-
- {{ t('spreed', 'Cancel recording start') }}
-
-
-
-
-
- {{ t('spreed', 'Stop recording') }}
-
+
+
+
+ {{ t('spreed', 'The call has been running for one hour.') }}
+
+
+
+
+
+
+
+
+
+ {{ t('spreed', 'Cancel recording start') }}
+
+
+
+
+
+ {{ t('spreed', 'Stop recording') }}
+
+
@@ -101,7 +111,9 @@ export default {
return {
callTime: undefined,
showPopover: false,
+ isCallDurationHintShown: false,
timer: null,
+ untilCallDurationHintShown: null,
}
},
@@ -165,6 +177,10 @@ export default {
return this.isStartingRecording || this.isRecording
},
+ isButtonDisabled() {
+ return !this.isShowRecordingStatus && !this.isCallDurationHintShown
+ },
+
recordingButtonTitle() {
if (this.isStartingRecording) {
return t('spreed', 'Starting the recording')
@@ -176,6 +192,17 @@ export default {
},
},
+ watch: {
+ callTime(value) {
+ if (value && !this.untilCallDurationHintShown) {
+ this.untilCallDurationHintShown = (1000 * 60 * 60) - value + 1000
+ setTimeout(() => {
+ this.showCallDurationHint()
+ }, this.untilCallDurationHintShown)
+ }
+ },
+ },
+
mounted() {
// Start the timer when mounted
this.timer = setInterval(this.computeElapsedTime, 1000)
@@ -199,12 +226,37 @@ export default {
}
this.callTime = new Date() - this.callStart
},
+
+ showCallDurationHint() {
+
+ this.showPopover = true
+ this.isCallDurationHintShown = true
+
+ // close the popover after 10 seconds
+ if (this.$store.getters.windowIsVisible()) {
+ setTimeout(() => {
+ this.showPopover = false
+ }, 10000)
+ } else {
+ // add event listener if the call view is not visible
+ window.onfocus = () => setTimeout(() => {
+ this.showPopover = false
+ }, 10000)
+ }
+ },
},
}