Merge pull request #189 from TeaSpeak/develop

Develop

ChangeLog.md

@@ -1,4 +1,11 @@
 # Changelog:
+* **11.06.21**
+    - Fixed the bug that cause the file transfer to timeout if the user hasn't been quick enough to save his file
+    - Fixed the emoji picker being cut off
+    - Fixed the file transfer sidebar not working
+    - Instantly reflect changes to the server icon for the bookmark menu bar
+    - Fixed a bug which prevented the proper context menu appear within the bookmark manage modal
+
 * **26.05.21**
     - Fixed automated builds
     - Fixed the bookmark UI popout window

package.json

@@ -65,7 +65,7 @@
     "mini-css-extract-plugin": "^1.3.9",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.14.1",
-    "postcss": "^8.2.8",
+    "postcss": "^8.3.0",
     "postcss-loader": "^5.2.0",
     "potpack": "^1.0.1",
     "raw-loader": "^4.0.0",
@@ -103,7 +103,7 @@
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.0.0",
     "detect-browser": "^5.2.0",
-    "dompurify": "^2.0.8",
+    "dompurify": "^2.2.8",
     "emoji-mart": "git+https://github.com/WolverinDEV/emoji-mart.git",
     "emoji-regex": "^9.0.0",
     "highlight.js": "^10.1.1",

shared/js/connectionlog/History.ts

@@ -2,9 +2,10 @@ import {LogCategory, logError, logWarn} from "tc-shared/log";
 import {tr, tra} from "tc-shared/i18n/localize";
 import * as loader from "tc-loader";
 import {Stage} from "tc-loader";
-import {ConnectionHandler} from "tc-shared/ConnectionHandler";
+import {ConnectionHandler, ConnectionState} from "tc-shared/ConnectionHandler";
 import {server_connections} from "tc-shared/ConnectionManager";
 import {ServerProperties} from "tc-shared/tree/Server";
+import {Registry} from "tc-events";
 
 export const kUnknownHistoryServerUniqueId = "unknown";
 
@@ -44,10 +45,17 @@ export type ConnectionHistoryServerInfo = {
     passwordProtected: boolean
 }
 
