diff --git a/.gitignore b/.gitignore index 2a08fef..127293d 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,4 @@ yarn-error.log .byebug_history .env* .env* +translation-credentials.json diff --git a/app/assets/stylesheets/components/_hand.scss b/app/assets/stylesheets/components/_hand.scss index 74a3a5f..49312e2 100644 --- a/app/assets/stylesheets/components/_hand.scss +++ b/app/assets/stylesheets/components/_hand.scss @@ -2,7 +2,7 @@ position: absolute; bottom: 20px; z-index: 10000000000; - left: 10%; + left: 48%; font-size: 26px; cursor: pointer; } diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss index ee6d1a9..a3fa38e 100755 --- a/app/assets/stylesheets/pages/_home.scss +++ b/app/assets/stylesheets/pages/_home.scss @@ -6,14 +6,6 @@ video { #remote-video-container { float: left; - i { - text-align: center; - background-color: $primary; - border-radius: 50%; - padding: 15px; - z-index: 999999; - color: white; - } } #local-video { diff --git a/app/assets/stylesheets/pages/_index.scss b/app/assets/stylesheets/pages/_index.scss index 96bb455..52316dd 100644 --- a/app/assets/stylesheets/pages/_index.scss +++ b/app/assets/stylesheets/pages/_index.scss @@ -2,7 +2,6 @@ @import "home"; @import "contacts"; @import "settings"; -@import "messages"; .accept-call-button { border-style: none; diff --git a/app/assets/stylesheets/pages/_messages.scss b/app/assets/stylesheets/pages/_messages.scss deleted file mode 100644 index 8c2b0b7..0000000 --- a/app/assets/stylesheets/pages/_messages.scss +++ /dev/null @@ -1,65 +0,0 @@ -.messages-container-container { - background-color: $light-gray; - width: 100%; - height: 100vh; - position: relative; - .chat { - position: absolute; - bottom: 0px; - } -} - -#messages-container { - overflow: scroll; - height: 95%; - padding: 10px; -} - -select:not([multiple]) { - -webkit-appearance: none; - -moz-appearance: none; - background-position: right 50%; - background-repeat: no-repeat; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); - padding: .5em; - padding-right: 1.5em; -} - -#language-1 { - border-radius: 0; -} - -.avatar-sm { - width: 35px; - height: 35px; -} - -.messageDiv { - display: flex; - align-items: center; - padding-top: 10px; - padding-bottom: 10px; - - p { - padding-top: 2px; - padding-bottom: 2px; - padding-left: 8px; - padding-right: 8px; - background-color: #d4d5d6; - color: $navbar-background; - border-radius: 2px; - } - - &.right { - flex-direction: row-reverse; - p { - background-color: $primary; - color: white !important; - } - } - -} - -.margin-left { - margin-left: 10px; -} diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 1ad249d..9577412 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -50,9 +50,7 @@ class PagesController < ApplicationController chat_message: { message: 'test', user_info: user_info, - time_stamp: Time.now, - photo_url: photo_url - } + time_stamp: Time.now } }) head :ok end @@ -82,8 +80,7 @@ class PagesController < ApplicationController ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", { translated_message: translated_message, - userId: userId, - photo_url: params[:photo_url] + userId: userId } end @@ -93,7 +90,6 @@ class PagesController < ApplicationController chatroom = 'chat_room_' + params[:chat_room_id] puts params user_info = {} - photo_url = current_user.photo.url || "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" if current_user.first_name.nil? || current_user.last_name.nil? user_info[:name] = current_user.email @@ -106,8 +102,7 @@ class PagesController < ApplicationController message: params[:message], user_info: user_info, time_stamp: Time.now.strftime("%H:%M"), - userId: current_user.id, - photo_url: photo_url + userId: current_user.id } }) head :ok diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js index 8853946..c5e1267 100644 --- a/app/javascript/packs/chatrooms.js +++ b/app/javascript/packs/chatrooms.js @@ -1,5 +1,5 @@ import ActionCable from 'actioncable' -// import { scrollLastMessageIntoView } from './chatrooms' + // create App object with key cable == new cosumer (function() { window.App || (window.App = {}); @@ -24,35 +24,14 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({ const chatMessage = data["chat_message"] const message = `${chatMessage["message"]}` const messagesContainer = document.getElementById('messages-container') - - // Div Settings - const messageDiv = document.createElement("div") - messageDiv.classList.add("messageDiv") - messageDiv.classList.add("right") - - // Photo Settings - const photo = document.createElement("img") - photo.src = chatMessage["photo_url"] - photo.classList.add("img-circle") - photo.classList.add("avatar-sm") - photo.classList.add("margin-left") - - // Text Settings const messageElement = document.createElement("p") - messageElement.classList.add("message") - messageElement.classList.add("no-margin") messageElement.innerText = message - - // Add message and photo to div - messageDiv.appendChild(photo) - messageDiv.appendChild(messageElement) - - // Add message to container - messagesContainer.appendChild(messageDiv) - - } else if (data["chat_message"] && data["chat_message"]["userId"] != userId) { + messagesContainer.appendChild(messageElement) + } + else if (data["chat_message"] && data["chat_message"]["userId"] != userId) { const chatMessage = data["chat_message"] const target = document.getElementById('language-1').value + const message = `${chatMessage["message"]}` fetch(`/chat_rooms/${chatroomId}/translate_message` , { @@ -60,33 +39,21 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({ body: JSON.stringify({ message: message, target: target, - userId: userId, - photo_url: chatMessage["photo_url"] + userId: userId }), headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content } }) + } else if (data["translation"] && data["userId"] == userId) { + if (data["input"] == 1) { + document.getElementById('language-2-input').value = data["translation"].text + } else { + document.getElementById('language-1-input').value = data["translation"].text + } } else if (data["translated_message"] && data["userId"] == userId) { const messagesContainer = document.getElementById('messages-container') - - const messageDiv = document.createElement("div") - messageDiv.classList.add("messageDiv") - - const photo = document.createElement("img") - photo.src = data["photo_url"] - photo.classList.add("img-circle") - photo.classList.add("avatar-sm") - photo.classList.add("margin-right") - - const messageElement = document.createElement("p") - messageElement.classList.add("message") - messageElement.classList.add("message") - messageElement.classList.add("no-margin") - messageElement.innerText = data["translated_message"] - - messageDiv.appendChild(photo) - messageDiv.appendChild(messageElement) - - messagesContainer.appendChild(messageDiv) + const message = document.createElement("p") + message.innerText = data["translated_message"] + messagesContainer.appendChild(message) } else { // console.log(data) } diff --git a/app/javascript/packs/scroll.js b/app/javascript/packs/scroll.js deleted file mode 100644 index 9a8f982..0000000 --- a/app/javascript/packs/scroll.js +++ /dev/null @@ -1,10 +0,0 @@ -function scrollLastMessageIntoView() { - const messages = document.querySelectorAll('.message'); - const lastMessage = messages[messages.length - 1]; - - if (lastMessage !== undefined) { - lastMessage.scrollIntoView(); - } -} - -export { scrollLastMessageIntoView } diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb index d75555e..304a277 100644 --- a/app/views/chat_rooms/show.html.erb +++ b/app/views/chat_rooms/show.html.erb @@ -4,45 +4,36 @@
- -
-
-
-
-
- -
- - - -
+
+
+
+
-
-
-
-
-
-
- - - - - - - -
-
+ + +
+ +
+ +
+
+
+
+ +
+ + +
+
- -
<%= javascript_pack_tag 'chatrooms' %> diff --git a/translation-credentials.json b/translation-credentials.json deleted file mode 100644 index b065dda..0000000 --- a/translation-credentials.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "type": "service_account", - "project_id": "booming-banner-212315", - "private_key_id": "9c2ce218223666d974da8f33e8329e5c6d40a471", - "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC4jSV/s2mp2nri\nJkD4W62aSithmFgd0dNZbPBuDNkhscGXfI4HAYzbWGBHw9gAuN59ezIVFZ3W3IsB\na3scJHup58ZV6zIaeEY5uFhgIlwdohi0iMKvY0eClTBiabu5Drn4OE8IlFX99Ab1\nwhV7WRjGG8YEQ2d1pUHHvS98QeQvb1Km6M9E/4GFib3xcBU0VFO2Evk3AJzK9K1z\nT+DsduloNxAaZfcygWvzhDez2sxftR9PXE1Ek/KQSuATACn11rPUyr/CuHfGSUh6\nypKMUnaYb8EnjrNW/bea/GKjGMzvHubjN/lPEEovXTYANfCXvVMy7ThdQLjS6YIW\nEPvEhS2jAgMBAAECggEAEbiT8jgzHDk7dX3A3VhISjl3Au8S/wIH7l1UlOys6Nxd\nv4MZTDjs4p8Q17NJiYA29QugWn/x4RDaVC+S6bfjHASCefuUmxAThjVaXxjNiZbo\nEmXTc+3vju1ucPTALtvoJZqalDNSMol9JZoWX/rFMzi1gfFK/PP6ZgiXh7H4DEnV\nDtwI8uXs6xGpC5Kr2u2N64RDqk9DbZ6lPLqk1zB1XM1FvApkmsUbSEXZj7CiDemx\nTz23f6VR+eZzgWuaWJQwLwmkWwVgCfUr9KL3Uw92+U/9uvcmNdsC7cwM14RfTx1R\njYkwqjz2RRsiAsuD5ebHxoNDqEIkArf6K+dFJImnOQKBgQD7zFVW22nYg/54JZR1\n3Hyv8ncy6ocPB0+jlESE/m8kPo0RtzGUJxKDTwEZP+y8y2NchI6C1atC/RxE6But\nOUAJLxqD027z4rXo/yNaiDaerZXr/y56pRbhR3wbjuR7vcEFZ3B7bHCrKhgdDYPA\nMTgVxX/2Z3AXwCDpaG2W7LxbpwKBgQC7oYnrF6jzNPCu/FHH4Hhff/2aV0IJO7BQ\nEeY8VADVBHTiYwlnBlG9LkpWFM/YjsGpsfzorztIKDd1N911h2XcL7kgh6+URP75\ntYtQV3iNUbERxdp/rnm97QdZr/W3r9s60q61mX7vMsZK8mPPmwLKvP7YSu0NvFa8\nucidRihtpQKBgAJW/sAE3/HsIBQ7vSpvNxVnemYVudWQ6tOJUC2wM5Yxopv0iNho\nmIpx1H/IkUmb1juI284pcCL6OSYGxiMQ8iBjuKpa76ACjlAw9sIjm+ZTlJ4Ry/vF\nxvWm9WdIJ6ViuQV01Z2//zgH9xtmAcBqdKv3Ht5KTcdauLOSjdomLwXnAoGAfQ7J\nHxFxAVEaznbMh108veJQBKv+Dqti86tKepE+0Lwcr7t0y98xYddVopRSiDN2LwW7\n3NbWu1xawl0O1UP+h0ijqmPlifyGuabgCReT+RUm4QKvhISlDgrK6GNYcirbAxTj\nb5S0PvfnpJJ0Ji5aKQjZDw65e3s5kKZ/aRwW3CUCgYAvWeze0qlg332pZiEtsEnF\nx8CUq7i1phdB3G6cIVdvAee5ce6tvpNiFhECjaUZiykV6zyQY8s8LIyjKTuFXbI9\n2uAvPl7y4PHV5rKJOtuQJOLqaUNgAlklKdUBL2I6vwp/1epxQHUYNeaQv5lC0QT+\nxHrzaiPUQ0ADBUNvUVMIOg==\n-----END PRIVATE KEY-----\n", - "client_email": "starting-account-c76g3v5fh5js@booming-banner-212315.iam.gserviceaccount.com", - "client_id": "105634639063680583591", - "auth_uri": "https://accounts.google.com/o/oauth2/auth", - "token_uri": "https://oauth2.googleapis.com/token", - "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", - "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/starting-account-c76g3v5fh5js%40booming-banner-212315.iam.gserviceaccount.com" -} - -