custom emoji reaction rendering support
This commit is contained in:
parent
95942c7f50
commit
a748e923fd
7 changed files with 107 additions and 29 deletions
|
@ -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";
|
||||
|
|
|
@ -275,7 +275,9 @@ type messagejson={
|
|||
reactions: {
|
||||
count:number,
|
||||
emoji:{
|
||||
name:string
|
||||
name:string,
|
||||
id?:string,
|
||||
animated?:boolean
|
||||
},//very likely needs expanding
|
||||
me:boolean,
|
||||
}[],
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue