fixed the typing indicator
This commit is contained in:
parent
1f8e173e76
commit
b43c9e7f4f
6 changed files with 63 additions and 46 deletions
|
@ -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) {
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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){
|
||||
|
|
|
@ -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(){
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue