Merge pull request #10637 from nextcloud/feat/noid/start-recording-with-call

feat(MediaSettings) start recording together with call

2 files changed, 51 insertions, 13 deletions

diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 209517c4e..9e183e363 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -120,14 +120,19 @@
 				@update-background="handleUpdateVirtualBackground" />
 
 			<!-- "Always show" setting -->
-			<NcCheckboxRadioSwitch :checked.sync="showMediaSettings"
-				class="checkbox">
+			<NcCheckboxRadioSwitch :checked.sync="showMediaSettings" class="checkbox">
 				{{ t('spreed', 'Always show preview for this conversation') }}
 			</NcCheckboxRadioSwitch>
 
+			<!-- Moderator options before starting a call-->
+			<NcCheckboxRadioSwitch v-if="!hasCall && canModerateRecording"
+				class="checkbox"
+				:checked.sync="isRecordingFromStart">
+				{{ t('spreed', 'Start recording immediately with the call') }}
+			</NcCheckboxRadioSwitch>
+
 			<!-- Recording warning -->
-			<NcNoteCard v-if="isStartingRecording || isRecording"
-				type="warning">
+			<NcNoteCard v-else-if="isStartingRecording || isRecording" type="warning">
 				<p>{{ t('spreed', 'The call is being recorded.') }}</p>
 			</NcNoteCard>
 
@@ -163,7 +168,8 @@
 				<!-- Join call -->
 				<CallButton v-if="!isInCall"
 					class="call-button"
-					:force-join-call="true"
+					is-media-settings
+					:is-recording-from-start.sync="isRecordingFromStart"
 					:silent-call="silentCall" />
 				<NcButton v-else-if="showUpdateChangesButton" @click="closeModalAndApplySettings">
 					{{ t('spreed', 'Apply settings') }}
@@ -181,6 +187,7 @@ import Creation from 'vue-material-design-icons/Creation.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 
+import { getCapabilities } from '@nextcloud/capabilities'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -199,13 +206,15 @@ import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
 import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
-import { AVATAR, CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
+import { AVATAR, CALL, PARTICIPANT, VIRTUAL_BACKGROUND } from '../../constants.js'
 import { devices } from '../../mixins/devices.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { useGuestNameStore } from '../../stores/guestName.js'
 import { localMediaModel } from '../../utils/webrtc/index.js'
 
+const recordingEnabled = getCapabilities()?.spreed?.config?.call?.recording || false
+
 export default {
 	name: 'MediaSettings',
 
@@ -255,6 +264,7 @@ export default {
 			deviceIdChanged: false,
 			audioDeviceStateChanged: false,
 			videoDeviceStateChanged: false,
+			isRecordingFromStart: false,
 		}
 	},
 
@@ -322,6 +332,15 @@ export default {
 				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
 
+		canFullModerate() {
+			return this.conversation.participantType === PARTICIPANT.TYPE.OWNER
+				|| this.conversation.participantType === PARTICIPANT.TYPE.MODERATOR
+		},
+
+		canModerateRecording() {
+			return this.canFullModerate && recordingEnabled
+		},
+
 		showSilentCallOption() {
 			return !(this.hasCall && !this.isInLobby)
 		},
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 5d72149c4..ea26bcd0c 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -128,10 +128,10 @@ export default {
 
 	props: {
 		/**
-		 * Skips the media settings dialog and joins or starts the call
-		 * upon clicking the button
+		 * Whether the component is used in MediaSettings or not
+		 * (when click will directly start a call)
 		 */
-		forceJoinCall: {
+		isMediaSettings: {
 			type: Boolean,
 			default: false,
 		},
@@ -144,6 +144,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		isRecordingFromStart: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	setup() {
@@ -308,6 +313,13 @@ export default {
 				silent: this.hasCall ? true : this.silentCall,
 			})
 			this.loading = false
+
+			if (this.isRecordingFromStart) {
+				this.$store.dispatch('startCallRecording', {
+					token: this.token,
+					callRecording: CALL.RECORDING.VIDEO,
+				})
+			}
 		},
 
 		async leaveCall(endMeetingForAll = false) {
@@ -337,10 +349,17 @@ export default {
 			// Create audio objects as a result of a user interaction to allow playing sounds in Safari
 			this.$store.dispatch('createAudioObjects')
 
-			const shouldShowMediaSettingsScreen = (BrowserStorage.getItem('showMediaSettings' + this.token) === null
-				|| BrowserStorage.getItem('showMediaSettings' + this.token) === 'true') && !this.forceJoinCall
-			console.debug(shouldShowMediaSettingsScreen)
-			if (((this.isStartingRecording || this.isRecording) && !this.forceJoinCall) || shouldShowMediaSettingsScreen) {
+			if (this.isMediaSettings) {
+				emit('talk:media-settings:hide')
+				this.joinCall()
+				return
+			}
+
+			const showMediaSettings = BrowserStorage.getItem('showMediaSettings' + this.token)
+			const shouldShowMediaSettingsScreen = (showMediaSettings === null || showMediaSettings === 'true')
+			console.debug('showMediaSettings:', shouldShowMediaSettingsScreen)
+
+			if (this.isStartingRecording || this.isRecording || shouldShowMediaSettingsScreen) {
 				emit('talk:media-settings:show')
 			} else {
 				emit('talk:media-settings:hide')