From 62194ffea48835d8d3fc540677275cb5bfe37412 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Fri, 31 Aug 2018 20:12:43 +0100 Subject: [PATCH 1/6] removed default seb image in calling modal --- app/views/pages/_contact.html.erb | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb index 6878932..a3dea96 100644 --- a/app/views/pages/_contact.html.erb +++ b/app/views/pages/_contact.html.erb @@ -41,7 +41,11 @@ end <% end %>
- + <% if contact.photo.url.nil? %> + + <% else %> + <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:150%> + <% end %>

From fbde469f453e2b0ced7cafd427da4c9934f6a913 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Fri, 31 Aug 2018 20:47:33 +0100 Subject: [PATCH 2/6] added js package so that es7 syntax works, moved signaling-server from apps folder to pack folder, removed recurring js errors --- .babelrc | 28 ++++++--- app/javascript/components/modal.js | 8 ++- app/javascript/packs/chatrooms.js | 14 ++--- .../packs/webrtc.js} | 61 ++++--------------- app/views/chat_rooms/show.html.erb | 23 ++++--- app/views/pages/_contact.html.erb | 6 -- package.json | 1 + yarn.lock | 6 ++ 8 files changed, 61 insertions(+), 86 deletions(-) rename app/{assets/javascripts/signaling-server.js => javascript/packs/webrtc.js} (75%) diff --git a/.babelrc b/.babelrc index ded31c0..cd7d9f1 100644 --- a/.babelrc +++ b/.babelrc @@ -1,18 +1,26 @@ { "presets": [ - ["env", { - "modules": false, - "targets": { - "browsers": "> 1%", - "uglify": true - }, - "useBuiltIns": true - }] + [ + "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 + } + ] ] } diff --git a/app/javascript/components/modal.js b/app/javascript/components/modal.js index 25eb307..44cd97f 100644 --- a/app/javascript/components/modal.js +++ b/app/javascript/components/modal.js @@ -3,9 +3,11 @@ const triggerModalEvent = () => { const btn = document.getElementById("modalTrigger"); const modal = document.getElementById("myModal"); - btn.addEventListener('click', function(event) { - $('#myModal').modal('show'); - }); + if (btn) { + btn.addEventListener('click', function(event) { + $('#myModal').modal('show'); + }); + } } export { triggerModalEvent } diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js index 46b193b..a72d582 100644 --- a/app/javascript/packs/chatrooms.js +++ b/app/javascript/packs/chatrooms.js @@ -23,13 +23,13 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({ }) // Testing ActionCable -const testBtn = document.getElementById('test-btn') -testBtn.addEventListener('click', event => { - fetch(`/chat_rooms/${chatroomId}/cable_testing` , { - method: 'POST', - body: JSON.stringify({}) - }) -}) +// const testBtn = document.getElementById('test-btn') +// testBtn.addEventListener('click', event => { +// fetch(`/chat_rooms/${chatroomId}/cable_testing` , { +// method: 'POST', +// body: JSON.stringify({}) +// }) +// }) diff --git a/app/assets/javascripts/signaling-server.js b/app/javascript/packs/webrtc.js similarity index 75% rename from app/assets/javascripts/signaling-server.js rename to app/javascript/packs/webrtc.js index e8a88c0..5c22324 100644 --- a/app/assets/javascripts/signaling-server.js +++ b/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"); - // } + currentUser = document.getElementById("current-user").innerHTML; + 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 - // } + 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() +}) diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb index 0835cd4..358e664 100644 --- a/app/views/chat_rooms/show.html.erb +++ b/app/views/chat_rooms/show.html.erb @@ -1,9 +1,8 @@ - - - + + +
-
@@ -16,12 +15,12 @@
- - - <%= javascript_pack_tag 'chatrooms' %> +<%= javascript_pack_tag 'webrtc' %> + + + + + diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb index a3dea96..c841d6c 100644 --- a/app/views/pages/_contact.html.erb +++ b/app/views/pages/_contact.html.erb @@ -1,9 +1,3 @@ -<% -def hello_world - puts "Hello World" -end -%> -
<% if contact.photo.url.nil? %> diff --git a/package.json b/package.json index 4a85cda..1bd8414 100644 --- a/package.json +++ b/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" }, diff --git a/yarn.lock b/yarn.lock index 907dbe7..2d8018a 100644 --- a/yarn.lock +++ b/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" From a7d4422f3a59b583d8d9ca88d4a5f244af96d49c Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Fri, 31 Aug 2018 21:24:38 +0100 Subject: [PATCH 3/6] added autoclick on join room --- app/javascript/packs/notifications.js | 10 ++-------- app/javascript/packs/webrtc.js | 6 ++++++ app/views/chat_rooms/show.html.erb | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/javascript/packs/notifications.js b/app/javascript/packs/notifications.js index cff3892..056a931 100644 --- a/app/javascript/packs/notifications.js +++ b/app/javascript/packs/notifications.js @@ -24,19 +24,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 { diff --git a/app/javascript/packs/webrtc.js b/app/javascript/packs/webrtc.js index 5c22324..5bf7376 100644 --- a/app/javascript/packs/webrtc.js +++ b/app/javascript/packs/webrtc.js @@ -207,3 +207,9 @@ 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); + diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb index 358e664..92b2f05 100644 --- a/app/views/chat_rooms/show.html.erb +++ b/app/views/chat_rooms/show.html.erb @@ -1,4 +1,4 @@ - +
From 157d056708fe99f07bc2974be77062b46a4f1360 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Fri, 31 Aug 2018 21:32:35 +0100 Subject: [PATCH 4/6] used first name and last name for contact details if available --- app/views/pages/_contact.html.erb | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb index c841d6c..0c791e5 100644 --- a/app/views/pages/_contact.html.erb +++ b/app/views/pages/_contact.html.erb @@ -6,11 +6,10 @@ <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:65%> <% end %>
- <% if contact.nil? || contact.nil? %> + <% if contact.first_name.nil? || contact.last_name.nil? %>

<%= contact.email %>

<% else %> -

<%= contact.email %>

- +

<%= contact.first_name %> <%= contact.last_name %>

<% end %>

Last call: <%= Time.now %>

@@ -44,12 +43,10 @@

- - <% if contact.nil? || contact.nil? %> + <% if contact.first_name.nil? || contact.last_name.nil? %>

<%= contact.email %>

<% else %> -

<%= contact.email %>

- +

<%= contact.first_name %> <%= contact.last_name %>

<% end %>

From 9970c384c603cf0f30af66c594cdb789ee37ab2c Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Fri, 31 Aug 2018 21:38:48 +0100 Subject: [PATCH 5/6] minor updates to clean up code --- app/controllers/pages_controller.rb | 2 -- app/javascript/components/modal.js | 1 - app/javascript/packs/notifications.js | 1 - app/views/chat_rooms/show.html.erb | 9 +-------- app/views/pages/_contact.html.erb | 3 +-- 5 files changed, 2 insertions(+), 14 deletions(-) diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index dd8b1f4..479ef60 100644 --- a/app/controllers/pages_controller.rb +++ b/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 diff --git a/app/javascript/components/modal.js b/app/javascript/components/modal.js index 44cd97f..a35d32a 100644 --- a/app/javascript/components/modal.js +++ b/app/javascript/components/modal.js @@ -1,4 +1,3 @@ - const triggerModalEvent = () => { const btn = document.getElementById("modalTrigger"); const modal = document.getElementById("myModal"); diff --git a/app/javascript/packs/notifications.js b/app/javascript/packs/notifications.js index 056a931..9310ce3 100644 --- a/app/javascript/packs/notifications.js +++ b/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' }, { diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb index 92b2f05..92a9f7f 100644 --- a/app/views/chat_rooms/show.html.erb +++ b/app/views/chat_rooms/show.html.erb @@ -1,5 +1,4 @@
-
@@ -11,16 +10,10 @@
-
- -
+
<%= javascript_pack_tag 'chatrooms' %> <%= javascript_pack_tag 'webrtc' %> - - diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb index 0c791e5..7b06c6c 100644 --- a/app/views/pages/_contact.html.erb +++ b/app/views/pages/_contact.html.erb @@ -15,14 +15,13 @@
+ <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do %> <% end %>

- -