Handle "starting" values for recording status in UI

The recording indicator in the device checker is still shown without
changes while the recording is starting, as the difference between "is
being recorded" and "will be soon recorded" is not relevant to decide
whether to join or not, or whether to disable the microphone and/or
camera or not. Nevertheless, the condition was made explicit.

On the other hand, the recording indicator in the top bar is now shown
in gray rather than in red while the recording is starting, as the
difference is relevant while in the call to be aware that if something
is said it might not be recorded yet.

The menu action shows a loading spinner and a different text while the
recording is starting. Triggering the menu action while it is starting
stops it, as starting the recording can take a while and this avoids
having to wait if it was wrongly started.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

6 files changed, 75 insertions, 14 deletions

diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 2393926d2..726a4d0d1 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -137,7 +137,7 @@
 				</template>
 			</NcCheckboxRadioSwitch>
 
-			<NcNoteCard v-if="isRecording"
+			<NcNoteCard v-if="isStartingRecording || isRecording"
 				type="warning">
 				<p>{{ t('spreed', 'The call is being recorded.') }}</p>
 			</NcNoteCard>
@@ -308,8 +308,14 @@ export default {
 			return this.conversation.hasCall || this.conversation.hasCallOverwrittenByChat
 		},
 
+		isStartingRecording() {
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO_STARTING
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO_STARTING
+		},
+
 		isRecording() {
-			return this.conversation.callRecording !== CALL.RECORDING.OFF
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
 
 		showSilentCallOption() {
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index aad7c018e..939ce4802 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -150,8 +150,14 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		isStartingRecording() {
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO_STARTING
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO_STARTING
+		},
+
 		isRecording() {
-			return this.conversation.callRecording !== CALL.RECORDING.OFF
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
 
 		participantType() {
@@ -299,7 +305,7 @@ export default {
 			const shouldShowDeviceCheckerScreen = (BrowserStorage.getItem('showDeviceChecker' + this.token) === null
 				|| BrowserStorage.getItem('showDeviceChecker' + this.token) === 'true') && !this.forceJoinCall
 			console.debug(shouldShowDeviceCheckerScreen)
-			if ((this.isRecording && !this.forceJoinCall) || shouldShowDeviceCheckerScreen) {
+			if (((this.isStartingRecording || this.isRecording) && !this.forceJoinCall) || shouldShowDeviceCheckerScreen) {
 				emit('talk:device-checker:show')
 			} else {
 				emit('talk:device-checker:hide')
diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index c6396ce8c..9360d4ed3 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/src/components/TopBar/CallTime.vue
@@ -27,19 +27,33 @@
 		:triggers="[]"
 		:container="container">
 		<template #trigger>
-			<NcButton :disabled="!isRecording || !isModerator"
+			<NcButton :disabled="(!isStartingRecording && !isRecording) || !isModerator"
 				:wide="true"
-				:class="{ 'call-time__not-recording': !isRecording }"
+				:class="{ 'call-time__not-recording': !isStartingRecording && !isRecording }"
 				type="tertiary"
 				@click="showPopover = true">
-				<template v-if="isRecording" #icon>
+				<template v-if="isStartingRecording" #icon>
+					<RecordCircle :size="20"
+						fill-color="var(--color-loading-light)" />
+				</template>
+				<template v-else-if="isRecording" #icon>
 					<RecordCircle :size="20"
 						fill-color="#e9322d" />
 				</template>
 				{{ formattedTime }}
 			</ncbutton>
 		</template>
-		<NcButton type="tertiary-no-background"
+		<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
+			type="tertiary-no-background"
 			:wide="true"
 			@click="stopRecording">
 			<template #icon>
@@ -54,6 +68,7 @@
 
 import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
 import StopIcon from 'vue-material-design-icons/Stop.vue'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { CALL } from '../../constants.js'
@@ -65,6 +80,7 @@ export default {
 	components: {
 		RecordCircle,
 		StopIcon,
+		NcLoadingIcon,
 		NcPopover,
 		NcButton,
 	},
@@ -139,8 +155,14 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		isStartingRecording() {
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO_STARTING
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO_STARTING
+		},
+
 		isRecording() {
-			return this.conversation.callRecording !== CALL.RECORDING.OFF
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
 	},
 
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index 8989f531a..9efbe8971 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -117,7 +117,7 @@
 		</template>
 		<!-- Call recording -->
 		<template v-if="canModerateRecording">
-			<NcActionButton v-if="!isRecording && isInCall"
+			<NcActionButton v-if="!isRecording && !isStartingRecording && isInCall"
 				:close-after-click="true"
 				@click="startRecording">
 				<template #icon>
@@ -125,6 +125,14 @@
 				</template>
 				{{ t('spreed', 'Start recording') }}
 			</NcActionButton>
+			<NcActionButton v-else-if="isStartingRecording && isInCall"
+				:close-after-click="true"
+				@click="stopRecording">
+				<template #icon>
+					<NcLoadingIcon :size="20" />
+				</template>
+				{{ t('spreed', 'Cancel recording start') }}
+			</NcActionButton>
 			<NcActionButton v-else-if="isRecording && isInCall"
 				:close-after-click="true"
 				@click="stopRecording">
@@ -160,6 +168,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { emit } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 import { getCapabilities } from '@nextcloud/capabilities'
@@ -190,6 +199,7 @@ export default {
 		NcActionSeparator,
 		NcActionLink,
 		NcActionButton,
+		NcLoadingIcon,
 		PromotedView,
 		Cog,
 		DotsHorizontal,
@@ -356,8 +366,14 @@ export default {
 			return this.canFullModerate && recordingEnabled
 		},
 
+		isStartingRecording() {
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO_STARTING
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO_STARTING
+		},
+
 		isRecording() {
-			return this.conversation.callRecording !== CALL.RECORDING.OFF
+			return this.conversation.callRecording === CALL.RECORDING.VIDEO
+				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
 
 		// True if current conversation is a breakout room and the brekour room has started
diff --git a/src/constants.js b/src/constants.js
index ca6c90f90..bc7f0d3b9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -34,6 +34,8 @@ export const CALL = {
 		OFF: 0,
 		VIDEO: 1,
 		AUDIO: 2,
+		VIDEO_STARTING: 3,
+		AUDIO_STARTING: 4,
 	},
 }
 
diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index c0b5462c0..cb4751240 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -684,18 +684,27 @@ const actions = {
 			console.error(e)
 		}
 
-		showSuccess(t('spreed', 'Call recording started.'))
-		context.commit('setCallRecording', { token, callRecording })
+		const startingCallRecording = callRecording === CALL.RECORDING.VIDEO ? CALL.RECORDING.VIDEO_STARTING : CALL.RECORDING.AUDIO_STARTING
+
+		showSuccess(t('spreed', 'Call recording is starting.'))
+		context.commit('setCallRecording', { token, callRecording: startingCallRecording })
 	},
 
 	async stopCallRecording(context, { token }) {
+		const previousCallRecordingStatus = context.getters.conversation(token).callRecording
+
 		try {
 			await stopCallRecording(token)
 		} catch (e) {
 			console.error(e)
 		}
 
-		showInfo(t('spreed', 'Call recording stopped. You will be notified once the recording is available.'))
+		if (previousCallRecordingStatus === CALL.RECORDING.VIDEO_STARTING
+			|| previousCallRecordingStatus === CALL.RECORDING.VIDEO_STARTING) {
+			showInfo(t('spreed', 'Call recording stopped while starting.'))
+		} else {
+			showInfo(t('spreed', 'Call recording stopped. You will be notified once the recording is available.'))
+		}
 		context.commit('setCallRecording', { token, callRecording: CALL.RECORDING.OFF })
 	},
 }