From 157d1c2aa6729b17d481c13a4533b713415f2eaf Mon Sep 17 00:00:00 2001 From: ian ramzy Date: Sun, 29 Mar 2020 14:59:59 -0400 Subject: [PATCH] implemented basic styled chat --- public/chat.html | 62 +++++++++++++++++++++---- public/css/chat.css | 110 ++++++++++++++++++++++++++++++++++++++++++++ public/js/chat.js | 10 ++-- public/landing.html | 39 +++++----------- public/newroom.html | 36 ++++++++++----- server.js | 5 ++ 6 files changed, 212 insertions(+), 50 deletions(-) diff --git a/public/chat.html b/public/chat.html index 919b8de..228ce18 100644 --- a/public/chat.html +++ b/public/chat.html @@ -3,7 +3,7 @@ Neon Chat - + @@ -34,16 +34,37 @@ Neon

Neon Chat

- -
-

Waiting for peer to connect...

- -
-

No webcam input

- +

+ +
+

No webcam input

+ +
+ + +
+
+ +
+
+
+ +
+
+
Have you tried this chat?
+
+
+ +
+
+
Not yet! It looks awesome
+
+
+ +
@@ -85,11 +106,36 @@
Start Live Caption
+
+ +
Open Chat
+
+ \ No newline at end of file diff --git a/public/css/chat.css b/public/css/chat.css index 33560ba..075bb1d 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -215,7 +215,117 @@ button:hover { /*Neomorphic buttons*/ +/*simple chat*/ + +#entire-chat{ + /*border: blue 1px solid;*/ + position: absolute; + height: 100%; + right: 0; + width: 13vw; + padding: 0; +} + +.compose { + width: 100%; + height: 10%; + overflow: hidden; + font-family: "Heebo", sans-serif; + position: absolute; + bottom: 0; + right: 0; + margin: 0; + /*z-index: 1;*/ + border-radius: 20px; +} + +.compose textarea::placeholder { + color: white; +} +.compose textarea { + font-family: inherit; + font-size: inherit; + border: none; + width: 100%; + height: 100%; + padding: 16px; + resize: none; + outline: none; + color: white; + background: #3a4150; + +} +#chat-zone { + padding-top: 15px; + box-sizing: border-box; + /*border: red 1px solid;*/ + + position: absolute; + height: 90%; + right: 0; + width: 15vw; + background: 0 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + font-family: "Heebo", sans-serif; +} + +#chat-zone .chat-messages .message-item { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + padding: 0 16px 4px; + margin-bottom: 20px; +} + + +#chat-zone .chat-messages .message-item.customer { + padding-left: 40px; +} + + +#chat-zone .message-item.moderator .message-bloc { + background-color: #3a4150; + color: #fff; + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 12px; + max-width: 100%; + border-radius: 5px 20px 20px 5px; +} + +#chat-zone .message-item.customer .message-bloc { + color: rgba(0, 0, 0, .87); + background-color: #e0e0e0; +} + +#chat-zone .chat-messages .message-item.customer .message-bloc { + margin-left: auto; +} + +#chat-zone .chat-messages .message-item .message-bloc { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 12px; + max-width: 100%; +} + +#chat-zone .message-item.customer .message-bloc { + border-radius: 20px 20px 5px 20px; +} + +#chat-zone .message-item.moderator .message-bloc { + border-radius: 20px 20px 20px 5px; +} + +/*simple chat*/ \ No newline at end of file diff --git a/public/js/chat.js b/public/js/chat.js index 94cb297..6346fae 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -83,7 +83,7 @@ var VideoChat = { text: 'Share this URL with a friend to get started', actionText: 'Copy Link', width: '355px', - pos: 'top-left', + pos: 'top-center', actionTextColor: '#8688ff', duration: 500000, backgroundColor: '#16171a', @@ -149,6 +149,7 @@ var VideoChat = { VideoChat.socket.on('answer', VideoChat.onAnswer); VideoChat.socket.on('requestToggleCaptions', () => toggleSendCaptions()); VideoChat.socket.on('recieveCaptions', (captions) => VideoChat.recieveCaptions(captions)); + callback(); }; }, @@ -348,6 +349,7 @@ function muteMicrophone() { function pauseVideo() { var paused = VideoChat.localStream.getVideoTracks()[0].enabled; + alert(paused); VideoChat.localStream.getVideoTracks()[0].enabled = !paused; const micIcon = document.getElementById("video-icon"); const micText = document.getElementById("video-text"); @@ -462,7 +464,7 @@ function switchStreamHelper(stream) { $("#moveable").draggable({containment: 'window'}); - +$('#remote-video-text').text("").fadeOut(); var sendingCaptions = false; var receivingCaptions = false; @@ -470,7 +472,7 @@ var receivingCaptions = false; function requestToggleCaptions() { if (!VideoChat.connected) { - alert("You must be connected to a peer to use Live Caption") + alert("You must be connected to a peer to use Live Caption"); return } if (receivingCaptions) { @@ -567,3 +569,5 @@ VideoChat.requestMediaStream(); + + diff --git a/public/landing.html b/public/landing.html index 6b22c87..73a84f6 100755 --- a/public/landing.html +++ b/public/landing.html @@ -310,38 +310,21 @@
Neon
- - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+ + GitHub + + +
+ +
+
+ +
© 2020 Neon Chat, all rights reserved
+
- + + diff --git a/server.js b/server.js index b0b832e..8f5becd 100644 --- a/server.js +++ b/server.js @@ -98,6 +98,11 @@ io.on('connection', function (socket) { socket.broadcast.to(room).emit('requestToggleCaptions'); }); + // Relay chat messages + socket.on('chat message', function(msg){ + socket.broadcast.emit('chat message', msg); + }); + });