FS-7509: mess with html5

html5/verto/video_demo/index.html

@@ -85,17 +85,21 @@
 
     </div>
 
+
     <div data-role="page" id="page-incall" align="center">
       <div data-role="header" id="calltitle" class="pageheader">
 	Verto&trade; IN CALL
       </div>
 
-      <div id="conf">
-	<div style="color:black;font-family: verdana" align="center" id="conf_count"></div>
-	<table width="1000" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
-	</table>
-      </div>
-	<br clear=all>
+
+
+
+<div id="fs" style="width:100%;height:100%">
+<div id="rows" style="background-color:#f9f9f9">
+
+<span id=usrinner style="margin:25px">
+  <span id=usrctl>User Controls</span>
+      <div id=usr2>
 
       <button data-inline="true" id="hold">HOLD</button>
       <button data-inline="true" id="hupbtn">End Call</button>
@@ -106,19 +110,25 @@
 	  <button data-inline="true" id="nosharebtn">End Share</button>
       </span>
 
+
+
       	     <span class="sharediv">
 	     	  <button data-inline="true" id="smallerbtn">Smaller - </button>
 	     	  <button data-inline="true" id="biggerbtn">Bigger +</button>
   	     	  <button data-inline="true" id="fullbtn">Full Screen</button>
+  	     	  <button data-inline="true" id="nofullbtn">Exit Full Screen</button>
                   <button data-inline="true" id="vmutebtn">Toggle Video Mute</button>
-      </span>
+             </span>
 
-      	<div id="media">	
-	      <video id="webcam" autoplay="autoplay"></video>
+<br><br>
+      <div id="conf" style="width:100%;height:100%">
+	<div style="color:black;font-family: verdana" align="center" id="conf_count"></div><br>
+	<table width="1000" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
+	</table>
+
+	</div><!---conf-->
 
-      	</div>
 
-<br><br>
 
       <div id="message" hidden="true">
 	<hr class="l1" width="500"/>
@@ -135,8 +145,8 @@
       </div>
 
 
-      	<div id="conf_mod"></div>
-	<div style="color:blue" id="conf_display"></div>
+
+
 
 
 	<img src="img/verto_black_web.gif" width="300"><br><br>
@@ -160,6 +170,29 @@
 	<button class="dtmf" data-inline="true">#</button>
       </div>
 	<br><br>
+
+      	<div id="conf_mod" style="width:450px"></div>
+	<div style="color:blue" id="conf_display"></div>
+
+</span>
+</div>
+
+</div><!-- fs -->
+
+
+
+
+
+      <video id="webcam" autoplay="autoplay" style="width:100%;height:100%"></video>
+
+</div><!-- rows -->
+
+
+
+
+
+<br><br>
+
 	</div>
 
 

html5/verto/video_demo/verto.js

@@ -12,7 +12,7 @@ var vid_height = 180;
 
 var local_vid_width = 320;
 var local_vid_height = 180;
-
+var is_full_screen = false;
 var outgoingBandwidth;
 var incomingBandwidth;
 var vqual;
@@ -517,8 +517,52 @@ $("#vmutebtn").click(function() {
     cur_call.dtmf("*0");
 });
 
+var is_full = false;
+var usrto;
+function noop() { return; }
+
+$("#nofullbtn").click(function() {
+
+   if (document.webkitFullscreenEnabled) {
+	document.webkitExitFullscreen();
+   } else if (document.mozFullScreenEnabled) {
+	document.mozExitFullScreen();
+   }
+
+
+});
+
+function on_full(which)
+{
+    is_full = which;
+    if (is_full) {
+	$("#rows").css("position", "absolute").css("z-index", "2");    
+    } else {
+	$("#rows").css("position", "static").css("z-index", "2");
+
+	clearTimeout(usrto);    
+    }
+
+}
+
+
+$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', 
+	       function(e) {
+		   if (!is_full) {
+		       on_full(true);
+		   } else {
+		       on_full(false);
+		   }
+	       });
+
+
 $("#fullbtn").click(function() {
-    full_screen("webcam");
+
+    full_screen("fs");
+
+
+//    $("#mod1").css("position", "absolute").css("z-index", "2");
+
 });
 
 $("#biggerbtn").click(function() {
@@ -1137,6 +1181,26 @@ $(document).ready(function() {
     $('#devices').hide();
     $('#showdemo').show();
 
+//    $("#rows").css("position", "absolute").css("z-index", "2");
+
+    $("#usrctl").show();
+    $("#usr2").hide();
+
+    $("#usrctl").mouseover(function() {
+	$("#mod2").hide();
+	$("#usr2").show();
+    });
+
+    $("#usr2").mouseover(function() {
+	$("#mod2").hide();
+	clearTimeout(usrto);
+    });
+
+    $("#usr2").mouseleave(function() {
+	usrto = setTimeout(function() { $("#usr2").hide(); }, 2000);
+    });
+
+
     init();