From a4090b659de54e8f2a71feed3b2aa63b5ab5d3e9 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Tue, 5 Nov 2019 14:37:07 +0100
Subject: [PATCH 1/9] Start with participants tab

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../ConversationsList/Conversation.vue        |   3 +-
 .../ConversationsList/ConversationsList.vue   |  10 +
 .../Sidebar/ParticipantsTab/Participant.vue   | 183 ++++++++++++++++++
 .../ParticipantsTab/ParticipantsTab.vue       | 105 ++++++++++
 src/components/Sidebar/Sidebar.vue            |   6 +-
 src/services/participantsService.js           |  24 ++-
 src/store/index.js                            |   2 +
 src/store/participantsStore.js                | 140 ++++++++++++++
 8 files changed, 466 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Sidebar/ParticipantsTab/Participant.vue
 create mode 100644 src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
 create mode 100644 src/store/participantsStore.js

diff --git a/src/components/Navigation/ConversationsList/Conversation.vue b/src/components/Navigation/ConversationsList/Conversation.vue
index 583a35e5c..84aeddfbf 100644
--- a/src/components/Navigation/ConversationsList/Conversation.vue
+++ b/src/components/Navigation/ConversationsList/Conversation.vue
@@ -22,8 +22,7 @@
 <template>
 	<AppContentListItem
 		:title="item.displayName"
-		:to="{ name: 'conversation', params: { token: item.token }}"
-		@click.prevent.exact="joinConversation">
+		:to="{ name: 'conversation', params: { token: item.token }}">
 		<ConversationIcon
 			slot="icon"
 			:item="item"
diff --git a/src/components/Navigation/ConversationsList/ConversationsList.vue b/src/components/Navigation/ConversationsList/ConversationsList.vue
index 769d1a25d..8f86c1910 100644
--- a/src/components/Navigation/ConversationsList/ConversationsList.vue
+++ b/src/components/Navigation/ConversationsList/ConversationsList.vue
@@ -34,6 +34,7 @@
 import Conversation from './Conversation'
 import Hint from '../Hint/Hint'
 import { fetchConversations } from '../../../services/conversationsService'
