Chat component (#1071)

* Add component and api * Add websocket connection * Add testing .gohtml * Add sorting and preprocessing * Add websocket message and reply handling * Add reactions to ws * Add chat reply fix * Add EmojiSuggestions * Remove unused templates * Add message send * Add delete functionality * Add resolve * Add approve * Add retract; merge api/user[s] files * Add interface 'Identifiable' * Cleanup websocket creation; Add addressees * Add polls * Add 'type' to poll ws messages * Add 'interaction' bundle * Start integrating new component into html * Add more components * Add focus * Add login checks * Add admin toolkit * Add back polls * More poll features... * Add poll creation * Remove some of the old functions * Scrolling behavior; server messages; mini-bugs * Scroll after sort change * Remove testchat * Remove old files * Add video-information ws * Update description properly * Add sort dropdown * Reintegrate chat replay * Fix test * Remove old chat files * Tiny fix; Remove console.log * Fix lint * Remove unused testing func * Remove console.log * Revert/Use old emojipicker design
TUM-Dev · Aug 16, 2023 · ffe99ba · ffe99ba
1 parent 2f544f1
commit ffe99ba
Show file tree

Hide file tree

Showing 51 changed files with 1,953 additions and 2,007 deletions.
diff --git a/api/chat.go b/api/chat.go
@@ -36,6 +36,12 @@ var allowedReactions = map[string]struct{}{
 	"eyes":     {},
 }
 
+const (
+	POLL_START_MSG         = "start_poll"
+	POLL_CLOSE_MSG         = "close_active_poll"
+	POLL_PARTICIPATION_MSG = "submit_poll_option_vote"
+)
+
 var routes chatRoutes
 
 func RegisterRealtimeChatChannel() {
@@ -130,6 +136,7 @@ func (r chatRoutes) handleSubmitPollOptionVote(ctx tools.TUMLiveContext, msg []b
 	voteCount, _ := r.ChatDao.GetPollOptionVoteCount(req.PollOptionId)
 
 	voteUpdateMap := gin.H{
+		"type":         POLL_PARTICIPATION_MSG,
 		"pollOptionId": req.PollOptionId,
 		"votes":        voteCount,
 	}
@@ -191,10 +198,11 @@ func (r chatRoutes) handleStartPoll(ctx tools.TUMLiveContext, msg []byte) {
 	}
 
 	pollMap := gin.H{
-		"active":      true,
-		"question":    poll.Question,
-		"pollOptions": pollOptionsJson,
-		"submitted":   0,
+		"type":      POLL_START_MSG,
+		"active":    true,
+		"question":  poll.Question,
+		"options":   pollOptionsJson,
+		"submitted": 0,
 	}
 	if pollJson, err := json.Marshal(pollMap); err == nil {
 		broadcastStream(ctx.Stream.ID, pollJson)
@@ -222,8 +230,9 @@ func (r chatRoutes) handleCloseActivePoll(ctx tools.TUMLiveContext) {
 	}
 
 	statsMap := gin.H{
-		"question":          poll.Question,
-		"pollOptionResults": pollOptions,
+		"type":     POLL_CLOSE_MSG,
+		"question": poll.Question,
+		"options":  pollOptions,
 	}
 
 	if statsJson, err := json.Marshal(statsMap); err == nil {
@@ -397,10 +406,10 @@ func (r chatRoutes) handleRetract(ctx tools.TUMLiveContext, msg []byte) {
 func (r chatRoutes) handleMessage(ctx tools.TUMLiveContext, context *realtime.Context, msg []byte) {
 	var chat chatReq
 	if err := json.Unmarshal(msg, &chat); err != nil {
-		log.WithError(err).Error("error unmarshaling chat message")
+		log.WithError(err).Error("error unmarshalling chat message")
 		return
 	}
-	if !ctx.Course.ChatEnabled {
+	if !ctx.Course.ChatEnabled && !ctx.Stream.ChatEnabled {
 		return
 	}
 	uname := ctx.User.GetPreferredName()
@@ -577,10 +586,10 @@ func (r chatRoutes) getActivePoll(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{
-		"active":      true,
-		"question":    poll.Question,
-		"pollOptions": pollOptions,
-		"submitted":   submitted,
+		"active":    true,
+		"question":  poll.Question,
+		"options":   pollOptions,
+		"submitted": submitted,
 	})
 }
 

diff --git a/api/chat_test.go b/api/chat_test.go
@@ -99,10 +99,10 @@ func TestActivePoll(t *testing.T) {
 		}
 
 		res := gin.H{
-			"active":      true,
-			"question":    testutils.PollStreamFPVLive.Question,
-			"pollOptions": pollOptions,
-			"submitted":   submitted,
+			"active":    true,
+			"question":  testutils.PollStreamFPVLive.Question,
+			"options":   pollOptions,
+			"submitted": submitted,
 		}
 
 		gomino.TestCases{

diff --git a/web/assets/css/home.css b/web/assets/css/home.css
@@ -33,17 +33,21 @@
 }
 
 /* Chrome, Safari and Opera */
-#content::-webkit-scrollbar, #notification-list::-webkit-scrollbar, .tum-live-side-navigation::-webkit-scrollbar,
+#chat-box::-webkit-scrollbar, #content::-webkit-scrollbar, #notification-list::-webkit-scrollbar, .tum-live-side-navigation::-webkit-scrollbar,
 #public-courses::-webkit-scrollbar, #user-courses::-webkit-scrollbar{
     display: none;
 }
 
 /* IE, Edge and Firefox */
-#content, #notification-list, .tum-live-side-navigation, #public-courses, #user-courses {
+#chat-box, #content, #notification-list, .tum-live-side-navigation, #public-courses, #user-courses {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
 }
 
+.tum-live-border {
+    @apply dark:border-gray-800
+}
+
 #notification-list a{
     @apply underline;
 }
@@ -55,7 +59,7 @@
 }
 
 .tum-live-bg-primary {
-    @apply bg-blue-500 dark:bg-indigo-600
+    @apply bg-blue-500 dark:bg-indigo-600 disabled:bg-blue-400/50 disabled:dark:bg-indigo-500/50
 }
 
 .tum-live-border-primary {
@@ -76,7 +80,7 @@
 }
 
 .tum-live-button-secondary {
-    @apply text-3 hover:bg-gray-100 dark:hover:bg-gray-800
+    @apply text-3 hover:bg-gray-100 dark:hover:bg-gray-800;
 }
 
 .tum-live-button-tertiary {
@@ -92,7 +96,7 @@
 }
 
 .tum-live-icon-button {
-    @apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50
+    @apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50 disabled:opacity-20;
 }
 
 .tum-live-input-submit {
@@ -213,6 +217,10 @@
     @apply flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-800 my-2 w-full
 }
 
+.tum-live-menu .tum-live-menu-item.active {
+    @apply bg-gray-100 dark:bg-gray-800
+}
+
 
 .tum-live-course-list > header {
     @apply flex items-center justify-between mb-8

diff --git a/web/popup.go b/web/popup.go
@@ -9,7 +9,7 @@ import (
 	"net/http"
 )
 
-func (r mainRoutes) PopUpChat(c *gin.Context) {
+func (r mainRoutes) PopOutChat(c *gin.Context) {
 	foundContext, exists := c.Get("TUMLiveContext")
 	if !exists {
 		sentry.CaptureException(errors.New("context should exist but doesn't"))
@@ -23,7 +23,6 @@ func (r mainRoutes) PopUpChat(c *gin.Context) {
 	data.IndexData = NewIndexData()
 	data.IndexData.TUMLiveContext = foundContext.(tools.TUMLiveContext)
 	data.IsAdminOfCourse = tumLiveContext.UserIsAdmin()
-	data.IsPopUp = true
 
 	err := templateExecutor.ExecuteTemplate(c.Writer, "popup-chat.gohtml", data)
 	if err != nil {

diff --git a/web/router.go b/web/router.go
@@ -27,6 +27,7 @@ var staticFS embed.FS
 
 var templatePaths = []string{
 	"template/*.gohtml",
+	"template/components/*.gohtml",
 	"template/admin/*.gohtml",
 	"template/admin/admin_tabs/*.gohtml",
 	"template/partial/*.gohtml",
@@ -153,7 +154,7 @@ func configMainRoute(router *gin.Engine) {
 	streamGroup.Use(tools.InitStream(daoWrapper))
 	streamGroup.GET("/w/:slug/:streamID", routes.WatchPage)
 	streamGroup.GET("/w/:slug/:streamID/:version", routes.WatchPage)
-	streamGroup.GET("/w/:slug/:streamID/chat/popup", routes.PopUpChat)
+	streamGroup.GET("/w/:slug/:streamID/chat/popup", routes.PopOutChat)
 
 	// misc
 	router.GET("/healthcheck", routes.HealthCheck)
@@ -240,7 +241,6 @@ type CacheMetrics struct {
 type ChatData struct {
 	IsAdminOfCourse bool // is current user admin or lecturer who created the course associated with the chat
 	IndexData       IndexData
-	IsPopUp         bool
 }
 
 type staticFile struct {