new messages chat bar

clients/flash/air-client/src/Default.css

@@ -247,7 +247,7 @@ s|Image.bbbLogoStyle
 	skinClass: ClassReference("org.bigbluebutton.air.main.views.skins.BBBLogoSkin");
 }
 
-s|Image.iconStyle, s|Image.userDetailIconStyle
+s|Image.iconStyle, s|Image.smallIconStyle, s|Image.userDetailIconStyle
 {
 	skinClass: ClassReference("org.bigbluebutton.air.main.views.skins.IconSkin");
 }
@@ -312,6 +312,12 @@ s|Image.bigbbbLogoStyle
 s|View.chatViewStyle
 {
 	backgroundColor: #F1F3F7;
+	barColor: #4998D0;
+}
+
+s|HGroup.unreadMessagesBar
+{
+	color: #FFFFFF;
 }
 
 s|TextInput.msgInputBoxStyle
@@ -529,6 +535,7 @@ s|TextInput.msgInputBoxStyle
 	
 	s|View.chatViewStyle
 	{
+		unreadMessagesBarHeight: 36;
 		chatInputTextHeight:48;
 		btnWidth:40;
 	}
@@ -701,12 +708,23 @@ s|TextInput.msgInputBoxStyle
 		backgroundImage: Embed(source="assets/res/drawable-mdpi/video.png");
 	}
 	
+	s|Image.smallIconStyle
+	{
+		width: 16;
+		height: 16;
+	}
+	
 	s|Image.iconStyle, s|Group.participantIconStyle
 	{
 		width: 32;
 		height: 32;
 	}
 	
+	s|Image.oldMessagesIconStyle
+	{
+		backgroundImage: Embed(source="assets/res/drawable-mdpi/arrow_messages.png");
+	}
+	
 	s|Image.cameraIconStyle
 	{
 		backgroundImage: Embed(source="assets/res/drawable-mdpi/video.png");
@@ -1124,6 +1142,7 @@ s|TextInput.msgInputBoxStyle
 	
 	s|View.chatViewStyle
 	{
+		unreadMessagesBarHeight: 54;
 		chatInputTextHeight:72;
 		btnWidth:60;
 	}
@@ -1275,12 +1294,23 @@ s|TextInput.msgInputBoxStyle
 		backgroundImage: Embed(source="assets/res/drawable-hdpi/video.png");
 	}
 	
+	s|Image.smallIconStyle
+	{
+		width: 24;
+		height: 24;
+	}
+	
 	s|Image.iconStyle, s|Group.participantIconStyle
 	{
 		width: 48;
 		height: 48;
 	}
 	
+	s|Image.oldMessagesIconStyle
+	{
+		backgroundImage: Embed(source="assets/res/drawable-hdpi/arrow_messages.png");
+	}
+	
 	s|Image.cameraIconStyle
 	{
 		backgroundImage: Embed(source="assets/res/drawable-hdpi/video.png");
@@ -1690,6 +1720,7 @@ s|TextInput.msgInputBoxStyle
 	
 	s|View.chatViewStyle
 	{
+		unreadMessagesBarHeight: 72;
 		chatInputTextHeight:96;
 		btnWidth:80;
 	}
@@ -1849,12 +1880,23 @@ s|TextInput.msgInputBoxStyle
 		backgroundImage: Embed(source="assets/res/drawable-xhdpi/video.png");
 	}
 	
+	s|Image.smallIconStyle
+	{
+		width: 32;
+		height: 32;
+	}
+	
 	s|Image.iconStyle, s|Group.participantIconStyle
 	{
 		width: 64;
 		height: 64;
 	}
 	
+	s|Image.oldMessagesIconStyle
+	{
+		backgroundImage: Embed(source="assets/res/drawable-xhdpi/arrow_messages.png");
+	}
+	
 	s|Image.cameraIconStyle
 	{
 		backgroundImage: Embed(source="assets/res/drawable-xhdpi/video.png");
@@ -2258,6 +2300,7 @@ s|TextInput.msgInputBoxStyle
 	
 	s|View.chatViewStyle
 	{
+		unreadMessagesBarHeight: 108;
 		chatInputTextHeight:144;
 		btnWidth:120;
 	}
@@ -2426,12 +2469,23 @@ s|TextInput.msgInputBoxStyle
 		backgroundImage: Embed(source="assets/res/drawable-xxhdpi/video.png");
 	}
 	
