rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Several improvements to chat pre/post processing

Browse source
This commit is contained in:
rainbow napkin 2024-12-17 20:44:14 -05:00
parent 12922658b9
commit b9283607d6
10 changed files with 217 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

20
www/css/theme/movie-night.css
View file

@ -122,6 +122,20 @@ button:active{
box-shadow: var(--danger-glow0-alt1);
}
.danger-link{
color: var(--danger0);
}
.danger-link:hover{
color: var(--danger0-alt1);
text-shadow: var(--danger-glow0);
}
.danger-link:active{
color: var(--danger0-alt0);
text-shadow: var(--danger-glow0-alt1);
}
.positive-button{
background-color: var(--focus0);
color: white;
@ -297,6 +311,12 @@ select.panel-head-element{
.chat-link{
color: var(--focus0);
user-select: all;
}
.chat-dead-link{
text-decoration: line-through;
text-decoration-color: var(--danger0-alt0);
}
/* popup */

17
www/js/adminPanel.js
View file

@ -227,6 +227,23 @@ class canopyAdminUtils{
utils.ux.displayResponseError(await response.json());
}
}
async addEmote(name, link){
var response = await fetch(`/api/admin/emote`,{
method: "POST",
headers: {
"Content-Type": "application/json"
},
//Unfortunately JSON doesn't natively handle ES6 maps, and god forbid someone update the standard in a way that's backwards compatible...
body: JSON.stringify({name, link})
});
if(response.status == 200){
return await response.json();
}else{
utils.ux.displayResponseError(await response.json());
}
}
}
class adminUserList{

1
www/js/channel/chat.js
View file

@ -122,7 +122,6 @@ class chatBox{
//Create chat body
var chatBody = document.createElement('p');
chatBody.classList.add("chat-panel-buffer","chat-entry-body");
chatBody.innerHTML = data.msg;
chatEntry.appendChild(chatBody);

84
www/js/channel/chatPostprocessor.js
View file

@ -29,8 +29,8 @@ class chatPostprocessor{
splitBody(){
//Create an empty array to hold the body
this.bodyArray = [];
//Split string by word-boundries, with negative/forward lookaheads to exclude file seperators so we don't split link placeholders
const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b/g);
//Split string by word-boundries, with negative lookaheads to exclude file seperators so we don't split link placeholders
const splitString = this.rawData.msg.split(/(?<!␜)\b/g);
//for each word in the splitstring
splitString.forEach((string) => {
@ -46,23 +46,39 @@ class chatPostprocessor{
}
injectBody(){
//Clear our chat body
this.chatBody.innerHTML = "";
//Extract strings into the empty array
//Create an empty array to hold the objects to inject
const injectionArray = [""];
const _this = this;
//For each word object
this.bodyArray.forEach((wordObj) => {
if(wordObj.type == 'word'){
//Inject current wordObj string into the chat body
this.chatBody.innerHTML += wordObj.string
//this doesnt work right with escaped strings atm
//we should make an array that contains all the strings split by nodes
//so text can be added in word chunks, allowing escaped strings and
//node injections w/o adding them as html instead of an appended node
injectString(wordObj.string);
}else if(wordObj.type == 'link'){
//Create a link node from our link
const link = document.createElement('a');
link.classList.add('chat-link');
link.href = wordObj.link;
link.innerHTML = wordObj.link;
//Use textContent to be safe since links can't be escaped
link.textContent = wordObj.link;
//Append node to chatBody
this.injectNode(wordObj, link);
injectNode(wordObj, link);
}else if(wordObj.type == 'deadLink'){
//Create a text span node from our link
const badLink = document.createElement('a');
badLink.classList.add('chat-dead-link', 'danger-link');
badLink.href = wordObj.link;
//Use textContent to be safe since links can't be escaped
badLink.textContent = wordObj.link;
//Append node to chatBody
injectNode(wordObj, badLink);
}else if(wordObj.type == 'image'){
//Create an img node from our link
const img = document.createElement('img');
@ -71,7 +87,7 @@ class chatPostprocessor{
//stringArray.push(wordObj.string.replace('␜',img.outerHTML));
//Append node to chatBody
this.injectNode(wordObj, img);
injectNode(wordObj, img);
}else if(wordObj.type == 'video'){
//Create a video node from our link
const vid = document.createElement('video');
@ -83,24 +99,48 @@ class chatPostprocessor{
vid.muted = true;
//stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
this.injectNode(wordObj, vid);
injectNode(wordObj, vid);
}
});
}
//Like string.replace except it actually injects the node so we can keep things like event handlers
injectNode(wordObj, node, placeholder = '␜'){
//Split string by the placeholder so we can keep surrounding whitespace
const splitWord = wordObj.string.split(placeholder, 2);
//For each item found in the injection array
injectionArray.forEach((item) => {
//if it's a string
if(typeof item == "string"){
//Add it to the chat's innerHTML (it should already be escaped by the server)
this.chatBody.innerHTML += item;
}else{
//Otherwise it should be a DOM node, therefore we should append it
this.chatBody.appendChild(item);
}
})
//Append the first half of the string
this.chatBody.innerHTML += splitWord[0];
//Append the node
this.chatBody.appendChild(node);
//Like string.replace except it actually injects the node so we can keep things like event handlers
function injectNode(wordObj, node, placeholder = '␜'){
//Split string by the placeholder so we can keep surrounding whitespace
const splitWord = wordObj.string.split(placeholder, 2);
//Append the second half of the string
this.chatBody.innerHTML += splitWord[1];
//Append the first half of the string
injectString(splitWord[0]);
//Append the node
injectionArray.push(node);
//Append the second half of the string
injectString(splitWord[1]);
}
function injectString(string){
//If the last item was a string
if(typeof injectionArray[injectionArray.length - 1] == "string"){
//add the word string on to the end of the string
injectionArray[injectionArray.length - 1] += string;
}else{
//Pop the string at the end of the array
injectionArray.push(string);
}
}
}
addWhitespace(){