custom emoji reaction rendering support

This commit is contained in:
MathMan05 2024-08-11 18:26:59 -05:00
parent 95942c7f50
commit a748e923fd
7 changed files with 107 additions and 29 deletions

View file

@ -1,4 +1,6 @@
import { Contextmenu } from "./contextmenu.js";
import { Guild } from "./guild.js";
import { Localuser } from "./localuser.js";
class Emoji{
static emojis:{
@ -8,6 +10,42 @@ class Emoji{
emoji:string,
}[]
}[];
name:string;
id:string;
animated:boolean;
owner:Guild|Localuser;
get guild(){
if(this.owner instanceof Guild){
return this.owner;
}
}
get localuser(){
if(this.owner instanceof Guild){
return this.guild.localuser;
}else{
return this.owner;
}
}
get info(){
return this.owner.info;
}
constructor(json:{name:string,id:string,animated:boolean},owner:Guild|Localuser){
this.name=json.name;
this.id=json.id;
this.animated=json.animated
this.owner=owner;
}
getHTML(bigemoji:boolean=false){
const emojiElem=document.createElement("img");
emojiElem.classList.add("md-emoji");
emojiElem.classList.add(bigemoji ? "bigemoji" : "smallemoji");
emojiElem.crossOrigin="anonymous";
emojiElem.src=this.info.cdn + "/emojis/" + this.id + "." + (this.animated ? "gif" : "png") + "?size=32";
emojiElem.alt=this.name;
emojiElem.loading="lazy";
return emojiElem;
}
static decodeEmojiList(buffer:ArrayBuffer){
const view = new DataView(buffer, 0);
let i=0;
@ -74,7 +112,7 @@ class Emoji{
}
static async emojiPicker(x:number,y:number):Promise<Emoji|string>{
let res:(r:Emoji|string)=>void;
const promise=new Promise((r)=>{res=r;})
const promise:Promise<Emoji|string>=new Promise((r)=>{res=r;})
const menu=document.createElement("div");
menu.classList.add("flextttb", "emojiPicker")
menu.style.top=y+"px";

View file

@ -275,7 +275,9 @@ type messagejson={
reactions: {
count:number,
emoji:{
name:string
name:string,
id?:string,
animated?:boolean
},//very likely needs expanding
me:boolean,
}[],

View file

@ -1,5 +1,6 @@
import { Channel } from "./channel";
import { Localuser } from "./localuser";
import { Channel } from "./channel.js";
import { Emoji } from "./emoji.js";
import { Localuser } from "./localuser.js";
export {MarkDown};
class MarkDown{
@ -416,16 +417,9 @@ class MarkDown{
appendcurrent();
i=j;
const isEmojiOnly = txt.join("").trim()===buildjoin.trim();
const emojiElem=document.createElement("img");
emojiElem.classList.add("md-emoji");
emojiElem.classList.add(isEmojiOnly ? "bigemoji" : "smallemoji");
emojiElem.crossOrigin="anonymous";
emojiElem.src=this.info.cdn + "emojis/" + parts[2] + "." + (parts[1] ? "gif" : "png") + "?size=32";
emojiElem.alt=buildjoin;
emojiElem.loading="lazy";
span.appendChild(emojiElem);
const owner=(this.owner instanceof Channel)?this.owner.guild:this.owner
const emoji=new Emoji({name:buildjoin,id:parts[2],animated:!!parts[1]},owner);
span.appendChild(emoji.getHTML(isEmojiOnly));
continue;
}

View file

@ -10,7 +10,6 @@ import {File} from "./file.js";
import { SnowFlake } from "./snowflake.js";
import { messagejson } from "./jsontypes.js";
import {Emoji} from "./emoji.js";
new Emoji();
class Message{
static contextmenu=new Contextmenu("message menu");
@ -387,9 +386,14 @@ class Message{
if(thing.me){
reaction.classList.add("meReacted")
}
const emoji=document.createElement("p");
emoji.textContent=thing.emoji.name;
let emoji:HTMLElement;
if(thing.emoji.id){
const emo=new Emoji(thing.emoji as {name:string,id:string,animated:boolean},this.guild);
emoji=emo.getHTML(false);
}else{
emoji=document.createElement("p");
emoji.textContent=thing.emoji.name;
}
const count=document.createElement("p");
count.textContent=""+thing.count;
count.classList.add("reactionCount");