From ff4aa8be78caaf154de4212d3b1f1abf14483114 Mon Sep 17 00:00:00 2001
From: Matthias Reumann <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 08:14:04 +0200
Subject: [PATCH 1/6] Remove hardcoded stream-id

---
 web/template/components/chat.gohtml    | 2 +-
 web/ts/api/chat-ws.ts                  | 2 +-
 web/ts/components/video-interaction.ts | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 07e2331bd..a27df672a 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -10,7 +10,7 @@
         {{$userId = .IndexData.TUMLiveContext.User.ID}}
     {{end}}
     <article
-            x-data="interaction.videoInteractionContext({ID: {{$userId}}, name: '{{$userName}}', isAdmin: {{$isAdmin}}})"
+            x-data="interaction.videoInteractionContext({{$stream.ID}}, {ID: {{$userId}}, name: '{{$userName}}', isAdmin: {{$isAdmin}}})"
             class="h-full">
         <template x-if="isChat()">
             <article
diff --git a/web/ts/api/chat-ws.ts b/web/ts/api/chat-ws.ts
index 926bba8ea..6d538f55c 100644
--- a/web/ts/api/chat-ws.ts
+++ b/web/ts/api/chat-ws.ts
@@ -11,7 +11,7 @@ enum ChatMessageType {
 }
 
 export abstract class SocketConnections {
-    static ws: RealtimeFacade = new RealtimeFacade("chat/12845");
+    static ws: RealtimeFacade;
 }
 
 export type NewChatMessage = {
diff --git a/web/ts/components/video-interaction.ts b/web/ts/components/video-interaction.ts
index fe88f4b01..e663379bf 100644
--- a/web/ts/components/video-interaction.ts
+++ b/web/ts/components/video-interaction.ts
@@ -1,18 +1,20 @@
 import { AlpineComponent } from "./alpine-component";
 import { User } from "../api/users";
 import { SocketConnections } from "../api/chat-ws";
+import { RealtimeFacade } from "../utilities/ws";
 
 enum InteractionType {
     Chat,
     Polls,
 }
 
-export function videoInteractionContext(user: User) {
+export function videoInteractionContext(streamId: number, user: User) {
     return {
         type: InteractionType.Chat,
         user: user as User,
 
         init() {
+            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
             SocketConnections.ws.subscribe();
         },
 

From 9120d42908c37cc24efcd336432f42b48756a1d3 Mon Sep 17 00:00:00 2001
From: Matthias Reumann <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 09:09:03 +0200
Subject: [PATCH 2/6] Add logic

---
 web/template/components/chat.gohtml    | 41 ++++++++++++++++----------
 web/template/watch.gohtml              |  2 +-
 web/ts/api/chat-ws.ts                  |  2 +-
 web/ts/components/video-information.ts |  4 ++-
 web/ts/components/video-interaction.ts |  1 +
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 07e2331bd..4330ce9ea 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -74,9 +74,7 @@
                                     <span x-show="m.admin"
                                           class="fa-video text-white bg-red-400 p-1 rounded fas"></span>
                                     <span class="text-2 font-semibold" x-text="m.name" :style="'color:'+m.color"></span>
-                                    <span x-show="!m.visible" class="text-5 font-light">
-                        This message is currently only visible to you and admins.
-                    </span>
+                                    <span x-show="!m.visible" class="text-5 font-light">This message is currently only visible to you and admins.</span>
                                 </div>
                                 <div class="relative group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                                     <div class="flex justify-between">
@@ -190,26 +188,39 @@
 
 
                                 <!-- replies -->
-                                <div x-cloak x-show="m.ShowReplies.value"
-                                     class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
+                                <article x-cloak x-show="m.ShowReplies.value"
+                                         class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
                                     <template x-for="reply in m.replies">
-                                        <div class="grid gap-y-1">
+                                        <section class="grid gap-y-1">
                                             <div>
-                            <span x-show="reply.admin"
-                                  class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
+                                                <span x-show="reply.admin"
+                                                      class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
                                                 <span class="text-2 font-semibold" x-text="reply.name"
                                                       :style="'color:'+reply.color"></span>
+                                                <span x-show="!reply.visible" class="text-xs text-5 font-light">This message is currently only visible to you and admins.</span>
                                             </div>
-                                            <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
-                                                <div class="flex justify-between">
-                                                    <span class="w-5/6 my-auto" x-html="reply.message"></span>
-                                                    <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
-                                                          x-text="reply.friendlyCreatedAt()"></span>
+                                            <div class="flex">
+                                                <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 flex-grow">
+                                                    <div class="flex justify-between">
+                                                        <span class="w-5/6 my-auto" x-html="reply.message"></span>
+                                                        <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
+                                                              x-text="reply.friendlyCreatedAt()"></span>
+                                                    </div>
                                                 </div>
+                                                {{if $course.ModeratedChatEnabled}}
+                                                    <template x-if="isAdmin()">
+                                                        <button x-cloak x-show="!reply.visible"
+                                                                @click="approveMessage(reply.ID)"
+                                                                title="Approve Message"
+                                                                class="tum-live-icon-button shrink mx-2">
+                                                            <i class="fa-solid fa-spell-check"></i>
+                                                        </button>
+                                                    </template>
+                                                {{end}}
                                             </div>
-                                        </div>
+                                        </section>
                                     </template>
-                                </div>
+                                </article>
                             </section>
                         </template>
                     </div>
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index 32f7dfefb..9330da3da 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -87,7 +87,7 @@
 <div id="watchPageMainWrapper">
     <input type="hidden" id="description" value="{{.Description}}">
     <input type="hidden" id="streamID" value="{{$stream.Model.ID}}">
-    <div x-data="interaction.videoInformationContext();"
+    <div x-data="interaction.videoInformationContext({{$stream.ID}});"
          class="flex flex-wrap shadow border bg-white dark:bg-secondary dark:shadow-0 dark:border-0">
         <div id="watchWrapper"
              x-data="{ 'chatEnabled': {{and $course.ChatEnabled $stream.ChatEnabled}} }"
diff --git a/web/ts/api/chat-ws.ts b/web/ts/api/chat-ws.ts
index 926bba8ea..6d538f55c 100644
--- a/web/ts/api/chat-ws.ts
+++ b/web/ts/api/chat-ws.ts
@@ -11,7 +11,7 @@ enum ChatMessageType {
 }
 
 export abstract class SocketConnections {
-    static ws: RealtimeFacade = new RealtimeFacade("chat/12845");
+    static ws: RealtimeFacade;
 }
 
 export type NewChatMessage = {
diff --git a/web/ts/components/video-information.ts b/web/ts/components/video-information.ts
index 0917ceb61..c4f96adf3 100644
--- a/web/ts/components/video-information.ts
+++ b/web/ts/components/video-information.ts
@@ -1,10 +1,11 @@
 import { AlpineComponent } from "./alpine-component";
 import { SocketConnections } from "../api/chat-ws";
 import { ToggleableElement } from "../utilities/ToggleableElement";
+import { RealtimeFacade } from "../utilities/ws";
 
 const CUTOFFLENGTH = 256;
 
-export function videoInformationContext(): AlpineComponent {
+export function videoInformationContext(streamId: number): AlpineComponent {
     // TODO: REST
     const descriptionEl = document.getElementById("description") as HTMLInputElement;
     return {
@@ -15,6 +16,7 @@ export function videoInformationContext(): AlpineComponent {
         showFullDescription: new ToggleableElement(),
 
         init() {
+            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
             Promise.all([this.initWebsocket()]);
         },
 
diff --git a/web/ts/components/video-interaction.ts b/web/ts/components/video-interaction.ts
index fe88f4b01..e38dfaa71 100644
--- a/web/ts/components/video-interaction.ts
+++ b/web/ts/components/video-interaction.ts
@@ -1,6 +1,7 @@
 import { AlpineComponent } from "./alpine-component";
 import { User } from "../api/users";
 import { SocketConnections } from "../api/chat-ws";
+import { RealtimeFacade } from "../utilities/ws";
 
 enum InteractionType {
     Chat,

From 8b29afe60e939774c9fbdc0a4b8a32ee4819ea4e Mon Sep 17 00:00:00 2001
From: Matthias Reumann <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 09:11:21 +0200
Subject: [PATCH 3/6] Move init to video-information

---
 web/template/components/chat.gohtml    | 2 +-
 web/template/watch.gohtml              | 2 +-
 web/ts/components/video-information.ts | 4 +++-
 web/ts/components/video-interaction.ts | 3 +--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index a27df672a..07e2331bd 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -10,7 +10,7 @@
         {{$userId = .IndexData.TUMLiveContext.User.ID}}
     {{end}}
     <article
-            x-data="interaction.videoInteractionContext({{$stream.ID}}, {ID: {{$userId}}, name: '{{$userName}}', isAdmin: {{$isAdmin}}})"
+            x-data="interaction.videoInteractionContext({ID: {{$userId}}, name: '{{$userName}}', isAdmin: {{$isAdmin}}})"
             class="h-full">
         <template x-if="isChat()">
             <article
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index 32f7dfefb..9330da3da 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -87,7 +87,7 @@
 <div id="watchPageMainWrapper">
     <input type="hidden" id="description" value="{{.Description}}">
     <input type="hidden" id="streamID" value="{{$stream.Model.ID}}">
-    <div x-data="interaction.videoInformationContext();"
+    <div x-data="interaction.videoInformationContext({{$stream.ID}});"
          class="flex flex-wrap shadow border bg-white dark:bg-secondary dark:shadow-0 dark:border-0">
         <div id="watchWrapper"
              x-data="{ 'chatEnabled': {{and $course.ChatEnabled $stream.ChatEnabled}} }"
diff --git a/web/ts/components/video-information.ts b/web/ts/components/video-information.ts
index 0917ceb61..c4f96adf3 100644
--- a/web/ts/components/video-information.ts
+++ b/web/ts/components/video-information.ts
@@ -1,10 +1,11 @@
 import { AlpineComponent } from "./alpine-component";
 import { SocketConnections } from "../api/chat-ws";
 import { ToggleableElement } from "../utilities/ToggleableElement";
+import { RealtimeFacade } from "../utilities/ws";
 
 const CUTOFFLENGTH = 256;
 
-export function videoInformationContext(): AlpineComponent {
+export function videoInformationContext(streamId: number): AlpineComponent {
     // TODO: REST
     const descriptionEl = document.getElementById("description") as HTMLInputElement;
     return {
@@ -15,6 +16,7 @@ export function videoInformationContext(): AlpineComponent {
         showFullDescription: new ToggleableElement(),
 
         init() {
+            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
             Promise.all([this.initWebsocket()]);
         },
 
diff --git a/web/ts/components/video-interaction.ts b/web/ts/components/video-interaction.ts
index e663379bf..e38dfaa71 100644
--- a/web/ts/components/video-interaction.ts
+++ b/web/ts/components/video-interaction.ts
@@ -8,13 +8,12 @@ enum InteractionType {
     Polls,
 }
 
-export function videoInteractionContext(streamId: number, user: User) {
+export function videoInteractionContext(user: User) {
     return {
         type: InteractionType.Chat,
         user: user as User,
 
         init() {
-            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
             SocketConnections.ws.subscribe();
         },
 

From 0e52fc4cb789b094c1028065b99fd0679a703c90 Mon Sep 17 00:00:00 2001
From: Matthias Reumann <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 09:11:42 +0200
Subject: [PATCH 4/6] Update query

---
 dao/chat.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dao/chat.go b/dao/chat.go
index 9130dce48..e2b43d4a1 100644
--- a/dao/chat.go
+++ b/dao/chat.go
@@ -89,7 +89,7 @@ func (d chatDao) GetReactions(chatID uint) ([]model.ChatReaction, error) {
 func (d chatDao) GetVisibleChats(userID uint, streamID uint) ([]model.Chat, error) {
 	var chats []model.Chat
 	query := DB.
-		Preload("Replies").
+		Preload("Replies", "(visible = 1) OR (user_id = ?)", userID).
 		Preload("Reactions").
 		Preload("AddressedToUsers").
 		Where("(visible = 1) OR (user_id = ?)", userID).

From dc8e56f1e9d6d86224482eed700edee768855ec7 Mon Sep 17 00:00:00 2001
From: Matthias Reumann <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 09:20:44 +0200
Subject: [PATCH 5/6] Fix websocket for popup chat

---
 web/template/popup-chat.gohtml |  2 +-
 web/ts/components/popup.ts     | 11 +++++++++++
 web/ts/entry/interactions.ts   |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 web/ts/components/popup.ts

diff --git a/web/template/popup-chat.gohtml b/web/template/popup-chat.gohtml
index a4814fd2b..fce4c6638 100644
--- a/web/template/popup-chat.gohtml
+++ b/web/template/popup-chat.gohtml
@@ -17,6 +17,6 @@
     <link href="/static/assets/css-dist/home.css?v={{if .IndexData.VersionTag}}{{.IndexData.VersionTag}}{{else}}development{{end}}"
           rel="stylesheet">
 </head>
-<body class="bg-white dark:bg-secondary h-screen">
+<body class="bg-white dark:bg-secondary h-screen" x-data="interaction.popupContext({{$stream.ID}})">
     {{template "chat-component" .}}
 </body>
diff --git a/web/ts/components/popup.ts b/web/ts/components/popup.ts
new file mode 100644
index 000000000..d423a50d0
--- /dev/null
+++ b/web/ts/components/popup.ts
@@ -0,0 +1,11 @@
+import { AlpineComponent } from "./alpine-component";
+import { RealtimeFacade } from "../utilities/ws";
+import { SocketConnections } from "../api/chat-ws";
+
+export function popupContext(streamId: number): AlpineComponent {
+    return {
+        init() {
+            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
+        },
+    } as AlpineComponent;
+}
diff --git a/web/ts/entry/interactions.ts b/web/ts/entry/interactions.ts
index 853129a0b..6afe2699f 100644
--- a/web/ts/entry/interactions.ts
+++ b/web/ts/entry/interactions.ts
@@ -4,3 +4,4 @@ export * from "../components/chat-prompt";
 export * from "../components/poll";
 export * from "../components/emoji-picker";
 export * from "../components/video-information";
+export * from "../components/popup";

From ec1fb7571f2197af72105baf2436387a3ccfba3f Mon Sep 17 00:00:00 2001
From: Matthias Reumann <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 09:36:15 +0200
Subject: [PATCH 6/6] Handle moderate reply

---
 web/ts/api/chat.ts        | 7 +++++++
 web/ts/components/chat.ts | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/ts/api/chat.ts b/web/ts/api/chat.ts
index fcbce6ecd..7bf8753c7 100644
--- a/web/ts/api/chat.ts
+++ b/web/ts/api/chat.ts
@@ -92,6 +92,13 @@ export class ChatMessageArray {
         this.messages = filtered;
     }
 
+    approveReply(m: ChatMessage) {
+        const base = this.messages.find((msg) => msg.ID === m.replyTo.Int64);
+        const filtered = base.replies.filter((msg) => msg.ID !== m.ID);
+        filtered.push(Object.assign(new ChatMessage(), m));
+        base.replies = filtered;
+    }
+
     retract(msg: ChatMessage, isAdmin: boolean) {
         if (isAdmin) {
             this.messages.find((m) => m.ID === msg.ID).visible = false;
diff --git a/web/ts/components/chat.ts b/web/ts/components/chat.ts
index e260f88c2..1b187e3f4 100644
--- a/web/ts/components/chat.ts
+++ b/web/ts/components/chat.ts
@@ -232,7 +232,8 @@ export function chatContext(streamId: number, user: User, isRecording: boolean):
 
         handleApprove(msg: ChatMessage) {
             this.preprocessors.forEach((f) => f(msg, this.user));
-            this.messages.approve(msg);
+            if (msg.replyTo.Valid) this.messages.approveReply(msg);
+            else this.messages.approve(msg);
         },
 
         handleRetract(msg: ChatMessage) {