Start with sidebar

appinfo/routes.php

@@ -139,6 +139,15 @@
 				'token' => '^[a-z0-9]{4,30}$',
 			],
 		],
+		[
+			'name' => 'Room#getParticipants',
+			'url' => '/api/{apiVersion}/room/{token}/participants',
+			'verb' => 'GET',
+			'requirements' => [
+				'apiVersion' => 'v1',
+				'token' => '^[a-z0-9]{4,30}$',
+			],
+		],
 		[
 			'name' => 'Room#addParticipantToRoom',
 			'url' => '/api/{apiVersion}/room/{token}/participants',

css/style.css

@@ -63,6 +63,7 @@
 	display: block !important;
 }
 
+#participantTabView .avatar,
 #app-navigation .avatar,
 #app-navigation .icon-contacts-dark,
 #app-navigation .app-navigation-entry-link .icon-public {
@@ -71,6 +72,7 @@
 	top: 6px;
 }
 
+#participantTabView li > a:first-child img,
 #app-navigation li > a:first-child img {
 	width: 32px !important;
 	height: 32px !important;
@@ -491,6 +493,7 @@ video {
 	display: none;
 }
 
+#participantTabView li > a,
 #app-navigation li > a {
     padding-right: 44px !important;
 }
@@ -610,3 +613,88 @@ video {
 #body-public #app-content:not(.participants-1) #guestName {
     color: rgba(255, 255, 255, 0.7);
 }
+
+/**
+ * Right sidebar
+ */
+
+#app-sidebar .detailCallInfoContainer {
+	padding: 15px;
+	clear: both;
+}
+
+.tabHeaders,
+#app-sidebar .icon {
+	display: inline-block;
+}
+
+#app-sidebar.hidden {
+	display: none !important;
+}
+
+#participantTabView .participant-moderator-indicator {
+	opacity: .5;
+	font-weight: 300;
+	padding-left: 5px;
+}
+
+#participantTabView .participant-offline > a {
+	opacity: .5;
+}
+
+#participantTabView li {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+#participantTabView .with-icon a, #participantTabView a {
+	padding-left: 44px;
+	background-size: 16px 16px;
+	background-position: 14px center;
+	background-repeat: no-repeat;
+}
+
+#participantTabView li > a {
+	display: block;
+	width: 100%;
+	line-height: 44px;
+	min-height: 44px;
+	padding: 0 12px;
+	overflow: hidden;
+	box-sizing: border-box;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+
+
+/**
+ * App navigation utils, buttons and counters for drop down menu
+ */
+#participantTabView .participant-entry-utils {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 105;
+}
+
+#participantTabView .active > .participant-entry-utils li {
+	display: inline-block;
+}
+
+#participantTabView .participant-entry-utils button {
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	box-shadow: none;
+}
+
+#participantTabView .participant-entry-utils-menu-button button {
+	border: 0;
+	opacity: .5;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-image: url('../../../core/img/actions/more.svg?v=1');
+}

js/app.js

@@ -28,10 +28,23 @@
 	var roomChannel = Backbone.Radio.channel('rooms');
 
 	var App = Marionette.Application.extend({
+		OWNER: 1,
+		MODERATOR: 2,
+		USER: 3,
+		GUEST: 4,
+		USERSELFJOINED: 5,
+
+		/** @property {OCA.SpreedMe.Models.Room} activeRoom  */
+		activeRoom: null,
+
 		/** @property {OCA.SpreedMe.Models.RoomCollection} _rooms  */
 		_rooms: null,
 		/** @property {OCA.SpreedMe.Views.RoomListView} _roomsView  */
 		_roomsView: null,
+		/** @property {OCA.SpreedMe.Models.ParticipantCollection} _participants  */
+		_participants: null,
+		/** @property {OCA.SpreedMe.Views.ParticipantView} _participantsView  */
+		_participantsView: null,
 		/** @property {boolean} videoWasEnabledAtLeastOnce  */
 		videoWasEnabledAtLeastOnce: false,
 		audioDisabled: localStorage.getItem("audioDisabled"),
@@ -333,6 +346,13 @@
 				collection: this._rooms
 			});
 		},
