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

Fixed color similarity issues.

Browse Source
This commit is contained in:
Arya Vohra 2020-06-06 11:04:09 +08:00
parent 437856bb92
commit 24a35b81c3
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/js/chat.js
View File

@ -98,12 +98,12 @@ var VideoChat = {
}, },
}); });
// VideoChat.borderColor = uuidToColor(VideoChat.socket.id);
VideoChat.localVideo.srcObject = stream; VideoChat.localVideo.srcObject = stream;
VideoChat.localVideo.style.border = `3px solid ${VideoChat.borderColor}`;
// Now we're ready to join the chat room. // Now we're ready to join the chat room.
VideoChat.socket.emit("join", roomHash); VideoChat.socket.emit("join", roomHash);
VideoChat.borderColor = hueToColor(uuidToHue(VideoChat.socket.id));
VideoChat.localVideo.style.border = `3px solid ${VideoChat.borderColor}`;
// Add listeners to the websocket // Add listeners to the websocket
VideoChat.socket.on("leave", VideoChat.onLeave); VideoChat.socket.on("leave", VideoChat.onLeave);
@ -187,7 +187,7 @@ var VideoChat = {
const dataType = receivedData.substring(0, 4); const dataType = receivedData.substring(0, 4);
const cleanedMessage = receivedData.slice(4); const cleanedMessage = receivedData.slice(4);
if (dataType === "mes:") { if (dataType === "mes:") {
handleRecieveMessage(cleanedMessage, VideoChat.peerColors[uuid]); handleRecieveMessage(cleanedMessage, hueToColor(VideoChat.peerColors[uuid]));
} else if (dataType === "cap:") { } else if (dataType === "cap:") {
recieveCaptions(cleanedMessage); recieveCaptions(cleanedMessage);
} else if (dataType === "tog:") { } else if (dataType === "tog:") {
@ -839,7 +839,7 @@ function handleRecieveMessage(msg, color) {
} }
} }
function uuidToColor(uuid) { function uuidToHue(uuid) {
// Using uuid to generate random. unique pastel color // Using uuid to generate random. unique pastel color
var hash = 0; var hash = 0;
for (var i = 0; i < uuid.length; i++) { for (var i = 0; i < uuid.length; i++) {
@ -848,25 +848,29 @@ function uuidToColor(uuid) {
} }
var hue = Math.abs(hash % 360); var hue = Math.abs(hash % 360);
// Ensure color is not similar to other colors // Ensure color is not similar to other colors
var availColors = Array.from({length: 18}, (x,i) => i*20); var availColors = Array.from({length: 12}, (x,i) => i*30);
VideoChat.peerColors.forEach(function(value, key, map) {availColors[Math.floor(value/20)] = null}); VideoChat.peerColors.forEach(function(value, key, map) {availColors[Math.floor(value/30)] = null});
if (availColors[Math.floor(hue/20)] == null) { if (availColors[Math.floor(hue/30)] == null) {
for (var i = 0; i < availColors.length; i++) { for (var i = 0; i < availColors.length; i++) {
if (availColors[i] != null) { if (availColors[i] != null) {
hue = (hue % 20) + availColors[i]; hue = (hue % 30) + availColors[i];
availColors[i] = null; availColors[i] = null;
break; break;
} }
} }
} }
return `hsl(${hue},100%,70%)`; return hue;
}
function hueToColor(hue) {
return `hsl(${hue},100%,70%)`
} }
// Sets the border color of uuid's stream // Sets the border color of uuid's stream
function setStreamColor(uuid) { function setStreamColor(uuid) {
const color = uuidToColor(uuid); const hue = uuidToHue(uuid);
document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `3px solid ${color}`; document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `3px solid ${hueToColor(hue)}`;
VideoChat.peerColors[uuid] = color; VideoChat.peerColors[uuid] = hue;
} }
// Show and hide chat // Show and hide chat