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

chat animations

This commit is contained in:
Ian Ramzy 2020-04-03 23:31:07 -04:00
parent 42f26b1fc0
commit 2025b42d28
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/css/chat.css
View File

@ -309,7 +309,7 @@ button:hover {
/*Your messages*/
#chat-zone .message-item.moderator .message-bloc {
background-color: rgb(22, 23, 26);
background-color: rgb(29, 30, 33);
color: #fff;
position: relative;
display: flex;
@ -323,7 +323,7 @@ button:hover {
/*Recieved messages*/
#chat-zone .message-item.customer .message-bloc {
background-color: rgb(42, 43, 47);
background-color: rgb(47, 48, 52);
color: #fff;
border-radius: 20px 20px 5px 20px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
@ -350,4 +350,22 @@ button:hover {
text-decoration: underline;
}
.cssanimation {
animation-duration: 1s;
animation-fill-mode: both;
}
.fadeInBottom {
animation-name: fadeInBottom;
}
@keyframes fadeInBottom {
from {
opacity: 0;
transform: translateY(200%);
}
to {
opacity: 1;
}
}
/*simple chat*/

20
public/js/chat.js
View File

@ -584,7 +584,7 @@ function requestToggleCaptions() {
receivingCaptions = false;
} else {
alert(
"This is an expirimental feature. Live transcription requires the other user to have chrome."
"This is an experimental feature. Live transcription requires the other user to have chrome."
);
$("#caption-text").text("End Live Caption");
receivingCaptions = true;
@ -627,13 +627,23 @@ function startSpeech() {
recognition.onresult = (event) => {
let interimTranscript = "";
for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
let transcript = event.results[i][0].transcript;
var transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
dataChanel.send("cap:" + interimTranscript);
// if (interimTranscript.length < 100) {
dataChanel.send("cap:" + transcript);
// }
// console.log(interimTranscript);
console.log(transcript);
if (interimTranscript.length > 100) {
interimTranscript = "";
transcript = "";
// event.results[i][0].transcript = "";
console.log("reset");
}
}
}
};
@ -698,7 +708,7 @@ chatInput.addEventListener("keypress", function (event) {
event.preventDefault();
dataChanel.send("mes:" + chatInput.value);
$(".chat-messages").append(
'<div class="message-item customer"><div class="message-bloc"><div class="message">' +
'<div class="message-item customer cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
chatInput.value.autoLink() +
"</div></div></div>"
);
@ -709,7 +719,7 @@ chatInput.addEventListener("keypress", function (event) {
function handleRecieveMessage(msg) {
$(".chat-messages").append(
'<div class="message-item moderator"><div class="message-bloc"><div class="message">' +
'<div class="message-item moderator cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
msg.autoLink() +
"</div></div></div>"
);