MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-14 22:29:20 +08:00
Code Issues Releases Wiki Activity

styled chat, auto scroll, auto open on receive message

Browse Source
This commit is contained in:
ian ramzy 2020-03-29 16:05:22 -04:00
parent 157d1c2aa6
commit a0030f1b12
3 changed files with 65 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/chat.html
View File

@ -52,17 +52,17 @@
<div id="chat-zone"> <div id="chat-zone">
<div class="chat-messages"> <div class="chat-messages">
<div class="message-item customer"> <!-- <div class="message-item customer">-->
<div class="message-bloc"> <!-- <div class="message-bloc">-->
<div class="message">Have you tried this chat?</div> <!-- <div class="message">Have you tried this chat?</div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="message-item moderator"> <!-- <div class="message-item moderator">-->
<div class="message-bloc"> <!-- <div class="message-bloc">-->
<div class="message">Not yet! It looks awesome</div> <!-- <div class="message">Not yet! It looks awesome</div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</div> </div>
@ -119,22 +119,7 @@
<script src="../js/snackbar.js"></script> <script src="../js/snackbar.js"></script>
<script src="../js/chat.js"></script> <script src="../js/chat.js"></script>
<script> <script>
$('#entire-chat').hide();
var input = document.querySelector('.compose textarea');
var socket = io();
input.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
event.preventDefault();
socket.emit('chat message', input.value);
$('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + input.value + '</div></div></div>');
input.value = '';
}
});
socket.on('chat message', function (msg) {
$('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
});
</script> </script>
</body> </body>

54
public/css/chat.css
View File

@ -217,8 +217,7 @@ button:hover {
/*simple chat*/ /*simple chat*/
#entire-chat{ #entire-chat {
/*border: blue 1px solid;*/
position: absolute; position: absolute;
height: 100%; height: 100%;
right: 0; right: 0;
@ -229,14 +228,20 @@ button:hover {
.compose { .compose {
width: 100%; width: 100%;
height: 10%; height: 10%;
overflow: hidden; overflow: scroll;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: 0; /*margin: 0;*/
/*z-index: 1;*/ /*z-index: 1;*/
border-radius: 20px; border-radius: 20px;
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
margin: 20px;
box-sizing: border-box;
padding: 16px;
} }
.compose textarea::placeholder { .compose textarea::placeholder {
@ -249,27 +254,28 @@ button:hover {
font-size: inherit; font-size: inherit;
border: none; border: none;
width: 100%; width: 100%;
height: 100%; height: 80%;
padding: 16px;
resize: none; resize: none;
outline: none; outline: none;
color: white; color: white;
background: #3a4150; /*background: #3a4150;*/
background-color: rgb(22, 23, 26);
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
} }
#chat-zone { #chat-zone {
padding-top: 15px; padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
/*border: red 1px solid;*/ /*border: red 1px solid;*/
position: absolute; position: absolute;
height: 90%; height: calc(90% - 20px);
right: 0; right: 0;
width: 15vw; width: 15vw;
background: 0 0; overflow: scroll;
overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
} }
@ -290,8 +296,9 @@ button:hover {
} }
/*Your messages*/
#chat-zone .message-item.moderator .message-bloc { #chat-zone .message-item.moderator .message-bloc {
background-color: #3a4150; background-color: rgb(22, 23, 26);
color: #fff; color: #fff;
position: relative; position: relative;
display: flex; display: flex;
@ -299,12 +306,19 @@ button:hover {
justify-content: center; justify-content: center;
padding: 12px; padding: 12px;
max-width: 100%; max-width: 100%;
border-radius: 5px 20px 20px 5px; border-radius: 20px 20px 20px 5px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
} }
/*Recieved messages*/
#chat-zone .message-item.customer .message-bloc { #chat-zone .message-item.customer .message-bloc {
color: rgba(0, 0, 0, .87); background-color: rgb(42, 43, 47);
background-color: #e0e0e0; color: #fff;
border-radius: 20px 20px 5px 20px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
} }
#chat-zone .chat-messages .message-item.customer .message-bloc { #chat-zone .chat-messages .message-item.customer .message-bloc {
@ -320,12 +334,8 @@ button:hover {
max-width: 100%; max-width: 100%;
} }
#chat-zone .message-item.customer .message-bloc { .message {
border-radius: 20px 20px 5px 20px; word-break: break-all;
}
#chat-zone .message-item.moderator .message-bloc {
border-radius: 20px 20px 20px 5px;
} }
/*simple chat*/ /*simple chat*/

30
public/js/chat.js
View File

@ -508,7 +508,6 @@ function startSpeech() {
logIt(e); logIt(e);
logIt("error importing speech library"); logIt("error importing speech library");
VideoChat.socket.emit('sendCaptions', "notusingchrome", roomHash); VideoChat.socket.emit('sendCaptions', "notusingchrome", roomHash);
return return
} }
@ -562,12 +561,29 @@ function startSpeech() {
} }
// Chat
$('#entire-chat').hide();
var input = document.querySelector('.compose textarea');
var socket = VideoChat.socket;
input.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
event.preventDefault();
socket.emit('chat message', input.value);
$('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + input.value + '</div></div></div>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
input.value = '';
}
});
socket.on('chat message', function (msg) {
$('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
$('#entire-chat').fadeIn();
});
// Chat
// auto get media // auto get media
VideoChat.requestMediaStream(); VideoChat.requestMediaStream();