custom emoji reaction rendering support
This commit is contained in:
parent
95942c7f50
commit
a748e923fd
7 changed files with 107 additions and 29 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
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");
|
||||
|
|
|
@ -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");
|
||||
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