forked from
pds.ls/pdsls
atmosphere explorer
fire disconnect on touchdown
+31
-11
+31
-11
src/views/stream.tsx
+31
-11
src/views/stream.tsx
···
33
33
}
34
34
};
35
35
36
+
const disconnect = () => {
37
+
if (streamType === "jetstream") socket?.close();
38
+
else firehose?.close();
39
+
if (rafId !== null) {
40
+
cancelAnimationFrame(rafId);
41
+
rafId = null;
42
+
}
43
+
pendingRecords = [];
44
+
setConnected(false);
45
+
};
46
+
36
47
const connectSocket = async (formData: FormData) => {
37
48
setNotice("");
38
49
if (connected()) {
39
-
if (streamType === "jetstream") socket?.close();
40
-
else firehose?.close();
41
-
if (rafId !== null) {
42
-
cancelAnimationFrame(rafId);
43
-
rafId = null;
44
-
}
45
-
pendingRecords = [];
46
-
setConnected(false);
50
+
disconnect();
47
51
return;
48
52
}
49
53
setRecords([]);
···
260
264
</div>
261
265
</Show>
262
266
<div class="flex justify-end">
263
-
<Button onClick={() => connectSocket(new FormData(formRef))}>
264
-
{connected() ? "Disconnect" : "Connect"}
265
-
</Button>
267
+
<Show when={connected()}>
268
+
<button
269
+
type="button"
270
+
onmousedown={(e) => {
271
+
e.preventDefault();
272
+
disconnect();
273
+
}}
274
+
ontouchstart={(e) => {
275
+
e.preventDefault();
276
+
disconnect();
277
+
}}
278
+
class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-7 items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
279
+
>
280
+
Disconnect
281
+
</button>
282
+
</Show>
283
+
<Show when={!connected()}>
284
+
<Button onClick={() => connectSocket(new FormData(formRef))}>Connect</Button>
285
+
</Show>
266
286
</div>
267
287
</form>
268
288
</StickyOverlay>