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

Added border colors for peer identification in chat and video, removing nicknames

Browse Source
This commit is contained in:
Arya Vohra 2020-06-01 00:22:36 +08:00
parent d4cfda9032
commit 70b15ef04c
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/chat.css vendored
View File

@ -337,6 +337,9 @@ button:hover {
justify-content: center;
padding: 12px;
max-width: 100%;
border-style: solid;
border-width: 2px;
border-color: var(--bloc-color);
border-radius: 20px 20px 20px 5px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
}
@ -345,6 +348,9 @@ button:hover {
#chat-zone .message-item.customer .message-bloc {
background-color: rgb(47, 48, 52);
color: #fff;
border-style: solid;
border-width: 2px;
border-color: var(--bloc-color);
border-radius: 20px 20px 5px 20px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
}

47
public/js/chat.js
View File

@ -30,9 +30,9 @@ const chatZone = $("#chat-zone");
var dataChannel = new Map();
var VideoChat = {
nickname: undefined,
videoEnabled: true,
audioEnabled: true,
borderColor: `hsl(${Math.floor(Math.random() * 360)}, 70%, 80%)`,
connected: new Map(),
localICECandidates: {},
socket: io(),
@ -97,17 +97,8 @@ var VideoChat = {
},
});
// Used to identify client to other peers in chats, captions etc.
VideoChat.nickname = prompt("Please enter a nickname", "");
while (VideoChat.nickname == null || VideoChat.nickname.trim() === "") {
VideoChat.nickname = prompt(
"Nickname cannot be empty. Please enter a nickname",
""
);
}
VideoChat.localVideo.srcObject = stream;
VideoChat.localVideo.style.border = `4px solid ${VideoChat.borderColor}`;
// Now we're ready to join the chat room.
VideoChat.socket.emit("join", roomHash);
@ -170,10 +161,6 @@ var VideoChat = {
id: 0,
})
);
// Called when dataChannel is successfully opened
dataChannel.get(uuid).onopen = function (event) {
logIt("dataChannel opened");
};
// Handle different dataChannel types
dataChannel.get(uuid).onmessage = function (event) {
const receivedData = event.data;
@ -186,8 +173,16 @@ var VideoChat = {
recieveCaptions(cleanedMessage);
} else if (dataType === "tog:") {
toggleSendCaptions();
} else if (dataType === "clr:") {
setStreamColor(uuid, cleanedMessage);
}
};
// Called when dataChannel is successfully opened
dataChannel.get(uuid).onopen = function (event) {
logIt("dataChannel opened");
// Sending our identifier color to the other peers
dataChannel.get(uuid).send("clr:" + VideoChat.borderColor);
};
// Set up callbacks for the connection generating iceCandidates or
// receiving the remote media stream. Wrapping callback functions
// to pass in the peer uuids.
@ -815,17 +810,16 @@ function recieveCaptions(captions) {
// Text Chat
// Add text message to chat screen on page
function addMessageToScreen(msg, isOwnMessage) {
// If nickname is undefined or null, user didn't input a nickname
function addMessageToScreen(msg, border, isOwnMessage) {
if (isOwnMessage) {
$(".chat-messages").append(
'<div class="message-item customer cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
`<div class="message-item customer cssanimation fadeInBottom"><div class="message-bloc" style="--bloc-color: ${border}"><div class="message">` +
msg +
"</div></div></div>"
);
} else {
$(".chat-messages").append(
'<div class="message-item moderator cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
`<div class="message-item moderator cssanimation fadeInBottom"><div class="message-bloc" style="--bloc-color: ${border}"><div class="message">` +
msg +
"</div></div></div>"
);
@ -843,9 +837,9 @@ chatInput.addEventListener("keypress", function (event) {
// Make links clickable
msg = msg.autoLink();
// Send message over data channel
sendToAllDataChannels("mes:" + VideoChat.nickname + ": " + msg);
sendToAllDataChannels("mes:" + VideoChat.borderColor + msg);
// Add message to screen
addMessageToScreen(msg, true);
addMessageToScreen(msg, VideoChat.borderColor, true);
// Auto scroll chat down
chatZone.scrollTop(chatZone[0].scrollHeight);
// Clear chat input
@ -855,8 +849,12 @@ chatInput.addEventListener("keypress", function (event) {
// Called when a message is recieved over the dataChannel
function handleRecieveMessage(msg) {
// Slice border color for message
const endIndex = msg.indexOf(')');
const color = msg.slice(0, endIndex);
msg = msg.slice(endIndex+1, msg.length);
// Add message to screen
addMessageToScreen(msg, false);
addMessageToScreen(msg, color, false);
// Auto scroll chat down
chatZone.scrollTop(chatZone[0].scrollHeight);
// Show chat if hidden
@ -865,6 +863,11 @@ function handleRecieveMessage(msg) {
}
}
// Sets the border color of uuid's stream upon receiving color
function setStreamColor(uuid, color) {
document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `4px solid ${color}`;
}
// Show and hide chat
function toggleChat() {
var chatIcon = document.getElementById("chat-icon");