feat(meetings): selectively invite users from lobby

src/components/MessagesList/MessagesList.vue

@@ -238,7 +238,7 @@ export default {
 		},
 
 		chatIdentifier() {
-			return this.token + ':' + this.isParticipant + ':' + this.isInLobby + ':' + this.viewId
+			return this.token + ':' + this.isParticipant + ':' + this.viewId
 		},
 	},
 

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -60,6 +60,7 @@
 				<span v-if="showModeratorLabel" class="participant-row__moderator-indicator">({{ t('spreed', 'moderator') }})</span>
 				<span v-if="isBridgeBotUser" class="participant-row__moderator-indicator">({{ t('spreed', 'bot') }})</span>
 				<span v-if="isGuest" class="participant-row__guest-indicator">({{ t('spreed', 'guest') }})</span>
+				<span v-if="!isSelf && isLobbyEnabled && !canSkipLobby" class="participant-row__guest-indicator">({{ t('spreed', 'in the lobby') }})</span>
 			</div>
 
 			<!-- Second line: participant status message if applicable -->
@@ -123,7 +124,8 @@
 		<NcActions v-if="(canBeModerated || canSendCallNotification) && !isSearched"
 			:container="container"
 			:aria-label="participantSettingsAriaLabel"
-			force-menu
+			:inline="showToggleLobbyAction ? 1 : 0"
+			:force-menu="!showToggleLobbyAction"
 			placement="bottom-end"
 			class="participant-row__actions">
 			<template #icon>
@@ -144,6 +146,26 @@
 				</template>
 				{{ attendeePin }}
 			</NcActionText>
+			<!-- Grant or revoke lobby permissions (inline button) -->
+			<template v-if="showToggleLobbyAction">
+				<NcActionButton v-if="canSkipLobby"
+					close-after-click
+					@click="setLobbyPermission(false)">
+					<template #icon>
+						<AccountMinusIcon :size="20" />
+					</template>
+					{{ t('spreed', 'Move back to lobby') }}
+				</NcActionButton>
+				<NcActionButton v-else
+					close-after-click
+					@click="setLobbyPermission(true)">
+					<template #icon>
+						<AccountPlusIcon :size="20" />
+					</template>
+					{{ t('spreed', 'Move to conversation') }}
+				</NcActionButton>
+			</template>
+			<!-- Grant or revoke moderator permissions -->
 			<NcActionButton v-if="canBeDemoted"
 				close-after-click
 				@click="demoteFromModerator">
@@ -292,6 +314,8 @@
 import isEqual from 'lodash/isEqual.js'
 
 import Account from 'vue-material-design-icons/Account.vue'
+import AccountMinusIcon from 'vue-material-design-icons/AccountMinus.vue'
+import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Crown from 'vue-material-design-icons/Crown.vue'
@@ -327,7 +351,7 @@ import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 import DialpadPanel from '../../../../DialpadPanel.vue'
 
 import { useIsInCall } from '../../../../../composables/useIsInCall.js'
