Twitchat
Twitchat copied to clipboard
feat(overlay): add multi-instance chat overlay
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 componentOverlayParamsChat.vue: Configuration panelstoreChat.ts: Data persistence and event handlingTwitchatDataTypes.ts: ChatOverlayParams and ChatOverlayLabels typesi18n/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