Merge pull request #989 from RocketChat/webrtc

Webrtc

client/lib/RoomManager.coffee

@@ -178,6 +178,7 @@ RocketChat.Notifications.onUser 'message', (msg) ->
 			delete onlineUsersValue[user.username]
 		else
 			onlineUsersValue[user.username] =
+				_id: user._id
 				status: status
 				utcOffset: utcOffset
 

client/routes/roomRoute.coffee

@@ -111,3 +111,17 @@ FlowRouter.route '/direct/:username',
 		openRoom 'd', params.username
 
 	triggersExit: [roomExit]
+
+
+FlowRouter.goToRoomById = (roomId) ->
+	subscription = ChatSubscription.findOne({rid: roomId})
+	if subscription?
+		switch subscription.t
+			when 'c'
+				FlowRouter.go 'channel', {name: subscription.name}
+
+			when 'p'
+				FlowRouter.go 'group', {name: subscription.name}
+
+			when 'd'
+				FlowRouter.go 'direct', {username: subscription.name}

client/stylesheets/base.less

@@ -608,9 +608,6 @@ label.required:after {
 	}
 	&.delete,
 	&.remove,
-	&.red {
-		min-width: 120px;
-	}
 	&.short {
 		min-width: 100px;
 	}
@@ -3866,3 +3863,143 @@ a.github-fork {
 }
 
 @import "utils/_colors.import.less";
+
+.webrtc-video {
+	&.webrtc-video-overlay {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		background-color: black;
+		.main-video {
+			video {
+				max-width: 100%;
+				width: auto;
+			}
+		}
+	}
+
+	.main-video {
+		background-color: black;
+		text-align: center;
+
+		video {
+			width: 100%;
+			min-height: 299px;
+		}
+
+		>div {
+			background-color: rgba(0,0,0,.5);
+			margin-top: -28px;
+			position: relative;
+			line-height: 25px;
+			margin-bottom: 2px;
+			text-align: center;
+			color: white;
+			font-weight: bold;
+		}
+	}
+
+	.videos {
+		display: -webkit-flex;
+		display: -moz-flex;
+		display: flex;
+		flex-wrap: wrap;
+		-webkit-flex-wrap: wrap;
+		-moz-flex-wrap: wrap;
+		justify-content: center;
+		-webkit-justify-content: center;
+		-moz-justify-content: center;
+
+		.video-item {
+			position: relative;
+			margin-right: 3px;
+			line-height: 0;
+			width: 93px;
+			overflow: hidden;
+			text-align: center;
+			background-color: black;
+
+			&.state-overlay::before {
+				content: attr(data-state-text);
+				position: absolute;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 12px;
+				font-weight: bold;
+				background-color: black;
+				color: white;
+			}
+
+			video {
+				height: 70px;
+				max-width: 100px;
+				background-color: black;
+			}
+
+			>div {
+				line-height: 16px;
+				font-size: 12px;
+				text-align: center;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				padding: 0px 2px;
+				margin-top: -16px;
+				background-color: rgba(0,0,0,.5);
+				position: relative;
+				color: white;
+				font-weight: bold;
+			}
+
+			.video-muted-overlay {
+				background-color: rgba(0,0,0,.5);
+				position: absolute;
+				bottom: 16px;
+				left: 0;
+				top: 16px;
+				right: 0;
+				text-align: center;
+				font-size: 24px;
+				color: white;
+				display: flex;
+				display: -webkit-flex;
+				display: -moz-flex;
+				align-items: center;
+				-webkit-align-items: center;
+				-moz-align-items: center;
+				justify-content: center;
+				-webkit-justify-content: center;
+				-moz-justify-content: center;
+			}
+		}
+	}
+}
+
+.group-call-buttons {
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: flex;
+
+	button:first-child {
+		-webkit-flex-grow: 1;
+		-moz-flex-grow: 1;
+		flex-grow: 1;
+	}
+}
+
+.alert-icon {
+	font-size: 80px;
+	display: block;
+	margin-bottom: 20px;
+	color: lightgreen;
+}

client/views/app/room.coffee

@@ -166,36 +166,6 @@ Template.room.helpers
 				return template.find('.input-message')
 		}
 
-	remoteVideoUrl: ->
-		return Session.get('remoteVideoUrl')
-
-	selfVideoUrl: ->
-		return Session.get('selfVideoUrl')
-
-	videoActive: ->
-		return (Session.get('remoteVideoUrl') || Session.get('selfVideoUrl'))
-
-	remoteMonitoring: ->
-		return (webrtc?.stackid? && (webrtc.stackid == 'webrtc-ib'))
-
-	flexOpenedRTC1: ->
-		return 'layout1' if Session.equals('flexOpenedRTC1', true)
-
-	flexOpenedRTC2: ->
-		return 'layout2' if Session.equals('flexOpenedRTC2', true)
-
-	rtcLayout1: ->
-		return (Session.get('rtcLayoutmode') == 1 ? true: false);
-
-	rtcLayout2: ->
-		return (Session.get('rtcLayoutmode') == 2 ? true: false);
-
-	rtcLayout3: ->
-		return (Session.get('rtcLayoutmode') == 3 ? true: false);
-
-	noRtcLayout: ->
-		return (!Session.get('rtcLayoutmode') || (Session.get('rtcLayoutmode') == 0) ? true: false);
-
 	maxMessageLength: ->
 		return RocketChat.settings.get('Message_MaxAllowedSize')
 
