Merge pull request #35 from beatriceo/working-version

Working version

.babelrc

@@ -1,18 +1,26 @@
 {
   "presets": [
-    ["env", {
+    [
-      "modules": false,
+      "env",
-      "targets": {
+      {
-        "browsers": "> 1%",
+        "modules": false,
-        "uglify": true
+        "targets": {
-      },
+          "browsers": "> 1%",
-      "useBuiltIns": true
+          "uglify": true
-    }]
+        },
+        "useBuiltIns": true
+      }
+    ]
   ],
-
   "plugins": [
     "syntax-dynamic-import",
     "transform-object-rest-spread",
-    ["transform-class-properties", { "spec": true }]
+    "transform-runtime",
+    [
+      "transform-class-properties",
+      {
+        "spec": true
+      }
+    ]
   ]
 }

app/controllers/pages_controller.rb

@@ -13,8 +13,6 @@ class PagesController < ApplicationController
   end
 
 
-
-
   def cable_testing
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params

app/javascript/components/modal.js

@@ -1,11 +1,12 @@
-
 const triggerModalEvent = () => {
   const btn = document.getElementById("modalTrigger");
   const modal = document.getElementById("myModal");
 
-  btn.addEventListener('click', function(event) {
+  if (btn) {
-    $('#myModal').modal('show');
+    btn.addEventListener('click', function(event) {
-  });
+      $('#myModal').modal('show');
+    });
+  }
 }
 
 export { triggerModalEvent }

app/javascript/packs/chatrooms.js

@@ -23,13 +23,13 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
 })
 
 // Testing ActionCable
-const testBtn = document.getElementById('test-btn')
+// const testBtn = document.getElementById('test-btn')
-testBtn.addEventListener('click', event => {
+// testBtn.addEventListener('click', event => {
-  fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
+//   fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
-    method: 'POST',
+//     method: 'POST',
-    body: JSON.stringify({})
+//     body: JSON.stringify({})
-  })
+//   })
-})
+// })
 
 
 

app/javascript/packs/notifications.js

@@ -12,7 +12,6 @@ import ActionCable from 'actioncable'
 const userId = parseInt(document.getElementById("my-user-id").dataset["userId"])
 let chatRoomId = null
 