-import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
+import { CONVERSATION, PARTICIPANT, ATTENDEE, WEBINAR } from '../../../../../constants.js'
 import {
 	callSIPDialOut,
 	callSIPHangupPhone,
@@ -354,6 +378,8 @@ export default {
 		ParticipantPermissionsEditor,
 		// Icons
 		Account,
+		AccountMinusIcon,
+		AccountPlusIcon,
 		Bell,
 		ContentCopy,
 		Crown,
@@ -763,6 +789,18 @@ export default {
 					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.EMAILS)
 		},
 
+		isLobbyEnabled() {
+			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
+		},
+
+		canSkipLobby() {
+			return this.isModerator || (this.participant.permissions & PARTICIPANT.PERMISSIONS.LOBBY_IGNORE) !== 0
+		},
+
+		showToggleLobbyAction() {
+			return this.canBeModerated && !this.isModerator && this.isLobbyEnabled
+		},
+
 		preloadedUserStatus() {
 			if (Object.prototype.hasOwnProperty.call(this.participant, 'statusMessage')) {
 				// We preloaded the status when via participants API
@@ -935,6 +973,24 @@ export default {
 			}
 		},
 
+		async setLobbyPermission(value) {
+			try {
+				await this.$store.dispatch('setPermissions', {
+					token: this.token,
+					attendeeId: this.attendeeId,
+					method: value ? 'add' : 'remove',
+					permissions: PARTICIPANT.PERMISSIONS.LOBBY_IGNORE,
+				})
+				if (value) {
+					showSuccess(t('spreed', 'Permissions granted to {displayName}', { displayName: this.computedName }))
+				} else {
+					showSuccess(t('spreed', 'Permissions removed for {displayName}', { displayName: this.computedName }))
+				}
+			} catch (error) {
+				showError(t('spreed', 'Could not modify permissions for {displayName}', { displayName: this.computedName }))
+			}
+		},
+
 		computeElapsedTime() {
 			if (!this.participantSpeakingInformation) {
 				return null

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -184,6 +184,9 @@ export default {
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
+		userId() {
+			return this.$store.getters.getUserId()
+		},
 		canAddPhones() {
 			return canModerateSipDialOut && this.conversation.canEnableSIP
 		},
@@ -203,18 +206,35 @@ export default {
 
 	beforeMount() {
 		EventBus.$on('route-change', this.abortSearch)
+		EventBus.$on('signaling-users-changed', this.updateUsers)
 		subscribe('user_status:status.updated', this.updateUserStatus)
 	},
 
 	beforeDestroy() {
 		EventBus.$off('route-change', this.abortSearch)
+		EventBus.$off('signaling-users-changed', this.updateUsers)
 		unsubscribe('user_status:status.updated', this.updateUserStatus)
 
 		this.cancelSearchPossibleConversations()
 		this.cancelSearchPossibleConversations = null
 	},
 
 	methods: {
+		async updateUsers(usersList) {
+			const currentUser = usersList.flat().find(user => user.userId === this.userId)
+			const currentParticipant = this.participants.find(user => user.userId === this.userId)
+			if (!currentUser) {
+				return
+			}
+			// refresh conversation, if current user permissions have been changed
+			if (currentUser.participantPermissions !== this.conversation.permissions) {
+				await this.$store.dispatch('fetchConversation', { token: this.token })
+			}
+			if (currentUser.participantPermissions !== currentParticipant?.permissions) {
+				await this.cancelableGetParticipants()
+			}
+		},
+
 		handleClose() {
 			this.$store.dispatch('hideSidebar')
 		},

src/services/participantsService.js

@@ -220,15 +220,16 @@ const removeAllPermissionsFromParticipant = async (token, attendeeId) => {
  *
  * @param {string} token conversation token
  * @param {number} attendeeId attendee id to target
+ * @param {'set'|'add'|'remove'} method permissions update method
  * @param {number} permission the type of permission to be granted. Valid values are
  * any sums of 'DEFAULT', 'CUSTOM', 'CALL_START', 'CALL_JOIN', 'LOBBY_IGNORE',
  * 'PUBLISH_AUDIO', 'PUBLISH_VIDEO', 'PUBLISH_SCREEN'.
  */
-const setPermissions = async (token, attendeeId, permission) => {
+const setPermissions = async (token, attendeeId, method = 'set', permission) => {
 	await axios.put(generateOcsUrl('apps/spreed/api/v4/room/{token}/attendees/permissions', { token }),
 		{
 			attendeeId,
-			method: 'set',
+			method,
 			permissions: permission,
 		})
 }

src/store/participantsStore.js

@@ -991,10 +991,11 @@ const actions = {
 	 * @param {object} root0 - the arguments object.
 	 * @param {string} root0.token - the conversation token.
 	 * @param {string} root0.attendeeId - the participant-s attendeeId.
+	 * @param {'set'|'add'|'remove'} [root0.method] permissions update method
 	 * @param {number} root0.permissions - bitwise combination of the permissions.
 	 */
-	async setPermissions(context, { token, attendeeId, permissions }) {
-		await setPermissions(token, attendeeId, permissions)
+	async setPermissions(context, { token, attendeeId, method, permissions }) {
+		await setPermissions(token, attendeeId, method, permissions)
 		const updatedData = {
 			permissions,
 			attendeePermissions: permissions,