[stable13] Chat guest handling

.eslintrc.yml

@@ -15,9 +15,9 @@ globals:
   t: false
   Backbone: false
   _: false
-  oc_current_user: false
   Clipboard: false
   oc_defaults: false
+  Hashes: false
 
 rules:
   curly: error

appinfo/info.xml

@@ -17,7 +17,7 @@ And in the works for the [coming versions](https://github.com/nextcloud/spreed/m
 
 	]]></description>
 
-	<version>3.1.90</version>
+	<version>3.1.91</version>
 	<licence>agpl</licence>
 
 	<author>Daniel Calviño Sánchez</author>

appinfo/routes.php

@@ -265,6 +265,15 @@
 				'token' => '^[a-z0-9]{4,30}$',
 			],
 		],
+		[
+			'name' => 'Guest#setDisplayName',
+			'url' => '/api/{apiVersion}/guest/{token}/name',
+			'verb' => 'POST',
+			'requirements' => [
+				'apiVersion' => 'v1',
+				'token' => '^[a-z0-9]{4,30}$',
+			],
+		],
 	],
 ];
 

bower.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "backbone": "1.2.3",
     "backbone.marionette": "3.0.0",
-    "jquery": "^2.0"
+    "jquery": "^2.0",
+    "jshashes": "^1.0"
   }
 }

css/style.scss

@@ -927,26 +927,31 @@ video {
 }
 
 .detailCallInfoContainer h3,
+.newCommentRow .guest-name p,
 .detailCallInfoContainer .guest-name p {
 	display: inline-block;
 }
 
+.newCommentRow .guest-name p,
 .detailCallInfoContainer .guest-name p {
 	padding: 9px 0;
 }
 
+.newCommentRow .editable-text-label .edit-button,
 .detailCallInfoContainer .editable-text-label .edit-button {
 	display: none;
 }
 
 .detailCallInfoContainer .clipboard-button,
 .detailCallInfoContainer .password-button,
+.newCommentRow .editable-text-label:hover .edit-button,
 .detailCallInfoContainer .editable-text-label:hover .edit-button {
 	display: inline-block;
 }
 
 .detailCallInfoContainer .clipboard-button .icon,
 .detailCallInfoContainer .password-button .icon,
