paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #35 from beatriceo/working-version 

Working version
This commit is contained in:
Beatrice Olivera 2018-08-31 21:45:59 +01:00 committed by GitHub
parent e2a520b55c ed238f3f7e
commit 802cb86319
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 75 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.babelrc
View File

@ -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
}
]
]
}

2
app/controllers/pages_controller.rb
View File

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

3
app/javascript/components/modal.js
View File

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

14
app/javascript/packs/chatrooms.js
View File

@ -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({})
// })
// })

9
app/javascript/packs/notifications.js
View File

@ -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'
}, {
@ -26,17 +25,11 @@ App.cable.subscriptions.create({
// console.log(data.body)
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 {

55
app/assets/javascripts/signaling-server.js → app/javascript/packs/webrtc.js
View File

@ -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,53 +32,21 @@ 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 handleJoinSession = async () => {
App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
channel: "ChatRoomsChannel",
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);

24
app/views/chat_rooms/show.html.erb
View File

@ -1,27 +1,19 @@
<button onclick="handleJoinSession()" data-room="<%= @chat_room.id %>">Join Room</button>
<!-- <div id="join-session" data-room="<%= @chat_room.id %>"> -->
<!-- <h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1> -->
<div id="join-btn" data-room="<%= @chat_room.id %>"></div>
<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>
<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> -->
<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
<%= javascript_pack_tag 'chatrooms' %>
<%= javascript_pack_tag 'webrtc' %>

20
app/views/pages/_contact.html.erb
View File

@ -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">
@ -50,12 +42,10 @@ end
<h4 class="modal-title" id="myModalLabel">Calling</h4>
<h4>
<strong>
<!-- REPLACE WITH FIRST NAME AND LAST NAME -->
<% if contact.nil? || contact.nil? %>
<% 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 %>
</strong>
</h4>

1
package.json
View File

@ -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"
},

6
yarn.lock
View File

@ -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"