Skip to content

Commit bf50a74

Browse files
pandasolipandasoli
committed
🫧 feat: take at least 2 seconds to reconnect to Discord
1 parent a0a512e commit bf50a74

File tree

2 files changed

+132
-89
lines changed

2 files changed

+132
-89
lines changed

‎src/components/DiscordDisconnect.svelte

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<script lang='ts'>
2+
import { get } from 'svelte/store'
3+
4+
import discordBlueIcon from '@/assets/discord_blue.svg'
5+
import reloadIcon from '@/assets/reload.svg'
6+
7+
import { conn } from '@/stores/conn.ts'
8+
9+
import { DiscordState } from '@/models/DiscordState.ts'
10+
11+
12+
let state = $conn?.discordState
13+
let mutable = true
14+
15+
16+
const reconnectDiscord = () => {
17+
mutable = false
18+
state = DiscordState.Connecting
19+
20+
browser.runtime.sendMessage({ type: 'reconnect discord' })
21+
22+
setTimeout(() => {
23+
mutable = true
24+
state = get(conn)?.discordState ?? DiscordState.Disconnected
25+
}, 2000)
26+
}
27+
28+
29+
conn.subscribe(conn => {
30+
if (conn && mutable) state = conn.discordState
31+
})
32+
</script>
33+
34+
<div id='discord-connection' class:invalid={state === DiscordState.Disconnected}>
35+
<img src={discordBlueIcon} alt='Discord icon' />
36+
37+
<div>
38+
<span>Discord has disconnected</span>
39+
40+
{#if $conn?.errMsg}
41+
<details>
42+
<summary>Details</summary>
43+
<p>{ $conn.errMsg }</p>
44+
</details>
45+
{/if}
46+
</div>
47+
48+
{#if state === DiscordState.Disconnected}
49+
<button on:click={reconnectDiscord} aria-label='Reconnect'>
50+
<img src={reloadIcon} alt='Reconnect icon' />
51+
</button>
52+
{:else}
53+
<div class='loading'>
54+
<div></div>
55+
<div></div>
56+
<div></div>
57+
</div>
58+
{/if}
59+
</div>
60+
61+
<style lang='less'>
62+
#discord-connection {
63+
display: flex;
64+
align-items: start;
65+
gap: 10px;
66+
padding: 6px;
67+
width: 110%;
68+
min-height: 50px;
69+
transform: translateX(-5%);
70+
border-radius: 8px;
71+
z-index: 1;
72+
background: var(--light-bg);
73+
74+
&.invalid {
75+
animation: invalid .6s ease-in-out;
76+
}
77+
}
78+
79+
img { width: 22px; height: 38px }
80+
81+
#discord-connection > div:first-of-type {
82+
display: flex;
83+
flex-direction: column;
84+
flex: 1;
85+
86+
span { flex: 1; color: white }
87+
summary { color: var(--text-cl) }
88+
}
89+
90+
button, .loading {
91+
display: flex;
92+
justify-content: center;
93+
align-items: center;
94+
height: 38px;
95+
width: 38px;
96+
gap: 4px
97+
}
98+
99+
button {
100+
cursor: pointer;
101+
102+
img { width: 60% }
103+
104+
&:hover { opacity: .75 }
105+
}
106+
107+
.loading div {
108+
width: 5px;
109+
height: 5px;
110+
border-radius: 50%;
111+
background: var(--blue);
112+
animation: bounce 1.5s infinite ease-in-out;
113+
114+
&:nth-child(2) { animation-delay: .2s }
115+
&:nth-child(3) { animation-delay: .4s }
116+
}
117+
118+
@keyframes invalid {
119+
0%, 100% { transform: translateX(-5%) }
120+
30% { transform: translateX(-5% + -4px) }
121+
70% { transform: translateX(-5% + 4px) }
122+
}
123+
124+
@keyframes bounce {
125+
0%, 100% { transform: translateY(0) }
126+
80% { transform: translateY(2px) }
127+
40% { transform: translateY(-10px) }
128+
}
129+
</style>

