Add signaling messages for typing indicators

src/services/participantsService.js

@@ -29,6 +29,7 @@ import { PARTICIPANT } from '../constants.js'
 import {
 	signalingJoinConversation,
 	signalingLeaveConversation,
+	signalingSetTyping,
 } from '../utils/webrtc/index.js'
 
 const PERMISSIONS = PARTICIPANT.PERMISSIONS
@@ -220,6 +221,15 @@ const setPermissions = async (token, attendeeId, permission) => {
 		})
 }
 
+/**
+ * Sets whether the current participant is typing or not.
+ *
+ * @param {boolean} typing whether the current participant is typing.
+ */
+const setTyping = (typing) => {
+	signalingSetTyping(typing)
+}
+
 export {
 	joinConversation,
 	rejoinConversation,
@@ -237,4 +247,5 @@ export {
 	grantAllPermissionsToParticipant,
 	removeAllPermissionsFromParticipant,
 	setPermissions,
+	setTyping,
 }

src/store/participantsStore.js

@@ -42,6 +42,7 @@ import {
 	grantAllPermissionsToParticipant,
 	removeAllPermissionsFromParticipant,
 	setPermissions,
+	setTyping,
 } from '../services/participantsService.js'
 import SessionStorage from '../services/SessionStorage.js'
 
@@ -54,6 +55,8 @@ const state = {
 	},
 	connecting: {
 	},
+	typing: {
+	},
 }
 
 const getters = {
@@ -78,6 +81,31 @@ const getters = {
 		return []
 	},
 
+	/**
+	 * Gets the participants array filtered to include only those that are
+	 * currently typing.
+	 *
+	 * @param {object} state - the state object.
+	 * @param {object} getters - the getters object.
+	 * @return {Array} the participants array (if there are participants in the
+	 * store).
+	 */
+	participantsListTyping: (state, getters) => (token) => {
+		if (!state.typing[token]) {
+			return []
+		}
+
+		return getters.participantsList(token).filter(attendee => {
+			for (const sessionId of state.typing[token]) {
+				if (attendee.sessionIds.includes(sessionId)) {
+					return true
+				}
+			}
+
+			return false
+		})
+	},
+
 	/**
 	 * Replaces the legacy getParticipant getter. Returns a callback function in which you can
 	 * pass in the token and attendeeId as arguments to get the participant object.
@@ -226,6 +254,41 @@ const mutations = {
 		}
 	},
 
+	/**
+	 * Sets the typing status of a participant in a conversation.
+	 *
+	 * Note that "updateParticipant" should not be called to add a "typing"
+	 * property to an existing participant, as the participant would be reset
+	 * when the participants are purged whenever they are fetched again.
+	 * Similarly, "addParticipant" can not be called either to add a participant
+	 * if it was not fetched yet but the signaling reported it as being typing,
+	 * as the attendeeId would be unknown.
+	 *
+	 * @param {object} state - current store state.
+	 * @param {object} data - the wrapping object.
+	 * @param {string} data.token - the conversation that the participant is
+	 *        typing in.
+	 * @param {string} data.sessionId - the Nextcloud session ID of the
+	 *        participant.
+	 * @param {boolean} data.typing - whether the participant is typing or not.
+	 */
+	setTyping(state, { token, sessionId, typing }) {
+		if (!typing) {
+			if (state.typing[token] && state.typing[token].indexOf(sessionId) >= 0) {
+				state.typing[token].splice(state.typing[token].indexOf(sessionId), 1)
+			}
+
+			return
+		}
+
+		if (!state.typing[token]) {
+			Vue.set(state.typing, token, [])
+		}
+		if (!state.typing[token].includes(sessionId)) {
+			state.typing[token].push(sessionId)
+		}
+	},
+
 	/**
 	 * Purge a given conversation from the previously added participants.
 	 *
@@ -635,6 +698,14 @@ const actions = {
 		}
 		context.commit('updateParticipant', { token, attendeeId, updatedData })
 	},
+
+	async setTyping(context, { typing }) {
+		if (!context.getters.currentConversationIsJoined) {
+			return
+		}
+
+		await setTyping(typing)
+	},
 }
 
 export default { state, mutations, getters, actions }

src/store/tokenStore.js

@@ -44,7 +44,7 @@ const getters = {
 	getFileIdForToken: (state) => () => {
 		return state.fileIdForToken
 	},
-	currentConversationIsJoined() {
+	currentConversationIsJoined: (state) => {
 		return state.lastJoinedConversationToken === state.token
 	},
 }

src/utils/SignalingParticipantList.js

@@ -0,0 +1,175 @@
+/**
+ *
+ * @copyright Copyright (c) 2023, Daniel Calviño Sánchez ([email protected])
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import EmitterMixin from './EmitterMixin.js'
+
+/**
+ * Helper to keep track of the signaling participants.
+ *
+ * The participants included the following properties:
+ * - nextcloudSessionId
+ * - signalingSessionId
+ * - userId (optional, not included if the participant is a guest)
+ *
+ * The following events are emitted:
+ * - participantsJoined(participants)
+ * - participantsLeft(participants)
+ */
+export default function SignalingParticipantList() {
+	this._superEmitterMixin()
+
+	this._signaling = null
+	this._participants = []
+
+	this._handleLeaveRoomBound = this._handleLeaveRoom.bind(this)
+	this._handleUsersInRoomBound = this._handleUsersInRoom.bind(this)
+	this._handleUsersJoinedBound = this._handleUsersJoined.bind(this)
+	this._handleUsersLeftBound = this._handleUsersLeft.bind(this)
+}
+
+SignalingParticipantList.prototype = {
+
+	destroy() {
+		if (this._signaling) {
+			this._signaling.off('leaveRoom', this._handleLeaveRoomBound)
+			this._signaling.off('usersInRoom', this._handleUsersInRoomBound)
+			this._signaling.off('usersJoined', this._handleUsersJoinedBound)
+			this._signaling.off('usersLeft', this._handleUsersLeftBound)
+		}
+
+		this._destroyed = true
+
+		this._participants = []
+	},
+
+	setSignaling(signaling) {
+		if (this._destroyed) {
+			return
+		}
+
+		if (this._signaling) {
+			this._signaling.off('leaveRoom', this._handleLeaveRoomBound)
+			this._signaling.off('usersInRoom', this._handleUsersInRoomBound)
+			this._signaling.off('usersJoined', this._handleUsersJoinedBound)
+			this._signaling.off('usersLeft', this._handleUsersLeftBound)
+		}
+
+		this._signaling = signaling
+
+		if (this._signaling) {
+			this._signaling.on('leaveRoom', this._handleLeaveRoomBound)
+			this._signaling.on('usersInRoom', this._handleUsersInRoomBound)
+			this._signaling.on('usersJoined', this._handleUsersJoinedBound)
+			this._signaling.on('usersLeft', this._handleUsersLeftBound)
+		}
+	},
+
+	getParticipants() {
+		return this._participants
+	},
+
+	_handleLeaveRoom(token) {
+		if (this._participants.length > 0) {
+			this._trigger('participantsLeft', [this._participants])
+		}
+
+		this._participants = []
+	},
+
+	_handleUsersInRoom(users) {
+		const participants = []
+		const participantsJoined = []
+		const participantsLeft = []
+
+		for (const user of users) {
+			const participant = {
+				nextcloudSessionId: user.sessionId,
+				signalingSessionId: user.sessionId,
+			}
+			if (user.userId) {
+				participant.userId = user.userId
+			}
+
+			participants.push(participant)
+
+			if (!this._participants.find(oldParticipant => oldParticipant.signalingSessionId === participant.signalingSessionId)) {
+				participantsJoined.push(participant)
+			}
+		}
+
+		for (const oldParticipant of this._participants) {
+			if (!participants.find(participant => participant.signalingSessionId === oldParticipant.signalingSessionId)) {
+				participantsLeft.push(oldParticipant)
+			}
+		}
+
+		this._participants = participants
+
+		if (participantsJoined.length > 0) {
+			this._trigger('participantsJoined', [participantsJoined])
+		}
+		if (participantsLeft.length > 0) {
+			this._trigger('participantsLeft', [participantsLeft])
+		}
+	},
+
+	_handleUsersJoined(users) {
+		const participantsJoined = []
+
+		for (const user of users) {
+			const participant = {
+				nextcloudSessionId: user.roomsessionid,
+				signalingSessionId: user.sessionid,
+			}
+			if (user.userid) {
+				participant.userId = user.userid
+			}
+
+			this._participants.push(participant)
+
+			participantsJoined.push(participant)
+		}
+
+		if (participantsJoined.length > 0) {
+			this._trigger('participantsJoined', [participantsJoined])
+		}
+	},
+
+	_handleUsersLeft(sessionIds) {
+		const participantsLeft = []
+
+		for (const sessionId of sessionIds) {
+			const index = this._participants.findIndex(participant => participant.signalingSessionId === sessionId)
+			if (index >= 0) {
+				participantsLeft.push(this._participants[index])
+
+				this._participants.splice(index, 1)
+			}
+		}
+
+		if (participantsLeft.length > 0) {
+			this._trigger('participantsLeft', [participantsLeft])
+		}
+	},
+
+}
+
+EmitterMixin.apply(SignalingParticipantList.prototype)