better layout and info board

TeTiRoss · Mar 22, 2018 · 05ef739 · 05ef739
1 parent 16cd5db
commit 05ef739
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/app/assets/javascripts/pages/home.js b/app/assets/javascripts/pages/home.js
@@ -21,7 +21,10 @@ $( document ).ready(function() {
 
     Twilio.Video.connect(token, { audio: true, video: true, name: roomName }).then(function(room) {
       console.log('Successfully joined a Room: ', room);
+      $("#info-board").prepend("<p class='text-secondary'>Successfully joined the room <b>" + room.name + "</b></p>");
 
+      $('#username').prop( "disabled", true );
+      $('#room-name').prop( "disabled", true );
       $('#connect-btn').hide();
       $('#disconnect-btn').show();
 
@@ -32,6 +35,7 @@ $( document ).ready(function() {
 
       room.participants.forEach(participant => {
         console.log('Participant "%s" is connected to the Room', participant.identity);
+        $("#info-board").prepend("<p class='text-secondary'><b>" + participant.identity + "</b> is connected to the room</p>");
 
         participant.tracks.forEach(track => {
           document.getElementById('remote-media-div').appendChild(track.attach());
@@ -44,12 +48,9 @@ $( document ).ready(function() {
 
       // Remote Participant connected to the room
 
-      room.once('participantConnected', participant => {
-        console.log('Participant "%s" has connected to the Room', participant.identity);
-      });
-
       room.on('participantConnected', function(participant) {
         console.log('A remote Participant connected: ', participant);
+        $("#info-board").prepend("<p class='text-secondary'><b>" + participant.identity + "</b> has connected to the room</p>");
 
         participant.tracks.forEach(track => {
           document.getElementById('remote-media-div').appendChild(track.attach());
@@ -69,16 +70,14 @@ $( document ).ready(function() {
         });
 
         console.log('Participant "%s" has disconnected from Room', participant.identity);
+        $("#info-board").prepend("<p class='text-secondary'><b>" + participant.identity + "</b> has disconnected from the room</p>");
       });
 
 
       // Local Participant disconnected from room
 
       $('#disconnect-btn').click(function() {
         room.disconnect();
-
-        $(this).hide();
-        $('#connect-btn').show();
       });
 
       room.on('disconnected', room => {
@@ -94,12 +93,18 @@ $( document ).ready(function() {
           });
         });
 
+        $('#disconnect-btn').hide();
+        $('#connect-btn').show();
+        $('#username').prop( "disabled", false );
+        $('#room-name').prop( "disabled", false );
+
         console.log('Disconnected from the Room "%s"', room.name);
+        $("#info-board").prepend("<p class='text-secondary'>Disconnected from the room <b>" + room.name + "</b></p>");
       });
 
     }, function(error) {
       console.error('Unable to connect to Room: ' +  error.message);
-      alert('Unable to connect to room. Probably some issues with access to your microfon or camera.')
+      alert('Unable to connect to room. If input fields are filled, then there is probably some issues with access to your mic or camera.')
     });
   });
 });
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -15,6 +15,10 @@
  *= require_self
  */
 
- body {
-   margin-top: 10px;
- }
+body {
+  margin-top: 10px;
+}
+
+/* ::-webkit-scrollbar {
+  display: none;
+} */
diff --git a/app/assets/stylesheets/pages/home.css b/app/assets/stylesheets/pages/home.css
@@ -1,15 +1,14 @@
-#local-media-ctr, #remote-media-div {
-  margin-top: 5px;
-}
-
-#local-media-ctr > video {
-  margin: 5px;
+#remote-media-div > video {
   border-radius: 5px;
+  border-right: 2px solid transparent;
+  width: 50%;
+  height: auto;
 }
 
-#remote-media-div > video {
-  margin: 5px;
+video {
   border-radius: 5px;
+  width: 100%;
+  height: auto;
 }
 
 #disconnect-btn {

diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -1,22 +1,24 @@
 <div class="row">
   <div class="col-md-2">
-    <input id='username' type='text' class='form-control' placeholder="Username">
-  </div>
-  <div class="col-md-2">
-    <input id='room-name' type='text' class='form-control' placeholder="Room">
+    <div id='local-media-ctr'></div>
   </div>
+
+  <div class="col-md-2"></div>
+
   <div class="col-md-4">
-    <button id='connect-btn' class='btn btn-default btn-success'>Connect</button>
+    <div class="input-group mb-3">
+      <input id='username' type="text" class="form-control" placeholder="Username">
+      <input id='room-name' type="text" class="form-control" placeholder="Room">
+      <div class="input-group-append">
+        <button id='connect-btn' class='btn btn-default btn-success'>Connect</button>
+        <button id='disconnect-btn' class='btn btn-default btn-danger'>Disconnect</button>
+      </div>
+    </div>
 
-    <button id='disconnect-btn' class='btn btn-default btn-danger'>Disconnect</button>
+    <div id='remote-media-div'></div>
   </div>
-  <div class="col-md-4"></div>
-</div>
 
-<div class="row">
-  <div id='local-media-ctr'></div>
-</div>
+  <div class="col-md-1"></div>
 
-<div class="row">
-  <div id='remote-media-div'></div>
+  <div id='info-board' class="col-md-3"></div>
 </div>