From fbde469f453e2b0ced7cafd427da4c9934f6a913 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Fri, 31 Aug 2018 20:47:33 +0100 Subject: [PATCH] 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"