mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
324 lines
9.5 KiB
HTML
324 lines
9.5 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<link rel="stylesheet" href="./main.css?ver=22" />
|
|
<style>
|
|
#chatModule{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-self: center;
|
|
z-index: 3;
|
|
margin-bottom: unset;
|
|
width: 100%;
|
|
max-width: unset !important;
|
|
gap: 0px 5px;
|
|
pointer-events: auto;
|
|
gap: 5px;
|
|
height: calc(100% - 25px);
|
|
}
|
|
#chatModule {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
z-index: 3;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
z-index: 3;
|
|
margin-bottom: 65px;
|
|
gap: 0px 5px;
|
|
pointer-events: auto;
|
|
margin-bottom: unset !important;
|
|
margin: 5px;
|
|
}
|
|
#chatBody {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
z-index: 12;
|
|
background-color: #0000;
|
|
border-bottom: 5px #121212 solid;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
gap: 5px;
|
|
overflow-y: scroll;
|
|
overflow-wrap: anywhere;
|
|
height: calc(100% - 25px);
|
|
max-height: unset;
|
|
}
|
|
#chatInput{
|
|
color: #ccc;
|
|
background-color: #404249;
|
|
padding: 7px 10px 6px 6px;
|
|
flex: 3;
|
|
max-height: 25px;
|
|
z-index: 100;
|
|
|
|
}
|
|
.outMessage {
|
|
margin-bottom: unset;
|
|
}
|
|
::-webkit-input-placeholder {
|
|
color: #ccc !important;
|
|
}
|
|
body{
|
|
background-color: #121212;
|
|
justify-content: center;
|
|
flex-flow: unset;
|
|
}
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
-webkit-app-region: no-drag;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
flex: 1;
|
|
margin: unset;
|
|
padding: 7px 10px 6px 6px;
|
|
max-height: 25px;
|
|
}
|
|
</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>
|
|
<input id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
|
|
<button style="background-color:#fff;" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
|
|
</div>
|
|
<script>
|
|
|
|
|
|
/// If you have a routing system setup, you could have just one global listener for all iframes instead.
|
|
//var chatUpdateTimeout = null;
|
|
var messageList = [];
|
|
(function (w) {
|
|
w.URLSearchParams = w.URLSearchParams || function (searchString) {
|
|
var self = this;
|
|
self.searchString = searchString;
|
|
self.get = function (name) {
|
|
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
|
|
if (results == null) {
|
|
return null;
|
|
}
|
|
else {
|
|
return decodeURI(results[1]) || 0;
|
|
}
|
|
};
|
|
};
|
|
|
|
})(window);
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
|
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;
|
|
});
|
|
}
|
|
|
|
if (urlParams.has("id")){
|
|
var bid = urlParams.get("id");
|
|
}
|
|
var bc = new BroadcastChannel(bid);
|
|
bc.postMessage({"loaded":true});
|
|
bc.onmessage = function (e) {
|
|
//if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
|
|
console.log(e);
|
|
if ("data" in e){
|
|
if ("msg" in e.data){
|
|
messageList.push(e.data);
|
|
messageList = messageList.slice(-100);
|
|
updateMessages(e.data);
|
|
} else if ("messageList" in e.data){
|
|
messageList = e.data.messageList;
|
|
updateMessages();
|
|
}
|
|
}
|
|
};
|
|
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 sendChatMessage(chatMsg = false){ // filtered + visual
|
|
var msg = document.getElementById('chatInput').value;
|
|
msg = sanitize(msg);
|
|
if (msg==""){return;}
|
|
console.log(msg);
|
|
bc.postMessage({"msg":msg})
|
|
document.getElementById('chatInput').value = "";
|
|
|
|
messageList.push({"msg":msg, type: "sent"});
|
|
messageList = messageList.slice(-100);
|
|
updateMessages({"msg":msg, type: "sent"});
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |