Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve loading of channels

Browse Source
This commit is contained in:
MathMan05
2024-08-17 20:57:08 -05:00
parent 9e9ebb506b
commit 032e1b5be6
12 changed files with 276 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
.dist/channel.js
View File

@@ -149,7 +149,6 @@ class Channel {
});
}
setUpInfiniteScroller() {
const ids = {};
this.infinite = new InfiniteScroller(async function (id, offset) {
const snowflake = SnowFlake.getSnowFlakeFromID(id, Message);
if (offset === 1) {
@@ -174,24 +173,28 @@ class Channel {
}
}
}.bind(this), async function (id) {
let res;
const promise = new Promise(_ => { res = _; });
//await new Promise(_=>{setTimeout(_,Math.random()*10)})
const snowflake = SnowFlake.getSnowFlakeFromID(id, Message);
if (!snowflake.getObject()) {
await this.grabArround(id);
//await this.grabArround(id);
console.error("Uh...");
}
try {
const html = snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)));
return html;
}
catch (e) {
console.error(e);
}
const html = snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)), promise);
ids[id] = res;
return html;
}.bind(this), async function (id) {
if (ids[id]) {
ids[id]();
delete ids[id];
return true;
const message = SnowFlake.getSnowFlakeFromID(id, Message).getObject();
try {
message.deleteDiv();
}
else {
return true;
catch (e) {
console.error(e);
}
finally { }
}.bind(this), this.readbottom.bind(this));
}
constructor(json, owner) {
@@ -620,6 +623,9 @@ class Channel {
const prom = this.infinite.delete();
history.pushState(null, null, "/channels/" + this.guild_id + "/" + this.snowflake);
document.getElementById("channelname").textContent = "#" + this.name;
const loading = document.getElementById("loadingdiv");
Channel.regenLoadingMessages();
loading.classList.add("loading");
await this.putmessages();
await prom;
if (id !== Channel.genid) {
@@ -627,15 +633,41 @@ class Channel {
}
this.makereplybox();
await this.buildmessages();
//loading.classList.remove("loading");
console.log(this);
document.getElementById("typebox").contentEditable = "" + this.canMessage;
}
static regenLoadingMessages() {
const loading = document.getElementById("loadingdiv");
loading.innerHTML = "";
for (let i = 0; i < 15; i++) {
const div = document.createElement("div");
div.classList.add("loadingmessage");
if (Math.random() < .5) {
const pfp = document.createElement("div");
pfp.classList.add("loadingpfp");
const username = document.createElement("div");
username.style.width = Math.floor(Math.random() * 96 * 1.5 + 40) + "px";
username.classList.add("loadingcontent");
div.append(pfp, username);
}
const content = document.createElement("div");
content.style.width = Math.floor(Math.random() * 96 * 3 + 40) + "px";
content.style.height = Math.floor(Math.random() * 3 + 1) * 20 + "px";
content.classList.add("loadingcontent");
div.append(content);
loading.append(div);
}
}
lastmessage;
async putmessages() {
if (this.allthewayup) {
return;
}
;
if (this.lastreadmessageid && this.lastreadmessageid.getObject()) {
return;
}
const j = await fetch(this.info.api + "/channels/" + this.snowflake + "/messages?limit=100", {
headers: this.headers,
});
@@ -764,8 +796,11 @@ class Channel {
async tryfocusinfinate() {
if (this.infinitefocus)
return;
this.infinitefocus = true;
const messages = document.getElementById("channelw");
messages.innerHTML = "";
const loading = document.getElementById("loadingdiv");
const removetitle = document.getElementById("removetitle");
//messages.innerHTML="";
let id;
if (this.lastreadmessageid && this.lastreadmessageid.getObject()) {
id = this.lastreadmessageid;
@@ -774,31 +809,36 @@ class Channel {
}
else if (this.lastmessage && this.lastmessage.snowflake) {
id = this.goBackIds(this.lastmessage.snowflake, 50);
console.log("shouldn't");
}
if (!id) {
const title = document.createElement("h2");
title.textContent = "No messages appear to be here, be the first to say something!";
title.classList.add("titlespace");
messages.append(title);
if (removetitle) {
const title = document.createElement("h2");
title.id = "removetitle";
title.textContent = "No messages appear to be here, be the first to say something!";
title.classList.add("titlespace");
messages.append(title);
}
this.infinitefocus = false;
loading.classList.remove("loading");
return;
}
messages.innerHTML = "";
else if (removetitle) {
removetitle.remove();
}
messages.append(await this.infinite.getDiv(id.id));
this.infinite.updatestuff();
this.infinite.watchForChange().then(async (_) => {
await new Promise(resolve => setTimeout(resolve, 0));
//await new Promise(resolve => setTimeout(resolve, 0));
this.infinite.focus(id.id, false); //if someone could figure out how to make this work correctly without this, that's be great :P
loading.classList.remove("loading");
});
this.infinite.focus(id.id, false);
this.infinitefocus = true;
//this.infinite.focus(id.id,false);
}
goBackIds(id, back, returnifnotexistant = true) {
while (back !== 0) {
const nextid = this.idToPrev.get(id);
if (nextid) {
id = nextid;
console.log(id);
back--;
}
else {
@@ -898,7 +938,6 @@ class Channel {
if (replyjson) {
body.message_reference = replyjson;
}
console.log(body);
return await fetch(this.info.api + "/channels/" + this.snowflake + "/messages", {
method: "POST",
headers: this.headers,
@@ -917,7 +956,6 @@ class Channel {
}
formData.append('payload_json', JSON.stringify(body));
for (const i in attachments) {
console.log(attachments[i]);
formData.append("files[" + i + "]", attachments[i]);
}
return await fetch(this.info.api + "/channels/" + this.snowflake + "/messages", {

11
.dist/embed.js
View File

@@ -132,6 +132,17 @@ class Embed {
full.show();
};
img.src = this.json.thumbnail.proxy_url;
if (this.json.thumbnail.width) {
let scale = 1;
const max = 96 * 3;
scale = Math.max(scale, this.json.thumbnail.width / max);
scale = Math.max(scale, this.json.thumbnail.height / max);
this.json.thumbnail.width /= scale;
this.json.thumbnail.height /= scale;
}
img.style.width = this.json.thumbnail.width + "px";
img.style.height = this.json.thumbnail.height + "px";
console.log(this.json, "Image fix");
return img;
}
generateLink() {

40
.dist/infiniteScroller.js
View File

@@ -21,7 +21,7 @@ class InfiniteScroller {
//div.classList.add("flexttb")
const scroll = document.createElement("div");
scroll.classList.add("flexttb", "scroller");
div.append(scroll);
div.appendChild(scroll);
this.div = div;
this.interval = setInterval(this.updatestuff.bind(this), 100);
this.scroll = scroll;
@@ -47,7 +47,7 @@ class InfiniteScroller {
}
async firstElement(id) {
const html = await this.getHTMLFromID(id);
this.scroll.append(html);
this.scroll.appendChild(html);
this.HTMLElements.push([html, id]);
}
currrunning = false;
@@ -79,6 +79,11 @@ class InfiniteScroller {
else {
again = true;
const html = await this.getHTMLFromID(nextid);
if (!html) {
this.destroyFromID(nextid);
console.error("html isn't defined");
throw Error("html isn't defined");
}
this.scroll.prepend(html);
this.HTMLElements.unshift([html, nextid]);
this.scrollTop += 60;
@@ -106,7 +111,7 @@ class InfiniteScroller {
else {
again = true;
const html = await this.getHTMLFromID(nextid);
this.scroll.append(html);
this.scroll.appendChild(html);
this.HTMLElements.push([html, nextid]);
this.scrollBottom += 60;
if (scrollBottom < 30) {
@@ -126,18 +131,26 @@ class InfiniteScroller {
}
}
async watchForChange() {
if (this.currrunning) {
return;
}
else {
this.currrunning = true;
}
if (!this.div) {
try {
if (this.currrunning) {
return;
}
else {
this.currrunning = true;
}
if (!this.div) {
this.currrunning = false;
return;
}
await Promise.allSettled([this.watchForTop(), this.watchForBottom()]);
if (!this.currrunning) {
console.error("something really bad happened");
}
this.currrunning = false;
return;
}
await Promise.allSettled([this.watchForBottom(), this.watchForTop()]);
this.currrunning = false;
catch (e) {
console.error(e);
}
}
async focus(id, flash = true) {
let element;
@@ -146,7 +159,6 @@ class InfiniteScroller {
element = thing[0];
}
}
console.log(element, id, ":3");
if (element) {
if (flash) {
element.scrollIntoView({

35
.dist/message.js
View File

@@ -172,15 +172,23 @@ class Message {
get info() {
return this.owner.info;
}
messageevents(obj, del = Message.del) {
messageevents(obj) {
const func = Message.contextmenu.bind(obj, this);
this.div = obj;
del.then(_ => {
obj.removeEventListener("click", func);
obj.classList.add("messagediv");
}
deleteDiv() {
console.log(this.id);
if (!this.div)
return;
try {
this.div.remove();
this.div = null;
});
obj.classList.add("messagediv");
console.log("done");
}
catch (e) {
console.error(e);
}
}
mentionsuser(userd) {
if (userd instanceof User) {
@@ -461,16 +469,21 @@ class Message {
}
}
}
buildhtml(premessage, del = Message.del) {
buildhtml(premessage) {
if (this.div) {
console.error(`HTML for ${this.snowflake} already exists, aborting`);
return;
}
//premessage??=messages.lastChild;
const div = document.createElement("div");
this.div = div;
this.messageevents(div, del);
return this.generateMessage(premessage);
try {
//premessage??=messages.lastChild;
const div = document.createElement("div");
this.div = div;
this.messageevents(div);
return this.generateMessage(premessage);
}
catch (e) {
console.error(e);
}
}
}
function formatTime(date) {