fixed the typing indicator

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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