Enforce device picker and show a warning there

Signed-off-by: Joas Schilling <coding@schilljs.com>

2 files changed, 29 insertions, 3 deletions

diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 325cbb74f..b57af9b20 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -133,9 +133,19 @@
 			</div>
 			<NcCheckboxRadioSwitch :checked.sync="showDeviceChecker"
 				class="checkbox">
-				{{ t('spreed', 'Always show this dialog before joining a call in this conversation.') }}
+				<template v-if="canRecordingTakePlace">
+					{{ t('spreed', 'Always show this dialog before joining a call in this conversation. The dialog will always be shown when the call is being recorded.') }}
+				</template>
+				<template v-else>
+					{{ t('spreed', 'Always show this dialog before joining a call in this conversation.') }}
+				</template>
 			</NcCheckboxRadioSwitch>
 
+			<NcNoteCard v-if="isRecording"
+				type="warning">
+				<p>{{ t('spreed', 'The call is being recorded.') }}</p>
+			</NcNoteCard>
+
 			<div class="device-checker__call-buttons">
 				<!-- Silent call -->
 				<NcActions v-if="showSilentCallOption" :force-menu="true">
@@ -185,6 +195,7 @@ import Blur from 'vue-material-design-icons/Blur.vue'
 import BlurOff from 'vue-material-design-icons/BlurOff.vue'
 import BellOff from 'vue-material-design-icons/BellOff.vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
+import { CALL } from '../../constants.js'
 import { localMediaModel } from '../../utils/webrtc/index.js'
 import CallButton from '../TopBar/CallButton.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -194,7 +205,9 @@ import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import isInLobby from '../../mixins/isInLobby.js'
+import { getCapabilities } from '@nextcloud/capabilities'
 
 export default {
 	name: 'DeviceChecker',
@@ -208,6 +221,7 @@ export default {
 		MediaDevicesSelector,
 		VideoBackground,
 		NcAvatar,
+		NcNoteCard,
 		Cog,
 		Microphone,
 		MicrophoneOff,
@@ -300,9 +314,17 @@ export default {
 			return this.conversation.hasCall || this.conversation.hasCallOverwrittenByChat
 		},
 
+		isRecording() {
+			return this.conversation.callRecording !== CALL.RECORDING.OFF
+		},
+
 		showSilentCallOption() {
 			return !(this.hasCall && !this.isInLobby)
 		},
+
+		canRecordingTakePlace() {
+			return getCapabilities()?.spreed?.config?.call?.recording || false
+		},
 	},
 
 	watch: {
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index e6f44b5f1..87e7a4355 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import { CONVERSATION, PARTICIPANT } from '../../constants.js'
+import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
 import browserCheck from '../../mixins/browserCheck.js'
 import isInCall from '../../mixins/isInCall.js'
 import isInLobby from '../../mixins/isInLobby.js'
@@ -148,6 +148,10 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		isRecording() {
+			return this.conversation.callRecording !== CALL.RECORDING.OFF
+		},
+
 		participantType() {
 			return this.conversation.participantType
 		},
@@ -297,7 +301,7 @@ export default {
 			const shouldShowDeviceCheckerScreen = (BrowserStorage.getItem('showDeviceChecker' + this.token) === null
 				|| BrowserStorage.getItem('showDeviceChecker' + this.token) === 'true') && !this.forceJoinCall
 			console.debug(shouldShowDeviceCheckerScreen)
-			if (shouldShowDeviceCheckerScreen) {
+			if ((this.isRecording && !this.forceJoinCall) || shouldShowDeviceCheckerScreen) {
 				emit('talk:device-checker:show')
 			} else {
 				emit('talk:device-checker:hide')