list users in playersync

1 files changed, 17 insertions, 3 deletions

diff --git a/web/script/player/sync.ts b/web/script/player/sync.ts
index 3c5e3a2..cc027f1 100644
--- a/web/script/player/sync.ts
+++ b/web/script/player/sync.ts
@@ -28,7 +28,12 @@ export function playersync_controls(sync_state: OVar<undefined | Playersync>, pl
                             navigator.clipboard.writeText(channel_name_copy.value)
                         }
                     })
-                ))
+                ),
+                e("h4", "Users"),
+                sync.users.map(users =>
+                    e("ul", ...[...users.keys()].map(u => e("li", u)))
+                )
+            )
             : e("div",
                 channel_name = e("input", { type: "text", placeholder: "someroom:example.org" }),
                 e("button", "Join", {
@@ -64,6 +69,7 @@ export class Playersync {
     private on_destroy: (() => void)[] = []
 
     public name: string
+    public users = new OVar(new Map<string, null>())
 
     private cancel_pers: undefined | (() => void)
     set_pers(s?: string) {
@@ -105,8 +111,16 @@ export class Playersync {
             }
             if (packet.playing === true) this.player.play()
             if (packet.playing === false) this.player.pause()
-            if (packet.join) this.logger.log(`${packet.join} joined.`)
-            if (packet.leave) this.logger.log(`${packet.leave} left.`)
+            if (packet.join) {
+                this.logger.log(`${packet.join} joined.`)
+                this.users.value.set(packet.join, null)
+                this.users.change()
+            }
+            if (packet.leave) {
+                this.logger.log(`${packet.leave} left.`)
+                this.users.value.delete(packet.leave)
+                this.users.change()
+            }
         }
 
         let cb: () => void