From 5b83bd9b51b9e33b8a74f02615a3a1994ecd13cc Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@teaspeak.de>
Date: Tue, 21 Apr 2020 17:11:06 +0200
Subject: [PATCH] Some minor fixes for the native client

---
 shared/js/ConnectionHandler.ts |  2 ++
 shared/js/ui/channel.ts        |  2 +-
 shared/js/ui/tree/Channel.tsx  |  8 ++++----
 shared/js/ui/tree/Client.tsx   | 12 ++++++------
 shared/js/ui/tree/Server.scss  |  2 +-
 shared/js/ui/tree/Server.tsx   |  8 ++++----
 shared/js/ui/tree/View.tsx     | 19 ++++++++++++-------
 shared/js/ui/view.tsx          | 15 ++++++---------
 8 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/shared/js/ConnectionHandler.ts b/shared/js/ConnectionHandler.ts
index 8613bd2b..ad385448 100644
--- a/shared/js/ConnectionHandler.ts
+++ b/shared/js/ConnectionHandler.ts
@@ -660,6 +660,8 @@ export class ConnectionHandler {
                 this.startConnection(server_address.host + ":" + server_address.port, profile, false, Object.assign(this.reconnect_properties(profile), {auto_reconnect_attempt: true}));
             }, 5000);
         }
+
+        this.serverConnection.updateConnectionState(ConnectionState.UNCONNECTED); /* Fix for the native client... */
     }
 
     cancel_reconnect(log_event: boolean) {
diff --git a/shared/js/ui/channel.ts b/shared/js/ui/channel.ts
index 1bfc493b..85a42f89 100644
--- a/shared/js/ui/channel.ts
+++ b/shared/js/ui/channel.ts
@@ -536,7 +536,7 @@ export class ChannelEntry extends ChannelTreeEntry<ChannelEvents> {
                 invalidPermission: !channelCreate,
                 callback: () => this.channelTree.spawnCreateChannel()
             },
-            contextmenu.Entry.CLOSE(() => trigger_close ? on_close() : {})
+            contextmenu.Entry.CLOSE(() => trigger_close && on_close ? on_close() : {})
         );
     }
 
diff --git a/shared/js/ui/tree/Channel.tsx b/shared/js/ui/tree/Channel.tsx
index 4591a174..daa7fa61 100644
--- a/shared/js/ui/tree/Channel.tsx
+++ b/shared/js/ui/tree/Channel.tsx
@@ -244,9 +244,9 @@ export class ChannelEntryView extends TreeEntry<ChannelEntryViewProperties, {}>
         const collapsed_indicator = this.props.channel.child_channel_head || this.props.channel.clients(false).length > 0;
         return <div className={this.classList(viewStyle.treeEntry, channelStyle.channelEntry, this.props.channel.isSelected() && viewStyle.selected)}
                     style={{ paddingLeft: this.props.depth * 16 + 2, top: this.props.offset }}
-                    onMouseUp={e => this.onMouseUp(e as any)}
+                    onMouseUp={e => this.onMouseUp(e)}
                     onDoubleClick={() => this.onDoubleClick()}
-                    onContextMenu={e => this.onContextMenu(e as any)}
+                    onContextMenu={e => this.onContextMenu(e)}
         >
             <UnreadMarker entry={this.props.channel} />
             {collapsed_indicator && <ChannelCollapsedIndicator key={"collapsed-indicator"} onToggle={() => this.onCollapsedToggle()} collapsed={this.props.channel.collapsed} />}
@@ -260,7 +260,7 @@ export class ChannelEntryView extends TreeEntry<ChannelEntryViewProperties, {}>
         this.props.channel.collapsed = !this.props.channel.collapsed;
     }
 
-    private onMouseUp(event: MouseEvent) {
+    private onMouseUp(event: React.MouseEvent) {
         if(event.button !== 0) return; /* only left mouse clicks */
 
         const channel = this.props.channel;
@@ -279,7 +279,7 @@ export class ChannelEntryView extends TreeEntry<ChannelEntryViewProperties, {}>
         channel.joinChannel();
     }
 
-    private onContextMenu(event: MouseEvent) {
+    private onContextMenu(event: React.MouseEvent) {
         if(settings.static(Settings.KEY_DISABLE_CONTEXT_MENU))
             return;
 
diff --git a/shared/js/ui/tree/Client.tsx b/shared/js/ui/tree/Client.tsx
index 9d886ac9..b3f12183 100644
--- a/shared/js/ui/tree/Client.tsx
+++ b/shared/js/ui/tree/Client.tsx
@@ -322,7 +322,7 @@ class ClientNameEdit extends ReactComponentBase<ClientNameEditProps, {}> {
             ref={this.ref_div}
             dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.initialName)}}
             onBlur={e => this.onBlur()}
-            onKeyPress={e => this.onKeyPress(e as any)}
+            onKeyPress={e => this.onKeyPress(e)}
         />
     }
 
@@ -330,7 +330,7 @@ class ClientNameEdit extends ReactComponentBase<ClientNameEditProps, {}> {
         this.props.editFinished(this.ref_div.current.textContent);
     }
 
-    private onKeyPress(event: KeyboardEvent) {
+    private onKeyPress(event: React.KeyboardEvent) {
         if(event.key === "Enter") {
             event.preventDefault();
             this.onBlur();
@@ -364,8 +364,8 @@ export class ClientEntry extends TreeEntry<ClientEntryProperties, ClientEntrySta
             <div className={this.classList(clientStyle.clientEntry, viewStyle.treeEntry, this.props.client.isSelected() && viewStyle.selected)}
                  style={{ paddingLeft: (this.props.depth * 16 + 2) + "px", top: this.props.offset }}
                  onDoubleClick={() => this.onDoubleClick()}
-                 onMouseUp={e => this.onMouseUp(e as any)}
-                 onContextMenu={e => this.onContextMenu(e as any)}
+                 onMouseUp={e => this.onMouseUp(e)}
+                 onContextMenu={e => this.onContextMenu(e)}
             >
                 <UnreadMarker entry={this.props.client} />
                 <ClientSpeakIcon client={this.props.client} />
@@ -403,7 +403,7 @@ export class ClientEntry extends TreeEntry<ClientEntryProperties, ClientEntrySta
         this.setState({ rename: false });
     }
 
-    private onMouseUp(event: MouseEvent) {
+    private onMouseUp(event: React.MouseEvent) {
         if(event.button !== 0) return; /* only left mouse clicks */
         const tree = this.props.client.channelTree;
         if(tree.isClientMoveActive()) return;
@@ -411,7 +411,7 @@ export class ClientEntry extends TreeEntry<ClientEntryProperties, ClientEntrySta
         tree.events.fire("action_select_entries", { entries: [this.props.client], mode: "auto" });
     }
 
-    private onContextMenu(event: MouseEvent) {
+    private onContextMenu(event: React.MouseEvent) {
         if(settings.static(Settings.KEY_DISABLE_CONTEXT_MENU))
             return;
 
diff --git a/shared/js/ui/tree/Server.scss b/shared/js/ui/tree/Server.scss
index 256a639f..4509457c 100644
--- a/shared/js/ui/tree/Server.scss
+++ b/shared/js/ui/tree/Server.scss
@@ -7,7 +7,7 @@
 
     cursor: pointer;
     padding-left: 2px;
-    margin-right: 5px;
+    padding-right: 5px;
 
     .server_type {
         flex-grow: 0;
diff --git a/shared/js/ui/tree/Server.tsx b/shared/js/ui/tree/Server.tsx
index d929d547..9cc6f8e7 100644
--- a/shared/js/ui/tree/Server.tsx
+++ b/shared/js/ui/tree/Server.tsx
@@ -77,8 +77,8 @@ export class ServerEntry extends TreeEntry<ServerEntryProperties, ServerEntrySta
 
         return <div className={this.classList(serverStyle.serverEntry, viewStyle.treeEntry, this.props.server.isSelected() && viewStyle.selected )}
                     style={{ top: this.props.offset }}
-                    onMouseUp={e => this.onMouseUp(e as any)}
-                    onContextMenu={e => this.onContextMenu(e as any)}
+                    onMouseUp={e => this.onMouseUp(e)}
+                    onContextMenu={e => this.onContextMenu(e)}
         >
             <UnreadMarker entry={this.props.server} />
             <div className={"icon client-server_green " + serverStyle.server_type} />
@@ -87,7 +87,7 @@ export class ServerEntry extends TreeEntry<ServerEntryProperties, ServerEntrySta
         </div>
     }
 
-    private onMouseUp(event: MouseEvent) {
+    private onMouseUp(event: React.MouseEvent) {
         if(event.button !== 0) return; /* only left mouse clicks */
         if(this.props.server.channelTree.isClientMoveActive()) return;
 
@@ -97,7 +97,7 @@ export class ServerEntry extends TreeEntry<ServerEntryProperties, ServerEntrySta
         });
     }
 
-    private onContextMenu(event: MouseEvent) {
+    private onContextMenu(event: React.MouseEvent) {
         if(settings.static(Settings.KEY_DISABLE_CONTEXT_MENU))
             return;
 
diff --git a/shared/js/ui/tree/View.tsx b/shared/js/ui/tree/View.tsx
index 2e902f52..20201f83 100644
--- a/shared/js/ui/tree/View.tsx
+++ b/shared/js/ui/tree/View.tsx
@@ -165,7 +165,12 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         }
 
         return (
-            <div className={viewStyle.channelTreeContainer} onScroll={() => this.onScroll()} ref={this.ref_container} onMouseDown={e => this.onMouseDown(e as any)} onMouseMove={e => this.onMouseMove(e as any)} >
+            <div
+                 className={viewStyle.channelTreeContainer}
+                 onScroll={() => this.onScroll()}
+                 ref={this.ref_container}
+                 onMouseDown={e => this.onMouseDown(e)}
+                 onMouseMove={e => this.onMouseMove(e)} >
                 <div className={this.classList(viewStyle.channelTree, this.props.tree.isClientMoveActive() && viewStyle.move)} style={{height: (this.flat_tree.length * ChannelTreeView.EntryHeight) + "px"}}>
                     {elements}
                 </div>
@@ -181,7 +186,7 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
 
         this.flat_tree.push({
             entry: entry,
-            rendered: <ChannelEntryView key={"channel-" + entry.channelId} channel={entry} offset={this.build_top_offset += ChannelTreeView.EntryHeight} depth={depth} ref={entry.view} />
+            rendered: <ChannelEntryView key={this.state.tree_version + "-channel-" + entry.channelId} channel={entry} offset={this.build_top_offset += ChannelTreeView.EntryHeight} depth={depth} ref={entry.view} />
         });
 
         if(entry.collapsed) return;
@@ -191,7 +196,7 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         this.flat_tree.push(...clients.map(e => {
             return {
                 entry: e,
-                rendered: <ClientEntryView key={"client-" + e.clientId()} client={e} offset={this.build_top_offset += ChannelTreeView.EntryHeight} depth={depth + 1} ref={e.view} />
+                rendered: <ClientEntryView key={this.state.tree_version + "-client-" + e.clientId()} client={e} offset={this.build_top_offset += ChannelTreeView.EntryHeight} depth={depth + 1} ref={e.view} />
             };
         }));
         for (const channel of entry.children(false))
@@ -214,7 +219,7 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         this.build_top_offset = -ChannelTreeView.EntryHeight; /* because of the += */
         this.flat_tree = [{
             entry: tree.server,
-            rendered: <ServerEntryView key={"server"} server={tree.server} offset={this.build_top_offset += ChannelTreeView.EntryHeight} ref={tree.server.view} />
+            rendered: <ServerEntryView key={this.state.tree_version + "-server"} server={tree.server} offset={this.build_top_offset += ChannelTreeView.EntryHeight} ref={tree.server.view} />
         }];
 
         for (const channel of tree.rootChannel())
@@ -255,7 +260,7 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         });
     }
 
-    private onMouseDown(e: MouseEvent) {
+    private onMouseDown(e: React.MouseEvent) {
         if(e.button !== 0) return; /* left button only */
 
         this.mouse_move.down = true;
@@ -264,7 +269,7 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         this.registerDocumentMouseListener();
     }
 
-    private onMouseMove(e: MouseEvent) {
+    private onMouseMove(e: React.MouseEvent) {
         if(!this.mouse_move.down || this.mouse_move.fired) return;
         if(Math.abs((this.mouse_move.x - e.pageX) * (this.mouse_move.y - e.pageY)) > (this.props.moveThreshold || 9)) {
             this.mouse_move.fired = true;
@@ -321,6 +326,6 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
             return undefined;
 
         const total_offset = container.scrollTop + pageY;
-        return this.flat_tree[Math.floor(total_offset / ChannelTreeView.EntryHeight)].entry;
+        return this.flat_tree[Math.floor(total_offset / ChannelTreeView.EntryHeight)]?.entry;
     }
 }
\ No newline at end of file
diff --git a/shared/js/ui/view.tsx b/shared/js/ui/view.tsx
index 639116ff..b7b2462e 100644
--- a/shared/js/ui/view.tsx
+++ b/shared/js/ui/view.tsx
@@ -225,16 +225,13 @@ export class ChannelTree {
 
         if(!settings.static(Settings.KEY_DISABLE_CONTEXT_MENU, false)) {
             this._tag_container.on("contextmenu", (event) => {
-                if(event.isDefaultPrevented()) return;
-
-                for(const element of document.elementsFromPoint(event.pageX, event.pageY))
-                    if(element.classList.contains("channelLine") || element.classList.contains("client"))
-                        return;
-
                 event.preventDefault();
-                if(this.selection.is_multi_select())
-                    this.open_multiselect_context_menu(this.selection.selected_entries, event.pageX, event.pageY);
-                else {
+
+                const entry = this.view.current?.getEntryFromPoint(event.pageX, event.pageY);
+                if(entry) {
+                    if(this.selection.is_multi_select())
+                        this.open_multiselect_context_menu(this.selection.selected_entries, event.pageX, event.pageY);
+                } else {
                     this.selection.clear_selection();
                     this.showContextMenu(event.pageX, event.pageY);
                 }