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,6 +1,43 @@
import { Contextmenu } from "./contextmenu.js";
import { Guild } from "./guild.js";
class Emoji {
static emojis;
name;
id;
animated;
owner;
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, owner) {
this.name = json.name;
this.id = json.id;
this.animated = json.animated;
this.owner = owner;
}
getHTML(bigemoji = 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) {
const view = new DataView(buffer, 0);
let i = 0;

View file

@ -1,3 +1,5 @@
import { Channel } from "./channel.js";
import { Emoji } from "./emoji.js";
export { MarkDown };
class MarkDown {
txt;
@ -451,14 +453,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

@ -6,7 +6,6 @@ import { Embed } from "./embed.js";
import { File } from "./file.js";
import { SnowFlake } from "./snowflake.js";
import { Emoji } from "./emoji.js";
new Emoji();
class Message {
static contextmenu = new Contextmenu("message menu");
owner;
@ -383,8 +382,15 @@ class Message {
if (thing.me) {
reaction.classList.add("meReacted");
}
const emoji = document.createElement("p");
emoji.textContent = thing.emoji.name;
let emoji;
if (thing.emoji.id) {
const emo = new Emoji(thing.emoji, 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");

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");