‎src/entrypoints/popup/App.svelte

+3-89
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import Header from '@/components/Header.svelte'
77
import Store from '@/components/Store.svelte'
88
import Button from '@/components/Button.svelte'
9+
import DiscordDisconnect from '@/components/DiscordDisconnect.svelte'
910
1011
import { conn } from '@/stores/conn.ts'
1112
import { ui } from '@/stores/ui.ts'
@@ -18,16 +19,11 @@
1819
1920
import presencesTreeIcon from '@/assets/trees/presences.png'
2021
import storeTreeIcon from '@/assets/trees/store.png'
21-
import discordBlueIcon from '@/assets/discord_blue.svg'
22-
import reloadIcon from '@/assets/reload.svg'
2322
2423
2524
const errorRetry = (index: number) =>
2625
browser.runtime.sendMessage({ type: 'error', index })
2726
28-
const reconnectDiscord = () =>
29-
browser.runtime.sendMessage({ type: 'reconnect discord' })
30-
3127
3228
popup.subscribe(() =>
3329
setTimeout(() =>
@@ -42,7 +38,7 @@
4238
<span>{@html msg}</span>
4339
</div>
4440
{/each}
45-
</div>
41+
</div>
4642

4743
{#if $ui.error}
4844
<div class='err-panel'>
@@ -62,32 +58,7 @@
6258
<Store />
6359
{:else}
6460
{#if $conn.discordState !== DiscordState.Connected}
65-
<div id='discord-connection'>
66-
<img src={discordBlueIcon} />
67-
68-
<div>
69-
<span>Discord has disconnected</span>
70-
71-
{#if $conn.errMsg}
72-
<details>
73-
<summary>Details</summary>
74-
<p>{ $conn.errMsg }</p>
75-
</details>
76-
{/if}
77-
</div>
78-
79-
{#if $conn.discordState === DiscordState.Disconnected}
80-
<button on:click={reconnectDiscord}>
81-
<img src={reloadIcon} />
82-
</button>
83-
{:else}
84-
<div class='loading'>
85-
<div />
86-
<div />
87-
<div />
88-
</div>
89-
{/if}
90-
</div>
61+
<DiscordDisconnect />
9162
{/if}
9263

9364
<Header />
@@ -123,63 +94,6 @@
12394
span { color: black }
12495
}
12596
126-
#discord-connection {
127-
display: flex;
128-
align-items: start;
129-
gap: 10px;
130-
padding: 6px;
131-
width: 110%;
132-
min-height: 50px;
133-
transform: translateX(-5%);
134-
border-radius: 8px;
135-
z-index: 1;
136-
background: var(--light-bg);
137-
138-
img { width: 22px; height: 38px }
139-
140-
& > div:first-of-type {
141-
display: flex;
142-
flex-direction: column;
143-
flex: 1;
144-
145-
span { flex: 1; color: white }
146-
summary { color: var(--text-cl) }
147-
}
148-
149-
button, .loading {
150-
display: flex;
151-
justify-content: center;
152-
align-items: center;
153-
cursor: pointer;
154-
height: 38px;
155-
width: 38px;
156-
gap: 4px
157-
}
158-
159-
button {
160-
img { width: 60% }
161-
162-
&:hover { opacity: .75 }
163-
}
164-
165-
.loading div {
166-
width: 5px;
167-
height: 5px;
168-
border-radius: 50%;
169-
background: var(--blue);
170-
animation: bounce 1.5s infinite ease-in-out;
171-
172-
&:nth-child(2) { animation-delay: .2s }
173-
&:nth-child(3) { animation-delay: .4s }
174-
}
175-
}
176-
177-
@keyframes bounce {
178-
0%, 100% { transform: translateY(0) }
179-
80% { transform: translateY(2px) }
180-
40% { transform: translateY(-10px) }
181-
}
182-
18397
#tree {
18498
position: absolute;
18599
width: 100%;

0 commit comments

Comments
 (0)