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/LICENSE b/LICENSE new file mode 100644 index 0000000..8fa3c95 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Beatrice Olivera + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 3e435c1..2c714ac 100644 --- a/README.md +++ b/README.md @@ -1 +1,8 @@ -Rails app generated with [lewagon/rails-templates](https://github.com/lewagon/rails-templates), created by the [Le Wagon coding bootcamp](https://www.lewagon.com) team. +# polyglot +A video call application made with Ruby on Rails and node.js. + +Video calling is made possible with [WebRTC](https://webrtc.org/). + +Signaling is done via ActionCable in Rails, a module that handles WebSockets. This section of the project was adapted from `@jeanpaulsio`'s project which can be found [here](https://github.com/jeanpaulsio/action-cable-signaling-server). + +This Rails app was generated with [lewagon/rails-templates](https://github.com/lewagon/rails-templates), created by the [Le Wagon coding bootcamp](https://www.lewagon.com) team. diff --git a/app/assets/images/phone.jpg b/app/assets/images/phone.jpg index 1f5174a..f51c540 100644 Binary files a/app/assets/images/phone.jpg and b/app/assets/images/phone.jpg differ diff --git a/app/assets/stylesheets/components/_navbar.scss b/app/assets/stylesheets/components/_navbar.scss index 4a53bc0..4261f89 100644 --- a/app/assets/stylesheets/components/_navbar.scss +++ b/app/assets/stylesheets/components/_navbar.scss @@ -12,19 +12,23 @@ font-size: 2em; font-weight: bold; + a:hover { + color: $primary; + } } - .right-align { height: 100%; width: 16em; - margin-right: 5em; + margin-right: 4em; display: flex; align-items: center; justify-content: space-between; + .links { display: flex; height: inherit; + div { height: inherit; display: flex; @@ -32,19 +36,26 @@ border-bottom: 5px solid transparent; &:first-child { - margin-right: 1em; + margin-right: 2.5em; } &.active { border-bottom: 5px solid $primary; color: white; - - a { - color: white; - } } + + &:hover { + color: white; + } + + &.active, &:hover { + a { + color: white; + } + } + a { - color: #C4C4C4; + color: $text-inactive; text-decoration: none; } } @@ -53,7 +64,28 @@ .profile { img { - width: 3.25em; + width: 3em; + padding: 0.2em; + } + } + + .burger-menu { + margin-right: 20px; + color: $primary; + } + + .polyglot-dropdown { + background-color: $navbar-background; + + li { + a { + color: $text-inactive; + + &:hover { + color: white; + background-color: $background; + } + } } } } diff --git a/app/assets/stylesheets/config/_bootstrap_variables.scss b/app/assets/stylesheets/config/_bootstrap_variables.scss index 77cb850..a947346 100755 --- a/app/assets/stylesheets/config/_bootstrap_variables.scss +++ b/app/assets/stylesheets/config/_bootstrap_variables.scss @@ -14,7 +14,7 @@ $gray-base: $gray; $brand-primary: $primary; $brand-success: $green; $brand-info: $yellow; -$brand-danger: $red; +$brand-danger: $warn; $brand-warning: $orange; $brand-secondary: $secondary; @@ -52,3 +52,4 @@ $border-radius-small: 2px; } // Override other variables below! +$input-border-focus: $primary; diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index 1ffb1c1..f551eb7 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -8,6 +8,7 @@ $orange: #E67E22; $green: #32B796; $gray: #000000; $light-gray: #F4F4F4; +$warn: #3d63cc; $primary: #F55E4F; $secondary: #5ED17E; @@ -15,4 +16,5 @@ $background: #33333D; $card-background: #464650; $navbar-background: #1F1F29; $text-darker: #CDCDCD; +$text-inactive: #C4C4C4; $icon: #EDECEC; diff --git a/app/assets/stylesheets/config/_fonts.scss b/app/assets/stylesheets/config/_fonts.scss index dca1ed8..dc7ce76 100755 --- a/app/assets/stylesheets/config/_fonts.scss +++ b/app/assets/stylesheets/config/_fonts.scss @@ -1,9 +1,9 @@ // Import Google fonts -@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500"); +@import url("https://fonts.googleapis.com/css?family=Assistant:400,700|Hind:400,700"); // Define fonts for body and headers -$body-font: "Open Sans", "Helvetica", "sans-serif"; -$headers-font: "Raleway", "Helvetica", "sans-serif"; +$body-font: "Hind", "Helvetica", "sans-serif"; +$headers-font: "Assistant", "Helvetica", "sans-serif"; // To use a font file (.woff) uncomment following lines // @font-face { diff --git a/app/assets/stylesheets/devise/_login.scss b/app/assets/stylesheets/devise/_login.scss index 702f4ce..0bb8aaf 100644 --- a/app/assets/stylesheets/devise/_login.scss +++ b/app/assets/stylesheets/devise/_login.scss @@ -18,13 +18,13 @@ url('https://unsplash.com/photos/jay5BqVyf5A'); - .login-content { position: relative; - top: -10vh; + // top: -10vh; padding: 50px; background-color: white; width: 25vw; + min-width: 300px; border-radius: 3px; box-shadow: 1px 1px 10px rgba(0,0,0, 0.21); diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss index ad0cd0b..93c6e99 100644 --- a/app/assets/stylesheets/pages/_contacts.scss +++ b/app/assets/stylesheets/pages/_contacts.scss @@ -12,6 +12,7 @@ a:hover { } .card { + min-width: 360px; display: flex; justify-content: space-between; background: $card-background; @@ -73,8 +74,17 @@ a:hover { } .video-content { - height: 485px; - background-color: black; + // height: 485px; + + padding-left: 0.2vw; + display: flex; + justify-content: center; + .flex-video { + height: 100%; + width: 100%; + flex: 1 1 auto; + } + // background-color: black; } .half { @@ -91,6 +101,8 @@ a:hover { align-items: center; } +// Modal + .modal-header { border-bottom: 0px; i { @@ -100,6 +112,7 @@ a:hover { .modal-color { background-color: $card-background; + min-width: 296px; } .vertical-alignment-helper { @@ -133,17 +146,28 @@ a:hover { align-items: center; } +.modal-flex { + display: flex; + flex-wrap: wrap; +} + +@media only screen and (max-width: 1100px) { + .modal-picture { + width: 50px; + } +} - +// Contact .contact { color: white; } .contacts { - height: 570px; - overflow: scroll; + display: flex; + flex-direction: column; + justify-content: center; } .close { @@ -159,12 +183,10 @@ a:hover { filter: alpha(opacity=20); } - - - - - - +.contacts-list{ + height: 90vh; + overflow: scroll; +} diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss index 740097b..a3fa38e 100755 --- a/app/assets/stylesheets/pages/_home.scss +++ b/app/assets/stylesheets/pages/_home.scss @@ -1,4 +1,3 @@ -// Specific CSS for your home-page video { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); /* Safari and Chrome */ diff --git a/app/assets/stylesheets/pages/_index.scss b/app/assets/stylesheets/pages/_index.scss index 9adfd02..da7fa11 100644 --- a/app/assets/stylesheets/pages/_index.scss +++ b/app/assets/stylesheets/pages/_index.scss @@ -1,3 +1,4 @@ // Import page-specific CSS files here. @import "home"; -@import "contacts" +@import "contacts"; +@import "settings"; diff --git a/app/assets/stylesheets/pages/_settings.scss b/app/assets/stylesheets/pages/_settings.scss new file mode 100644 index 0000000..565180a --- /dev/null +++ b/app/assets/stylesheets/pages/_settings.scss @@ -0,0 +1,125 @@ +.card-form { + padding: 20px; +} + +.card-form-no-hover { + &:hover { + box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2); + } +} + +.input-dropdown { + width: 196px; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input {display:none;} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: $primary; +} + +input:focus + .slider { + box-shadow: 0 0 1px $primary; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.input-field-text-black { + color: black; +} + +.slider.rounded { + border-radius: 3px; +} + +.slider.rounded:before { + border-radius: 3px; +} + + +.settings { + color: white; +} + +.no-padding { + padding: 0; +} + +.no-margin { + margin: 0; +} + +.font-weight-normal { + font-weight: normal; +} + +.padding-right { + padding-right: 10px; +} + +.margin-right { + margin-right: 10px; +} + +.flex-inline { + display: flex; + flex-direction: row; + align-items: center; +} + +.space-between { + justify-content: space-between; +} + +.center-screen { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + min-height: 80vh; +} diff --git a/app/assets/stylesheets/users/_edit.scss b/app/assets/stylesheets/users/_edit.scss index 48c2d94..ea05b38 100644 --- a/app/assets/stylesheets/users/_edit.scss +++ b/app/assets/stylesheets/users/_edit.scss @@ -3,7 +3,8 @@ display: flex; justify-content: space-between; align-items: center; - height: calc(100vh - 4.5em); // 4.5em is height of navbar + padding-top: 30px; + // height: calc(100vh - 4.5em); // 4.5em is height of navbar form { flex-grow: 1; @@ -22,10 +23,18 @@ img { max-width: 50vw; + padding-top: 30px; } } } +.small-profile-pic { + img { + width: 223px; + margin-bottom: 20px; + } +} + .profile-form { display: grid; grid-template-columns: 1fr 1fr; diff --git a/app/assets/stylesheets/users/_show.scss b/app/assets/stylesheets/users/_show.scss index e800dd4..906e0f4 100644 --- a/app/assets/stylesheets/users/_show.scss +++ b/app/assets/stylesheets/users/_show.scss @@ -4,6 +4,7 @@ display:flex; flex-direction: column; justify-content: center; + text-align: center; h2 { font-size: 1.5em; @@ -21,33 +22,43 @@ margin-right: .5em; } } - .profile-pic { - display: flex; - align-items: center; - margin-right: 3em; - img { - width: 10em; - } - } - - .profile-text { - display: flex; - flex-direction: column; - justify-content: center; - color: #f2321f; - h1 { - margin: 0 0 .5em 0 ; - } - h2 { - margin: 0; - } - .italics { - font-style: italic; - color: white; - } - } } +} +.profile-text { + display: flex; + flex-direction: column; + justify-content: center; + color: $primary; + h1 { + margin: 0 0 .5em 0 ; } + h2 { + margin: 0; + } + .italics { + font-style: italic; + color: white; + } +} +.vcenter { + display: inline-block; + vertical-align: middle; + float: none; +} +.vertical-padding { + padding-top: 5px; + padding-bottom: 5px; +} + +.vertical-margin { + margin-top: 5px; + margin-bottom: 5px; +} + +.img-profile { + width: 200px; + height: 200px; +} diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 28c2bff..ffc6404 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -6,4 +6,8 @@ class ApplicationController < ActionController::Base def after_sign_in_path_for(resource) contacts_path end + + def default_url_options + { host: ENV["HOST"] || "localhost:3000" } + end end diff --git a/app/controllers/connections_controller.rb b/app/controllers/connections_controller.rb index bf1c1be..83a7e4e 100644 --- a/app/controllers/connections_controller.rb +++ b/app/controllers/connections_controller.rb @@ -1,6 +1,5 @@ class ConnectionsController < ApplicationController def new - end def create @@ -10,9 +9,17 @@ class ConnectionsController < ApplicationController @connection.contact = contact_user if @connection.save - redirect_to contacts_path + contact_message = nil + if contact_user.first_name.nil? || contact_user.last_name.nil? + contact_message = "#{contact_user.email}" + else + contact_message = "#{contact_user.first_name} #{contact_user.last_name}" + end + flash[:notice] = "Added #{contact_message} to contacts" + redirect_to contacts_path else - + flash[:alert] = "Invalid email address!" + render 'new' end end 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/helpers/meta_tags_helper.rb b/app/helpers/meta_tags_helper.rb new file mode 100644 index 0000000..5353d9b --- /dev/null +++ b/app/helpers/meta_tags_helper.rb @@ -0,0 +1,15 @@ +module MetaTagsHelper + def meta_title + content_for?(:meta_title) ? content_for(:meta_title) : DEFAULT_META["meta_title"] + end + + def meta_description + content_for?(:meta_description) ? content_for(:meta_description) : DEFAULT_META["meta_description"] + end + + def meta_image + meta_image = (content_for?(:meta_image) ? content_for(:meta_image) : DEFAULT_META["meta_image"]) + # little twist to make it work equally with an asset or a url + meta_image.starts_with?("http") ? meta_image : image_url(meta_image) + end +end diff --git a/app/javascript/components/modal.js b/app/javascript/components/modal.js index 25eb307..f4cdcf0 100644 --- a/app/javascript/components/modal.js +++ b/app/javascript/components/modal.js @@ -1,11 +1,15 @@ - const triggerModalEvent = () => { - const btn = document.getElementById("modalTrigger"); - const modal = document.getElementById("myModal"); - btn.addEventListener('click', function(event) { - $('#myModal').modal('show'); - }); + const buttons = document.querySelectorAll(".modalTrigger"); + + buttons.forEach(btn => { + if (btn) { + btn.addEventListener('click', function(event) { + const btnId = btn.getAttribute('data-user-id') + $("#myModal"+`${btnId}`).modal('show'); + }); + } + }) } export { triggerModalEvent } diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 8a54864..d7551ce 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -4,6 +4,35 @@ import { triggerModalEvent } from "../components/modal.js"; triggerModalEvent(); -// import { profilePageAnimation } from '../users/lesson'; +const settingsPage = document.getElementById('settings-page'); +const contactsPage = document.getElementById('contacts-page'); + +const getSiblings = (element) => { + const siblings = []; + let sibling = element.parentNode.firstChild; + const skipMe = element; + for ( ; sibling; sibling = sibling.nextSibling ) + if ( sibling.nodeType == 1 && sibling != element ) + siblings.push( sibling ); + return siblings; +} + +const removeActiveClass = (element) => { + const siblings = getSiblings(element); + siblings.forEach(sibling => { + sibling.classList.remove('active'); + }); +} + +if (settingsPage) { + const settings = document.getElementById('settings') + settings.classList.add('active'); + removeActiveClass(settings); +} + +if (contactsPage) { + const contacts = document.getElementById('contacts') + contacts.classList.add('active'); + removeActiveClass(contacts); +} -// profilePageAnimation(); 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/javascript/packs/local_video.js b/app/javascript/packs/local_video.js new file mode 100644 index 0000000..6b5f98f --- /dev/null +++ b/app/javascript/packs/local_video.js @@ -0,0 +1,14 @@ +const contactsVideo = document.getElementById("contacts-video") + +try { + const contactsStream = navigator.mediaDevices.getUserMedia({ + audio: false, + video: true + }).then(stream => { + contactsVideo.srcObject = stream; + contactsVideo.muted = true; + }) +} catch(e) { + console.error(e); + contactsVideo.innerHTML = "Unable to getUserMedia()"; +} diff --git a/app/javascript/packs/notifications.js b/app/javascript/packs/notifications.js index cff3892..8054fa3 100644 --- a/app/javascript/packs/notifications.js +++ b/app/javascript/packs/notifications.js @@ -1,6 +1,6 @@ import ActionCable from 'actioncable' -// create App object with key cable == new cosumer +// create App object with key cable == new consumer (function() { window.App || (window.App = {}); @@ -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 { @@ -47,10 +40,9 @@ App.cable.subscriptions.create({ } }) - +// Receive information from index.html.erb const acceptButton = document.getElementById('accept-button') acceptButton.addEventListener('click', event => { - // event.preventDefault() document.getElementById('chat-room-id').value = chatRoomId }) diff --git a/app/javascript/packs/settings_video.js b/app/javascript/packs/settings_video.js new file mode 100644 index 0000000..51900f9 --- /dev/null +++ b/app/javascript/packs/settings_video.js @@ -0,0 +1,14 @@ +const contactsVideo = document.getElementById("settings-video") + +try { + const contactsStream = navigator.mediaDevices.getUserMedia({ + audio: false, + video: true + }).then(stream => { + contactsVideo.srcObject = stream; + contactsVideo.muted = true; + }) +} catch(e) { + console.error(e); + contactsVideo.innerHTML = "Unable to getUserMedia()"; +} 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..5bf7376 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,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); + diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb index 0835cd4..fd9e62f 100644 --- a/app/views/chat_rooms/show.html.erb +++ b/app/views/chat_rooms/show.html.erb @@ -1,27 +1,19 @@ - - - +
+
-
- +
-
- -
- - - +
<%= javascript_pack_tag 'chatrooms' %> +<%= javascript_pack_tag 'webrtc' %> + + + diff --git a/app/views/connections/new.html.erb b/app/views/connections/new.html.erb index 081a36c..e6db9ff 100644 --- a/app/views/connections/new.html.erb +++ b/app/views/connections/new.html.erb @@ -1,8 +1,23 @@ -
-

Add a new contact:

- <%= form_for User.new, url: connections_path do |f| %> - <%= f.label :email, class: "email_label_color" %>: - <%= f.text_field :email %> +<% params["action"] = "Add contact" %> - <%= f.submit %> - <% end %> +
+
+
+
+
+

Enter an email address:

+
+ <%= simple_form_for User.new, url: connections_path, class: "input-group" do |f| %> +
+
+ <%= f.input_field :email, class: "form-control margin-right" %> +
+ <%= f.button :submit, value: "Add Contact" , class: "btn btn-primary" %> +
+
+
+ <% end %> +
+
+
+
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 799901f..d584042 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -11,11 +11,19 @@ <%= f.input :password, required: false, input_html: { autocomplete: "current-password" } %> - <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %> +
+ <%= f.label :remember_me %> + +
+ + <%#= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
- <%= f.button :submit, "Log in", class: "login btn btn-primary" %> + <%= f.button :submit, "Log in", class: "login btn btn-primary vertical-margin" %>
<% end %> diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb index a87593a..eb86934 100644 --- a/app/views/devise/shared/_links.html.erb +++ b/app/views/devise/shared/_links.html.erb @@ -3,11 +3,11 @@ <% end -%> <%- if devise_mapping.registerable? && controller_name != 'registrations' %> - <%#= link_to "Sign up", new_registration_path(resource_name) %> + <%= link_to "Sign up", new_registration_path(resource_name) %> <% end -%> <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %> - <%= link_to "Forgot your password?", new_password_path(resource_name) %>
+ <%#= link_to "Forgot your password?", new_password_path(resource_name) %>
<% end -%> <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 99d6833..b6c48d2 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -3,12 +3,18 @@ - <%= favicon_link_tag 'favicon.ico' %> - Polyglot + <%= favicon_link_tag 'favicon.ico' %> + Polyglot - Live Translation <%= csrf_meta_tags %> <%= action_cable_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all' %> <%#= stylesheet_pack_tag 'application', media: 'all' %> + + + + + + <%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" || params["action"] == "call" %> @@ -16,6 +22,5 @@ <%= yield %> <%= javascript_include_tag 'application' %> <%= javascript_pack_tag 'application' %> - diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb index 724cb14..cc03a6c 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? %> @@ -12,17 +6,17 @@ end <%= 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 %>

- <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do %> + + <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do %> <% end %>
@@ -32,30 +26,30 @@ end
- - -