improve loading of channels

.dist/channel.js

@@ -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;
+            //await new Promise(_=>{setTimeout(_,Math.random()*10)})
-            const promise = new Promise(_ => { res = _; });
             const snowflake = SnowFlake.getSnowFlakeFromID(id, Message);
             if (!snowflake.getObject()) {
-                await this.grabArround(id);
+                //await this.grabArround(id);
+                console.error("Uh...");
             }
-            const html = snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)), promise);
+            try {
-            ids[id] = res;
+                const html = snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)));
                 return html;
+            }
+            catch (e) {
+                console.error(e);
+            }
         }.bind(this), async function (id) {
-            if (ids[id]) {
+            const message = SnowFlake.getSnowFlakeFromID(id, Message).getObject();
-                ids[id]();
+            try {
-                delete ids[id];
+                message.deleteDiv();
-                return true;
             }
-            else {
+            catch (e) {
-                return true;
+                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) {
+            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.infinite.focus(id.id,false);
-        this.infinitefocus = true;
     }
     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", {

.dist/embed.js

@@ -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() {

.dist/infiniteScroller.js

@@ -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,6 +131,7 @@ class InfiniteScroller {
         }
     }
     async watchForChange() {
+        try {
             if (this.currrunning) {
                 return;
             }
@@ -136,9 +142,16 @@ class InfiniteScroller {
                 this.currrunning = false;
                 return;
             }
-        await Promise.allSettled([this.watchForBottom(), this.watchForTop()]);
+            await Promise.allSettled([this.watchForTop(), this.watchForBottom()]);
+            if (!this.currrunning) {
+                console.error("something really bad happened");
+            }
             this.currrunning = false;
         }
+        catch (e) {
+            console.error(e);
+        }
+    }
     async focus(id, flash = true) {
         let element;
         for (const thing of this.HTMLElements) {
@@ -146,7 +159,6 @@ class InfiniteScroller {
                 element = thing[0];
             }
         }
-        console.log(element, id, ":3");
         if (element) {
             if (flash) {
                 element.scrollIntoView({

.dist/message.js

@@ -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.classList.add("messagediv");
-            obj.removeEventListener("click", func);
+    }
+    deleteDiv() {
+        console.log(this.id);
+        if (!this.div)
+            return;
+        try {
             this.div.remove();
             this.div = null;
-        });
+            console.log("done");
-        obj.classList.add("messagediv");
+        }
+        catch (e) {
+            console.error(e);
+        }
     }
     mentionsuser(userd) {
         if (userd instanceof User) {
@@ -461,17 +469,22 @@ class Message {
             }
         }
     }
-    buildhtml(premessage, del = Message.del) {
+    buildhtml(premessage) {
         if (this.div) {
             console.error(`HTML for ${this.snowflake} already exists, aborting`);
             return;
         }
+        try {
             //premessage??=messages.lastChild;
             const div = document.createElement("div");
             this.div = div;
-        this.messageevents(div, del);
+            this.messageevents(div);
             return this.generateMessage(premessage);
         }
+        catch (e) {
+            console.error(e);
+        }
+    }
 }
 function formatTime(date) {
     const now = new Date();

webpage/channel.ts

@@ -165,7 +165,6 @@ class Channel{
         })
     }
     setUpInfiniteScroller(){
-        const ids:{[key:string]:Function}={};
         this.infinite=new InfiniteScroller(async function(this:Channel,id:string,offset:number):Promise<string>{
             const snowflake=SnowFlake.getSnowFlakeFromID(id,Message) as SnowFlake<Message>;
             if(offset===1){
@@ -187,24 +186,24 @@ class Channel{
             }
         }.bind(this),
         async function(this:Channel,id:string){
-            let res:Function;
+            //await new Promise(_=>{setTimeout(_,Math.random()*10)})
-            const promise=new Promise(_=>{res=_;}) as Promise<void>;
             const snowflake=SnowFlake.getSnowFlakeFromID(id,Message);
             if(!snowflake.getObject()){
-                await this.grabArround(id);
+                //await this.grabArround(id);
+                console.error("Uh...")
             }
-            const html=snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)),promise);
+            try{
-            ids[id]=res;
+                const html=snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)));
                 return html;
+            }catch(e){
+                console.error(e);
+            }
         }.bind(this),
         async function(this:Channel,id:string){
-            if(ids[id]){
+            const message=SnowFlake.getSnowFlakeFromID(id,Message).getObject();
-                ids[id]();
+            try{
-                delete ids[id];
+                message.deleteDiv();
-                return true;
+            }catch(e){console.error(e)}finally{}
-            }else{
-                return true;
-            }
         }.bind(this),
         this.readbottom.bind(this)
         );
@@ -630,6 +629,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){
@@ -638,13 +640,38 @@ 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:Message;
     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,
         });
@@ -773,41 +800,48 @@ class Channel{
     infinitefocus=false;
     private 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:SnowFlake<Message>;
-
         if(this.lastreadmessageid&&this.lastreadmessageid.getObject()){
             id=this.lastreadmessageid;
         }else if(id=this.findClosest(this.lastreadmessageid)){
 
         }else if(this.lastmessage&&this.lastmessage.snowflake){
             id=this.goBackIds(this.lastmessage.snowflake,50);
-            console.log("shouldn't");
         }
         if(!id){
+            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);
-            return;
             }