+		_showParticipantList: function() {
+			this._participants = new OCA.SpreedMe.Models.ParticipantCollection();
+			this._participantsView = new OCA.SpreedMe.Views.ParticipantView({
+				el: 'ul#participantWithList',
+				collection: this._participants
+			});
+		},
 		/**
 		 * @param {string} token
 		 */
@@ -365,6 +385,7 @@
 						// Disable video when entering a room with more than 5 participants.
 						self._rooms.forEach(function(room) {
 							if (room.get('token') === token) {
+								self.activeRoom = room;
 								if (Object.keys(room.get('participants')).length > 5) {
 									self.disableVideo();
 								}
@@ -523,6 +544,8 @@
 							$('#select-participants').select2('open');
 						}
 					});
+
+				this._showParticipantList();
 			}
 
 			this.initAudioVideoSettings(configuration);

js/models/participant.js

@@ -0,0 +1,43 @@
+/* global Backbone, OCA */
+
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @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/>.
+ *
+ */
+
+(function(OCA, Backbone) {
+	'use strict';
+
+	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.SpreedMe.Models = OCA.SpreedMe.Models || {};
+
+	OCA.SpreedMe.Models.Participant = Backbone.Model.extend({
+		defaults: {
+			displayName: '',
+			userId: '',
+			sessionId: '',
+			participantType: 4,
+			lastPing: 0
+		},
+
+		isOnline: function() {
+			return this.get('sessionId') !== '' && this.get('sessionId') !== '0';
+		}
+	});
+
+})(OCA, Backbone);

js/models/participantcollection.js

@@ -0,0 +1,86 @@
+/* global Backbone, OC, OCA */
+
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @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/>.
+ *
+ */
+
+(function(OCA, OC, Backbone) {
+	'use strict';
+
+	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.SpreedMe.Models = OCA.SpreedMe.Models || {};
+
+	OCA.SpreedMe.Models.ParticipantCollection = Backbone.Collection.extend({
+		model: OCA.SpreedMe.Models.Participant,
+		room: undefined,
+
+		/**
+		 * @param {OCA.SpreedMe.Models.Room} room
+		 * @returns {Array}
+		 */
+		setRoom: function(room) {
+			this.room = room;
+			this.url = OC.linkToOCS('apps/spreed/api/v1/room', 2) + this.room.get('token') + '/participants';
+		},
+
+		/**
+		 * @param result
+		 * @returns {Array}
+		 */
+		parse: function(result) {
+			return result.ocs.data;
+		},
+
+		/**
+		 * Sort participants:
+		 * - Moderators first
+		 * - Online status
+		 * - Alphabetic
+		 *
+		 * @param modelA
+		 * @param modelB
+		 * @returns {*}
+		 */
+		comparator: function(modelA, modelB) {
+			var onlineA = modelA.get('sessionId') !== '' && modelA.get('sessionId') !== '0',
+				onlineB = modelB.get('sessionId') !== '' && modelB.get('sessionId') !== '0',
+				moderateA = modelA.get('participantType') === OCA.SpreedMe.app.OWNER ||
+					modelA.get('participantType') === OCA.SpreedMe.app.MODERATOR,
+				moderateB = modelB.get('participantType') === OCA.SpreedMe.app.OWNER ||
+					modelB.get('participantType') === OCA.SpreedMe.app.MODERATOR,
+				guestA = modelA.get('participantType') === OCA.SpreedMe.app.GUEST,
+				guestB = modelB.get('participantType') === OCA.SpreedMe.app.GUEST;
+
+			if (moderateA !== moderateB) {
+				return moderateB - moderateA;
+			}
+
+			if (onlineA !== onlineB) {
+				return onlineB - onlineA;
+			}
+
+			if (guestA !== guestB) {
+				return guestA - guestB;
+			}
+
+			return modelA.get('displayName') > modelB.get('displayName');
+		}
+	});
+
+})(OCA, OC, Backbone);