Merge pull request #281 from Sing-Li/video-chat-fullscreen

add Video Chat HD and fullscreen modes for web-rtc #115
RocketChat · Jul 8, 2015 · e5c60bb · e5c60bb
2 parents 70dfc26 + 96de419
commit e5c60bb
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 31 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+indent_size = 8
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/client/views/app/layout.coffee b/client/views/app/layout.coffee
@@ -5,16 +5,16 @@ Template.appLayout.helpers
 
 	flexOpenedRTC1: ->
 		console.log 'layout.helpers flexOpenedRTC1' if window.rocketDebug
-		return 'layout1' if Session.equals('flexOpenedRTC1', true)
+		return 'layout1' if Session.equals('rtcLayoutmode', 1)
 
 	flexOpenedRTC2: ->
 		console.log 'layout.helpers flexOpenedRTC2' if window.rocketDebug
-		return 'layout2' if Session.equals('flexOpenedRTC2', true)
+		return 'layout2' if (Session.get('rtcLayoutmode') > 1)
 
 
 Template.appLayout.rendered = ->
 	$('html').addClass("noscroll").removeClass "scroll"
-	
+
 	# RTL Support - Need config option on the UI
 	if isRtl localStorage.getItem "userLanguage"
 		$('html').addClass "rtl"
diff --git a/client/views/app/room.coffee b/client/views/app/room.coffee
@@ -272,10 +272,16 @@ Template.room.helpers
 		return Session.get('selfVideoUrl')
 
 	rtcLayout1: ->
-		return Session.get('flexOpenedRTC1');
+		return (Session.get('rtcLayoutmode') == 1 ? true: false);
 
 	rtcLayout2: ->
-		return Session.get('flexOpenedRTC2');
+		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);
 
 
 Template.room.events
@@ -379,19 +385,33 @@ Template.room.events
 		Session.set('showUserInfo', $(e.currentTarget).data('username'))
 
 	"click .flex-tab  .video-remote" : (e) ->
-		console.log 'room click .flex-tab .avatar-image' if window.rocketDebug
-		if (Session.get('flexOpenedRTC2'))
-			console.log 'resetting both flexOpenedRTC1 and flexOpenedRTC2 to false' if window.rocketDebug
-			Session.set('flexOpenedRTC1', false)
-			Session.set('flexOpenedRTC2', false)
-		else
-			if (Session.get('flexOpenedRTC1'))
-				console.log 'flexOpenedRTC2 set to true' if window.rocketDebug
-				Session.set('flexOpenedRTC2', true)
+		console.log 'room click .flex-tab .video-remote' if window.rocketDebug
+		if (Session.get('flexOpened'))
+			if (!Session.get('rtcLayoutmode'))
+				Session.set('rtcLayoutmode', 1)
+			else
+				t = Session.get('rtcLayoutmode')
+				t = (t + 1) % 4
+				console.log  'setting rtcLayoutmode to ' + t  if window.rocketDebug
+				Session.set('rtcLayoutmode', t)
+
+	"click .flex-tab  .video-self" : (e) ->
+		console.log 'room click .flex-tab .video-self' if window.rocketDebug
+		if (Session.get('rtcLayoutmode') == 3)
+			console.log 'video-self clicked in layout3' if window.rocketDebug
+			i = document.getElementById("fullscreendiv")
+			if i.requestFullscreen
+				i.requestFullscreen()
 			else
-				if (Session.get('flexOpened'))
-					console.log 'flexOpenedRTC1 set to true' if window.rocketDebug
-					Session.set('flexOpenedRTC1', true)
+				if i.webkitRequestFullscreen
+					i.webkitRequestFullscreen()
+				else
+					if i.mozRequestFullScreen
+						i.mozRequestFullScreen()
+					else
+						if i.msRequestFullscreen
+							i.msRequestFullscreen()
+
 
 
 	'click .user-card-message': (e) ->

diff --git a/client/views/app/room.html b/client/views/app/room.html
@@ -162,28 +162,34 @@ <h3>{{username}}</h3>
 						<div class="user-view">
 							{{#with userData}}
 								<div class="about cf_">
-									
+
 										{{#if selfVideoUrl}}
+											{{#if rtcLayout3}}
+												<div id='fullscreendiv' style="width: 800px; height: 350px">
+												<video id='videoremote' class="video-remote" src="{{remoteVideoUrl}}" style="width: 100%; align-items: center; margin-bottom: 10px; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay></video>
+												<video id='videoself' class="video-self" src="{{selfVideoUrl}}" style="width: 250px; position: absolute; top: 21px; right: 31px; border: 1px solid #FFF; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay muted></video>
+												</div>
+											{{/if}}
 											{{#if rtcLayout2}}
-											<div style="display: flex; flex-direction: row; align-items: center; width: 800px; height: 350px">
-												<video class="video-remote" src="{{remoteVideoUrl}}" style="flex: 1 0; min-width: 380px; height: 285px; margin: 10px; background-color: #000;"  autoplay></video>
-												<video class="video-self" src="{{selfVideoUrl}}" style="flex: 1 0;  min-width: 380px; height: 285px; margin: 10px; background-color: #000;" autoplay muted></video>
+												<div style="display: flex; flex-direction: row; align-items: center; width: 800px; height: 350px">
+												<video id="videoremote" class="video-remote" src="{{remoteVideoUrl}}" style="flex: 1 0; min-width: 380px; height: 285px; margin: 10px; background-color: #000;"  autoplay></video>
+												<video id="videoself" class="video-self" src="{{selfVideoUrl}}" style="flex: 1 0;  min-width: 380px; height: 285px; margin: 10px; background-color: #000;" autoplay muted></video>
 											</div>
-											{{else}}
-											  {{#if rtcLayout1}}
-											  <div style="display: flex; flex-direction: column; align-items: center; width: 360px; height: 500px">	
+											{{/if}}
+											{{#if rtcLayout1}}
+												<div style="display: flex; flex-direction: column; align-items: center; width: 360px; height: 500px">
 												<video class="video-remote" src="{{remoteVideoUrl}}" style="flex: 1 1;  width: 320px; margin: 10px; background-color: #000;" autoplay></video>
 												<video class="video-self" src="{{selfVideoUrl}}" style="flex: 1 1; width: 320px; margin: 10px; background-color: #000;" autoplay muted></video>
-											  </div>
-											  {{else}}
-											  <div>
-												<video class="video-remote" src="{{remoteVideoUrl}}" style="width: 100%; align-items: center; margin-bottom: 10px; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay></video>
+												</div>
+											{{/if}}
+											{{#if noRtcLayout}}
+												<div>
+												<video class="video-remote" src="{{remoteVideoUrl}}" style="width: 100%; margin-bottom: 10px; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay></video>
 												<video class="video-self" src="{{selfVideoUrl}}" style="width: 100px; position: absolute; top: 21px; right: 21px; border: 1px solid #FFF; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay muted></video>
-											  </div>
-											  {{/if}}
+												</div>
 											{{/if}}
 										{{/if}}
-									
+
 									<div class="thumb">
 										{{> avatar username=username}}
 									</div>