+import { joinConversation, leaveConversation } from '../../../services/participantsService'
 import { EventBus } from '../../../services/EventBus'
 
 export default {
@@ -68,6 +69,15 @@ export default {
 		window.setInterval(() => {
 			this.fetchConversations()
 		}, 30000)
+
+		EventBus.$on('routeChange', ({ from, to }) => {
+			if (from.name === 'conversation') {
+				leaveConversation(from.params.token)
+			}
+			if (to.name === 'conversation') {
+				joinConversation(to.params.token)
+			}
+		})
 	},
 	methods: {
 		sortConversations(conversation1, conversation2) {
diff --git a/src/components/Sidebar/ParticipantsTab/Participant.vue b/src/components/Sidebar/ParticipantsTab/Participant.vue
new file mode 100644
index 000000000..45e47079f
--- /dev/null
+++ b/src/components/Sidebar/ParticipantsTab/Participant.vue
@@ -0,0 +1,183 @@
+<!--
+  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+-->
+
+<template>
+	<li class="participant-row"
+		:class="{ offline: isOffline, currentUser: isSelf, guestUser: isGuest }">
+		<div class="avatar-wrapper">
+			<Avatar
+				:user="userId"
+				:display-name="displayName" />
+		</div>
+
+		<span>{{ displayName }}</span>
+
+		<span v-if="isModerator" class="moderator-indicator">({{ t('spreed', 'moderator') }})</span>
+		<span v-if="inCall" class="icon icon-video" />
+
+		<template v-if="canModerate">
+			<Actions>
+				<ActionButton v-if="canBeDemoted"
+					icon="icon-rename"
+					@click.prevent.exact="demoteFromModerator">
+					{{ t('spreed', 'Demote from moderator') }}
+				</ActionButton>
+				<ActionButton v-if="canBePromoted"
+					icon="icon-rename"
+					@click.prevent.exact="promoteToModerator">
+					{{ t('spreed', 'Promote to moderator') }}
+				</ActionButton>
+				<ActionButton
+					icon="icon-delete">
+					{{ t('spreed', 'Remove participant') }}
+				</ActionButton>
+			</Actions>
+		</template>
+	</li>
+</template>
+
+<script>
+
+import Actions from 'nextcloud-vue/dist/Components/Actions'
+import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import { PARTICIPANT } from '../../../constants'
+
+export default {
+	name: 'Participant',
+
+	components: {
+		Actions,
+		ActionButton,
+		Avatar,
+	},
+
+	props: {
+		userId: {
+			type: String,
+			required: true,
+		},
+		displayName: {
+			type: String,
+			required: true,
+		},
+		participantType: {
+			type: Number,
+			required: true,
+		},
+		lastPing: {
+			type: Number,
+			default: 0,
+		},
+		sessionId: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		token() {
+			return this.$route.params.token
+		},
+
+		isSelf() {
+			return false // FIXME
+		},
+		selfIsModerator() {
+			return true // FIXME
+		},
+
+		isOffline() {
+			return this.sessionId === '0'
+		},
+		isGuest() {
+			return [PARTICIPANT.TYPE.GUEST, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(this.participantType) !== -1
+		},
+		isModerator() {
+			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(this.participantType) !== -1
+		},
+		canModerate() {
+			return this.participantType !== PARTICIPANT.TYPE.OWNER && !this.isSelf && this.selfIsModerator
+		},
+		canBeDemoted() {
+			return this.canModerate
+				&& [PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(this.participantType) !== -1
+		},
+		canBePromoted() {
+			return this.canModerate && !this.isModerator
+		},
+		inCall() {
+			// FIXME
+			return true
+		},
+
+		participantIdentifier() {
+			let data = {}
+
+			if (this.isGuest) {
+				data = {
+					sessionId: this.sessionId,
+				}
+			} else {
+				data = {
+					participant: this.userId,
+				}
+			}
+
+			return data
+		},
+	},
+
+	methods: {
+		async promoteToModerator() {
+			await this.$store.dispatch('promoteToModerator', {
+				token: this.token,
+				participantIdentifier: this.participantIdentifier,
+			})
+		},
+		async demoteFromModerator() {
+			await this.$store.dispatch('demoteFromModerator', {
+				token: this.token,
+				participantIdentifier: this.participantIdentifier,
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+.moderator-indicator {
+	color: var(--color-text-maxcontrast);
+	font-weight: 300;
+	padding-left: 5px;
+}
+
+.offline {
+	& > .avatar-wrapper {
+		opacity: .4;
+	}
+	& > span {
+		color: var(--color-text-maxcontrast);
+	}
+}
+
+</style>
diff --git a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
new file mode 100644
index 000000000..11ea328fe
--- /dev/null
+++ b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
@@ -0,0 +1,105 @@
+<!--
+  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+-->
+
+<template>
+	<div>
+		<ul>
+			<Participant
+				v-for="participant in participantsList"
+				:key="participant.userId"
+				:user-id="participant.userId"
+				:display-name="participant.displayName"
+				:participant-type="participant.participantType"
+				:last-ping="participant.lastPing"
+				:session-id="participant.sessionId" />
+		</ul>
+	</div>
+</template>
+
+<script>
+
+import Participant from './Participant'
+import { fetchParticipants } from '../../../services/participantsService'
+import { EventBus } from '../../../services/EventBus'
+
+export default {
+	name: 'ParticipantsTab',
+
+	components: {
+		Participant,
+	},
+
+	computed: {
+		token() {
+			return this.$route.params.token
+		},
+
+		/**
+		 * Gets the participants array.
+		 *
+		 * @returns {array}
+		 */
+		participantsList() {
+			return this.$store.getters.participantsList(this.token)
+		},
+	},
+
+	/**
+	 * Fetches the messages when the MessageList created. The router mounts this
+	 * component only if the token is passed in so there's no need to check the
+	 * token prop.
+	 */
+	created() {
+		this.onRouteChange()
+
+		/**
+		 * Add a listener for routeChange event emitted by the App.vue component.
+		 * Call the onRouteChange method function whenever the route changes.
+		 */
+		EventBus.$on('routeChange', () => {
+			this.$nextTick(() => {
+				this.onRouteChange()
+			})
+		})
+	},
+
+	methods: {
+		onRouteChange() {
+			this.getParticipants()
+		},
+
+		async getParticipants() {
+			const participants = await fetchParticipants(this.token)
+			this.$store.dispatch('purgeParticipantsStore', this.token)
+			participants.data.ocs.data.forEach(participant => {
+				this.$store.dispatch('addParticipant', {
+					token: this.token,
+					participant: participant,
+				})
+			})
+		},
+	},
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index 38018ad93..7ea7613bf 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -26,7 +26,7 @@
 		:starred.sync="conversation.isFavorite"
 		@close="handleClose">
 		<AppSidebarTab :name="t('spreed', 'Participants')" icon="icon-contacts-dark">
-			Participants
+			<ParticipantsTab />
 		</AppSidebarTab>
 		<AppSidebarTab :name="t('spreed', 'Projects')" icon="icon-projects">
 			<CollectionList v-if="conversation.token"
@@ -40,7 +40,7 @@
 <script>
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
-// import ParticipantsTab from './ParticipantsTab/ParticipantsTab'
+import ParticipantsTab from './ParticipantsTab/ParticipantsTab'
 import { CollectionList } from 'nextcloud-vue-collections'
 
 export default {
@@ -49,7 +49,7 @@ export default {
 		AppSidebar,
 		AppSidebarTab,
 		CollectionList,
-		// ParticipantsTab,
+		ParticipantsTab,
 	},
 
 	computed: {
diff --git a/src/services/participantsService.js b/src/services/participantsService.js
index 48b34164a..62aa7652e 100644
--- a/src/services/participantsService.js
+++ b/src/services/participantsService.js
@@ -29,9 +29,9 @@ import { generateOcsUrl } from '@nextcloud/router'
  *
  * @param {string} token The conversation token;
  */
-const joinConversation = async function(token) {
+const joinConversation = async(token) => {
 	try {
-		const response = await axios.post(generateOcsUrl(`room/${token}/participants/active`))
+		const response = await axios.post(generateOcsUrl('apps/spreed/api/v1', 2) + `room/${token}/participants/active`)
 		return response
 	} catch (error) {
 		console.debug(error)
@@ -66,8 +66,28 @@ const removeCurrentUserFromConversation = async function(token) {
 	}
 }
 
+const promoteToModerator = async(token, options) => {
+	const response = await axios.post(generateOcsUrl('apps/spreed/api/v1/room', 2) + token + '/moderators', options)
+	return response
+}
+
+const demoteFromModerator = async(token, options) => {
+	const response = await axios.delete(generateOcsUrl('apps/spreed/api/v1/room', 2) + token + '/moderators', {
+		params: options,
+	})
+	return response
+}
+
+const fetchParticipants = async(token) => {
+	const response = await axios.get(generateOcsUrl('apps/spreed/api/v1/room', 2) + token + '/participants')
+	return response
+}
+
 export {
 	joinConversation,
 	leaveConversation,
 	removeCurrentUserFromConversation,
+	promoteToModerator,
+	demoteFromModerator,
+	fetchParticipants,
 }
diff --git a/src/store/index.js b/src/store/index.js
index 38f428b86..0f3f4da93 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -24,6 +24,7 @@ import Vue from 'vue'
 import Vuex, { Store } from 'vuex'
 import conversationsStore from './conversationsStore'
 import messagesStore from './messagesStore'
+import participantsStore from './participantsStore'
 import quoteReplyStore from './quoteReplyStore'
 import sidebarStore from './sidebarStore'
 
@@ -35,6 +36,7 @@ export default new Store({
 	modules: {
 		conversationsStore,
 		messagesStore,
+		participantsStore,
 		quoteReplyStore,
 		sidebarStore,
 	},
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
new file mode 100644
index 000000000..5363bdf3f
--- /dev/null
+++ b/src/store/participantsStore.js
@@ -0,0 +1,140 @@
+/**
+ * @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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 Vue from 'vue'
+import { promoteToModerator, demoteFromModerator } from '../services/participantsService'
+import { PARTICIPANT } from '../constants'
+
+const state = {
+	participants: {
+	},
+}
+
+const getters = {
+	/**
+	 * Gets the participants array
+	 * @param {object} state the state object.
+	 * @returns {array} the participants array (if there are participants in the store)
+	 */
+	participantsList: (state) => (token) => {
+		if (state.participants[token]) {
+			return state.participants[token]
+		}
+		return []
+	},
+	getParticipant: (state) => (token, index) => {
+		if (state.participants[token] && state.participants[token][index]) {
+			return state.participants[token][index]
+		}
+		return {}
+	},
+	getParticipantIndex: (state) => (token, participantIdentifier) => {
+		let index
+
+		if (participantIdentifier.hasOwnProperty('participant')) {
+			index = state.participants[token].findIndex(participant => participant.userId === participantIdentifier.participant)
+		} else {
+			index = state.participants[token].findIndex(participant => participant.sessionId === participantIdentifier.sessionId)
+		}
+
+		return index
+	},
+}
+
+const mutations = {
+	/**
+	 * Adds a message to the store.
+	 * @param {object} state current store state;
+	 * @param {object} token the token of the conversation;
+	 * @param {object} participant the participant;
+	 */
+	addParticipant(state, { token, participant }) {
+		if (!state.participants[token]) {
+			Vue.set(state.participants, token, [])
+		}
+		state.participants[token].push(participant)
+	},
+	updateParticipant(state, { token, index, updatedData }) {
+		if (state.participants[token] && state.participants[token][index]) {
+			state.participants[token][index] = Object.assign(state.participants[token][index], updatedData)
+		}
+	},
+	/**
+	 * Resets the store to it's original state
+	 * @param {object} state current store state;
+	 * @param {string} token the conversation to purge;
+	 */
+	purgeParticipantsStore(state, token) {
+		Vue.delete(state.participants, token)
+	},
+}
+
+const actions = {
+
+	/**
+	 * Adds participant to the store.
+	 *
+	 * @param {object} context default store context;
+	 * @param {string} token the conversation to purge;
+	 * @param {object} participant the participant;
+	 */
+	addParticipant({ commit }, { token, participant }) {
+		commit('addParticipant', { token, participant })
+	},
+	async promoteToModerator({ commit, getters }, { token, participantIdentifier }) {
+		const index = getters.getParticipantIndex(token, participantIdentifier)
+		if (index === -1) {
+			return
+		}
+
+		await promoteToModerator(token, participantIdentifier)
+
+		const participant = getters.getParticipant(token, index)
+		const updatedData = {
+			participantType: participant.participantType === PARTICIPANT.TYPE.GUEST ? PARTICIPANT.TYPE.GUEST_MODERATOR : PARTICIPANT.TYPE.MODERATOR,
+		}
+		commit('updateParticipant', { token, index, updatedData })
+	},
+	async demoteFromModerator({ commit, getters }, { token, participantIdentifier }) {
+		const index = getters.getParticipantIndex(token, participantIdentifier)
+		if (index === -1) {
+			return
+		}
+
+		await demoteFromModerator(token, participantIdentifier)
+
+		const participant = getters.getParticipant(token, index)
+		const updatedData = {
+			participantType: participant.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR ? PARTICIPANT.TYPE.GUEST : PARTICIPANT.TYPE.USER,
+		}
+		commit('updateParticipant', { token, index, updatedData })
+	},
+	/**
+	 * Resets the store to it's original state.
+	 * @param {object} context default store context;
+	 * @param {string} token the conversation to purge;
+	 */
+	purgeParticipantsStore({ commit }, token) {
+		commit('purgeParticipantsStore', token)
+	},
+}
+
+export default { state, mutations, getters, actions }

From a0dc420f7bc5a35476f2a6b2d2751cbcdfe41376 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Tue, 5 Nov 2019 23:05:02 +0100
Subject: [PATCH 2/9] Allow to remove participants

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../Sidebar/ParticipantsTab/Participant.vue   |  9 +++++-
 src/services/participantsService.js           | 28 +++++++++++++++++++
 src/store/participantsStore.js                | 26 ++++++++++++++++-
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar/ParticipantsTab/Participant.vue b/src/components/Sidebar/ParticipantsTab/Participant.vue
index 45e47079f..e49c16dcf 100644
--- a/src/components/Sidebar/ParticipantsTab/Participant.vue
+++ b/src/components/Sidebar/ParticipantsTab/Participant.vue
@@ -46,7 +46,8 @@
 					{{ t('spreed', 'Promote to moderator') }}
 				</ActionButton>
 				<ActionButton
-					icon="icon-delete">
+					icon="icon-delete"
+					@click.prevent.exact="removeParticipant">
 					{{ t('spreed', 'Remove participant') }}
 				</ActionButton>
 			</Actions>
@@ -159,6 +160,12 @@ export default {
 				participantIdentifier: this.participantIdentifier,
 			})
 		},
+		async removeParticipant() {
+			await this.$store.dispatch('removeParticipant', {
+				token: this.token,
+				participantIdentifier: this.participantIdentifier,
+			})
+		},
 	},
 }
 </script>
diff --git a/src/services/participantsService.js b/src/services/participantsService.js
index 62aa7652e..b4d8b1b7e 100644
--- a/src/services/participantsService.js
+++ b/src/services/participantsService.js
@@ -66,6 +66,32 @@ const removeCurrentUserFromConversation = async function(token) {
 	}
 }
 
+const removeUserFromConversation = async function(token, userId) {
+	try {
+		const response = await axios.delete(generateOcsUrl('apps/spreed/api/v1', 2) + `room/${token}/participants`, {
+			params: {
+				participant: userId,
+			},
+		})
+		return response
+	} catch (error) {
+		console.debug(error)
+	}
+}
+
+const removeGuestFromConversation = async function(token, sessionId) {
+	try {
+		const response = await axios.delete(generateOcsUrl('apps/spreed/api/v1', 2) + `room/${token}/participants/guests`, {
+			params: {
+				participant: sessionId,
+			},
+		})
+		return response
+	} catch (error) {
+		console.debug(error)
+	}
+}
+
 const promoteToModerator = async(token, options) => {
 	const response = await axios.post(generateOcsUrl('apps/spreed/api/v1/room', 2) + token + '/moderators', options)
 	return response
@@ -87,6 +113,8 @@ export {
 	joinConversation,
 	leaveConversation,
 	removeCurrentUserFromConversation,
+	removeUserFromConversation,
+	removeGuestFromConversation,
 	promoteToModerator,
 	demoteFromModerator,
 	fetchParticipants,
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 5363bdf3f..d0ab83e50 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -20,7 +20,12 @@
  *
  */
 import Vue from 'vue'
-import { promoteToModerator, demoteFromModerator } from '../services/participantsService'
+import {
+	promoteToModerator,
+	demoteFromModerator,
+	removeUserFromConversation,
+	removeGuestFromConversation,
+} from '../services/participantsService'
 import { PARTICIPANT } from '../constants'
 
 const state = {
@@ -77,6 +82,11 @@ const mutations = {
 			state.participants[token][index] = Object.assign(state.participants[token][index], updatedData)
 		}
 	},
+	deleteParticipant(state, { token, index }) {
+		if (state.participants[token] && state.participants[token][index]) {
+			Vue.delete(state.participants[token], index)
+		}
+	},
 	/**
 	 * Resets the store to it's original state
 	 * @param {object} state current store state;
@@ -127,6 +137,20 @@ const actions = {
 		}
 		commit('updateParticipant', { token, index, updatedData })
 	},
+	async removeParticipant({ commit, getters }, { token, participantIdentifier }) {
+		const index = getters.getParticipantIndex(token, participantIdentifier)
+		if (index === -1) {
+			return
+		}
+
+		const participant = getters.getParticipant(token, index)
+		if (participant.userId) {
+			await removeUserFromConversation(token, participant.userId)
+		} else {
+			await removeGuestFromConversation(token, participant.sessionId)
+		}
+		commit('deleteParticipant', { token, index })
+	},
 	/**
 	 * Resets the store to it's original state.
 	 * @param {object} context default store context;

From cec984a2d1b410df7222786004957683760a3ef9 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Tue, 5 Nov 2019 23:53:42 +0100
Subject: [PATCH 3/9] Sort the participants by moderator > online > displayname

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../ParticipantsTab/ParticipantsTab.vue       | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
index 11ea328fe..273d28e2b 100644
--- a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
+++ b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
@@ -39,6 +39,7 @@
 import Participant from './Participant'
 import { fetchParticipants } from '../../../services/participantsService'
 import { EventBus } from '../../../services/EventBus'
+import { PARTICIPANT } from '../../../constants'
 
 export default {
 	name: 'ParticipantsTab',
@@ -58,7 +59,9 @@ export default {
 		 * @returns {array}
 		 */
 		participantsList() {
-			return this.$store.getters.participantsList(this.token)
+			const participants = this.$store.getters.participantsList(this.token)
+
+			return participants.sort(this.sortParticipants)
 		},
 	},
 
@@ -86,6 +89,26 @@ export default {
 			this.getParticipants()
 		},
 
+		sortParticipants(participant1, participant2) {
+			const moderatorTypes = [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR]
+			const moderator1 = moderatorTypes.indexOf(participant1.participantType) !== -1
+			const moderator2 = moderatorTypes.indexOf(participant2.participantType) !== -1
+
+			if (moderator1 !== moderator2) {
+				return moderator1 ? -1 : 1
+			}
+
+			if (participant1.sessionId === '0') {
+				if (participant2.sessionId !== '0') {
+					return 1
+				}
+			} else if (participant2.sessionId === '0') {
+				return -1
+			}
+
+			return participant2.displayName - participant1.displayName
+		},
+
 		async getParticipants() {
 			const participants = await fetchParticipants(this.token)
 			this.$store.dispatch('purgeParticipantsStore', this.token)

From c3c2a40534c2731ba0742a8512dc5b8532945a7d Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 6 Nov 2019 10:25:47 +0100
Subject: [PATCH 4/9] Fix current participant detection

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../Sidebar/ParticipantsTab/Participant.vue   | 20 ++++++++++++++++---
 .../ParticipantsTab/ParticipantsTab.vue       | 16 +++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/ParticipantsTab/Participant.vue b/src/components/Sidebar/ParticipantsTab/Participant.vue
index e49c16dcf..083a18643 100644
--- a/src/components/Sidebar/ParticipantsTab/Participant.vue
+++ b/src/components/Sidebar/ParticipantsTab/Participant.vue
@@ -61,6 +61,7 @@ import Actions from 'nextcloud-vue/dist/Components/Actions'
 import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
 import Avatar from 'nextcloud-vue/dist/Components/Avatar'
 import { PARTICIPANT } from '../../../constants'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
 	name: 'Participant',
@@ -98,12 +99,21 @@ export default {
 		token() {
 			return this.$route.params.token
 		},
+		currentParticipant() {
+			return this.$store.getters.conversations[this.token]
+		},
 
 		isSelf() {
-			return false // FIXME
+			// User
+			if (this.userId) {
+				return getCurrentUser().uid === this.userId
+			}
+
+			// Guest
+			return this.sessionId !== '0' && this.sessionId === this.currentParticipant.sessionId
 		},
 		selfIsModerator() {
-			return true // FIXME
+			return this.participantTypeIsModerator(this.currentParticipant.participantType)
 		},
 
 		isOffline() {
@@ -113,7 +123,7 @@ export default {
 			return [PARTICIPANT.TYPE.GUEST, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(this.participantType) !== -1
 		},
 		isModerator() {
-			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(this.participantType) !== -1
+			return this.participantTypeIsModerator(this.participantType)
 		},
 		canModerate() {
 			return this.participantType !== PARTICIPANT.TYPE.OWNER && !this.isSelf && this.selfIsModerator
@@ -148,6 +158,10 @@ export default {
 	},
 
 	methods: {
+		participantTypeIsModerator(participantType) {
+			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(participantType) !== -1
+		},
+
 		async promoteToModerator() {
 			await this.$store.dispatch('promoteToModerator', {
 				token: this.token,
diff --git a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
index 273d28e2b..9dfbfd2ee 100644
--- a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
+++ b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
@@ -89,6 +89,22 @@ export default {
 			this.getParticipants()
 		},
 
+		/**
+		 * Sort two participants by:
+		 * - type (moderators before normal participants)
+		 * - online status
+		 * - display name
+		 *
+		 * @param {object} participant1 First participant
+		 * @param {int} participant1.participantType First participant type
+		 * @param {string} participant1.sessionId First participant session
+		 * @param {string} participant1.displayName First participant display name
+		 * @param {object} participant2 Second participant
+		 * @param {int} participant2.participantType Second participant type
+		 * @param {string} participant2.sessionId Second participant session
+		 * @param {string} participant2.displayName Second participant display name
+		 * @returns {number}
+		 */
 		sortParticipants(participant1, participant2) {
 			const moderatorTypes = [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR]
 			const moderator1 = moderatorTypes.indexOf(participant1.participantType) !== -1

From dcc28a8ab450f4cb0adf0b9ae1b6c73d81349a71 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 6 Nov 2019 11:19:30 +0100
Subject: [PATCH 5/9] Move the SearchBox to a generic place

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/components/Navigation/Navigation.vue                    | 6 +++---
 .../AppNavigationSearch.vue => SearchBox/SearchBox.vue}     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/{Navigation/AppNavigationSearch/AppNavigationSearch.vue => SearchBox/SearchBox.vue} (97%)

diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
index 864748ad4..1566d5240 100644
--- a/src/components/Navigation/Navigation.vue
+++ b/src/components/Navigation/Navigation.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<AppNavigation class="vue navigation">
-		<AppNavigationSearch
+		<SearchBox
 			v-model="searchText"
 			@input="debounceFetchSearchResults" />
 		<ul>
@@ -57,7 +57,6 @@
 
 <script>
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationSearch from './AppNavigationSearch/AppNavigationSearch'
 import Caption from './Caption/Caption'
 import ContactsList from './ContactsList/ContactsList'
 import ConversationsList from './ConversationsList/ConversationsList'
@@ -65,6 +64,7 @@ import GroupsList from './GroupsList/GroupsList'
 import Hint from './Hint/Hint'
 import NewPrivateConversation from './NewConversation/NewPrivateConversation'
 import NewPublicConversation from './NewConversation/NewPublicConversation'
+import SearchBox from '../SearchBox/SearchBox'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus'
 import { searchPossibleConversations } from '../../services/conversationsService'
@@ -77,7 +77,6 @@ export default {
 
 	components: {
 		AppNavigation,
-		AppNavigationSearch,
 		Caption,
 		ContactsList,
 		ConversationsList,
@@ -85,6 +84,7 @@ export default {
 		Hint,
 		NewPrivateConversation,
 		NewPublicConversation,
+		SearchBox,
 	},
 
 	data() {
diff --git a/src/components/Navigation/AppNavigationSearch/AppNavigationSearch.vue b/src/components/SearchBox/SearchBox.vue
similarity index 97%
rename from src/components/Navigation/AppNavigationSearch/AppNavigationSearch.vue
rename to src/components/SearchBox/SearchBox.vue
index c3f48f7e2..5cbd7328c 100644
--- a/src/components/Navigation/AppNavigationSearch/AppNavigationSearch.vue
+++ b/src/components/SearchBox/SearchBox.vue
@@ -35,7 +35,7 @@
 <script>
 
 export default {
-	name: 'AppNavigationSearch',
+	name: 'SearchBox',
 	props: {
 		/**
 		 * Refers to the focused state of the input search box when loading the page.
@@ -87,7 +87,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables.scss';
+@import '../../assets/variables.scss';
 
 .app-navigation-search {
 	height: $top-bar-height !important;

From 909d1ac2586f0e67108df593ad2cbf5237f79ffb Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 6 Nov 2019 13:49:21 +0100
Subject: [PATCH 6/9] Make it petty :)

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../Sidebar/ParticipantsTab/Participant.vue   | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/Sidebar/ParticipantsTab/Participant.vue b/src/components/Sidebar/ParticipantsTab/Participant.vue
index 083a18643..43d15e9ba 100644
--- a/src/components/Sidebar/ParticipantsTab/Participant.vue
+++ b/src/components/Sidebar/ParticipantsTab/Participant.vue
@@ -22,17 +22,15 @@
 <template>
 	<li class="participant-row"
 		:class="{ offline: isOffline, currentUser: isSelf, guestUser: isGuest }">
-		<div class="avatar-wrapper">
+		<div class="participant-row__avatar-wrapper">
 			<Avatar
 				:user="userId"
 				:display-name="displayName" />
 		</div>
 
-		<span>{{ displayName }}</span>
-
-		<span v-if="isModerator" class="moderator-indicator">({{ t('spreed', 'moderator') }})</span>
-		<span v-if="inCall" class="icon icon-video" />
-
+		<span class="participant-row__user-name">{{ displayName }}</span>
+		<span v-if="isModerator" class="participant-row__moderator-indicator">({{ t('spreed', 'moderator') }})</span>
+		<div v-if="inCall" class="participant-row__icon icon-video" />
 		<template v-if="canModerate">
 			<Actions>
 				<ActionButton v-if="canBeDemoted"
@@ -186,14 +184,32 @@ export default {
 
 <style lang="scss" scoped>
 
-.moderator-indicator {
-	color: var(--color-text-maxcontrast);
-	font-weight: 300;
-	padding-left: 5px;
+.participant-row {
+	display: flex;
+	align-items: center;
+	&__avatar-wrapper {
+		height: 32px;
+		width: 32px;
+	}
+	&__user-name {
+		margin-left: 6px;
+		display: inline-block;
+		vertical-align: middle;
+		line-height: normal;
+	}
+	&__moderator-indicator {
+		color: var(--color-text-maxcontrast);
+		font-weight: 300;
+		padding-left: 5px;
+	}
+	&__icon {
+		width: 32px;
+		height: 44px;
+	}
 }
 
 .offline {
-	& > .avatar-wrapper {
+	& > .participant-row__avatar-wrapper {
 		opacity: .4;
 	}
 	& > span {

From 2ce9eb34f50d8e2650f4456c1e71a34ed79629e7 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 6 Nov 2019 15:16:38 +0100
Subject: [PATCH 7/9] Fix store change without mutation

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
index 9dfbfd2ee..d69e8996d 100644
--- a/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
+++ b/src/components/Sidebar/ParticipantsTab/ParticipantsTab.vue
@@ -61,7 +61,7 @@ export default {
 		participantsList() {
 			const participants = this.$store.getters.participantsList(this.token)
 
-			return participants.sort(this.sortParticipants)
+			return participants.slice().sort(this.sortParticipants)
 		},
 	},
 

From 59707a2fb8fbd233d6f74e49cf92b30b24f48745 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 6 Nov 2019 15:41:40 +0100
Subject: [PATCH 8/9] Fix errors from rebase

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 .../Sidebar/ParticipantsTab/Participant.vue          | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/Sidebar/ParticipantsTab/Participant.vue b/src/components/Sidebar/ParticipantsTab/Participant.vue
index 43d15e9ba..87e409c05 100644
--- a/src/components/Sidebar/ParticipantsTab/Participant.vue
+++ b/src/components/Sidebar/ParticipantsTab/Participant.vue
@@ -30,7 +30,7 @@
 
 		<span class="participant-row__user-name">{{ displayName }}</span>
 		<span v-if="isModerator" class="participant-row__moderator-indicator">({{ t('spreed', 'moderator') }})</span>
-		<div v-if="inCall" class="participant-row__icon icon-video" />
+
 		<template v-if="canModerate">
 			<Actions>
 				<ActionButton v-if="canBeDemoted"
@@ -55,9 +55,9 @@
 
 <script>
 
-import Actions from 'nextcloud-vue/dist/Components/Actions'
-import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import { PARTICIPANT } from '../../../constants'
 import { getCurrentUser } from '@nextcloud/auth'
 
@@ -133,10 +133,6 @@ export default {
 		canBePromoted() {
 			return this.canModerate && !this.isModerator
 		},
-		inCall() {
-			// FIXME
-			return true
-		},
 
 		participantIdentifier() {
 			let data = {}

From 47a7e89b57393f61bea502197eb6c39780f9f3c6 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 6 Nov 2019 17:47:42 +0100
Subject: [PATCH 9/9] Fix 2 remaining imports

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/components/NewConversationForm/NewConversationForm.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NewConversationForm/NewConversationForm.vue b/src/components/NewConversationForm/NewConversationForm.vue
index f00de50e0..ada881047 100644
--- a/src/components/NewConversationForm/NewConversationForm.vue
+++ b/src/components/NewConversationForm/NewConversationForm.vue
@@ -27,8 +27,8 @@
 </template>
 
 <script>
-import AppNavigationNew from 'nextcloud-vue/dist/Components/AppNavigationNew'
-import Multiselect from 'nextcloud-vue/dist/Components/Multiselect'
+import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 
 export default {
 	name: 'NewConversationForm',