feat(chat): add effect and improve faker

assets/src/js/lib/chat.js

@@ -12,6 +12,14 @@ const createWebSocketConnection = () => {
   return new WebSocket(`${protocol}://${window.location.hostname}:${window.location.port}/ws/chat/messages`)
 }
 
+const isInViewport = (element) => {
+  const rect = element.getBoundingClientRect()
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0
+  )
+}
 
 const runChat = () => {
   const ws = createWebSocketConnection()
@@ -33,6 +41,13 @@ const runChat = () => {
 
       container.appendChild(message)
     })
+
+    getChat().querySelectorAll('.message').forEach((message) => {
+      if (!isInViewport(message)) {
+        message.classList.toggle('animate__fadeInUp', false)
+        message.classList.toggle('animate__fadeOutUp', true)
+      }
+    })
   })
 }
 

assets/src/scss/main.scss

@@ -18,6 +18,8 @@
   --theme-color-users-5: var(--color-owncast-user-5);
   --theme-color-users-6: var(--color-owncast-user-6);
   --theme-color-users-7: var(--color-owncast-user-7);
+
+  --animate-duration: 500ms;
 }
 
 #chat {

cmd/server/server.go

@@ -7,7 +7,6 @@ import (
 	"log"
 	"net/http"
 	"text/template"
-	"time"
 
 	rice "github.com/GeertJohan/go.rice"
 	"github.com/go-playground/validator"
@@ -15,7 +14,7 @@ import (
 	"github.com/labstack/echo/v4/middleware"
 	"gitnet.fr/deblan/owncast-webhook/internal/client/twitch"
 	"gitnet.fr/deblan/owncast-webhook/internal/config"
-	"gitnet.fr/deblan/owncast-webhook/internal/store"
+	"gitnet.fr/deblan/owncast-webhook/internal/test"
 	"gitnet.fr/deblan/owncast-webhook/internal/web/router"
 )
 
@@ -46,12 +45,7 @@ func main() {
 	router.RegisterControllers(e)
 
 	if conf.Test.Enable {
-		go func() {
-			for {
-				store.GetMessageStore().Add(store.TestMessage{})
-				time.Sleep(1 * time.Second)
-			}
-		}()
+		test.GenerateFakeMessages()
 	}
 
 	if conf.Twitch.Enable {

go.mod

@@ -6,6 +6,7 @@ require (
 	github.com/GeertJohan/go.rice v1.0.3
 	github.com/gempir/go-twitch-irc/v4 v4.2.0
 	github.com/go-playground/validator v9.31.0+incompatible
+	github.com/gorilla/websocket v1.5.3
 	github.com/labstack/echo/v4 v4.12.0
 	gopkg.in/ini.v1 v1.67.0
 	maragu.dev/gomponents v1.2.0
@@ -16,7 +17,6 @@ require (
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
-	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
@@ -27,7 +27,7 @@ require (
 	golang.org/x/crypto v0.27.0 // indirect
 	golang.org/x/net v0.28.0 // indirect
 	golang.org/x/sys v0.25.0 // indirect
-	golang.org/x/text v0.18.0 // indirect
+	golang.org/x/text v0.28.0 // indirect
 	golang.org/x/time v0.5.0 // indirect
 	gopkg.in/go-playground/assert.v1 v1.2.1 // indirect
 )

go.sum

@@ -48,8 +48,8 @@ golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.25.0 h1:r+8e+loiHxRqhXVl6ML1nO3l1+oFoWbnlu2Ehimmi34=
 golang.org/x/sys v0.25.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.18.0 h1:XvMDiNzPAl0jr17s6W9lcaIhGUfUORdGCNsuLmPG224=
-golang.org/x/text v0.18.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+golang.org/x/text v0.28.0 h1:rhazDwis8INMIwQ4tpjLDzUhx6RlXqZNPEM0huQojng=
+golang.org/x/text v0.28.0/go.mod h1:U8nCwOR8jO/marOQ0QbDiOngZVEBB7MAiitBuMjXiNU=
 golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
 golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 gopkg.in/go-playground/assert.v1 v1.2.1 h1:xoYuJVE7KT85PYWrN730RguIQO0ePzVRfFMXadIrXTM=

internal/test/fake.go

@@ -0,0 +1,21 @@
+package test
+
+import (
+	"math/rand"
+	"time"
+
+	"gitnet.fr/deblan/owncast-webhook/internal/store"
+)
+
+func GenerateFakeMessages() {
+	go func() {
+		for i := 0; i < 10; i++ {
+			store.GetMessageStore().Add(store.TestMessage{})
+			time.Sleep(time.Duration(rand.Intn(3000-100)+100) * time.Millisecond)
+		}
+		// for {
+		// 	store.GetMessageStore().Add(store.TestMessage{})
+		// 	time.Sleep(time.Duration(rand.Intn(3000-100)+100) * time.Millisecond)
+		// }
+	}()
+}

internal/web/controller/chat/controller.go

@@ -77,10 +77,7 @@ func (ctrl *Controller) Messages(c echo.Context) error {
 		},
 		Body: []Node{
 			ID("chat"),
-			Div(
-				Class("messages"),
-				Map(store.GetMessageStore().All(), CreateMessageView),
-			),
+			Div(Class("messages")),
 			Group(assets.EntrypointJs("main")),
 		},
 	})

internal/web/controller/chat/utils.go

@@ -34,7 +34,7 @@ func CreateMessageView(message store.MessageInterface) Node {
 	}
 
 	return Div(
-		Class("message animate__animated animate__fadeInRight"),
+		Class("message animate__animated animate__fadeInUp"),
 		ID(message.ID()),
 		containerStyle,
 		Div(