From 68c05816dd5e959da4329ce20b36362c5098b1f2 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Sun, 7 Sep 2025 20:14:05 +0200 Subject: [PATCH 1/2] feat(chat): add effect and improve faker --- assets/src/js/lib/chat.js | 15 +++++++++++++++ assets/src/scss/main.scss | 2 ++ cmd/server/server.go | 10 ++-------- go.mod | 4 ++-- go.sum | 4 ++-- internal/test/fake.go | 21 +++++++++++++++++++++ internal/web/controller/chat/controller.go | 5 +---- internal/web/controller/chat/utils.go | 2 +- 8 files changed, 46 insertions(+), 17 deletions(-) create mode 100644 internal/test/fake.go diff --git a/assets/src/js/lib/chat.js b/assets/src/js/lib/chat.js index bfc0fc2..8a4e85c 100644 --- a/assets/src/js/lib/chat.js +++ b/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) + } + }) }) } diff --git a/assets/src/scss/main.scss b/assets/src/scss/main.scss index d8bbd1b..7110344 100644 --- a/assets/src/scss/main.scss +++ b/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 { diff --git a/cmd/server/server.go b/cmd/server/server.go index 69fa0fd..9e16d5c 100644 --- a/cmd/server/server.go +++ b/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 { diff --git a/go.mod b/go.mod index e135418..3e2844c 100644 --- a/go.mod +++ b/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 ) diff --git a/go.sum b/go.sum index 225c6a1..4884e3f 100644 --- a/go.sum +++ b/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= diff --git a/internal/test/fake.go b/internal/test/fake.go new file mode 100644 index 0000000..f88504e --- /dev/null +++ b/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) + // } + }() +} diff --git a/internal/web/controller/chat/controller.go b/internal/web/controller/chat/controller.go index eee0731..7bc963f 100644 --- a/internal/web/controller/chat/controller.go +++ b/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")), }, }) diff --git a/internal/web/controller/chat/utils.go b/internal/web/controller/chat/utils.go index 63b62c3..7b6ef4a 100644 --- a/internal/web/controller/chat/utils.go +++ b/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( From 4a52ec3d33e6f85c61d7e79403f8a211b870eca1 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Sun, 7 Sep 2025 20:22:16 +0200 Subject: [PATCH 2/2] feat(chat): add effect and improve faker --- assets/src/js/lib/chat.js | 5 +---- go.mod | 1 + go.sum | 2 ++ internal/store/test_message.go | 10 ++++------ internal/test/fake.go | 6 +----- 5 files changed, 9 insertions(+), 15 deletions(-) diff --git a/assets/src/js/lib/chat.js b/assets/src/js/lib/chat.js index 8a4e85c..38a6666 100644 --- a/assets/src/js/lib/chat.js +++ b/assets/src/js/lib/chat.js @@ -15,10 +15,7 @@ const createWebSocketConnection = () => { const isInViewport = (element) => { const rect = element.getBoundingClientRect() - return ( - rect.top >= 0 && - rect.left >= 0 - ) + return (rect.top - 90) > 0 } const runChat = () => { diff --git a/go.mod b/go.mod index 3e2844c..12784d9 100644 --- a/go.mod +++ b/go.mod @@ -14,6 +14,7 @@ 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 diff --git a/go.sum b/go.sum index 4884e3f..bdbad59 100644 --- a/go.sum +++ b/go.sum @@ -8,6 +8,8 @@ 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= diff --git a/internal/store/test_message.go b/internal/store/test_message.go index 8b66af0..1cdfe12 100644 --- a/internal/store/test_message.go +++ b/internal/store/test_message.go @@ -1,10 +1,8 @@ package store import ( - "fmt" - "math/rand" - "github.com/gempir/go-twitch-irc/v4" + "github.com/go-faker/faker/v4" ) type TestMessage struct { @@ -12,7 +10,7 @@ type TestMessage struct { } func (o TestMessage) ID() string { - return fmt.Sprintf("%f", rand.Float64()) + return faker.Sentence() } func (o TestMessage) Visible() bool { @@ -24,9 +22,9 @@ func (o TestMessage) Origin() MessageOrigin { } func (o TestMessage) Author() string { - return fmt.Sprintf("%f", rand.Float64()) + return faker.Username() } func (o TestMessage) Content() string { - return fmt.Sprintf("%f", rand.Float64()) + return faker.Sentence() } diff --git a/internal/test/fake.go b/internal/test/fake.go index f88504e..90fbd12 100644 --- a/internal/test/fake.go +++ b/internal/test/fake.go @@ -9,13 +9,9 @@ import ( func GenerateFakeMessages() { go func() { - for i := 0; i < 10; i++ { + for { 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) - // } }() }