+.newCommentRow .editable-text-label .edit-button .icon,
 .detailCallInfoContainer .editable-text-label .edit-button .icon {
 	cursor: pointer;
 	padding: 22px;
@@ -955,17 +960,23 @@ video {
 	margin-top: -5px;
 }
 
+.newCommentRow .editable-text-label .input-wrapper,
 .detailCallInfoContainer .editable-text-label .input-wrapper,
 .detailCallInfoContainer .password-option {
 	position: relative;
 	display: inline-block;
 }
 
+.newCommentRow .editable-text-label input,
 .detailCallInfoContainer .editable-text-label input,
 .detailCallInfoContainer .password-input {
 	width: 100%;
 }
 
+.newCommentRow .editable-text-label .label {
+	margin-left: 5px;
+}
+
 .detailCallInfoContainer #link-checkbox+label {
 	display: inline-block;
 	padding: 12px 0;

docs/api-v1.md

@@ -454,12 +454,32 @@ Base endpoint is: `/ocs/v2.php/apps/spreed/api/v1`
     field | type | Description
     ------|------|------------
     `message` | string | The message the user wants to say
+    `actorDisplayName` | string | Guest display name (ignored for logged in users)
 
 * Response:
     - Header:
         + `201 Created`
         + `404 Not Found` When the room could not be found for the participant
+
+## Guests
 
+### Set display name
+
+* Method: `POST`
+* Endpoint: `/guest/{token}/name`
+* Data:
+
+    field | type | Description
+    ------|------|------------
+    `displayName` | string | The new display name
+
+* Response:
+    - Header:
+        + `200 OK`
+        + `404 Not Found` When the room is not found or the session does not exist in the room
+        + `403 Forbidden` When the user is logged in
+
+
 ## Signaling
 
 See the [Draft](https://github.com/nextcloud/spreed/wiki/Signaling-API) in the wiki…

js/app.js

@@ -86,7 +86,7 @@
 						var results = [];
 
 						$.each(response.ocs.data.exact.users, function(id, user) {
-							if (oc_current_user === user.value.shareWith) {
+							if (OC.getCurrentUser().uid === user.value.shareWith) {
 								return;
 							}
 							results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
@@ -95,7 +95,7 @@
 							results.push({ id: group.value.shareWith, displayName: group.label + ' ' + t('spreed', '(group)'), type: "group"});
 						});
 						$.each(response.ocs.data.users, function(id, user) {
-							if (oc_current_user === user.value.shareWith) {
+							if (OC.getCurrentUser().uid === user.value.shareWith) {
 								return;
 							}
 							results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
@@ -334,6 +334,11 @@
 				id: 'participantsTabView'
 			});
 
+			this.signaling.on('usersInRoom', function() {
+				// Also refresh the participant list when the users change
+				this._participants.fetch();
+			}.bind(this));
+
 			this._participantsView.listenTo(this._rooms, 'change:active', function(model, active) {
 				if (active) {
 					this.setRoom(model);
@@ -346,7 +351,7 @@
 		 * @param {string} token
 		 */
 		_setRoomActive: function(token) {
-			if (oc_current_user) {
+			if (OC.getCurrentUser().uid) {
 				this._rooms.forEach(function(room) {
 					room.set('active', room.get('token') === token);
 				});
@@ -368,7 +373,7 @@
 				.then(function() {
 					self.stopListening(self.activeRoom, 'change:participantInCall');
 
-					if (oc_current_user) {
+					if (OC.getCurrentUser().uid) {
 						roomChannel.trigger('active', token);
 
 						self._rooms.forEach(function(room) {
@@ -507,9 +512,11 @@
 			this._sidebarView = new OCA.SpreedMe.Views.SidebarView();
 			$('#app-content').append(this._sidebarView.$el);
 
-			if (oc_current_user) {
+			if (OC.getCurrentUser().uid) {
 				this._rooms = new OCA.SpreedMe.Models.RoomCollection();
 				this.listenTo(roomChannel, 'active', this._setRoomActive);
+			} else {
+				this.initGuestName();
 			}
 
 			this._sidebarView.listenTo(roomChannel, 'leaveCurrentCall', function() {
@@ -520,7 +527,8 @@
 			this._chatView = new OCA.SpreedMe.Views.ChatView({
 				collection: this._messageCollection,
 				id: 'commentsTabView',
-				oldestOnTopLayout: true
+				oldestOnTopLayout: true,
+				guestNameModel: this._localStorageModel
 			});
 
 			this._messageCollection.listenTo(roomChannel, 'leaveCurrentCall', function() {
@@ -535,10 +543,6 @@
 			this.connection = new OCA.Talk.Connection(this);
 			this.token = $('#app').attr('data-token');
 
-			if (!OC.getCurrentUser().uid) {
-				this.initGuestName();
-			}
-
 			$(window).unload(function () {
 				this.connection.leaveAllCalls();
 				this.signaling.disconnect();
@@ -656,15 +660,15 @@
 
 			var avatar = avatarContainer.find('.avatar');
 			var guestName = localStorage.getItem("nick");
-			if (oc_current_user) {
-				avatar.avatar(OC.currentUser, 128);
-			} else if (guestName) {
-				avatar.imageplaceholder(guestName, undefined, 128);
-			} else if (this.displayedGuestNameHint === false) {
-				avatar.imageplaceholder('?', undefined, 128);
+			if (OC.getCurrentUser().uid) {
+				avatar.avatar(OC.getCurrentUser().uid, 128);
+			} else {
+				avatar.imageplaceholder('?', guestName, 128);
 				avatar.css('background-color', '#b9b9b9');
-				OC.Notification.showTemporary(t('spreed', 'You can set your name on the right sidebar so other participants can identify you better.'));
-				this.displayedGuestNameHint = true;
+				if (this.displayedGuestNameHint === false) {
+					OC.Notification.showTemporary(t('spreed', 'You can set your name on the right sidebar so other participants can identify you better.'));
+					this.displayedGuestNameHint = true;
+				}
 			}
 
 			avatarContainer.removeClass('hidden');
@@ -677,23 +681,36 @@
 			this.videoDisabled = true;
 		},
 		initGuestName: function() {
+			var self = this;
 			this._localStorageModel = new OCA.SpreedMe.Models.LocalStorageModel({ nick: '' });
-			this._localStorageModel.on('change:nick', function(model, value) {
-				var avatar = $('#localVideoContainer').find('.avatar');
+			this._localStorageModel.on('change:nick', function(model, newDisplayName) {
+				$.ajax({
+					url: OC.linkToOCS('apps/spreed/api/v1/guest', 2) + this.token + '/name',
+					type: 'POST',
+					data: {
+						displayName: newDisplayName
+					},
+					beforeSend: function (request) {
+						request.setRequestHeader('Accept', 'application/json');
+					},
+					success: function() {
+						self._onChangeGuestName(newDisplayName);
+					}
+				});
+			}.bind(this));
 
-				if (value) {
-					avatar.imageplaceholder(value, undefined, 128);
-				} else {
-					avatar.imageplaceholder('?', undefined, 128);
-					avatar.css('background-color', '#b9b9b9');
-				}
+			this._localStorageModel.fetch();
+		},
+		_onChangeGuestName: function(newDisplayName) {
+			var avatar = $('#localVideoContainer').find('.avatar');
 
-				if (OCA.SpreedMe.webrtc) {
-					OCA.SpreedMe.webrtc.sendDirectlyToAll('status', 'nickChanged', value);
-				}
-			});
+			avatar.imageplaceholder('?', newDisplayName, 128);
+			avatar.css('background-color', '#b9b9b9');
 
-			this._localStorageModel.fetch();
+			if (OCA.SpreedMe.webrtc) {
+				console.log('_onChangeGuestName.webrtc');
+				OCA.SpreedMe.webrtc.sendDirectlyToAll('status', 'nickChanged', newDisplayName);
+			}
 		},
 		initShareRoomClipboard: function () {
 			$('body').find('.shareRoomClipboard').tooltip({

js/models/chatmessage.js

@@ -72,6 +72,12 @@
 			}
 
 			return Backbone.Model.prototype.sync.call(this, method, model, options);
+		},
+
+		updateGuestName: function(data) {
+			if (this.get('actorType') === 'guests' && this.get('actorId') === data.sessionId && this.get('actorDisplayName') !== data.displayName) {
+				this.set('actorDisplayName', data.displayName);
+			}
 		}
 
 	});

js/models/chatmessagecollection.js

@@ -137,6 +137,10 @@
 			this.reset();
 		},
 
+		updateGuestName: function(sessionId, newDisplayName) {
+			this.invoke('updateGuestName', {sessionId: sessionId, displayName: newDisplayName});
+		},
+
 		receiveMessages: function() {
 			this.receiveMessagesAgain = true;
 

js/signaling.js

@@ -141,7 +141,7 @@
 
 	OCA.Talk.Signaling.Base.prototype.syncRooms = function() {
 		var defer = $.Deferred();
-		if (this.roomCollection && oc_current_user) {
+		if (this.roomCollection && OC.getCurrentUser().uid) {
 			this.roomCollection.fetch({
 				success: function(data) {
 					defer.resolve(data);

js/vendor/jshashes/.bower.json

@@ -0,0 +1,40 @@
+{
+  "name": "jshashes",
+  "version": "1.0.7",
+  "description": "A fast and independent hashing library pure JavaScript implemented (ES3 compliant) for both server and client side (MD5, SHA1, SHA256, SHA512, RIPEMD, HMAC and Base64)",
+  "keywords": [
+    "hash",
+    "md5",
+    "sha1",
+    "sha256",
+    "hashes",
+    "sha512",
+    "RIPEMD",
+    "base64",
+    "hmac",
+    "crc",
+    "encoding",
+    "algorithm"
+  ],
+  "author": "Tomas Aparicio <tomas@aparicio.me>",
+  "main": "hashes.js",
+  "ignore": [
+    "**/.*",
+    "bin",
+    "test",
+    "examples/server",
+    "package.json",
+    "Makefile",
+    "node_modules"
+  ],
+  "homepage": "https://github.com/h2non/jshashes",
+  "_release": "1.0.7",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.7",
+    "commit": "4cf568ea0bc9bec4f837d5d294932049407c98bb"
+  },
+  "_source": "https://github.com/h2non/jshashes.git",
+  "_target": "^1.0",
+  "_originalSource": "jshashes"
+}

js/vendor/jshashes/LICENSE

@@ -0,0 +1,25 @@
+Copyright (c) 2012-2017, Tomas Aparicio
+Copyright (c) 1999-2012, Paul Johnston, Angel Marin, Jeremy Lin
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the <organization> nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.