added js package so that es7 syntax works, moved signaling-server from apps folder to pack folder, removed recurring js errors

.babelrc

@@ -1,18 +1,26 @@
 {
   "presets": [
-    ["env", {
+    [
+      "env",
+      {
         "modules": false,
         "targets": {
           "browsers": "> 1%",
           "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/javascript/components/modal.js

@@ -3,9 +3,11 @@ const triggerModalEvent = () => {
   const btn = document.getElementById("modalTrigger");
   const modal = document.getElementById("myModal");
 
+  if (btn) {
     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/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;
-    console.log(currentUser)
   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.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,9 @@ const exchange = data => {
 };
 
 const logError = error => console.warn("Whoops! Error:", error);
+
+
+const joinButton = document.getElementById("join-btn")
+joinButton.addEventListener('click', event => {
+  handleJoinSession()
+})

app/views/chat_rooms/show.html.erb

@@ -1,9 +1,8 @@
-<button onclick="handleJoinSession()" data-room="<%= @chat_room.id %>">Join Room</button>
+<button id="join-btn" data-room="<%= @chat_room.id %>">Join Room</button>
-<!-- <div id="join-session" data-room="<%= @chat_room.id %>"> -->
+<!-- <div id="join-session" onclick="handleJoinSession()" 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">
@@ -16,12 +15,12 @@
   <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' %>
+
+<script>
+
+</script>
+
+
+

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? %>

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"