Merge pull request mozilla#53 from fqueze/mobile-fullscreen

Mobile fullscreen
Standard8 · Feb 22, 2013 · 3929c0d · 3929c0d
2 parents 36d92e5 + 963865b
commit 3929c0d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/static/mobile.html b/static/mobile.html
@@ -31,7 +31,7 @@
     <a href="javascript:startGuest();">Guest Mode</a>
   </div>
   <div id="signout" style="display:none"><button onclick="onSignout()">signout</button>
-  <br><br><input type="checkbox" id="shareCamera">Share my camera</input></div>
+  <br><br><label><input type="checkbox" id="shareCamera"/>Share my camera</label></div>
 </div>
 <div id="callAnswer">
 <hr>
@@ -46,10 +46,8 @@
 <ul id="contactslist"></ul>
 </div>
 <div id="call" style="display:none">
-  <div id="remoteVideoContainer">
+  <div id="video">
     <video id="remoteVideo"></video>
-  </div>
-  <div id="localVideoContainer">
     <video id="localVideo" muted></video>
   </div>
   <div id="chat"></div>

diff --git a/static/mobile.js b/static/mobile.js
@@ -75,6 +75,37 @@ function onContactClick(aEvent) {
   callPerson(aEvent.target.getAttribute("user"));
 }
 
+function resizeVideo() {
+  var localVideo = document.getElementById("localVideo");
+  var video = document.getElementById("remoteVideo");
+  video.setAttribute("style", "position: fixed; top: 0; left: 0; z-index: 1; background: black;");
+
+  var height = window.innerHeight;
+  var width = window.innerWidth;
+
+  video.setAttribute("width", width);
+  video.setAttribute("height", height);
+
+  localVideo.setAttribute("width", "108");
+  localVideo.setAttribute("height", "81");
+  localVideo.setAttribute("style", "position: fixed; z-index: 2;");
+  localVideo.style.top = (height - 81) + "px";
+  localVideo.style.left = (width - 108) + "px";
+}
+
+function fullScreenVideo() {
+  document.getElementById("closecall").setAttribute("style",
+    "position: absolute; top: 0; right: 0; margin: 0 0; z-index: 3;");
+
+  var video = document.getElementById("remoteVideo");
+  video.onclick = function() {
+    document.getElementById("video").mozRequestFullScreen();
+  };
+
+  resizeVideo();
+  window.addEventListener("resize", resizeVideo);
+}
+
 function callPerson(aPerson) {
   if (gChat)
     return;
@@ -85,6 +116,9 @@ function callPerson(aPerson) {
   $("#calling").show();
   document.getElementById("calleeName").textContent = aPerson;
 
+  if (!gChat.audioOnly)
+    fullScreenVideo();
+
   $("#call").show();
   $("#header").hide();
   $("#contacts").hide();
@@ -141,6 +175,10 @@ function setupEventSource() {
 
       if (!document.getElementById("shareCamera").checked)
         gChat.audioOnly = audioOnly = true;
+
+      if (!gChat.audioOnly)
+        fullScreenVideo();
+
       gChat.pc = webrtcMedia.handleOffer(data, window, audioOnly, onConnection, setupChat);
     };
   }, false);
@@ -230,6 +268,8 @@ function endCall() {
   document.getElementById("reject").onclick = null;
 
   webrtcMedia.endCall(gChat.pc, null, window, gChat.audioOnly);
+  if (!gChat.audioOnly)
+    window.removeEventListener("resize", resizeVideo);
   gChat = null;
 
   $("#call").hide();