MigrateRepos
/
decentralized-video-chat
mirror of https://github.com/ianramzy/decentralized-video-chat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

styled chat, auto scroll, auto open on receive message

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 class="chat-messages">
<div class="message-item customer">
<div class="message-bloc">
<div class="message">Have you tried this chat?</div>
</div>
</div>
<!-- <div class="message-item customer">-->
<!-- <div class="message-bloc">-->
<!-- <div class="message">Have you tried this chat?</div>-->
<!-- </div>-->
<!-- </div>-->
<div class="message-item moderator">
<div class="message-bloc">
<div class="message">Not yet! It looks awesome</div>
</div>
</div>
<!-- <div class="message-item moderator">-->
<!-- <div class="message-bloc">-->
<!-- <div class="message">Not yet! It looks awesome</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
@ -119,22 +119,7 @@
<script src="../js/snackbar.js"></script>
<script src="../js/chat.js"></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>
</body>

54
public/css/chat.css
View File

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

30
public/js/chat.js
View File

@ -508,7 +508,6 @@ function startSpeech() {
logIt(e);
logIt("error importing speech library");
VideoChat.socket.emit('sendCaptions', "notusingchrome", roomHash);
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
VideoChat.requestMediaStream();