merith-tk/stream-overlay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fade out, test debug point

Browse source
This commit is contained in:
Merith 2025-03-14 17:40:46 -07:00
parent f5a8dc5220
commit 3c1a8696cb
2 changed files with 59 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
main.go
View file

@ -64,6 +64,31 @@ func main() {
c.File("./static/overlay.html") // Serve the overlay HTML
})
// Test endpoint to simulate chat messages via POST requests
r.POST("/test/:channel", func(c *gin.Context) {
channel := c.Param("channel")
var request struct {
Username string `json:"username"`
Message string `json:"message"`
}
if err := c.ShouldBindJSON(&request); err != nil {
c.JSON(400, gin.H{"error": "Invalid request body"})
return
}
mu.Lock()
defer mu.Unlock()
messages := channelMessages[channel]
messages = append(messages, fmt.Sprintf("%s: %s", request.Username, request.Message))
if len(messages) > 100 { // Keep only the last 100 messages
messages = messages[1:]
}
channelMessages[channel] = messages
c.JSON(200, gin.H{"status": "message added"})
})
// Start the web server
go func() {
err := client.Connect()

39
static/overlay.html
View file

@ -5,6 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Twitch Chat Overlay</title>
<link rel="stylesheet" href="/static/css/style.css"> <!-- Link to external CSS -->
<style>
.message {
transition: opacity 1s, height 1s, margin 1s, padding 1s;
overflow: hidden;
}
.fade-out {
opacity: 0;
height: 0;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="chat"></div>
@ -33,11 +45,7 @@
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.textContent = msg;
// Fade out older messages if there are more than 10
if (data.messages.length > 10 && index < data.messages.length - 10) {
messageElement.classList.add('fade-out');
}
messageElement.timestamp = Date.now(); // Store the timestamp
chat.appendChild(messageElement);
});
@ -47,8 +55,29 @@
}
}
// Function to fade out old messages
function fadeOutOldMessages() {
const messages = document.querySelectorAll('#chat .message');
const now = Date.now();
const fadeOutDuration = 10000; // 10 seconds
messages.forEach(message => {
const age = now - message.timestamp;
if (age > fadeOutDuration) {
message.classList.add('fade-out');
// Remove the element from the DOM after the transition ends
message.addEventListener('transitionend', () => {
message.remove();
}, { once: true });
}
});
}
// Fetch chat messages every second
setInterval(fetchChat, 1000);
// Check and fade out old messages every second
setInterval(fadeOutOldMessages, 1000);
</script>
</body>
</html>