-
 App.cable.subscriptions.create({
   channel: 'NotificationsChannel'
 }, {
@@ -24,19 +23,13 @@ App.cable.subscriptions.create({
     // console.log(userId)
     console.log("received broadcast")
     // console.log(data.body)
-    if (data.head === 302 && data.body["caller"] === userId && data.path ) {
+    if (data.head === 302 && data.body["caller"] === userId && data.path) {
       window.location.pathname = data.path
-    } else if (data["message"]["user_id"] === userId) {
+    } else if (data["message"]["user_id"] === userId) { // Some error appears here but it is not fatal
       console.log("TRIGGER MODAL")
       const acceptButton = document.getElementById('accept-button')
       acceptButton.style.display = "block"
-      // const receiveCall = document.getElementById('receive-call')
-      // receiveCall.dataset.toggle = 'modal'
-      // receiveCall.dataset.target ='#calleeModal'
-      // console.log(receiveCall)
 
-      // const calleeModal = document.getElementById('calleeModal')
-      // calleeModal.modal("show")
       chatRoomId = data["message"]["chat_room_id"]
       console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`)
     } else {

app/javascript/packs/webrtc.js

@@ -1,7 +1,5 @@
 // Broadcast Types
 
-class Signaling {}
-
 const JOIN_ROOM = "JOIN_ROOM";
 const EXCHANGE = "EXCHANGE";
 const REMOVE_USER = "REMOVE_USER";
@@ -16,12 +14,9 @@ let pcPeers = {}; // peer connection
 let localstream;
 
 window.onload = () => {
-  // if (document.getElementById("current-user")) {
+  currentUser = document.getElementById("current-user").innerHTML;
-    currentUser = document.getElementById("current-user").innerHTML;
+  localVideo = document.getElementById("local-video");
-    console.log(currentUser)
+  remoteVideoContainer = document.getElementById("remote-video-container");
-    localVideo = document.getElementById("local-video");
-    remoteVideoContainer = document.getElementById("remote-video-container");
-  // }
 };
 
 // Ice Credentials
@@ -37,45 +32,14 @@ document.onreadystatechange = async () => {
       })
 
       localstream = stream;
-      // if (localVideo) {
+      localVideo.srcObject = stream
-        localVideo.srcObject = stream
+      localVideo.muted = true
-        localVideo.muted = true
-      // }
     } catch (e) { console.error(e); }
   }
 };
 
-// find chatroom
-// const handleJoinSession = async () => {
-//   App.session = await App.cable.subscriptions.create("VideoSessionChannel", {
-//     connected: () => {
-//       broadcastData({
-//         type: JOIN_ROOM,
-//         from: currentUser
-//       });
-//     },
-//     received: data => {
-//       console.log("received", data);
-//       if (data.from === currentUser) return;
-//       switch (data.type) {
-//         case JOIN_ROOM:
-//           return joinRoom(data);
-//         case EXCHANGE:
-//           if (data.to !== currentUser) return;
-//           return exchange(data);
-//         case REMOVE_USER:
-//           return removeUser(data);
-//         default:
-//           return;
-//       }
-//     }
-//   });
-// };
 
-// if (document.getElementById('chatroom-hook')) {
+const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
-  const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
-
-// }
 
 const handleJoinSession = async () => {
   App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
@@ -83,7 +47,6 @@ const handleJoinSession = async () => {
     room: chatroomId
   }, {
     connected: () => {
-      console.log(chatroomId)
       broadcastData({
         type: JOIN_ROOM,
         from: currentUser,
@@ -91,7 +54,6 @@ const handleJoinSession = async () => {
       });
     },
     received: data => {
-      console.log(data)
       if (data.from === currentUser) return;
       switch (data.type) {
         case JOIN_ROOM:
@@ -136,9 +98,6 @@ const removeUser = data => {
 
 
 const broadcastData = data => {
-  if (data.type === EXCHANGE) {
-    console.log("yayyy")
-  }
   fetch("chat_room_sessions", {
     method: "POST",
     body: JSON.stringify(data),
@@ -220,7 +179,7 @@ const exchange = data => {
   }
 
   if (data.sdp) {
-    sdp = JSON.parse(data.sdp);
+    const sdp = JSON.parse(data.sdp);
     pc
       .setRemoteDescription(new RTCSessionDescription(sdp))
       .then(() => {
@@ -242,3 +201,15 @@ const exchange = data => {
 };
 
 const logError = error => console.warn("Whoops! Error:", error);
+
+
+const joinButton = document.getElementById("join-btn")
+joinButton.addEventListener('click', event => {
+  handleJoinSession()
+})
+
+// WARNING: COMPLETELY HACKISH SOLUTION --> MUST INTRODUCE SOME SORT OF DELAY!
+setTimeout(function() {
+  joinButton.click()
+}, 5000);
+

app/views/chat_rooms/show.html.erb

@@ -1,27 +1,19 @@
-<button onclick="handleJoinSession()" data-room="<%= @chat_room.id %>">Join Room</button>
+<div id="join-btn" data-room="<%= @chat_room.id %>"></div>
-<!-- <div id="join-session" data-room="<%= @chat_room.id %>"> -->
+
-<!-- <h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1> -->
 <div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
 
-<!-- <button id="test-btn">Test Connection</button> -->
 <div class="call-container">
   <div id="remote-video-container">
     <div id="video_overlays">
-      <video id="local-video" autoplay></video>
+      <video id="local-video" autoplay muted></video>
     </div>
   </div>
 </div>
 
-<div>
+<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
-  <span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span>
-</div>
-
-<!-- <script>
-  const joinSession = document.getElementById("join-session")
-  joinSession.addEventListener('load', event => {
-    handleJoinSession()
-  })
-</script> -->
-
 
 <%= javascript_pack_tag 'chatrooms' %>
+<%= javascript_pack_tag 'webrtc' %>
+
+
+

app/views/pages/_contact.html.erb

@@ -1,9 +1,3 @@
-<%
-def hello_world
-  puts "Hello World"
-end
-%>
-
 <div class="card">
   <div class="info">
     <% if contact.photo.url.nil? %>
@@ -12,24 +6,22 @@ end
       <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:65%>
     <% end %>
     <div class="text text-color">
-      <% if contact.nil? || contact.nil? %> <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
+      <% if contact.first_name.nil? || contact.last_name.nil? %>
         <p><%= contact.email %></p>
       <% else %>
-        <p><%= contact.email %></p>
+        <p><%= contact.first_name %> <%= contact.last_name %></p>
-        <!-- <p><%#= contact.first_name %> <%#= contact.last_name %></p> -->
       <% end %>
       <p class="darker">Last call: <%= Time.now %></p>
     </div>
   </div>
   <div class="call" data-user-id="<%= contact.id %>">
+    <!-- Calls establish_call in pages_controller -->
     <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do  %>
       <i class="fas fa-phone"></i>
     <% end %>
   </div>
 </div>
 
-
-
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="vertical-alignment-helper">
@@ -42,20 +34,18 @@ end
           <div class="container">
             <div class="modal-container">
               <% if contact.photo.url.nil? %>
-                  <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle" width=150>
+                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle" width=150>
-                <% else %>
+              <% else %>
-                  <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:150%>
+                <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:150%>
-                <% end %>
+              <% end %>
               <div class="modal-text">
                 <h4 class="modal-title" id="myModalLabel">Calling</h4>
                 <h4>
                   <strong>
-                    <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
+                    <% if contact.first_name.nil? || contact.last_name.nil? %>
-                    <% if contact.nil? || contact.nil? %>
                       <p><%= contact.email %></p>
                     <% else %>
-                      <p><%= contact.email %></p>
+                      <p><%= contact.first_name %> <%= contact.last_name %></p>
-                      <!-- <p><%#= contact.first_name %> <%#= contact.last_name %></p> -->
                     <% end %>
                   </strong>
                 </h4>

package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "@rails/webpacker": "3.5",
     "actioncable": "^5.2.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "bootstrap": "3",
     "jquery": "^3.3.1"
   },

yarn.lock

@@ -680,6 +680,12 @@ babel-plugin-transform-regenerator@^6.22.0:
   dependencies:
     regenerator-transform "^0.10.0"
 
+babel-plugin-transform-runtime@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"