Remove hardcoded stream-id (#1130)

* Remove hardcoded stream-id * Move init to video-information * Fix websocket for popup chat
TUM-Dev · Aug 22, 2023 · 3b522f4 · 3b522f4
1 parent 246f60a
commit 3b522f4
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 4 deletions.
diff --git 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/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
@@ -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/popup.ts 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/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
@@ -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,

diff --git 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";