From ca5fa09f5bf2d6553def73cb52f903eafa6b3de1 Mon Sep 17 00:00:00 2001
From: Contra <contra@maricopa.edu>
Date: Wed, 10 Apr 2013 13:38:44 -0700
Subject: [PATCH] example tune up

---
 Makefile             |  2 ++
 examples/effects.css |  9 +++++++++
 examples/index.html  | 48 +++++++++++++++++++++++++++++++-------------
 examples/test.js     | 33 +++++++-----------------------
 4 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/Makefile b/Makefile
index 29cd71c..e7791dc 100644
--- a/Makefile
+++ b/Makefile
@@ -9,6 +9,8 @@ build: components lib
 	@echo "File size (minified): " && cat holla.min.js | wc -c
 	@echo "File size (gzipped): " && cat holla.min.js | gzip -9f  | wc -c
 	@cp holla.js examples/holla.js
+	@cp effects.css examples/effects.css
+
 
 components: component.json
 	@component install --dev
diff --git a/examples/effects.css b/examples/effects.css
index e405edd..426aa62 100644
--- a/examples/effects.css
+++ b/examples/effects.css
@@ -2,6 +2,15 @@
   -webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));
 }
 
+.rtc-pip {
+  position: absolute;
+  height: 30%;
+  width: 30%;
+  bottom: 0;
+  right: 4px;
+  z-index: 100;
+}
+
 .rtc-fadein {
   -webkit-transition-property: opacity;
   -moz-transition-property: opacity;
diff --git a/examples/index.html b/examples/index.html
index 2454071..0a01872 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -10,14 +10,40 @@
       body {
         height: 100%;
         width: 100%;
-        background-color: #040;
-        background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png);
+        background-color: #333;
+        position: absolute;
       }
+
+      .them {
+        height: 100%; /* TODO:  fix */
+        width: 100%;
+      }
+
+      .me {
+        z-index: 99;
+        bottom: 10px;
+      }
+      
       video {
-        width: 460px;
+        max-width: 100%;
+        height: auto;
       }
-      #videos {
-        float: left;
+      .video-container {
+        position: relative;
+        padding-bottom: 56.25%;
+        padding-top: 30px;
+        height: 0;
+        overflow: hidden;
+      }
+
+      .video-container iframe,  
+      .video-container object,  
+      .video-container embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
       }
     </style>
   </head>
@@ -26,15 +52,9 @@
     <input id="whoCall" type="text" placeholder="Who do you want to call?"></input>
     <button id="hangup">Hangup</button>
     <br/>
-    <div id="videos">
-      <video id="me" autoplay="true" muted="true"></video>
-      <br/>
-      <video id="them" autoplay="true"></video>
-    </div>
-    <div id="messages">
-      <pre><code id="chat"></code></pre>
-      <br/>
-      <input id="whatSay" type="text" placeholder="Type your chat message here"></input>
+    <div class="video-container">
+      <video class="them" autoplay="true"></video>
+      <video class="me rtc-pip" autoplay="true" muted="true"></video>
     </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/examples/test.js b/examples/test.js
index 4338d12..aedc99b 100644
--- a/examples/test.js
+++ b/examples/test.js
@@ -1,23 +1,10 @@
 var server = holla.createClient({debug:true});
 
-var sendChat = function(){
-  var msg = $("#whatSay").val();
-  if (msg === "") return;
-  this.chat(msg);
-  $("#chat").append("<b>"+server.user+"</b>: " + msg + "<br/>");
-  $("#whatSay").val('');
-};
-
-var handleChat = function(msg){
-  $("#chat").append("<b>"+this.user+"</b>: " + msg + "<br/>");
-};
-
 $(function(){
   $("#me").hide();
   $("#them").hide();
   $("#whoCall").hide();
   $("#hangup").hide();
-  $("#messages").hide();
 
   server.on("presence", function(user){
     if (user.online) {
@@ -29,16 +16,15 @@ $(function(){
 
   $("#whoAmI").change(function(){
     var name = $("#whoAmI").val();
-    $("#me").show();
-    $("#them").show();
+    $(".me").show();
+    $(".them").show();
     $("#whoAmI").remove();
     $("#whoCall").show();
     $("#hangup").show();
-    $("#messages").show();
 
     holla.createFullStream(function(err, stream) {
       if (err) throw err;
-      holla.pipe(stream, $("#me"));
+      holla.pipe(stream, $(".me"));
 
       // accept inbound
       server.register(name, function(worked) {
@@ -49,17 +35,14 @@ $(function(){
           call.answer();
 
           call.ready(function(stream) {
-            holla.pipe(stream, $("#them"));
+            holla.pipe(stream, $(".them"));
           });
           call.on("hangup", function() {
-            $("#them").attr('src', '');
+            $(".them").attr('src', '');
           });
           $("#hangup").click(function(){
             call.end();
           });
-
-          $("#whatSay").change(sendChat.bind(call));
-          call.on("chat", handleChat.bind(call));
         });
 
         //place outbound
@@ -68,16 +51,14 @@ $(function(){
           var call = server.call(toCall);
           call.addStream(stream);
           call.ready(function(stream) {
-            holla.pipe(stream, $("#them"));
+            holla.pipe(stream, $(".them"));
           });
           call.on("hangup", function() {
-            $("#them").attr('src', '');
+            $(".them").attr('src', '');
           });
           $("#hangup").click(function(){
             call.end();
           });
-          $("#whatSay").change(sendChat.bind(call));
-          call.on("chat", handleChat.bind(call));
         });
 
       });