Add unread mark

client/lib/readMessages.coffee

+### DEFINITIONS
+- If window loses focus user needs to scroll or click/touch some place inside messages-box
+- On hit ESC enable read and force read of current room
+- When user change room disable read until user interaction
+- Only read if mark of *first-unread* is visible for user or if flag *force* was passed
+- Always read the opened room
+- The default method *read* has a delay of 2000ms to prevent multiple reads and to user be able to see the mark
+###
+
+@readMessage = new class
+	constructor: ->
+		@canReadMessage = false
+
+	readNow: (force=false) ->
+		return if @canReadMessage is false
+
+		rid = Session.get 'openedRoom'
+		if rid?
+			subscription = ChatSubscription.findOne rid: rid
+			if subscription? and (subscription.alert is true or subscription.unread > 0)
+				# Only read messages if user saw the first unread message
+				position = $('.message.first-unread').position()
+				console.log position
+				if force is true or not position? or position.top >= 0
+					Meteor.call 'readMessages', rid
+
+	read: _.debounce (force) ->
+		@readNow(force)
+	, 2000
+
+	disable: ->
+		@canReadMessage = false
+
+	enable: ->
+		@canReadMessage = document.hasFocus()
+
+	isEnable: ->
+		return @canReadMessage is true
+
+
+Meteor.startup ->
+	$(window).on 'blur', ->
+		readMessage.disable()
+
+	$(window).on 'click', (e) ->
+		if $(e.target).closest('.messages-container').length > 0
+			readMessage.enable()
+			readMessage.read()
+
+	$(window).on 'touchend', (e) ->
+		if $(e.target).closest('.messages-container').length > 0
+			readMessage.enable()
+			readMessage.read()
+
+	$(window).on 'keyup', (e) ->
+		key = event.which
+
+		if key is 27
+			readMessage.enable()
+			readMessage.readNow(true)

client/lib/readMessagesOnFocus.coffee

-Meteor.startup ->
-	$(window).on 'focus', ->
-		if FlowRouter.getRouteName() in ['channel', 'group', 'direct']
-			rid = Session.get 'openedRoom'
-			if rid?
-				subscription = ChatSubscription.findOne rid: rid
-				if subscription? and (subscription.alert is true or subscription.unread > 0)
-					Meteor.call 'readMessages', rid
\ No newline at end of file

client/routes/roomRoute.coffee

@@ -37,7 +37,7 @@ openRoom = (type, name) ->
 			Session.set 'openedRoom', room._id
 
 			Session.set 'editRoomTitle', false
-			Meteor.call 'readMessages', room._id if Meteor.userId()?
+			readMessage.disable()
 			# KonchatNotification.removeRoomNotification(params._id)
 
 			if Meteor.Device.isDesktop()

client/startup/unread.coffee

@@ -12,20 +12,29 @@ Meteor.startup ->
 		unreadCount = 0
 		unreadAlert = false
 
-		subscriptions = ChatSubscription.find({open: true}, { fields: { unread: 1, alert: 1, rid: 1 } })
+		subscriptions = ChatSubscription.find({open: true}, { fields: { unread: 1, alert: 1, rid: 1, t: 1, name: 1, ls: 1 } })
 
 		rid = undefined
 		if FlowRouter.getRouteName() in ['channel', 'group', 'direct']
 			rid = Session.get 'openedRoom'
 
 		for subscription in subscriptions.fetch()
-			if subscription.rid is rid and (subscription.alert or subscription.unread > 0) and document.hasFocus()
-				Meteor.call 'readMessages', subscription.rid
+			if subscription.rid is rid and (subscription.alert or subscription.unread > 0)
+				readMessage.readNow()
 			else
 				unreadCount += subscription.unread
 				if subscription.alert is true
 					unreadAlert = '•'
 
+			room = RoomManager.openedRooms[subscription.t + subscription.name]
+			if room?
+				$roomDom = $(room.dom)
+				$roomDom.find('.message.first-unread').removeClass('first-unread')
+				if (subscription.rid isnt rid or readMessage.isEnable() is false) and (subscription.alert or subscription.unread > 0)
+					firstUnreadId = ChatMessage.findOne({rid: subscription.rid, ts: {$gt: subscription.ls}}, {sort: {ts: 1}})?._id
+					if firstUnreadId?
+						$roomDom.find('.message#'+firstUnreadId).addClass('first-unread')
+
 		if unreadCount > 0
 			if unreadCount > 999
 				Session.set 'unread', '999+'

client/stylesheets/base.less

@@ -128,6 +128,34 @@ blockquote {
 	user-select: none;
 }
 
+.first-unread {
+	.body {
+		&::before {
+			content: "";
+			background-color: rgba(255, 0, 0, 0.54);
+			display: block;
+			height: 1px;
+			position: absolute;
+			right: 0px;
+			left: 50px;
+			top: -3px;
+		}
+
+		&::after {
+			content: "unread messages";
+			display: block;
+			position: absolute;
+			right: 0px;
+			top: -12px;
+			text-transform: uppercase;
+			font-size: 8px;
+			background-color: white;
+			padding-left: 5px;
+			color: red;
+		}
+	}
+}
+
 .text-center {
 	text-align: center;
 }

client/views/app/room.coffee

@@ -691,6 +691,8 @@ Template.room.onRendered ->
 
 	wrapper.addEventListener 'touchend', ->
 		onscroll()
+		readMessage.enable()
+		readMessage.read()
 
 	wrapper.addEventListener 'scroll', ->
 		template.atBottom = false
@@ -699,10 +701,14 @@ Template.room.onRendered ->
 	wrapper.addEventListener 'mousewheel', ->
 		template.atBottom = false
 		onscroll()
+		readMessage.enable()
+		readMessage.read()
 
 	wrapper.addEventListener 'wheel', ->
 		template.atBottom = false
 		onscroll()
+		readMessage.enable()
+		readMessage.read()
 
 	# salva a data da renderização para exibir alertas de novas mensagens
 	$.data(this.firstNode, 'renderedAt', new Date)