-        messages.innerHTML="";
+            this.infinitefocus=false;
+            loading.classList.remove("loading");
+            return;
+        }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.infinite.focus(id.id,false);
-        this.infinitefocus=true;
+
     }
     private goBackIds(id:SnowFlake<Message>,back:number,returnifnotexistant=true):SnowFlake<Message>{
         while(back!==0){
             const nextid=this.idToPrev.get(id);
             if(nextid){
                 id=nextid;
-                console.log(id);
                 back--;
             }else{
                 if(returnifnotexistant){
@@ -895,7 +929,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,
@@ -913,7 +946,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", {

webpage/embed.ts

@@ -137,6 +137,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(){

webpage/index.html

@@ -19,7 +19,7 @@
 
     <div id="loading" class="loading">
         <div id="centerdiv">
-            <img src="/logo.svg" width="1in" height="1in">
+            <img src="/logo.svg" style="width:3in;height:3in;">
             <h1>Jank Client is loading</h1>
             <h2 id="load-desc">This shouldn't take long</h2>
             <h1 id="switchaccounts">Switch Accounts</h1>
@@ -54,9 +54,7 @@
                 <span id="mobileback" hidden></span><span id="channelname">Channel</span>
             </div>
             <div id="channelw">
-                <div id="messagecontainer">
+                <div id="loadingdiv">
-                <div id="messages">
-                </div>
                 </div>
             </div>
             <div id="pasteimage"></div>

webpage/index.ts

@@ -208,3 +208,5 @@ if(mobile){
         document.getElementById("servers").classList.remove("collapse");
     }
 }
+
+

webpage/infiniteScroller.ts

@@ -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);
 
@@ -49,7 +49,7 @@ class InfiniteScroller{
     }
     async firstElement(id:string){
         const html=await this.getHTMLFromID(id);
-        this.scroll.append(html);
+        this.scroll.appendChild(html);
         this.HTMLElements.push([html,id]);
     }
     currrunning:boolean=false;
@@ -81,6 +81,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;
@@ -109,7 +114,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){
@@ -129,14 +134,19 @@ class InfiniteScroller{
         }
     }
     async watchForChange():Promise<void>{
+        try{
         if(this.currrunning){
             return;
         }else{
             this.currrunning=true;
         }
         if(!this.div){this.currrunning=false;return}
-        await Promise.allSettled([this.watchForBottom(),this.watchForTop()])
+        await Promise.allSettled([this.watchForTop(),this.watchForBottom()])
+        if(!this.currrunning){console.error("something really bad happened")}
         this.currrunning=false;
+        }catch(e){
+            console.error(e);
+        }
     }
     async focus(id:string,flash=true){
         let element:HTMLElement;
@@ -145,7 +155,6 @@ class InfiniteScroller{
                 element=thing[0];
             }
         }
-        console.log(element,id,":3");
         if(element){
 
             if(flash){

webpage/jsontypes.ts

@@ -322,6 +322,8 @@ type embedjson={
     thumbnail:{
         proxy_url:string,
         url:string,
+        width:number,
+        height:number
     },
     provider:{
         name:string,

webpage/message.ts

@@ -176,15 +176,21 @@ class Message{
     get info(){
         return this.owner.info;
     }
-    messageevents(obj:HTMLDivElement,del=Message.del){
+    messageevents(obj:HTMLDivElement){
         const func=Message.contextmenu.bind(obj,this);
         this.div=obj;
-        del.then(_=>{
+        obj.classList.add("messagediv");
-            obj.removeEventListener("click",func);
+    }
+    deleteDiv(){
+        console.log(this.id);
+        if(!this.div) return;
+        try{
             this.div.remove();
             this.div=null;
-        })
+            console.log("done");
-        obj.classList.add("messagediv");
+        }catch(e){
+            console.error(e)
+        }
     }
     mentionsuser(userd:User|Member){
         if(userd instanceof User){
@@ -465,14 +471,18 @@ class Message{
             }
         }
     }
-    buildhtml(premessage:Message,del:Promise<void>=Message.del){
+    buildhtml(premessage:Message){
         if(this.div){console.error(`HTML for ${this.snowflake} already exists, aborting`);return;}
+        try{
             //premessage??=messages.lastChild;
             const div=document.createElement("div");
             this.div=div;
 
-        this.messageevents(div,del);
+            this.messageevents(div);
             return this.generateMessage(premessage);
+        }catch(e){
+            console.error(e);
+        }
     }
 }
 

webpage/style.css

@@ -557,6 +557,7 @@ hr {
 	min-height: 0;
 	height: 100%;
 	/* width: 100%; */
+	position: relative;
 }
 
 .timestamp {
@@ -1892,3 +1893,40 @@ form div{
 	justify-content: flex-start;
 	align-items: flex-end;
 }
+#loadingdiv{
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:0px;
+	background: var(--primary-bg);
+	opacity:0;
+	&.loading{
+	opacity:1;
+	height:100%;
+	}
+	;
+	/* overflow: hidden; */
+	display: flex;
+	flex-direction: column-reverse;
+	overflow-y: scroll;
+}
+.loadingmessage{
+	position:relative;
+}
+.loadingpfp{
+	position:absolute;
+	width:.4in;
+	height:.4in;
+	background:var(--channel-hover);
+
+	margin-left:.05in;
+	border-radius:1in;
+}
+.loadingcontent{
+	margin-left:.5in;
+	background:var(--channel-hover);
+	margin-bottom:.1in;
+	border-radius:.1in;
+	height:17px;
+}