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

fixed the typing indicator

Browse source
This commit is contained in:
MathMan05 2024-08-14 17:00:56 -05:00
parent 1f8e173e76
commit b43c9e7f4f
6 changed files with 63 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

39
.dist/localuser.js
View file

@ -30,7 +30,7 @@ class Localuser {
lookingguild; lookingguild;
guildhtml; guildhtml;
ws; ws;
typing; typing = new Map();
connectionSucceed = 0; connectionSucceed = 0;
errorBackoff = 0; errorBackoff = 0;
mfa_enabled; mfa_enabled;
@ -89,7 +89,6 @@ class Localuser {
const guildid = guild.snowflake; const guildid = guild.snowflake;
this.guildids.get(guildid.id).channelids[thing.channel_id].readStateInfo(thing); this.guildids.get(guildid.id).channelids[thing.channel_id].readStateInfo(thing);
} }
this.typing = [];
} }
outoffocus() { outoffocus() {
document.getElementById("servers").innerHTML = ""; document.getElementById("servers").innerHTML = "";
@ -583,11 +582,12 @@ class Localuser {
thing.unreads(html); thing.unreads(html);
} }
} }
typingStart(typing) { async typingStart(typing) {
if (this.channelfocus.snowflake === typing.d.channel_id) { if (this.channelfocus.id === typing.d.channel_id) {
const memb = typing.d.member; const guild = SnowFlake.getSnowFlakeFromID(typing.d.guild_id, Guild).getObject();
const memb = await Member.new(typing.d.member, guild);
let name; let name;
if (memb.id === this.user.snowflake) { if (memb.id === this.user.id) {
console.log("you is typing"); console.log("you is typing");
return; return;
} }
@ -607,7 +607,7 @@ class Localuser {
} }
} }
if (!already) { if (!already) {
this.typing.push([name, new Date().getTime()]); this.typing.set(memb, new Date().getTime());
} }
setTimeout(this.rendertyping.bind(this), 10000); setTimeout(this.rendertyping.bind(this), 10000);
this.rendertyping(); this.rendertyping();
@ -636,18 +636,25 @@ class Localuser {
rendertyping() { rendertyping() {
const typingtext = document.getElementById("typing"); const typingtext = document.getElementById("typing");
let build = ""; let build = "";
const array2 = [];
let showing = false; let showing = false;
let i = 0; let i = 0;
for (const thing of this.typing) { const curtime = new Date().getTime() - 5000;
i++; for (const thing of this.typing.keys()) {
if (thing[1] > new Date().getTime() - 5000) { if (this.typing.get(thing) > curtime) {
build += thing[0]; if (i !== 0) {
array2.push(thing); build += ", ";
showing = true;
if (i !== this.typing.length) {
build += ",";
} }
i++;
if (thing.nick) {
build += thing.nick;
}
else {
build += thing.user.username;
}
showing = true;
}
else {
this.typing.delete(thing);
} }
} }
if (i > 1) { if (i > 1) {

1
.dist/member.js
View file

@ -8,6 +8,7 @@ class Member {
user; user;
roles = []; roles = [];
id; id;
nick;
static contextmenu = new Contextmenu("User Menu"); static contextmenu = new Contextmenu("User Menu");
static setUpContextMenu() { static setUpContextMenu() {
this.contextmenu.addbutton("Copy user id", function () { this.contextmenu.addbutton("Copy user id", function () {

6
webpage/index.html
View file

@ -68,9 +68,9 @@
<div id="typing" class="hidden"> <div id="typing" class="hidden">
<p id="typingtext">typing</p> <p id="typingtext">typing</p>
<div class="loading-indicator"> <div class="loading-indicator">
<span class="dot">.</span> <div class="dot"></div>
<span class="dot">.</span> <div class="dot"></div>
<span class="dot">.</span> <div class="dot"></div>
</div> </div>
</div> </div>
</div> </div>

37
webpage/localuser.ts
View file

@ -34,7 +34,7 @@ class Localuser{
lookingguild:Guild; lookingguild:Guild;
guildhtml:Map<string, HTMLDivElement>; guildhtml:Map<string, HTMLDivElement>;
ws:WebSocket; ws:WebSocket;
typing:[string,number][]; typing:Map<Member,number>=new Map();
connectionSucceed=0; connectionSucceed=0;
errorBackoff=0; errorBackoff=0;
mfa_enabled:boolean; mfa_enabled:boolean;
@ -95,7 +95,6 @@ class Localuser{
const guildid=guild.snowflake; const guildid=guild.snowflake;
this.guildids.get(guildid.id).channelids[thing.channel_id].readStateInfo(thing); this.guildids.get(guildid.id).channelids[thing.channel_id].readStateInfo(thing);
} }
this.typing=[];
} }
outoffocus():void{ outoffocus():void{
document.getElementById("servers").innerHTML=""; document.getElementById("servers").innerHTML="";
@ -600,11 +599,12 @@ class Localuser{
thing.unreads(html); thing.unreads(html);
} }
} }
typingStart(typing):void{ async typingStart(typing):Promise<void>{
if(this.channelfocus.snowflake===typing.d.channel_id){ if(this.channelfocus.id===typing.d.channel_id){
const memb=typing.d.member; const guild=SnowFlake.getSnowFlakeFromID(typing.d.guild_id,Guild).getObject()
const memb=await Member.new(typing.d.member,guild);
let name; let name;
if(memb.id===this.user.snowflake){ if(memb.id===this.user.id){
console.log("you is typing") console.log("you is typing")
return; return;
} }
@ -623,7 +623,7 @@ class Localuser{
} }
} }
if(!already){ if(!already){
this.typing.push([name,new Date().getTime()]); this.typing.set(memb,new Date().getTime());
} }
setTimeout(this.rendertyping.bind(this),10000); setTimeout(this.rendertyping.bind(this),10000);
this.rendertyping(); this.rendertyping();
@ -653,18 +653,23 @@ class Localuser{
rendertyping():void{ rendertyping():void{
const typingtext=document.getElementById("typing") const typingtext=document.getElementById("typing")
let build=""; let build="";
const array2=[];
let showing=false; let showing=false;
let i=0; let i=0;
for(const thing of this.typing){ const curtime=new Date().getTime()-5000;
i++; for(const thing of this.typing.keys()){
if(thing[1]>new Date().getTime()-5000){ if(this.typing.get(thing)>curtime){
build+=thing[0]; if(i!==0){
array2.push(thing); build+=", ";
showing=true;
if(i!==this.typing.length){
build+=",";
} }
i++;
if(thing.nick){
build+=thing.nick;
}else{
build+=thing.user.username;
}
showing=true;
}else{
this.typing.delete(thing);
} }
} }
if(i>1){ if(i>1){

1
webpage/member.ts
View file

@ -11,6 +11,7 @@ class Member{
user:User; user:User;
roles:Role[]=[]; roles:Role[]=[];
id:string; id:string;
nick:string;
static contextmenu:Contextmenu=new Contextmenu("User Menu"); static contextmenu:Contextmenu=new Contextmenu("User Menu");
static setUpContextMenu(){ static setUpContextMenu(){
this.contextmenu.addbutton("Copy user id",function(){ this.contextmenu.addbutton("Copy user id",function(){

25
webpage/style.css
View file

@ -387,13 +387,12 @@ div {
box-sizing: border-box; box-sizing: border-box;
color: var(--primary-text); color: var(--primary-text);
background: var(--textarea-bg); background: var(--textarea-bg);
/* border: 1px solid var(--black); */
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: stretch; align-items: stretch;
margin: .0in .1in .15in .1in; margin: .0in .1in .25in .1in;
box-shadow: 0 .01in .05in black; box-shadow: 0 .01in .05in black;
} }
#typebox:focus{ #typebox:focus{
@ -445,14 +444,13 @@ p {
#typing { #typing {
display: flex; display: flex;
position: absolute; position: absolute;
top: 0; bottom: 0;
right: 4px; left: 0;
background-color: var(--typing-bg);
width: fit-content; width: fit-content;
transform: translateY(-100%); :;
border-radius: 5px 5px 0 0; margin-left: .1in;
padding: 4px; margin-bottom: .03in;
transition: transform .5s ease, opacity .1s ease; transition: opacity .3s;
opacity: 1; opacity: 1;
} }
@ -471,11 +469,17 @@ hr {
font-size: 24px; font-size: 24px;
display: flex; display: flex;
gap: 0; gap: 0;
align-items: center;
} }
.dot { .dot {
animation: fade 1s infinite; animation: fade 1s infinite;
line-height: 14px; line-height: 14px;
width: 6px;
height: 6px;
background: var(--primary-text);
border-radius: 1in;
margin-right: .03in;
} }
.dot:nth-child(1) { .dot:nth-child(1) {
@ -492,7 +496,7 @@ hr {
#typing p { #typing p {
margin: 0; margin: 0;
padding-right: 5px; padding-right: .03in;
} }
#typing.hidden { #typing.hidden {
@ -500,7 +504,6 @@ hr {
/* Move down out of view */ /* Move down out of view */
opacity: 0; opacity: 0;
/* Fade out */ /* Fade out */
display: none;
} }
@keyframes fade { @keyframes fade {