Fix duplicate events + reconnect issues (#8)

* Fix duplicate display events

* oops

* Fix everything else
This commit is contained in:
MDMCK10 2023-05-18 23:49:13 +02:00 committed by GitHub
parent af48aa7e19
commit daf8541ced
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -63,6 +63,18 @@ const forceVotePanel = document.getElementById("forceVotePanel");
// needed to scroll to bottom // needed to scroll to bottom
const chatListDiv = document.querySelector(".chat-table"); const chatListDiv = document.querySelector(".chat-table");
let events = new Map();
function addListener(element, event, id, callback) {
events.set(id, callback);
element.addEventListener(event, callback, {capture: true});
}
function removeListener(element, event, id) {
element.removeEventListener(event, events.get(id), true);
events.delete(id);
}
class CollabVMClient { class CollabVMClient {
eventemitter = createNanoEvents(); eventemitter = createNanoEvents();
socket; socket;
@ -71,6 +83,7 @@ class CollabVMClient {
#captcha = false; #captcha = false;
captchaToken; captchaToken;
isMainSocket; isMainSocket;
shouldReconnect = true;
constructor(url, isMainSocket) { constructor(url, isMainSocket) {
this.#url = url; this.#url = url;
this.isMainSocket = isMainSocket; this.isMainSocket = isMainSocket;
@ -91,14 +104,16 @@ class CollabVMClient {
} }
#onClose() { #onClose() {
cleanup(); cleanup();
setTimeout(async () => { if(this.shouldReconnect) {
try { setTimeout(async () => {
await this.connect(); try {
} catch { connected = await this.connect(this.captchaToken);
this.#onClose(); } catch {
} this.#onClose();
this.connectToVM(this.node); }
}, 2000); this.connectToVM(this.node);
}, 2000);
}
} }
disconnect() { disconnect() {
this.socket.send(guacutils.encode(["disconnect"])); this.socket.send(guacutils.encode(["disconnect"]));
@ -721,6 +736,7 @@ function returnToVMList() {
if(!connected) return; if(!connected) return;
connected = false; connected = false;
vm.disconnect(); vm.disconnect();
vm.shouldReconnect = false;
vmview.style.display = "none"; vmview.style.display = "none";
vmlist.style.display = "block"; vmlist.style.display = "block";
} }
@ -740,16 +756,14 @@ async function openVM(url, node) {
await vm.connectToVM(node); await vm.connectToVM(node);
vmlist.style.display = "none"; vmlist.style.display = "none";
vmview.style.display = "block"; vmview.style.display = "block";
display.addEventListener('mousemove', (e) => vm.mouseevent(e, undefined), {capture: true}) addListener(display, 'mousemove', 'displayMove', (e) => vm.mouseevent(e, undefined));
display.addEventListener('mousedown', (e) => vm.mouseevent(e, true), {capture: true}); addListener(display, 'mousedown', 'displayDown', (e) => vm.mouseevent(e, true));
display.addEventListener('mouseup', (e) => vm.mouseevent(e, false), {capture: true}); addListener(display, 'mouseup', 'displayUp', (e) => vm.mouseevent(e, false));
display.addEventListener('wheel', (e) => {vm.mousewheelhandler(e);e.preventDefault();return false;}, {capture: true}); addListener(display, 'wheel', 'displayWheel', (e) => {vm.mousewheelhandler(e);e.preventDefault();return false;}); // BUG: mousewheelhandler seems to be broken!
display.addEventListener('contextmenu', (e) => e.preventDefault()); addListener(display, 'contextmenu', 'displayContextMenu', (e) => e.preventDefault());
display.addEventListener('click', () => { addListener(display, 'click', 'displayClick', () => { if (turn === -1) vm.turn(); });
if (turn === -1) vm.turn(); addListener(display, 'keydown', 'displayKeyDown', (e) => vm.keyevent(e, true));
}, {capture: true}); addListener(display, 'keyup', 'displayKeyUp', (e) => vm.keyevent(e, false));
display.addEventListener('keydown', (e) => vm.keyevent(e, true), {capture: true});
display.addEventListener('keyup', (e) => vm.keyevent(e, false), {capture: true});
} }
function screenshotVM() { function screenshotVM() {
return new Promise((res, rej) => { return new Promise((res, rej) => {
@ -778,6 +792,14 @@ function cleanup() {
usernameSpan.classList = "input-group-text bg-dark text-light"; usernameSpan.classList = "input-group-text bg-dark text-light";
display.height = 0; display.height = 0;
display.width = 0; display.width = 0;
removeListener(display, 'mousemove', 'displayMove');
removeListener(display, 'mousedown', 'displayDown');
removeListener(display, 'mouseup', 'displayUp');
removeListener(display, 'wheel', 'displayWheel');
removeListener(display, 'contextmenu', 'displayContextMenu');
removeListener(display, 'click', 'displayClick');
removeListener(display, 'keydown', 'displayKeyDown');
removeListener(display, 'keyup', 'displayKeyUp');
} }
buttons.home.addEventListener('click', async () => returnToVMList()); buttons.home.addEventListener('click', async () => returnToVMList());
buttons.screenshot.addEventListener('click', async () => { buttons.screenshot.addEventListener('click', async () => {