Add display and fix many issues

1 files changed, 49 insertions, 21 deletions

diff --git a/src/clicks.ts b/src/clicks.ts
index 9eb8bcd..35471f5 100644
--- a/src/clicks.ts
+++ b/src/clicks.ts
@@ -1,10 +1,15 @@
+const CLICKS_WSURL: string | undefined = (window as any).clicksWsUrl
+
 class Session {
     private wss: WebSocketStream
     private queue: string[] = []
-    private writer?: WritableStreamDefaultWriter
+    private writer: WritableStreamDefaultWriter | undefined
+    private url: string | undefined
+    private header: string | undefined
 
-    constructor() {
-        this.wss = new WebSocketStream("ws://127.0.0.1:8001/")
+    constructor(url: string, header: string) {
+        this.wss = new WebSocketStream(url)
+        this.header = header
     }
 
     async connect() {
@@ -16,6 +21,22 @@ class Session {
     }
 
     reportEvent(event: string) {
+        // Could do this with NavigateEvent instead,
+        // but then we would report all navigations,
+        // even if there are no clicks, which is unnecessary.
+        if (window.location.href !== this.url) {
+            if (this.header !== undefined) {
+                this.pushEvent(this.header)
+                this.header = undefined
+            }
+            this.url = window.location.href
+            this.pushEvent(`u|${this.url}`)
+        }
+
+        this.pushEvent(event)
+    }
+
+    private pushEvent(event: string) {
         if (this.writer === undefined) {
             this.queue.push(event)
         } else {
@@ -24,29 +45,36 @@ class Session {
     }
 }
 
-function startSession(data: string): Session {
-    const session = new Session()
+function startSession(data: string): Session | undefined {
+    if (CLICKS_WSURL === undefined) return undefined
+    const session = new Session(CLICKS_WSURL, data)
     void session.connect()
-    session.reportEvent(data)
     return session
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    const ua = navigator.userAgentData?.brands?.map((brand) => `${brand.brand}:${brand.version}`).join(',')
+    const ua = navigator.userAgentData?.brands
+        ?.map((brand) => `${brand.brand}:${brand.version}`)
+        .join(",")
     const session = startSession(
-        `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}:${ua}`
-    )
-    document.documentElement.addEventListener(
-        "click",
-        (e: MouseEvent) => {
-            const target =
-                e.target instanceof HTMLElement ? e.target.tagName : ""
-            const x = e.pageX / document.documentElement.clientWidth
-            const y = e.pageY / document.documentElement.clientHeight
-            session.reportEvent(`${x}x${y}:${target}`)
-        },
-        {
-            capture: true,
-        }
+        `${document.documentElement.clientWidth}|${document.documentElement.clientHeight}|${ua}`
     )
+    if (session !== undefined) {
+        document.documentElement.addEventListener(
+            "click",
+            (e: MouseEvent) => {
+                const target =
+                    e.target instanceof HTMLElement ? e.target.tagName : ""
+                const x = e.pageX / document.documentElement.clientWidth
+                // clientWidth is NOT a typo, using width as scale,
+                // to not have to know height of rendered document when
+                // showing.
+                const y = e.pageY / document.documentElement.clientWidth
+                session.reportEvent(`${x}|${y}|${target}`)
+            },
+            {
+                capture: true,
+            }
+        )
+    }
 })