Twitchat icon indicating copy to clipboard operation
Twitchat copied to clipboard

feat(overlay): add multi-instance chat overlay

Open Drilmo opened this issue 2 weeks ago • 1 comments

Summary

Add a new customizable chat overlay that can display messages and events from Twitch, YouTube, TikTok and Kick streams.

Features

  • Multiple overlay instances with independent configurations
  • 7 visual styles: default, twitch, bubbles, gradient, neon, minimal, glass (liquid glass effect)
  • All event types supported: follows, subs, raids, cheers, bans, rewards, donations (Ko-fi, Streamlabs, StreamElements, Tipeee, Tiltify, Patreon), etc.
  • Multi-channel support: source indicator when connected to multiple channels, connect/disconnect messages with channel avatar
  • Configurable: message duration, delay, max messages, entrance animations (6 types), size presets (6 sizes)
  • Filters: by platform, message type, users, and commands
  • Full i18n support (EN/FR) for all event labels
  • CSS customization documentation for streamers

Files changed

  • OverlayChat.vue: Main overlay component
  • OverlayParamsChat.vue: Configuration panel
  • storeChat.ts: Data persistence and event handling
  • TwitchatDataTypes.ts: ChatOverlayParams and ChatOverlayLabels types
  • i18n/en/overlay.json & i18n/fr/overlay.json: Translations

Test plan

  • [ ] Create a new chat overlay instance
  • [ ] Test each visual style (default, twitch, bubbles, gradient, neon, minimal, glass)
  • [ ] Verify messages and events display correctly
  • [ ] Test filters (platform, message types, users)
  • [ ] Test entrance animations
  • [ ] Verify i18n works in both EN and FR
  • [ ] Test multi-channel source indicator
  • [ ] Verify CSS customization works via OBS browser source

🤖 Generated with Claude Code

Drilmo avatar Dec 08 '25 20:12 Drilmo