@@ -584,21 +554,16 @@ Template.room.onRendered ->
 	# salva a data da renderização para exibir alertas de novas mensagens
 	$.data(this.firstNode, 'renderedAt', new Date)
 
-	webrtc.onAcceptCall = (fromUsername) ->
-		if FlowRouter.current().route.name is 'direct' and FlowRouter.current().params.username is fromUsername
-			return
-
-		FlowRouter.go 'direct', {username: fromUsername}
-
-	webrtc.onRemoteUrl = (url) ->
-		RocketChat.TabBar.setTemplate 'membersList'
-		RocketChat.TabBar.openFlex()
-		Session.set('remoteVideoUrl', url)
+	webrtc = WebRTC.getInstanceByRoomId template.data._id
+	if webrtc?
+		Tracker.autorun ->
+			if webrtc.remoteItems.get()?.length > 0
+				RocketChat.TabBar.setTemplate 'membersList'
+				RocketChat.TabBar.openFlex()
 
-	webrtc.onSelfUrl = (url) ->
-		RocketChat.TabBar.setTemplate 'membersList'
-		RocketChat.TabBar.openFlex()
-		Session.set('selfVideoUrl', url)
+			if webrtc.localUrl.get()?
+				RocketChat.TabBar.setTemplate 'membersList'
+				RocketChat.TabBar.openFlex()
 
 
 renameRoom = (rid, name) ->

client/views/app/tabBar/membersList.coffee

@@ -66,6 +66,7 @@ Template.membersList.helpers
 		username = Session.get('showUserInfo')
 		return Meteor.users.findOne({ username: String(username) }) or { username: String(username) }
 
+
 Template.membersList.events
 	"click .flex-tab .user-image > a" : (e) ->
 		RocketChat.TabBar.openFlex()

client/views/app/tabBar/membersList.html

@@ -1,5 +1,6 @@
 <template name="membersList">
 	<div class="content">
+		{{> videoCall}}
 		{{#if isGroupChat}}
 			<div class="list-view{{#if $.Session.get 'showUserInfo'}} -hidden{{/if}}">
 				{{#with roomUsers}}
@@ -9,6 +10,7 @@ <h2>{{_ "Members_List"}}</h2>
 							{{{_ "Showing_online_users" total_online=totalOnline total=total}}}
 							{{!--<button class="see-all">{{seeAll}}</button>--}}
 						</p>
+						{{> videoButtons}}
 						{{#if canAddUser}}
 							<div class="control">
 								<div class="search-form">
@@ -33,8 +35,8 @@ <h2>{{_ "Members_List"}}</h2>
 				{{/with}}
 			</div>
 		{{/if}}
-		<div class="user-view animated{{#unless $.Session.get 'showUserInfo'}} -hidden{{/unless}}">
+		<div class="user-view {{#unless $.Session.get 'showUserInfo'}} -hidden{{/unless}}">
 			{{> userInfo user=flexUserInfo showAll=isGroupChat video=isDirectChat}}
 		</div>
 	</div>
-</template>
+</template>

client/views/app/userInfo.coffee

@@ -29,27 +29,6 @@ Template.userInfo.helpers
 	servicesMeteor: ->
 		return @services?['meteor-developer']
 
-	videoActive: ->
-		return (Session.get('remoteVideoUrl') || Session.get('selfVideoUrl'))
-
-	rtcLayout1: ->
-		return (Session.get('rtcLayoutmode') == 1 ? true: false)
-
-	rtcLayout2: ->
-		return (Session.get('rtcLayoutmode') == 2 ? true: false)
-
-	rtcLayout3: ->
-		return (Session.get('rtcLayoutmode') == 3 ? true: false)
-
-	noRtcLayout: ->
-		return (!Session.get('rtcLayoutmode') || (Session.get('rtcLayoutmode') == 0) ? true: false)
-
-	remoteVideoUrl: ->
-		return Session.get('remoteVideoUrl')
-
-	selfVideoUrl: ->
-		return Session.get('selfVideoUrl')
-
 	userTime: ->
 		if @utcOffset?
 			return Template.instance().now.get().utcOffset(@utcOffset).format('HH:mm')
@@ -93,27 +72,6 @@ Template.userInfo.events
 	'click .back': (e) ->
 		Session.set('showUserInfo', null)
 
-	'click .start-video': (event) ->
-		_id = Session.get('openedRoom')
-		webrtc.to = _id.replace(Meteor.userId(), '')
-		webrtc.room = _id
-		webrtc.mode = 1
-		webrtc.start(true)
-
-	'click .stop-video': (event) ->
-		webrtc.stop()
-
-	'click .monitor-video': (event) ->
-		_id = Session.get('openedRoom')
-		webrtc.to = _id.replace(Meteor.userId(), '')
-		webrtc.room = _id
-		webrtc.mode = 2
-		webrtc.start(true)
-
-	'click .setup-video': (event) ->
-		webrtc.mode = 2
-		webrtc.activateLocalStream()
-
 
 Template.userInfo.onCreated ->
 	@now = new ReactiveVar moment()