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

Finished up with implementing media link embeds in chat.

Browse source
This commit is contained in:
rainbow napkin 2024-12-16 23:25:51 -05:00
parent 23df4f88f9
commit 1ce2fc3c22
4 changed files with 89 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

31
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 words (except for file seperator to keep link placeholders in-tact)
const splitString = this.chatBody.innerHTML.split(/(?<!␜)\b(?!␜)/g); //Group words together
//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);
//for each word in the splitstring
splitString.forEach((string) => {
@ -62,6 +62,25 @@ class chatPostprocessor{
//Inject it into the original string, and add it to string array
stringArray.push(wordObj.string.replace('␜',link.outerHTML));
}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));
}else if(wordObj.type == 'video'){
//Create a video node from our link
const vid = document.createElement('video');
vid.classList.add('chat-video');
vid.src = wordObj.link;
vid.controls = false;
vid.autoplay = true;
vid.loop = true;
//Inject it into the original string, and add it to string array
stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
}
});
@ -92,6 +111,12 @@ class chatPostprocessor{
}
processLinks(){
//If we don't have links
if(this.rawData.links == null){
//Don't bother
return;
}
this.rawData.links.forEach((link, linkIndex) => {
this.bodyArray.forEach((wordObj, wordIndex) => {
//Check current wordobj for link (placeholder may contain whitespace with it)
@ -102,7 +127,7 @@ class chatPostprocessor{
//but we also don't want to clobber any surrounding whitespace
string: wordObj.string.replace(`␜${linkIndex}␜`, '␜'),
link: link.link,
type: "link"
type: link.type
}
}
})