+	s|Image.smallIconStyle
+	{
+		width: 48;
+		height: 48;
+	}
+	
 	s|Image.iconStyle, s|Group.participantIconStyle
 	{
 		width: 96;
 		height: 96;
 	}
 	
+	s|Image.oldMessagesIconStyle
+	{
+		backgroundImage: Embed(source="assets/res/drawable-xxhdpi/arrow_messages.png");
+	}
+	
 	s|Image.cameraIconStyle
 	{
 		backgroundImage: Embed(source="assets/res/drawable-xxhdpi/video.png");

clients/flash/air-client/src/locale/en_US/resources.properties

@@ -4,6 +4,7 @@ chat.public.title=Public Chat
 chat.sendBtn.text=Send
 chat.title=Chat Rooms
 chat.textInput.text=Type message here
+chat.unreadMessages=unread since
 loading.title=Loading Screen
 loading.message=You'll be joining this session audio only.
 login.error.checksumError=Unauthorized access.\nPlease try again.

clients/flash/air-client/src/org/bigbluebutton/air/chat/views/chat/ChatView.as

@@ -1,8 +1,11 @@
 package org.bigbluebutton.air.chat.views.chat {
 	
 	import flash.events.MouseEvent;
+	
 	import mx.core.FlexGlobals;
+	
 	import spark.components.Button;
+	import spark.components.Group;
 	import spark.components.Label;
 	import spark.components.List;
 	import spark.components.TextInput;
@@ -33,6 +36,14 @@ package org.bigbluebutton.air.chat.views.chat {
 			//buttonTestSignal.dispatch();
 		}
 		
+		public function get newMessages():Group {
+			return newMessagesBar;
+		}
+		
+		public function get newMessagesLabel():Label {
+			return newMessagesLabel0;
+		}
+		
 		public function dispose():void {
 		}
 	}

clients/flash/air-client/src/org/bigbluebutton/air/chat/views/chat/ChatViewBase.mxml

@@ -9,8 +9,31 @@
 	<s:Group width="100%"
 			 height="100%">
 		<s:layout>
-			<s:VerticalLayout />
+			<s:VerticalLayout gap="0" />
 		</s:layout>
+
+		<s:Group id="newMessagesBar"
+				 visible="false"
+				 includeInLayout="false"
+				 height="{getStyle('unreadMessagesBarHeight')}"
+				 width="100%">
+			<s:Rect width="100%"
+					height="100%">
+				<s:fill>
+					<s:SolidColor color="{getStyle('barColor')}" />
+				</s:fill>
+			</s:Rect>
+			<s:HGroup horizontalAlign="center"
+					  verticalAlign="middle"
+					  styleName="unreadMessagesBar"
+					  width="100%"
+					  height="100%">
+				<s:Image styleName="smallIconStyle oldMessagesIconStyle" />
+				<s:Label id="newMessagesLabel0"
+						 styleName="subContentFontSize" />
+			</s:HGroup>
+		</s:Group>
+
 		<s:Scroller width="100%"
 					height="100%">
 			<s:VGroup height="100%"

clients/flash/air-client/src/org/bigbluebutton/air/chat/views/chat/ChatViewMediator.as

@@ -6,9 +6,14 @@ package org.bigbluebutton.air.chat.views.chat {
 	import flash.events.KeyboardEvent;
 	import flash.events.MouseEvent;
 	import flash.events.StageOrientationEvent;
+	import flash.geom.Point;
+	import flash.geom.Rectangle;
 	import flash.ui.Keyboard;
 	import flash.utils.Dictionary;
 	
+	import flashx.textLayout.events.ScrollEvent;
+	import flashx.textLayout.events.ScrollEventDirection;
+	
 	import mx.collections.ArrayCollection;
 	import mx.core.FlexGlobals;
 	import mx.events.FlexEvent;
@@ -18,6 +23,7 @@ package org.bigbluebutton.air.chat.views.chat {
 	
 	import org.bigbluebutton.air.common.views.PagesENUM;
 	import org.bigbluebutton.air.main.models.IUserUISession;
+	import org.bigbluebutton.lib.chat.models.ChatMessage;
 	import org.bigbluebutton.lib.chat.models.ChatMessageVO;
 	import org.bigbluebutton.lib.chat.models.ChatMessages;
 	import org.bigbluebutton.lib.chat.models.IChatMessagesSession;
@@ -28,6 +34,7 @@ package org.bigbluebutton.air.chat.views.chat {
 	
 	import robotlegs.bender.bundles.mvcs.Mediator;
 	
+	import spark.components.DataGroup;
 	import spark.components.List;
 	import spark.components.View;
 	import spark.events.ViewNavigatorEvent;
@@ -55,7 +62,7 @@ package org.bigbluebutton.air.chat.views.chat {
 		
 		protected var list:List;
 		
-		protected var publicChat:Boolean = true;
+		protected var _publicChat:Boolean = true;
 		
 		protected var user:User;
 		
@@ -63,16 +70,24 @@ package org.bigbluebutton.air.chat.views.chat {
 		
 		protected var deltaHeight:Number;
 		
+		protected var newMessages:Number;
+		
+		protected var firstNewMessageIndex:Number;
+		
 		override public function initialize():void {
 			var userMe:User = userSession.userList.me;
 			data = userUISession.currentPageDetails;
 			if (data is User) {
 				createNewChat(data as User);
 			} else {
+				var chatMessages:ChatMessages = data.chatMessages as ChatMessages;
+				if (chatMessages.newMessages > 0) {
+					newMessages = chatMessages.newMessages;
+				}
 				openChat(data);
 			}
 			var userLocked:Boolean = (!userSession.userList.me.presenter && userSession.userList.me.locked && userSession.userList.me.role != User.MODERATOR);
-			if (publicChat) {
+			if (_publicChat) {
 				disableChat(userSession.lockSettings.disablePublicChat && !userMe.presenter && userMe.locked);
 				userSession.lockSettings.disablePublicChatSignal.add(disableChat);
 			} else {
@@ -81,12 +96,56 @@ package org.bigbluebutton.air.chat.views.chat {
 			}
 			chatMessageService.sendMessageOnSuccessSignal.add(onSendSucess);
 			chatMessageService.sendMessageOnFailureSignal.add(onSendFailure);
-			list.addEventListener(FlexEvent.UPDATE_COMPLETE, scrollUpdate);
+			chatMessagesSession.newChatMessageSignal.add(scrollUpdate);
+			list.addEventListener(FlexEvent.UPDATE_COMPLETE, updateComplete);
 			userSession.userList.userRemovedSignal.add(userRemoved);
 			userSession.userList.userAddedSignal.add(userAdded);
 			(view as View).addEventListener(ViewNavigatorEvent.VIEW_DEACTIVATE, viewDeactivateHandler);
 		}
 		
+		private function updateComplete(e:FlexEvent):void {
+			view.list.ensureIndexIsVisible(view.list.dataProvider.length - 1);
+			var visibleIndices:Vector.<int> = view.list.dataGroup.getItemIndicesInView();
+			displayNewMessagesBar((visibleIndices.length < newMessages));
+			list.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateComplete);
+		}
+		
+		private function displayNewMessagesBar(value:Boolean):void {
+			firstNewMessageIndex = dataProvider.length - newMessages;
+			var time:String = (dataProvider.getItemAt(firstNewMessageIndex) as ChatMessage).time;
+			view.newMessagesLabel.text = newMessages.toString() + " " + ResourceManager.getInstance().getString('resources', 'chat.unreadMessages') + " " + time;
+			view.newMessages.visible = value;
+			view.newMessages.includeInLayout = value;
+			if (value) {
+				view.list.addEventListener(MouseEvent.MOUSE_MOVE, isNewMessageVisible);
+				view.newMessages.addEventListener(MouseEvent.CLICK, goToFirstNewMessage);
+			} else {
+				view.list.removeEventListener(MouseEvent.MOUSE_MOVE, isNewMessageVisible);
+				view.newMessages.removeEventListener(MouseEvent.CLICK, goToFirstNewMessage);
+			}
+		}
+		
+		private function isNewMessageVisible(e:MouseEvent = null):void {
+			if (isIndexVisible(firstNewMessageIndex)) {
+				displayNewMessagesBar(false);
+			}
+		}
+		
+		private function isIndexVisible(i:int):Boolean {
+			var visibleIndices:Vector.<int> = view.list.dataGroup.getItemIndicesInView();
+			for each (var index:int in visibleIndices) {
+				if (index == i) {
+					return true;
+				}
+			}
+			return false;
+		}
+		
+		private function goToFirstNewMessage(e:MouseEvent):void {
+			view.list.ensureIndexIsVisible(firstNewMessageIndex);
+			displayNewMessagesBar(false);
+		}
+		
 		private function disableChat(disable:Boolean):void {
 			if (disable) {
 				view.inputMessage.enabled = false;
@@ -143,7 +202,7 @@ package org.bigbluebutton.air.chat.views.chat {
 		}
 		
 		protected function createNewChat(user:User):void {
-			publicChat = false;
+			_publicChat = false;
 			this.user = user;
 			view.pageName.text = user.name;
 			view.inputMessage.enabled = chatMessagesSession.getPrivateMessages(user.userID, user.name).userOnline;
@@ -153,10 +212,10 @@ package org.bigbluebutton.air.chat.views.chat {
 		}
 		
 		protected function openChat(currentPageDetails:Object):void {
-			publicChat = currentPageDetails.hasOwnProperty("publicChat") ? currentPageDetails.publicChat : null;
+			_publicChat = currentPageDetails.hasOwnProperty("publicChat") ? currentPageDetails.publicChat : null;
 			user = currentPageDetails.user;
 			view.pageName.text = currentPageDetails.name;
-			if (!publicChat) {
+			if (!_publicChat) {
 				view.inputMessage.enabled = currentPageDetails.online;
 				// if user went offline, and 'OFFLINE' marker is not already part of the string, add OFFLINE to the username
 				if ((currentPageDetails.online == false) && (view.pageName.text.indexOf(ResourceManager.getInstance().getString('resources', 'userDetail.userOffline')) == -1)) {
@@ -170,13 +229,11 @@ package org.bigbluebutton.air.chat.views.chat {
 			list.dataProvider = dataProvider;
 		}
 		
-		private function scrollUpdate(e:Event):void {
+		private function scrollUpdate(userId:String = null, publicChat:Boolean = true):void {
-			if (list.dataGroup.contentHeight > list.dataGroup.height) {
+			if ((user && userId == user.userID) || publicChat == _publicChat) {
-				if (list.dataGroup.getElementAt(0) && !deltaHeight) {
+				if (isIndexVisible(view.list.dataProvider.length - 2)) {
-					deltaHeight = list.dataGroup.getElementAt(0).height / 2;
+					view.list.ensureIndexIsVisible(view.list.dataProvider.length - 1);
 				}
-				//included deltaHeight to fix spacing issue
-				list.dataGroup.verticalScrollPosition = list.dataGroup.contentHeight - list.dataGroup.height + deltaHeight;
 			}
 		}
 		
@@ -193,9 +250,9 @@ package org.bigbluebutton.air.chat.views.chat {
 			m.fromTimezoneOffset = currentDate.timezoneOffset;
 			m.fromLang = "en";
 			m.message = view.inputMessage.text;
-			m.toUserID = publicChat ? "public_chat_userid" : user.userID;
+			m.toUserID = _publicChat ? "public_chat_userid" : user.userID;
-			m.toUsername = publicChat ? "public_chat_username" : user.name;
+			m.toUsername = _publicChat ? "public_chat_username" : user.name;
-			if (publicChat) {
+			if (_publicChat) {
 				m.chatType = "PUBLIC_CHAT";
 				chatMessageService.sendPublicMessage(m);
 			} else {
@@ -216,7 +273,8 @@ package org.bigbluebutton.air.chat.views.chat {
 		
 		override public function destroy():void {
 			super.destroy();
-			list.removeEventListener(FlexEvent.UPDATE_COMPLETE, scrollUpdate);
+			chatMessagesSession.newChatMessageSignal.remove(scrollUpdate);
+			list.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateComplete);
 			view.sendButton.removeEventListener(MouseEvent.CLICK, onSendButtonClick);
 			chatMessageService.sendMessageOnSuccessSignal.remove(onSendSucess);
 			chatMessageService.sendMessageOnFailureSignal.remove(onSendFailure);

clients/flash/air-client/src/org/bigbluebutton/air/chat/views/chat/IChatView.as

@@ -3,6 +3,7 @@ package org.bigbluebutton.air.chat.views.chat {
 	import org.bigbluebutton.air.common.views.IView;
 	
 	import spark.components.Button;
+	import spark.components.Group;
 	import spark.components.Label;
 	import spark.components.List;
 	import spark.components.TextInput;
@@ -12,5 +13,7 @@ package org.bigbluebutton.air.chat.views.chat {
 		function get inputMessage():TextInput;
 		function get sendButton():Button;
 		function get pageName():Label;
+		function get newMessages():Group;
+		function get newMessagesLabel():Label;
 	}
 }