diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 35abeeca06..f49deaa489 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -15,10 +15,11 @@ limitations under the License.
*/
angular.module('RoomController', ['ngSanitize', 'mUtilities'])
-.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', 'mUtilities',
- function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) {
+.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', 'mUtilities', '$rootScope',
+ function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities, $rootScope) {
'use strict';
var MESSAGES_PER_PAGINATION = 30;
+ var THUMBNAIL_SIZE = 320;
// Room ids. Computed and resolved in onInit
$scope.room_id = undefined;
@@ -28,9 +29,11 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
user_id: matrixService.config().user_id,
events_from: "END", // when to start the event stream from.
earliest_token: "END", // stores how far back we've paginated.
+ first_pagination: true, // this is toggled off when the first pagination is done
can_paginate: true, // this is toggled off when we run out of items
paginating: false, // used to avoid concurrent pagination requests pulling in dup contents
stream_failure: undefined, // the response when the stream fails
+ // FIXME: sending has been disabled, as surely messages should be sent in the background rather than locking the UI synchronously --Matthew
sending: false // true when a message is being sent. It helps to disable the UI when a process is running
};
$scope.members = {};
@@ -99,7 +102,6 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
var originalTopRow = $("#messageTable>tbody>tr:first")[0];
matrixService.paginateBackMessages($scope.room_id, $scope.state.earliest_token, numItems).then(
function(response) {
- var firstPagination = !$scope.events.rooms[$scope.room_id];
eventHandlerService.handleEvents(response.data.chunk, false);
$scope.state.earliest_token = response.data.end;
if (response.data.chunk.length < MESSAGES_PER_PAGINATION) {
@@ -125,8 +127,9 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
}, 0);
}
- if (firstPagination) {
+ if ($scope.state.first_pagination) {
scrollToBottom();
+ $scope.state.first_pagination = false;
}
else {
// lock the scroll position
@@ -149,7 +152,12 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
};
var updateMemberList = function(chunk) {
- var isNewMember = !(chunk.target_user_id in $scope.members);
+ if (chunk.room_id != $scope.room_id) return;
+
+ // set target_user_id to keep things clear
+ var target_user_id = chunk.state_key;
+
+ var isNewMember = !(target_user_id in $scope.members);
if (isNewMember) {
// FIXME: why are we copying these fields around inside chunk?
if ("state" in chunk.content) {
@@ -158,8 +166,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
if ("mtime_age" in chunk.content) {
chunk.mtime_age = chunk.content.mtime_age;
}
-/*
- // FIXME: once the HS reliably returns the displaynames & avatar_urls for both
+ // Once the HS reliably returns the displaynames & avatar_urls for both
// local and remote users, we should use this rather than the evalAsync block
// below
if ("displayname" in chunk.content) {
@@ -168,9 +175,11 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
if ("avatar_url" in chunk.content) {
chunk.avatar_url = chunk.content.avatar_url;
}
- */
- $scope.members[chunk.target_user_id] = chunk;
+ $scope.members[target_user_id] = chunk;
+/*
+ // Stale code for explicitly hammering the homeserver for every displayname & avatar_url
+
// get their display name and profile picture and set it to their
// member entry in $scope.members. We HAVE to use $timeout with 0 delay
// to make this function run AFTER the current digest cycle, else the
@@ -194,10 +203,15 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
}
);
});
+*/
+
+ if (target_user_id in $rootScope.presence) {
+ updatePresence($rootScope.presence[target_user_id]);
+ }
}
else {
// selectively update membership else it will nuke the picture and displayname too :/
- var member = $scope.members[chunk.target_user_id];
+ var member = $scope.members[target_user_id];
member.content.membership = chunk.content.membership;
}
}
@@ -235,7 +249,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
}
$scope.state.sending = true;
-
+
// Send the text message
var promise;
// FIXME: handle other commands too
@@ -259,9 +273,8 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
};
$scope.onInit = function() {
- // $timeout(function() { document.getElementById('textInput').focus() }, 0);
console.log("onInit");
-
+
// Does the room ID provided in the URL?
var room_id_or_alias;
if ($routeParams.room_id_or_alias) {
@@ -289,7 +302,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
else {
// In case of issue, go to the default page
console.log("Error: cannot extract room alias");
- $location.path("/");
+ $location.url("/");
return;
}
}
@@ -306,12 +319,14 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
function () {
// In case of issue, go to the default page
console.log("Error: cannot resolve room alias");
- $location.path("/");
+ $location.url("/");
});
}
};
var onInit2 = function() {
+ eventHandlerService.reInitRoom($scope.room_id);
+
// Join the room
matrixService.join($scope.room_id).then(
function() {
@@ -324,6 +339,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
var chunk = response.data.chunk[i];
updateMemberList(chunk);
}
+ eventStreamService.resume();
},
function(error) {
$scope.feedback = "Failed get member list: " + error.data.error;
@@ -359,7 +375,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
matrixService.leave($scope.room_id).then(
function(response) {
console.log("Left room ");
- $location.path("rooms");
+ $location.url("home");
},
function(error) {
$scope.feedback = "Failed to leave room: " + error.data.error;
@@ -386,33 +402,22 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
$scope.state.sending = true;
- // First, get the image sise
- mUtilities.getImageSize($scope.imageFileToSend).then(
- function(size) {
-
- // Upload the image to the Internet
- console.log("Uploading image...");
- mFileUpload.uploadFile($scope.imageFileToSend).then(
- function(url) {
- // Build the image info data
- var imageInfo = {
- size: $scope.imageFileToSend.size,
- mimetype: $scope.imageFileToSend.type,
- w: size.width,
- h: size.height
- };
-
- // Then share the URL and the metadata
- $scope.sendImage(url, imageInfo);
+ // Upload this image with its thumbnail to Internet
+ mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then(
+ function(imageMessage) {
+ // imageMessage is complete message structure, send it as is
+ matrixService.sendMessage($scope.room_id, undefined, imageMessage).then(
+ function() {
+ console.log("Image message sent");
+ $scope.state.sending = false;
},
function(error) {
- $scope.feedback = "Can't upload image";
+ $scope.feedback = "Failed to send image message: " + error.data.error;
$scope.state.sending = false;
- }
- );
+ });
},
function(error) {
- $scope.feedback = "Can't get selected image size";
+ $scope.feedback = "Can't upload image";
$scope.state.sending = false;
}
);
diff --git a/webclient/room/room-directive.js b/webclient/room/room-directive.js
index 94655336df..1a99a37abb 100644
--- a/webclient/room/room-directive.js
+++ b/webclient/room/room-directive.js
@@ -17,30 +17,30 @@
'use strict';
angular.module('RoomController')
-.directive('autoComplete', ['$timeout', function ($timeout) {
+.directive('tabComplete', ['$timeout', function ($timeout) {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
// console.log("event: " + event.which);
if (event.which === 9) {
- if (!scope.autoCompleting) { // cache our starting text
+ if (!scope.tabCompleting) { // cache our starting text
// console.log("caching " + element[0].value);
- scope.autoCompleteOriginal = element[0].value;
- scope.autoCompleting = true;
+ scope.tabCompleteOriginal = element[0].value;
+ scope.tabCompleting = true;
}
if (event.shiftKey) {
- scope.autoCompleteIndex--;
- if (scope.autoCompleteIndex < 0) {
- scope.autoCompleteIndex = 0;
+ scope.tabCompleteIndex--;
+ if (scope.tabCompleteIndex < 0) {
+ scope.tabCompleteIndex = 0;
}
}
else {
- scope.autoCompleteIndex++;
+ scope.tabCompleteIndex++;
}
var searchIndex = 0;
- var targetIndex = scope.autoCompleteIndex;
- var text = scope.autoCompleteOriginal;
+ var targetIndex = scope.tabCompleteIndex;
+ var text = scope.tabCompleteOriginal;
// console.log("targetIndex: " + targetIndex + ", text=" + text);
@@ -90,17 +90,17 @@ angular.module('RoomController')
element[0].className = "";
}, 150);
element[0].value = text;
- scope.autoCompleteIndex = 0;
+ scope.tabCompleteIndex = 0;
}
}
else {
- scope.autoCompleteIndex = 0;
+ scope.tabCompleteIndex = 0;
}
event.preventDefault();
}
- else if (event.which !== 16 && scope.autoCompleting) {
- scope.autoCompleting = false;
- scope.autoCompleteIndex = 0;
+ else if (event.which !== 16 && scope.tabCompleting) {
+ scope.tabCompleting = false;
+ scope.tabCompleteIndex = 0;
}
});
};
diff --git a/webclient/room/room.html b/webclient/room/room.html
index db6add4ee7..c167819f15 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -1,4 +1,5 @@
<div ng-controller="RoomController" data-ng-init="onInit()" class="room">
+ <h1 id="roomLogo">[matrix]</h1>
<div id="page">
<div id="wrapper">
@@ -10,7 +11,7 @@
<div id="usersTableWrapper">
<table id="usersTable">
<tr ng-repeat="member in members | orderMembersList">
- <td class="userAvatar" ng-click="goToUserPage(member.id)">
+ <td class="userAvatar mouse-pointer" ng-click="goToUserPage(member.id)">
<img class="userAvatarImage"
ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}"
alt="{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}"
@@ -26,24 +27,35 @@
</div>
<div id="messageTableWrapper" keep-scroll>
+ <!-- FIXME: need to have better timestamp semantics than the (msg.content.hsob_ts || msg.ts) hack below -->
<table id="messageTable" infinite-scroll="paginateMore()">
<tr ng-repeat="msg in events.rooms[room_id].messages"
- ng-class="(events.rooms[room_id].messages[$index - 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
+ ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
<td class="leftBlock">
<div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
- <div class="timestamp">{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}</div>
+ <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div>
</td>
<td class="avatar">
<img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
</td>
- <td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
+ <td ng-class="!msg.content.membership ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
<div class="bubble">
+ <span ng-hide='msg.type !== "m.room.member"'>
+ {{ members[msg.user_id].displayname || msg.user_id }}
+ {{ {"join": "joined", "leave": "left", "invite": "invited"}[msg.content.membership] }}
+ {{ msg.content.membership === "invite" ? (msg.state_key || '') : '' }}
+ </span>
<span ng-hide='msg.content.msgtype !== "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/>
<span ng-hide='msg.content.msgtype !== "m.text"' ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
- <div ng-hide='msg.content.msgtype !== "m.image"'
- ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
- <img class="image" ng-src="{{ msg.content.url }}"/>
+ <div ng-show='msg.content.msgtype === "m.image"'>
+ <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
+ <img class="image" ng-src="{{ msg.content.url }}"/>
+ </div>
+ <div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }">
+ <img class="image mouse-pointer" ng-src="{{ msg.content.thumbnail_url }}"
+ ng-click="$parent.fullScreenImageURL = msg.content.url"/>
+ </div>
</div>
</div>
</td>
@@ -62,29 +74,28 @@
<div id="controls">
<table id="inputBarTable">
<tr>
- <td width="1">
+ <td id="userIdCell" width="1px">
{{ state.user_id }}
</td>
- <td width="*" style="min-width: 100px">
- <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-disabled="state.sending" ng-focus="true" auto-complete/>
+ <td width="*">
+ <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" autocomplete="off" tab-complete/>
</td>
- <td width="150px">
- <button ng-click="send()" ng-disabled="state.sending">Send</button>
- <button m-file-input="imageFileToSend">Send Image</button>
- </td>
- <td width="1">
-
+ <td id="buttonsCell">
+ <button ng-click="send()">Send</button>
+ <button m-file-input="imageFileToSend">Image</button>
</td>
</tr>
</table>
- <span>
- Invite a user:
- <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>
- <button ng-click="inviteUser(userIDToInvite)">Invite</button>
- </span>
- <button ng-click="leaveRoom()">Leave</button>
- <button ng-click="loadMoreHistory()" ng-disabled="!state.can_paginate">Load more history</button>
+ <div id="extraControls">
+ <span>
+ Invite a user:
+ <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>
+ <button ng-click="inviteUser(userIDToInvite)">Invite</button>
+ </span>
+ <button ng-click="leaveRoom()">Leave</button>
+ </div>
+
{{ feedback }}
<div ng-hide="!state.stream_failure">
{{ state.stream_failure.data.error || "Connection failure" }}
@@ -92,4 +103,8 @@
</div>
</div>
+ <div id="room-fullscreen-image" ng-show="fullScreenImageURL" ng-click="fullScreenImageURL = undefined;">
+ <img ng-src="{{ fullScreenImageURL }}"/>
+ </div>
+
</div>
|
