Browse Source

add toogle to message and made the video of you smaller

Dennis Mårtensson 11 years ago
parent
commit
79b1a1576a
2 changed files with 18 additions and 4 deletions
  1. 3 2
      site/index.html
  2. 15 2
      site/script.js

+ 3 - 2
site/index.html

@@ -8,9 +8,10 @@
   <body onload="init()">
     <div id="videos">
       <a href="https://github.com/webRTC"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
-      <video id="you" class="flip" autoplay></video>
+      <video id="you" class="flip" autoplay width="263" height="200" style="position: absolute; left: 0px; bottom: 0px;"></video>
     </div>
     <div id="chatbox">
+      <div id="hideShowMessages" class="button">toggle chat</div>
       <div id="messages">
       </div>
       <input id="chatinput" type="text" placeholder="Message:"/>
@@ -23,4 +24,4 @@
     
     <script src="/script.js"></script>
   </body>
-</html>
+</html>

+ 15 - 2
site/script.js

@@ -135,9 +135,22 @@ function initChat() {
   }
 
   var input = document.getElementById("chatinput");
+  var toggleHideShow = document.getElementById("hideShowMessages");
   var room = window.location.hash.slice(1);
   var color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
 
+  toggleHideShow.addEventListener('click', function() {
+    var element = document.getElementById("messages");
+
+    if(element.style.display === "block") {
+      element.style.display = "none";
+    }
+    else {
+      element.style.display = "block";
+    }
+
+  });
+
   input.addEventListener('keydown', function(event) {
     var key = event.which || event.keyCode;
     if(key === 13) {
@@ -169,9 +182,9 @@ function init() {
     }, function(stream) {
       document.getElementById('you').src = URL.createObjectURL(stream);
       document.getElementById('you').play();
-      videos.push(document.getElementById('you'));
+      //videos.push(document.getElementById('you'));
       //rtc.attachStream(stream, 'you');
-      subdivideVideos();
+      //subdivideVideos();
     });
   } else {
     alert('Your browser is not supported or you have to turn on flags. In chrome you go to chrome://flags and turn on Enable PeerConnection remember to restart chrome');