assets/src/js/lib/chat.js

@@ -12,11 +12,6 @@ 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 - 90) > 0
-}
 
 const runChat = () => {
   const ws = createWebSocketConnection()
@@ -38,13 +33,6 @@ 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,8 +18,6 @@
   --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,6 +7,7 @@ import (
 	"log"
 	"net/http"
 	"text/template"
+	"time"
 
 	rice "github.com/GeertJohan/go.rice"
 	"github.com/go-playground/validator"
@@ -14,7 +15,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/test"
+	"gitnet.fr/deblan/owncast-webhook/internal/store"
 	"gitnet.fr/deblan/owncast-webhook/internal/web/router"
 )
 
@@ -45,7 +46,12 @@ func main() {
 	router.RegisterControllers(e)
 
 	if conf.Test.Enable {
-		test.GenerateFakeMessages()
+		go func() {
+			for {
+				store.GetMessageStore().Add(store.TestMessage{})
+				time.Sleep(1 * time.Second)
+			}
+		}()
 	}
 
 	if conf.Twitch.Enable {

go.mod

@@ -6,7 +6,6 @@ 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
@@ -14,10 +13,10 @@ require (
 
 require (
 	github.com/daaku/go.zipexe v1.0.2 // indirect
-	github.com/go-faker/faker/v4 v4.6.1 // indirect
 	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
@@ -28,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.28.0 // indirect
+	golang.org/x/text v0.18.0 // indirect
 	golang.org/x/time v0.5.0 // indirect
 	gopkg.in/go-playground/assert.v1 v1.2.1 // indirect
 )

go.sum

@@ -8,8 +8,6 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/gempir/go-twitch-irc/v4 v4.2.0 h1:OCeff+1aH4CZIOxgKOJ8dQjh+1ppC6sLWrXOcpGZyq4=
 github.com/gempir/go-twitch-irc/v4 v4.2.0/go.mod h1:QsOMMAk470uxQ7EYD9GJBGAVqM/jDrXBNbuePfTauzg=
-github.com/go-faker/faker/v4 v4.6.1 h1:xUyVpAjEtB04l6XFY0V/29oR332rOSPWV4lU8RwDt4k=
-github.com/go-faker/faker/v4 v4.6.1/go.mod h1:arSdxNCSt7mOhdk8tEolvHeIJ7eX4OX80wXjKKvkKBY=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
@@ -50,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.28.0 h1:rhazDwis8INMIwQ4tpjLDzUhx6RlXqZNPEM0huQojng=
-golang.org/x/text v0.28.0/go.mod h1:U8nCwOR8jO/marOQ0QbDiOngZVEBB7MAiitBuMjXiNU=
+golang.org/x/text v0.18.0 h1:XvMDiNzPAl0jr17s6W9lcaIhGUfUORdGCNsuLmPG224=
+golang.org/x/text v0.18.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
 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/store/test_message.go

@@ -1,8 +1,10 @@
 package store
 
 import (
+	"fmt"
+	"math/rand"
+
 	"github.com/gempir/go-twitch-irc/v4"
-	"github.com/go-faker/faker/v4"
 )
 
 type TestMessage struct {
@@ -10,7 +12,7 @@ type TestMessage struct {
 }
 
 func (o TestMessage) ID() string {
-	return faker.Sentence()
+	return fmt.Sprintf("%f", rand.Float64())
 }
 
 func (o TestMessage) Visible() bool {
@@ -22,9 +24,9 @@ func (o TestMessage) Origin() MessageOrigin {
 }
 
 func (o TestMessage) Author() string {
-	return faker.Username()
+	return fmt.Sprintf("%f", rand.Float64())
 }
 
 func (o TestMessage) Content() string {
-	return faker.Sentence()
+	return fmt.Sprintf("%f", rand.Float64())
 }

internal/test/fake.go

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

internal/web/controller/chat/controller.go

@@ -77,7 +77,10 @@ func (ctrl *Controller) Messages(c echo.Context) error {
 		},
 		Body: []Node{
 			ID("chat"),
-			Div(Class("messages")),
+			Div(
+				Class("messages"),
+				Map(store.GetMessageStore().All(), CreateMessageView),
+			),
 			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__fadeInUp"),
+		Class("message animate__animated animate__fadeInRight"),
 		ID(message.ID()),
 		containerStyle,
 		Div(