+export interface ConnectionHistoryEvents {
+    notify_server_info_updated: { serverUniqueId: string, keys: (keyof ConnectionHistoryServerInfo)[] }
+}
+
 export class ConnectionHistory {
+    readonly events: Registry<ConnectionHistoryEvents>;
     private database: IDBDatabase;
 
-    constructor() { }
+    constructor() {
+        this.events = new Registry<ConnectionHistoryEvents>();
+    }
 
     async initializeDatabase() {
         const openRequest = indexedDB.open("connection-log", 1);
@@ -306,16 +314,29 @@ export class ConnectionHistory {
             return;
         }
 
-
         await this.updateDatabaseServerInfo(serverUniqueId, databaseValue => {
-            databaseValue.name = info.name;
-            databaseValue.iconId = info.iconId;
+            const changes: (keyof ConnectionHistoryServerInfo)[] = [];
+            const updateValue = (databaseKey: string, infoKey: keyof ConnectionHistoryServerInfo) => {
+                if(databaseValue[databaseKey] === info[infoKey]) {
+                    return;
+                }
+
+                databaseValue[databaseKey] = info[infoKey];
+                changes.push(infoKey);
+            }
 
-            databaseValue.clientsOnline = info.clientsOnline;
-            databaseValue.clientsMax = info.clientsMax;
+            updateValue("name", "name");
+            updateValue("iconId", "iconId");
 
-            databaseValue.hostBannerUrl = info.hostBannerUrl
-            databaseValue.hostBannerMode = info.hostBannerMode;
+            updateValue("clientsOnline", "clientsOnline");
+            updateValue("clientsMax", "clientsMax");
+
+            updateValue("hostBannerUrl", "hostBannerUrl");
+            updateValue("hostBannerMode", "hostBannerMode");
+
+            if(changes.length > 0) {
+                this.events.fire("notify_server_info_updated", { serverUniqueId: serverUniqueId, keys: changes });
+            }
         });
     }
 
@@ -470,6 +491,7 @@ export class ConnectionHistory {
             }
 
             if(entry.value.serverUniqueId === kUnknownHistoryServerUniqueId && onlySucceeded) {
+                entry.continue();
                 continue;
             }
 
@@ -542,7 +564,15 @@ class ConnectionHistoryUpdateListener {
     }
 
     private registerConnectionHandler(handler: ConnectionHandler) {
-        handler.channelTree.server.events.on("notify_properties_updated", event => {
+        const events = this.listenerConnectionHandler[handler.handlerId] = [];
+        events.push(handler.channelTree.server.events.on("notify_properties_updated", event => {
+            switch(handler.connection_state) {
+                case ConnectionState.UNCONNECTED:
+                case ConnectionState.DISCONNECTING:
+                    /* We don't want any changes here */
+                    return;
+            }
+
             if("virtualserver_unique_identifier" in event.updated_properties) {
                 if(handler.currentConnectId > 0) {
                     this.history.updateConnectionServerUniqueId(handler.currentConnectId, event.server_properties.virtualserver_unique_identifier)
@@ -573,15 +603,15 @@ class ConnectionHistoryUpdateListener {
                     break;
                 }
             }
-        });
+        }));
     }
 }
 
 export let connectionHistory: ConnectionHistory;
 let historyInfoListener: ConnectionHistoryUpdateListener;
 
 loader.register_task(Stage.JAVASCRIPT_INITIALIZING, {
-    priority: 0,
+    priority: 40,
     name: "Chat history setup",
     function: async () => {
         if(!('indexedDB' in window)) {

shared/js/file/FileManager.tsx

@@ -549,9 +549,11 @@ export class FileManager {
         const initializeCallback = async () => {
             try {
                 transfer.target = await transfer.targetSupplier(transfer);
-                if(!transfer.target)
+                if(!transfer.target) {
                     throw tr("Failed to create transfer target");
+                }
 
+                transfer.lastStateUpdate = Date.now();
                 await this.connectionHandler.serverConnection.send_command("ftinitdownload", {
                     "path": options.path,
                     "name": options.name,
@@ -565,7 +567,6 @@ export class FileManager {
                 if(transfer.transferState() === FileTransferState.INITIALIZING) {
                     throw tr("missing transfer start notify");
                 }
-
             } catch (error) {
                 transfer.setFailed({
                     error: "initialize",
@@ -588,9 +589,11 @@ export class FileManager {
         const initializeCallback = async () => {
             try {
                 transfer.source = await transfer.sourceSupplier(transfer);
-                if(!transfer.source)
+                if(!transfer.source) {
                     throw tr("Failed to create transfer source");
+                }
 
+                transfer.lastStateUpdate = Date.now();
                 transfer.fileSize = await transfer.source.fileSize();
                 await this.connectionHandler.serverConnection.send_command("ftinitupload", {
                     "path": options.path,
@@ -604,14 +607,15 @@ export class FileManager {
                     "proto": 1
                 }, { process_result: options.processCommandResult });
 
-                if(transfer.transferState() === FileTransferState.INITIALIZING)
+                if(transfer.transferState() === FileTransferState.INITIALIZING) {
                     throw tr("missing transfer start notify");
+                }
 
             } catch (error) {
                 transfer.setFailed({
                     error: "initialize",
                     commandResult: error
-                }, error instanceof CommandResult ? error.formattedMessage() : typeof error === "string" ? error : tr("Lookup the console"));
+                }, error instanceof CommandResult ? error.formattedMessage() : typeof error === "string" ? error : tr("lookup the console"));
             }
         };
 
@@ -735,8 +739,18 @@ export class FileManager {
                         /* Transfer is locally pending because of some limits */
                         return false;
 
-                    case FileTransferState.CONNECTING:
                     case FileTransferState.INITIALIZING:
+                        if(entry instanceof FileDownloadTransfer) {
+                            if(!entry.target) {
+                                /* We're still prompting the user for a target file location. Lets apply a timeout of 1 min. */
+                                if(entry.transfer.lastStateUpdate < Date.now() + 60 * 1000) {
+                                    return false;
+                                }
+                            }
+                        }
+                        return true;
+
+                    case FileTransferState.CONNECTING:
                     case FileTransferState.RUNNING:
                         /* These states can time out */
                         return true;

shared/js/ui/AppController.ts

@@ -9,12 +9,11 @@ import {initializeConnectionListController} from "tc-shared/ui/frames/connection
 import * as loader from "tc-loader";
 import {Stage} from "tc-loader";
 import {server_connections} from "tc-shared/ConnectionManager";
-import {AppUiEvents, AppUiVariables} from "tc-shared/ui/AppDefinitions";
+import {AppUiVariables} from "tc-shared/ui/AppDefinitions";
 import {ConnectionHandler} from "tc-shared/ConnectionHandler";
 import {SideBarController} from "tc-shared/ui/frames/SideBarController";
 import {ServerEventLogController} from "tc-shared/ui/frames/log/Controller";
 import {HostBannerController} from "tc-shared/ui/frames/HostBannerController";
-import {UiVariableProvider} from "tc-shared/ui/utils/Variable";
 import {createIpcUiVariableProvider, IpcUiVariableProvider} from "tc-shared/ui/utils/IpcVariable";
 
 export class AppController {
@@ -128,7 +127,7 @@ export class AppController {
 }
 
 export let appViewController: AppController;
-loader.register_task(Stage.JAVASCRIPT_INITIALIZING, {
+loader.register_task(Stage.LOADED, {
     name: "app view",
     function: async () => {
         appViewController = new AppController();
@@ -138,5 +137,5 @@ loader.register_task(Stage.JAVASCRIPT_INITIALIZING, {
         (window as any).AppController = AppController;
         (window as any).appViewController = appViewController;
     },
-    priority: 0
+    priority: 100
 });

shared/js/ui/frames/control-bar/Button.scss

@@ -167,16 +167,6 @@ html:root {
             right: 0;
         }
 
-        .iconContainer {
-            margin-right: .25em;
-
-            display: flex;
-            flex-direction: column;
-
-            flex-shrink: 0;
-            flex-grow: 0;
-        }
-
         .dropdownEntry {
             position: relative;
 
@@ -305,4 +295,11 @@ html:root {
         transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
     }
+}
+
+.iconContainer {
+    margin-right: .25em;
+
+    display: flex;
+    flex-direction: column;
 }

shared/js/ui/frames/control-bar/Controller.ts

@@ -23,6 +23,8 @@ import {connectionHistory} from "tc-shared/connectionlog/History";
 import {RemoteIconInfo} from "tc-shared/file/Icons";
 import {spawnModalAddCurrentServerToBookmarks} from "tc-shared/ui/modal/bookmarks-add-server/Controller";
 import {getAudioBackend, OutputDevice} from "tc-shared/audio/Player";
+import {ignorePromise} from "tc-shared/proto";
+import {LogCategory, logTrace} from "tc-shared/log";
 
 class InfoController {
     private readonly mode: ControlBarMode;
@@ -34,6 +36,8 @@ class InfoController {
     private handlerRegisteredEvents: (() => void)[] = [];
     private defaultRecorderListener: () => void;
 
+    private bookmarkServerUniqueIds: string[] = [];
+
     constructor(events: Registry<ControlBarEvents>, mode: ControlBarMode) {
         this.events = events;
         this.mode = mode;
@@ -61,6 +65,16 @@ class InfoController {
             this.sendVideoState("camera");
         }));
         bookmarks.events.on(["notify_bookmark_edited", "notify_bookmark_created", "notify_bookmark_deleted", "notify_bookmarks_imported"], () => this.sendBookmarks());
+        events.push(connectionHistory.events.on("notify_server_info_updated", event => {
+            if(this.bookmarkServerUniqueIds.indexOf(event.serverUniqueId) === -1) {
+                return;
+            }
+
+            if(event.keys.indexOf("iconId") !== -1) {
+                /* An icon for a bookmark has changed. Send the full new list. */
+                ignorePromise(this.sendBookmarks());
+            }
+        }));
         events.push(getVideoDriver().getEvents().on("notify_device_list_changed", () => this.sendCameraList()));
         events.push(getRecorderBackend().getDeviceList().getEvents().on("notify_list_updated", () => this.sendMicrophoneList()));
         events.push(defaultRecorderEvents.on("notify_default_recorder_changed", () => {
@@ -202,7 +216,9 @@ class InfoController {
         });
     }
 
+    /* Note: This method might be executed concurrently */
     public async sendBookmarks() {
+        this.bookmarkServerUniqueIds = [];
         const bookmarkList = bookmarks.getOrderedRegisteredBookmarks();
 
         const parent: Bookmark[] = [];
@@ -216,15 +232,17 @@ class InfoController {
                 let icon: RemoteIconInfo;
 
                 try {
-                    const connectInfo = await connectionHistory.lastConnectInfo(bookmark.entry.serverAddress, "address");
+                    const connectInfo = await connectionHistory.lastConnectInfo(bookmark.entry.serverAddress, "address", true);
                     if(connectInfo) {
+                        this.bookmarkServerUniqueIds.push(connectInfo.serverUniqueId);
                         const info = await connectionHistory.queryServerInfo(connectInfo.serverUniqueId);
                         if(info && info.iconId > 0) {
                             icon = { iconId: info.iconId, serverUniqueId: connectInfo.serverUniqueId };
                         }
                     }
-                } catch (_) {
-                    /* no need for any error handling */
+                } catch (error) {
+                    /* No need to warn in prod build */
+                    logTrace(LogCategory.BOOKMARKS, "Failed to query last connect info: %o", error);
                 }
 
                 parentList.push({

shared/js/ui/frames/control-bar/DropDown.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import {ReactComponentBase} from "tc-shared/ui/react-elements/ReactComponentBase";
 import {IconRenderer, RemoteIconRenderer} from "tc-shared/ui/react-elements/Icon";
 import {getIconManager, RemoteIconInfo} from "tc-shared/file/Icons";
 import {joinClassList} from "tc-shared/ui/react-elements/Helper";

shared/js/ui/frames/log/Renderer.tsx

@@ -43,22 +43,23 @@ const LogEntryRenderer = React.memo((props: { entry: LogMessage }) => {
     );
 });
 
-const ServerLogRenderer = () => {
+const ServerLogRenderer = (props: { backlog?: number }) => {
+    const backlog = typeof props.backlog === "number" ? props.backlog : 100;
     const handlerId = useContext(HandlerIdContext);
     const events = useContext(EventsContext);
+
+    const refContainer = useRef<HTMLDivElement>();
+    const scrollOffset = useRef<number | "bottom">("bottom");
+
+    const [ , setRevision ] = useState(0);
     const [ logs, setLogs ] = useDependentState<LogMessage[] | "loading">(() => {
         events.fire_react("query_log");
         return "loading";
     }, [ handlerId ]);
 
-    const [ revision, setRevision ] = useState(0);
-
-    const refContainer = useRef<HTMLDivElement>();
-    const scrollOffset = useRef<number | "bottom">("bottom");
-
     events.reactUse("notify_log", event => {
         const logs = event.events.slice(0);
-        logs.splice(0, Math.max(0, logs.length - 100));
+        logs.splice(0, Math.max(0, logs.length - backlog));
         logs.sort((a, b) => a.timestamp - b.timestamp);
         setLogs(logs);
     });
@@ -69,10 +70,10 @@ const ServerLogRenderer = () => {
         }
 
         logs.push(event.event);
-        logs.splice(0, Math.max(0, logs.length - 100));
+        logs.splice(0, Math.max(0, logs.length - backlog));
         logs.sort((a, b) => a.timestamp - b.timestamp);
-        setRevision(revision + 1);
-    });
+        setRevision(performance.now());
+    }, logs !== "loading", [ logs ]);
 
     const fixScroll = () => {
         if(!refContainer.current) {