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

Started work on emotes schema and administration endpoints. Improvements to Link/Media embeds in chat.

Browse source
This commit is contained in:
rainbow napkin 2024-12-17 07:37:57 -05:00
parent 1ce2fc3c22
commit 12922658b9
9 changed files with 266 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,7 @@ class chatPostprocessor{
//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);
const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b/g);
//for each word in the splitstring
splitString.forEach((string) => {
@ -46,13 +46,14 @@ class chatPostprocessor{
}
injectBody(){
//Create empty array to hold strings
var stringArray = [];
//Clear our chat body
this.chatBody.innerHTML = "";
//Extract strings into the empty array
this.bodyArray.forEach((wordObj) => {
if(wordObj.type == 'word'){
stringArray.push(wordObj.string);
//Inject current wordObj string into the chat body
this.chatBody.innerHTML += wordObj.string
}else if(wordObj.type == 'link'){
//Create a link node from our link
const link = document.createElement('a');
@ -60,16 +61,17 @@ class chatPostprocessor{
link.href = wordObj.link;
link.innerHTML = wordObj.link;
//Inject it into the original string, and add it to string array
stringArray.push(wordObj.string.replace('␜',link.outerHTML));
//Append node to chatBody
this.injectNode(wordObj, link);
}else if(wordObj.type == 'image'){
//Create an img node from our link
const img = document.createElement('img');
img.classList.add('chat-img');
img.src = wordObj.link;
//Inject it into the original string, and add it to string array
stringArray.push(wordObj.string.replace('␜',img.outerHTML));
//stringArray.push(wordObj.string.replace('␜',img.outerHTML));
//Append node to chatBody
this.injectNode(wordObj, img);
}else if(wordObj.type == 'video'){
//Create a video node from our link
const vid = document.createElement('video');
@ -78,14 +80,27 @@ class chatPostprocessor{
vid.controls = false;
vid.autoplay = true;
vid.loop = true;
vid.muted = true;
//Inject it into the original string, and add it to string array
stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
//stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
this.injectNode(wordObj, vid);
}
});
}
//Join the strings to fill the chat entry
this.chatBody.innerHTML = stringArray.join("");
//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);
//Append the first half of the string
this.chatBody.innerHTML += splitWord[0];
//Append the node
this.chatBody.appendChild(node);
//Append the second half of the string
this.chatBody.innerHTML += splitWord[1];
}
addWhitespace(){
@ -120,12 +135,12 @@ class chatPostprocessor{
this.rawData.links.forEach((link, linkIndex) => {
this.bodyArray.forEach((wordObj, wordIndex) => {
//Check current wordobj for link (placeholder may contain whitespace with it)
if(wordObj.string.match(`␜${linkIndex}␜`)){
if(wordObj.string.match(`␜${linkIndex}`)){
//Set current word object in the body array to the new link object
this.bodyArray[wordIndex] = {
//Don't want to use a numbered placeholder to make this easier during body injection
//but we also don't want to clobber any surrounding whitespace
string: wordObj.string.replace(`␜${linkIndex}␜`, '␜'),
string: wordObj.string.replace(`␜${linkIndex}`, '␜'),
link: link.link,
type: link.type
}

2
www/js/channel/commandPreprocessor.js
View file

@ -51,7 +51,7 @@ class commandPreprocessor{
//I looked online for obscure characters that no one would use to prevent people from chatting embed placeholders
//Then I found this fucker, turns out it's literally made for the job lmao (even if it was originally intended for paper/magnetic tape)
//Replace link with indexed placeholder
splitMessage[chunkIndex] = `␜${this.links.length}␜`
splitMessage[chunkIndex] = `␜${this.links.length}`
//push current chunk as link
this.links.push(chunk);