From b3743c554ac231a2ccfc612bd35e0e0925e4a9f2 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@teaspeak.de>
Date: Thu, 23 Jul 2020 20:00:25 +0200
Subject: [PATCH] Finishing the notification system and some fixups for the
 native client

---
 loader/app/index.ts                           |  5 ++++-
 shared/css/static/modals.scss                 |  1 +
 shared/html/templates.html                    |  4 +++-
 shared/img/icon_tooltip_notifications.svg     | 11 ++++++++++
 shared/js/proto.ts                            | 12 +++++-----
 shared/js/settings.ts                         | 16 +++++++++++++-
 shared/js/ui/frames/log/DispatcherFocus.ts    |  8 ++++++-
 .../js/ui/frames/side/ConversationManager.ts  | 22 ++++++++++++++-----
 shared/js/ui/react-elements/Switch.tsx        | 15 ++++++++-----
 shared/js/ui/react-elements/Tooltip.tsx       |  9 ++++++--
 webpack-client.config.ts                      |  3 +++
 11 files changed, 83 insertions(+), 23 deletions(-)
 create mode 100644 shared/img/icon_tooltip_notifications.svg

diff --git a/loader/app/index.ts b/loader/app/index.ts
index 710adf41..cb4096c4 100644
--- a/loader/app/index.ts
+++ b/loader/app/index.ts
@@ -23,4 +23,7 @@ setTimeout(() => appLoader.execute(), 0);
 
 export {};
 
