mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
586 lines
16 KiB
HTML
586 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>VDO.Ninja Chat Pop-out</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<style>
|
|
:root {
|
|
--discord-grey-0: #121212;
|
|
--discord-grey-1: #1e1f22;
|
|
--discord-grey-1a: #1e1f22;
|
|
--discord-grey-2: #232428;
|
|
--discord-grey-3: #2b2d31;
|
|
--discord-grey-4: #2e3035;
|
|
--discord-grey-5: #313338;
|
|
--discord-grey-6: #383a40;
|
|
--discord-grey-7: #404249;
|
|
--discord-grey-8: #5e6064;
|
|
--discord-text: hsl( 210 calc(1 * 9.1%) 87.1% /1);
|
|
--baby-blue: #BCF;
|
|
}
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body{
|
|
background-color: var(--discord-grey-0);
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
#chatModule{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 5px;
|
|
height: 100%;
|
|
gap: 5px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#chatBody {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.outMessage, .inMessage {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 5px;
|
|
|
|
font-family: 'Roboto';
|
|
font-size: 14px;
|
|
text-align: right;
|
|
background-color: var(--baby-blue);
|
|
border-radius: 4px;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.inMessage {
|
|
color: var(--discord-text);
|
|
background-color: var(--discord-grey-7);
|
|
}
|
|
|
|
.outMessage .chat_message {
|
|
font-weight: bold;
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
color: #ccc !important;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
height: 25px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.controls input {
|
|
border-radius: 4px;
|
|
flex: 3;
|
|
color: var(--discord-text);
|
|
background-color: var(--discord-grey-5);
|
|
border: 1px solid var(--discord-grey-8);
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.controls button {
|
|
border-radius: 4px;
|
|
flex: 1;
|
|
color: var(--discord-text);
|
|
background-color: var(--discord-grey-2);
|
|
border: 1px solid var(--discord-grey-8);
|
|
}
|
|
|
|
/* SCROLL BAR STYLING */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: var(--discord-grey-1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--discord-grey-7);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--discord-grey-8);
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--discord-grey-3);
|
|
margin: 1% auto;
|
|
padding: 20px;
|
|
border: 1px solid var(--discord-grey-8);
|
|
width: 80%;
|
|
max-width: 500px;
|
|
border-radius: 5px;
|
|
color: var(--discord-text);
|
|
}
|
|
|
|
.modal-content input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--discord-grey-8);
|
|
background-color: var(--discord-grey-5);
|
|
color: var(--discord-text);
|
|
}
|
|
|
|
.modal-content button {
|
|
padding: 10px 20px;
|
|
margin-top: 10px;
|
|
background-color: var(--discord-grey-2);
|
|
color: var(--discord-text);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-content button:hover {
|
|
background-color: var(--discord-grey-4);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chatModule" >
|
|
<div id="chatBody">
|
|
<div class="inMessage" data-translate='welcome-to-vdo-ninja-chat'>
|
|
Welcome to VDO.Ninja! You can send text messages directly to connected peers from here.
|
|
</div>
|
|
</div>
|
|
<div class="controls">
|
|
<input id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
|
|
<button onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="inputModal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>Enter Chat Details</h2>
|
|
<input type="text" id="roomInput" placeholder="Room ID">
|
|
<input type="text" id="viewInput" placeholder="View ID (if not in a room)">
|
|
<input type="password" id="passwordInput" placeholder="Password (optional)">
|
|
<button onclick="submitModalInput()">Join Chat</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var messageList = [];
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
var bc;
|
|
var iframe;
|
|
var bid;
|
|
var room;
|
|
var view;
|
|
var label;
|
|
var password;
|
|
var connected = false;
|
|
var connectionTimeout;
|
|
async function initializeCommunication() {
|
|
let params = await getDecoded();
|
|
|
|
//console.log(params);
|
|
|
|
bid = urlParams.get("id") || params?.broadcastChannelID || "default-channel";
|
|
room = urlParams.get("room") || params?.room || "";
|
|
view = urlParams.get("view") || params?.view || "";
|
|
label = urlParams.get("label") || params?.label || "";
|
|
password = urlParams.get("password") || params?.password;
|
|
|
|
if (bid && ("BroadcastChannel" in window)) {
|
|
bc = new BroadcastChannel(bid);
|
|
|
|
bc.onmessage = function(e) {
|
|
if (e.data && e.data.messageList) {
|
|
clearTimeout(connectionTimeout);
|
|
connected = true;
|
|
handleMessage(e.data);
|
|
} else if (e.data){
|
|
handleMessage(e.data);
|
|
}
|
|
};
|
|
|
|
bc.postMessage({"loaded": true});
|
|
|
|
connectionTimeout = setTimeout(function() {
|
|
if (!connected) {
|
|
console.log("BroadcastChannel connection timed out");
|
|
bc.close();
|
|
loadIframe();
|
|
}
|
|
}, 2000); // Wait for 5 seconds
|
|
|
|
bc.onclose = function() {
|
|
console.log("Broadcast channel closed");
|
|
if (connected) {
|
|
window.close();
|
|
connected = false;
|
|
}
|
|
};
|
|
} else {
|
|
loadIframe();
|
|
}
|
|
}
|
|
|
|
async function getDecoded() {
|
|
|
|
async function deriveKey(password) {
|
|
const encoder = new TextEncoder();
|
|
try {
|
|
const keyMaterial = await crypto.subtle.importKey(
|
|
'raw',
|
|
encoder.encode(password),
|
|
{ name: 'PBKDF2' },
|
|
false,
|
|
['deriveBits', 'deriveKey']
|
|
);
|
|
|
|
return await crypto.subtle.deriveKey(
|
|
{
|
|
name: 'PBKDF2',
|
|
salt: encoder.encode('salt'),
|
|
iterations: 100000,
|
|
hash: 'SHA-256'
|
|
},
|
|
keyMaterial,
|
|
{ name: 'AES-GCM', length: 256 },
|
|
true,
|
|
['encrypt', 'decrypt']
|
|
);
|
|
} catch (error) {
|
|
console.error('Error in deriveKey:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
function decrypt(encryptedText, key) {
|
|
const textEncoder = new TextEncoder();
|
|
const encodedKey = textEncoder.encode(key);
|
|
const encrypted = Uint8Array.from(atob(encryptedText), c => c.charCodeAt(0));
|
|
|
|
const decrypted = encrypted.map((byte, i) =>
|
|
byte ^ encodedKey[i % encodedKey.length]
|
|
);
|
|
|
|
return new TextDecoder().decode(decrypted);
|
|
}
|
|
|
|
const ENCRYPTION_KEY = 'your32characterlongencryptionkey!!';
|
|
|
|
try {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const encodedData = urlParams.get('data');
|
|
if (encodedData) {
|
|
//console.log('Encoded data from URL:', encodedData);
|
|
const decrypted = decrypt(encodedData, ENCRYPTION_KEY);
|
|
const params = JSON.parse(decrypted);
|
|
//console.log('Decoded params:', params);
|
|
return params;
|
|
}
|
|
//console.log('No encoded data found in URL');
|
|
return null;
|
|
} catch (error) {
|
|
//console.error('Error in getDecoded:', error);
|
|
return null;
|
|
}
|
|
|
|
}
|
|
|
|
function loadIframe() {
|
|
|
|
if (!view && !room) {
|
|
showInputModal();
|
|
return;
|
|
}
|
|
|
|
iframe = document.createElement("iframe");
|
|
iframe.style.display = "none";
|
|
iframe.allow = "autoplay";
|
|
|
|
var srcString = "./?datamode";
|
|
if (room) srcString += "&scene&room=" + encodeURIComponent(room);
|
|
if (view) srcString += "&view=" + encodeURIComponent(view);
|
|
if (password) srcString += "&password=" + encodeURIComponent(password);
|
|
if (label) srcString += "&label=" + encodeURIComponent(label);
|
|
|
|
iframe.src = srcString;
|
|
document.body.appendChild(iframe);
|
|
|
|
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
|
var eventer = window[eventMethod];
|
|
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
|
|
|
|
eventer(messageEvent, function (e) {
|
|
if (e.source != iframe.contentWindow) return;
|
|
// console.log(e);
|
|
if ("gotChat" in e.data) {
|
|
handleMessage(e.data.gotChat);
|
|
} else if ("chat" in e.data) {
|
|
handleMessage(e.data.chat);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function handleMessage(data) {
|
|
if (data.msg) {
|
|
messageList.push(data);
|
|
messageList = messageList.slice(-100);
|
|
updateMessages(data);
|
|
} else if (data.messageList) {
|
|
messageList = data.messageList;
|
|
updateMessages();
|
|
}
|
|
}
|
|
|
|
function showInputModal() {
|
|
document.getElementById('inputModal').style.display = 'block';
|
|
}
|
|
|
|
function submitModalInput() {
|
|
var room = document.getElementById('roomInput').value;
|
|
var view = document.getElementById('viewInput').value;
|
|
var password = document.getElementById('passwordInput').value;
|
|
|
|
if (!room && !view) {
|
|
alert("Please enter either a Room ID or a View ID");
|
|
return;
|
|
}
|
|
|
|
document.getElementById('inputModal').style.display = 'none';
|
|
updateURLParams(room, view, password);
|
|
loadIframe();
|
|
}
|
|
|
|
function sendChatMessage() {
|
|
var msg = document.getElementById('chatInput').value;
|
|
msg = sanitize(msg);
|
|
if (msg == "") return;
|
|
|
|
//console.log(msg);
|
|
if (bc && connected) {
|
|
try {
|
|
bc.postMessage({"msg": msg});
|
|
} catch(e){
|
|
if (iframe) {
|
|
const targetOrigin = new URL(iframe.src).origin || "*";
|
|
iframe.contentWindow.postMessage({ sendChat:msg }, targetOrigin);
|
|
}
|
|
}
|
|
} else if (iframe) {
|
|
const targetOrigin = new URL(iframe.src).origin || "*";
|
|
iframe.contentWindow.postMessage({ sendChat:msg }, targetOrigin);
|
|
}
|
|
|
|
document.getElementById('chatInput').value = "";
|
|
|
|
messageList.push({"msg": msg, type: "sent", time: new Date()});
|
|
messageList = messageList.slice(-100);
|
|
updateMessages({"msg": msg, type: "sent", time: new Date()});
|
|
}
|
|
|
|
function replaceURLs(message) {
|
|
if(!message) return;
|
|
var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
|
|
return message.replace(urlRegex, function (url) {
|
|
url = url.replace(/</g, "<").replace(/>/g, ">").replace(/["']/g, ""); // try to sanitize things, just in case.
|
|
|
|
var punc = "";
|
|
while (url[url.length-1] === "."){
|
|
url = url.slice(0,-1);
|
|
punc += ".";
|
|
}
|
|
while (url[url.length-1] === ";"){
|
|
url = url.slice(0,-1);
|
|
punc += ";";
|
|
}
|
|
while (url[url.length-1] === ","){
|
|
url = url.slice(0,-1);
|
|
punc += ",";
|
|
}
|
|
while (url[url.length-1] === "!"){
|
|
url = url.slice(0,-1);
|
|
punc += "!";
|
|
}
|
|
while (url[url.length-1] === ":"){
|
|
url = url.slice(0,-1);
|
|
punc += ":";
|
|
}
|
|
while (url[url.length-1] === "*"){
|
|
url = url.slice(0,-1);
|
|
punc += "*";
|
|
}
|
|
while (url[url.length-1] === ")"){
|
|
url = url.slice(0,-1);
|
|
punc += ")";
|
|
}
|
|
while (url[url.length-1] === "?"){
|
|
url = url.slice(0,-1);
|
|
punc += "?";
|
|
}
|
|
|
|
var hyperlink = url;
|
|
if (!hyperlink.match('^https?:\/\/')) {
|
|
hyperlink = 'http://' + hyperlink;
|
|
}
|
|
if (url.length>35){
|
|
url = url.substring(0, 35)+"...";
|
|
}
|
|
return '<a href="' + hyperlink + '" title="Click to open the link in a new tab" target="_blank" rel="noopener noreferrer">' + url + '</a>'+punc;
|
|
});
|
|
}
|
|
|
|
|
|
function sanitize(string) {
|
|
var temp = document.createElement('div');
|
|
temp.textContent = string;
|
|
return temp.innerHTML;
|
|
}
|
|
|
|
function EnterButtonChat(event){
|
|
// Number 13 is the "Enter" key on the keyboard
|
|
var key = event.which || event.keyCode;
|
|
if (key === 13) {
|
|
// Cancel the default action, if needed
|
|
event.preventDefault();
|
|
// Trigger the button element with a click
|
|
sendChatMessage();
|
|
}
|
|
}
|
|
|
|
function timeSince(date) {
|
|
|
|
var seconds = Math.floor((new Date() - date) / 1000);
|
|
|
|
var interval = seconds / 31536000;
|
|
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " years";
|
|
}
|
|
interval = seconds / 2592000;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " months";
|
|
}
|
|
interval = seconds / 86400;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " days";
|
|
}
|
|
interval = seconds / 3600;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " hours";
|
|
}
|
|
interval = seconds / 60;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " minutes";
|
|
}
|
|
return "Seconds ago";
|
|
}
|
|
|
|
|
|
function updateMessages(message = false){
|
|
if (message){
|
|
var time = timeSince(message.time);
|
|
var msg = document.createElement("div");
|
|
////// KEEP THIS IN /////////
|
|
//console.log(message.msg); // Display Recieved messages for View-Only clients.
|
|
/////////////////////////////
|
|
var label = "";
|
|
if (message.label){
|
|
label = message.label;
|
|
}
|
|
|
|
message.msg = replaceURLs(message.msg);
|
|
|
|
if (message.type == "sent"){
|
|
msg.innerHTML = "<span class='chat_message chat_sent'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i><span style='display:none'>"+label+"</span>";
|
|
msg.classList.add("outMessage");
|
|
} else if (message.type == "recv"){
|
|
msg.innerHTML = label+"<span class='chat_message chat_recv'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("inMessage");
|
|
} else if (message.type == "action"){
|
|
msg.innerHTML = label+"<span class='chat_message chat_action'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("actionMessage");
|
|
} else if (message.type == "alert"){
|
|
msg.innerHTML = "<span class='chat_message chat_alert'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("inMessage");
|
|
} else {
|
|
msg.innerHTML = "<span class='chat_message chat_other'>"+message.msg + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("inMessage");
|
|
}
|
|
document.getElementById("chatBody").appendChild(msg);
|
|
} else {
|
|
document.getElementById("chatBody").innerHTML = "";
|
|
for (i in messageList){
|
|
var time = timeSince(messageList[i].time);
|
|
var msg = document.createElement("div");
|
|
////// KEEP THIS IN /////////
|
|
//console.log(messageList[i].msg); // Display Recieved messages for View-Only clients.
|
|
/////////////////////////////
|
|
var label = "";
|
|
if (messageList[i].label){
|
|
label = messageList[i].label;
|
|
}
|
|
|
|
var message = replaceURLs(messageList[i].msg);
|
|
|
|
if (messageList[i].type == "sent"){
|
|
msg.innerHTML = "<span class='chat_message chat_sent'>"+message + " </span><i><small> <small>- "+time+"</small></small></i><span style='display:none'>"+label+"</span>";
|
|
msg.classList.add("outMessage");
|
|
} else if (messageList[i].type == "recv"){
|
|
msg.innerHTML = label+"<span class='chat_message chat_recv'>"+message + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("inMessage");
|
|
} else if (messageList[i].type == "action"){
|
|
msg.innerHTML = label+"<span class='chat_message chat_action'>"+message + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("actionMessage");
|
|
} else if (messageList[i].type == "alert"){
|
|
msg.innerHTML = "<span class='chat_message chat_alert'>"+message + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("inMessage");
|
|
} else {
|
|
msg.innerHTML = "<span class='chat_message chat_other'>"+message + " </span><i><small> <small>- "+time+"</small></small></i>";
|
|
msg.classList.add("inMessage");
|
|
}
|
|
|
|
document.getElementById("chatBody").appendChild(msg);
|
|
}
|
|
}
|
|
//if (chatUpdateTimeout){
|
|
// clearInterval(chatUpdateTimeout);
|
|
//}
|
|
document.getElementById("chatBody").scrollTop = document.getElementById("chatBody").scrollHeight;
|
|
//chatUpdateTimeout = setTimeout(function(){updateMessages()},60000);
|
|
}
|
|
|
|
initializeCommunication();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |