Fixed the file browser modal

ChangeLog.md

@@ -3,6 +3,8 @@
     - Made the permission editor popoutable
     - Now using SVG flags for higher quality.
     - Fixed issue [#74](https://github.com/TeaSpeak/TeaWeb/issues/74) (Swiss flag box has black background)
+    - Fixed issue that middle clicking on the channel does not shows the channel file browser instead it shows the global one
+  
 * **21.03.21**
     - Reworked the server group assignment modal. It now better reacts to the user input as well is now popoutable
   

shared/js/ui/modal/transfer/FileBrowserControllerRemote.ts

@@ -73,10 +73,19 @@ function parsePath(path: string, connection: ConnectionHandler): PathInfo {
 }
 
 export function initializeRemoteFileBrowserController(connection: ConnectionHandler, events: Registry<FileBrowserEvents>) {
+    /* currently selected files */
+    let currentPath = "/";
+    let currentPathInfo: PathInfo;
+    let selection: { name: string, type: FileType }[] = [];
+
     events.on("action_navigate_to", event => {
         try {
             const info = parsePath(event.path, connection);
 
+            currentPathInfo = info;
+            currentPath = event.path;
+            selection = [];
+
             events.fire_react("notify_current_path", {
                 path: event.path || "/",
                 status: "success",
@@ -370,20 +379,6 @@ export function initializeRemoteFileBrowserController(connection: ConnectionHand
         });
     });
 
-    /* currently selected files */
-    let currentPath = "/";
-    let currentPathInfo: PathInfo;
-    let selection: { name: string, type: FileType }[] = [];
-    events.on("notify_current_path", result => {
-        if (result.status !== "success") {
-            return;
-        }
-
-        currentPathInfo = result.pathInfo;
-        currentPath = result.path;
-        selection = [];
-    });
-
     events.on("query_current_path", () => events.fire_react("notify_current_path", {
         status: "success",
         path: currentPath,

shared/js/ui/modal/transfer/FileBrowserRenderer.tsx

@@ -148,15 +148,20 @@ export class NavigationBar extends ReactComponentBase<NavigationBarProperties, N
     protected defaultState(): NavigationBarState {
         return {
             currentPath: this.props.initialPath,
-            state: "normal",
+            state: "navigating",
         }
     }
 
+    componentDidMount() {
+        this.props.events.fire("query_current_path");
+    }
+
     render() {
         let input;
         let path = this.state.currentPath;
-        if (!path.endsWith("/"))
+        if (!path.endsWith("/")) {
             path += "/";
+        }
 
         if (this.state.state === "editing") {
             input = (
@@ -239,17 +244,19 @@ export class NavigationBar extends ReactComponentBase<NavigationBarProperties, N
 
     componentDidUpdate(prevProps: Readonly<NavigationBarProperties>, prevState: Readonly<NavigationBarState>, snapshot?: any): void {
         setTimeout(() => {
-            if (this.refRendered.current)
+            if (this.refRendered.current) {
                 this.refRendered.current.scrollLeft = 999999;
+            }
         }, 10);
     }
 
     private onPathClicked(event: React.MouseEvent, index: number) {
         let path;
-        if (index === -1)
+        if (index === -1) {
             path = "/";
-        else
+        } else {
             path = "/" + this.state.currentPath.split("/").filter(e => !!e).slice(0, index + 1).join("/") + "/";
+        }
         this.props.events.fire("action_navigate_to", {path: path});
 
         event.stopPropagation();
@@ -266,8 +273,9 @@ export class NavigationBar extends ReactComponentBase<NavigationBarProperties, N
     }
 
     private onInputPathBluer() {
-        if (this.state.state !== "editing" || this.ignoreBlur)
+        if (this.state.state !== "editing" || this.ignoreBlur) {
             return;
+        }
 
         this.setState({
             state: "normal"
@@ -1144,9 +1152,6 @@ export class FileBrowserRenderer extends ReactComponentBase<FileListTablePropert
         this.currentPath = this.props.initialPath;
 
         this.props.events.fire("query_current_path", {});
-        this.props.events.fire("query_files", {
-            path: this.currentPath
-        });
     }
 
     private onDrop(event: React.DragEvent) {

shared/js/ui/modal/transfer/ModalFileTransfer.tsx

@@ -27,18 +27,17 @@ class FileTransferModal extends InternalModal {
         this.remoteBrowseEvents.enableDebug("remote-file-browser");
         this.transferInfoEvents.enableDebug("transfer-info");
 
+        const path = this.defaultChannelId ? "/" + channelPathPrefix + this.defaultChannelId + "/" : "/";
         initializeRemoteFileBrowserController(server_connections.getActiveConnectionHandler(), this.remoteBrowseEvents);
         initializeTransferInfoController(server_connections.getActiveConnectionHandler(), this.transferInfoEvents);
-    }
-
-    protected onInitialize() {
-        const path = this.defaultChannelId ? "/" + channelPathPrefix + this.defaultChannelId + "/" : "/";
         this.remoteBrowseEvents.fire("action_navigate_to", { path: path });
     }
 
     protected onDestroy() {
         this.remoteBrowseEvents.fire("notify_destroy");
         this.transferInfoEvents.fire("notify_destroy");
+        this.remoteBrowseEvents.destroy();
+        this.transferInfoEvents.destroy();
     }
 
     renderTitle() {