FS-7509: mess with html5

diff --git a/html5/verto/video_demo/index.html b/html5/verto/video_demo/index.html
index 03bbf469e4d60c12e580bfc4790aba3bffd2f150..fc04d7bd932639ccebd42a028f63a1087985e503 100644 (file)
--- a/html5/verto/video_demo/index.html
+++ b/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>
 
 

diff --git a/html5/verto/video_demo/verto.js b/html5/verto/video_demo/verto.js
index b577d0efd041c2d2911277305b4598f1098ff62c..bccf167eb67bf8332f99ca093a0a144fc864d6c4 100644 (file)
--- a/html5/verto/video_demo/verto.js
+++ b/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();