-//window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {};
\ No newline at end of file
+if(__build.target === "client") {
+    /* do this so we don't get a react dev tools warning within the client */
+    (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {};
+}
\ No newline at end of file
diff --git a/shared/css/static/modals.scss b/shared/css/static/modals.scss
index bffef800..7b580e43 100644
--- a/shared/css/static/modals.scss
+++ b/shared/css/static/modals.scss
@@ -8,6 +8,7 @@
 	border-width: 0 .2em .2em 0;
 	padding: .21em;
 	height: .5em;
+	width: .5em;
 
 	&.right {
 		transform: rotate(-45deg);
diff --git a/shared/html/templates.html b/shared/html/templates.html
index 7a35d6e4..fcfe0458 100644
--- a/shared/html/templates.html
+++ b/shared/html/templates.html
@@ -1828,6 +1828,7 @@
                     <!-- <div class="entry" container="general-updates">{{tr "Updates" /}}</div> -->
                     <div class="entry" container="general-chat">{{tr "Chat" /}}</div>
                     <div class="entry" container="general-keymap">{{tr "Keymap" /}}</div>
+                    <div class="entry" container="general-notifications">{{tr "Notifications" /}}</div>
 
                     <div class="entry group">{{tr "Audio" /}}</div>
                     <div class="entry" container="audio-microphone">{{tr "Microphone" /}}</div>
@@ -1889,7 +1890,8 @@
                     </div>
                     <div class="container general-updates">{{tr "GU" /}}</div>
                     <div class="container general-keymap"></div>
-                    <div class="container general-chat">
+                    <div class="container general-chat"></div>
+                    <div class="container general-notifications">
                         <label>
                             <div class="checkbox">
                                 <input type="checkbox" class="option-fixed-timestamps">
diff --git a/shared/img/icon_tooltip_notifications.svg b/shared/img/icon_tooltip_notifications.svg
new file mode 100644
index 00000000..4cf37a50
--- /dev/null
+++ b/shared/img/icon_tooltip_notifications.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #b3b3b3;
+                fill-rule: evenodd;
+            }
+        </style>
+    </defs>
+    <path id="icon" class="cls-1" d="M200.012,0c110.457,0,200,89.545,200,200s-89.54,200-200,200S0.015,310.456.015,200,89.557,0,200.012,0Zm0.01,38.636A160.629,160.629,0,1,1,39.395,199.268,160.632,160.632,0,0,1,200.022,38.639ZM159.407,153.478s42.867-5.468,19.8,68.014c-24.208,77.113-66.566,140.45,63.467,81.447,0,0-64.556,21.6-42.619-37.407,12.79-34.406,28.292-81.421,27.092-93.4C225.387,154.546,207.6,141.025,159.407,153.478Zm65.564-79a24.685,24.685,0,1,1-24.687,24.684A24.685,24.685,0,0,1,224.971,74.479Z"/>
+</svg>
\ No newline at end of file
diff --git a/shared/js/proto.ts b/shared/js/proto.ts
index dbfcc69a..f0fd612a 100644
--- a/shared/js/proto.ts
+++ b/shared/js/proto.ts
@@ -1,11 +1,11 @@
-//Used by CertAccept popup
-
 /* setup jsrenderer */
-(window as any).$ = require("jquery");
-(window as any).jQuery = $;
+import "jsrender";
+if(__build.target === "web") {
+    (window as any).$ = require("jquery");
+    (window as any).jQuery = $;
 
-import * as jsrenderInit from "jsrender";
-const jsrender = jsrenderInit($);
+    require("jsrender")($);
+}
 
 declare global {
     function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
diff --git a/shared/js/settings.ts b/shared/js/settings.ts
index 2eb664bc..a9500da4 100644
--- a/shared/js/settings.ts
+++ b/shared/js/settings.ts
@@ -538,7 +538,21 @@ export class Settings extends StaticSettings {
 
     static readonly FN_EVENTS_NOTIFICATION_ENABLED: (event: string) => SettingsKey<boolean> = event => {
         return {
-            key: "notification_" + event + "_enabled",
+            key: "event_notification_" + event + "_enabled",
+            valueType: "boolean"
+        }
+    };
+
+    static readonly FN_EVENTS_LOG_ENABLED: (event: string) => SettingsKey<boolean> = event => {
+        return {
+            key: "event_log_" + event + "_enabled",
+            valueType: "boolean"
+        }
+    };
+
+    static readonly FN_EVENTS_FOCUS_ENABLED: (event: string) => SettingsKey<boolean> = event => {
+        return {
+            key: "event_focus_" + event + "_enabled",
             valueType: "boolean"
         }
     };
diff --git a/shared/js/ui/frames/log/DispatcherFocus.ts b/shared/js/ui/frames/log/DispatcherFocus.ts
index 51faf01e..5c70a962 100644
--- a/shared/js/ui/frames/log/DispatcherFocus.ts
+++ b/shared/js/ui/frames/log/DispatcherFocus.ts
@@ -5,7 +5,13 @@ const focusDefaultStatus = {};
 focusDefaultStatus[EventType.CLIENT_POKE_RECEIVED] = true;
 
 export function requestWindowFocus() {
-    window.focus();
+    if(__build.target === "web") {
+        window.focus();
+    } else {
+        /* TODO: Abstract that! */
+        const { remote } = __non_webpack_require__("electron");
+        remote.getCurrentWindow().show();
+    }
 }
 
 export function isFocusRequestEnabled(type: EventType) {
diff --git a/shared/js/ui/frames/side/ConversationManager.ts b/shared/js/ui/frames/side/ConversationManager.ts
index e5d52932..916a83ee 100644
--- a/shared/js/ui/frames/side/ConversationManager.ts
+++ b/shared/js/ui/frames/side/ConversationManager.ts
@@ -427,12 +427,20 @@ export class Conversation extends AbstractChat<ConversationUIEvents> {
             this.pendingHistoryQueries.push(() => {
                 this.historyQueryResponse = [];
 
-                return this.handle.connection.serverConnection.send_command("conversationhistory", {
-                    cid: this.conversationId,
-                    timestamp_begin: criteria.begin,
-                    message_count: criteria.limit,
-                    timestamp_end: criteria.end
-                }, { flagset: [ "merge" ], process_result: false }).then(() => {
+                const requestObject = {
+                    cid: this.conversationId
+                } as any;
+
+                if(typeof criteria.begin === "number")
+                    requestObject.timestamp_begin = criteria.begin;
+
+                if(typeof criteria.end === "number")
+                    requestObject.timestamp_end = criteria.end;
+
+                if(typeof criteria.limit === "number")
+                    requestObject.message_count = criteria.limit;
+
+                return this.handle.connection.serverConnection.send_command("conversationhistory", requestObject, { flagset: [ "merge" ], process_result: false }).then(() => {
                     resolve({ status: "success", events: this.historyQueryResponse.map(e => {
                         return {
                             type: "message",
@@ -778,6 +786,8 @@ export class ConversationManager extends AbstractChatManager<ConversationUIEvent
 
     queryUnreadFlags() {
         /* FIXME: Test for old TeaSpeak servers which don't support this */
+        return;
+
         const commandData = this.connection.channelTree.channels.map(e => { return { cid: e.channelId, cpw: e.cached_password() }});
         this.connection.serverConnection.send_command("conversationfetch", commandData).catch(error => {
             log.warn(LogCategory.CHAT, tr("Failed to query conversation indexes: %o"), error);
diff --git a/shared/js/ui/react-elements/Switch.tsx b/shared/js/ui/react-elements/Switch.tsx
index f6e920b6..82635682 100644
--- a/shared/js/ui/react-elements/Switch.tsx
+++ b/shared/js/ui/react-elements/Switch.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 const cssStyle = require("./Switch.scss");
 
 export interface SwitchProperties {
-    initialState: boolean;
+    value?: boolean;
+    initialState?: boolean;
 
     className?: string;
 
@@ -36,10 +37,14 @@ export class Switch extends React.Component<SwitchProperties, SwitchState> {
         return (
             <label ref={this.ref} className={cssStyle.container + " " + (this.props.className || "") + " " + (disabled ? cssStyle.disabled : "")} onBlur={this.props.onBlur}>
                 <div className={cssStyle.switch}>
-                    <input type="checkbox" onChange={e => {
-                        this.setState({ checked: e.currentTarget.checked });
-                        this.props.onChange && this.props.onChange(e.currentTarget.checked);
-                    }} disabled={disabled} checked={this.state.checked} />
+                    <input
+                        type="checkbox"
+                        onChange={e => {
+                            this.setState({ checked: e.currentTarget.checked });
+                            this.props.onChange && this.props.onChange(e.currentTarget.checked);
+                        }} disabled={disabled}
+                        checked={typeof this.props.value === "boolean" ? this.props.value : this.state.checked}
+                    />
                     <span className={cssStyle.slider}>
                         <span className={cssStyle.dot} />
                     </span>
diff --git a/shared/js/ui/react-elements/Tooltip.tsx b/shared/js/ui/react-elements/Tooltip.tsx
index 77da8833..ff8849eb 100644
--- a/shared/js/ui/react-elements/Tooltip.tsx
+++ b/shared/js/ui/react-elements/Tooltip.tsx
@@ -1,12 +1,14 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {ReactElement} from "react";
+import {guid} from "tc-shared/crypto/uid";
 
 const cssStyle = require("./Tooltip.scss");
 
 interface GlobalTooltipState {
     pageX: number;
     pageY: number;
+    tooltipId: string;
 }
 
 class GlobalTooltip extends React.Component<{}, GlobalTooltipState> {
@@ -18,7 +20,8 @@ class GlobalTooltip extends React.Component<{}, GlobalTooltipState> {
 
         this.state = {
             pageX: 0,
-            pageY: 0
+            pageY: 0,
+            tooltipId: "unset"
         };
     }
 
@@ -47,7 +50,7 @@ class GlobalTooltip extends React.Component<{}, GlobalTooltipState> {
         if(!this.currentTooltip_ || this.isUnmount) {
             return (
                 <div className={cssStyle.container} style={{ top: this.state.pageY, left: this.state.pageX }}>
-                    {this.currentTooltip_?.props.tooltip()}
+                    <React.Fragment key={this.state.tooltipId}>{this.currentTooltip_?.props.tooltip()}</React.Fragment>
                 </div>
             );
         }
@@ -73,6 +76,7 @@ export interface TooltipProperties {
 }
 
 export class Tooltip extends React.Component<TooltipProperties, TooltipState> {
+    readonly tooltipId = guid();
     private refContainer = React.createRef<HTMLSpanElement>();
     private currentContainer: HTMLElement;
 
@@ -105,6 +109,7 @@ export class Tooltip extends React.Component<TooltipProperties, TooltipState> {
             globalTooltipRef.current?.setState({
                 pageY: this.state.pageY,
                 pageX: this.state.pageX,
+                tooltipId: this.tooltipId
             });
         } else if(prevState.forceShow || prevState.hovered) {
             globalTooltipRef.current?.unmountTooltip(this);
diff --git a/webpack-client.config.ts b/webpack-client.config.ts
index 3caac43e..fd47a568 100644
--- a/webpack-client.config.ts
+++ b/webpack-client.config.ts
@@ -18,5 +18,8 @@ export = () => config_base.config("client").then(config => {
         callback();
     });
 
+    config.externals.push({ "jquery": "window.$" });
+    config.externals.push({ "jsrender": "window.$" });
+
     return Promise.resolve(config);
 });
\ No newline at end of file