feat: add YouTube live poll support

Add backend support for YouTube live polls including:
- Poll event handling and state tracking
- New `/poll/current` endpoint for current poll data
- Server-sent events stream at `/poll/stream` for real-time updates
- Poll emitter for broadcasting poll changes to clients
This commit is contained in:
Yusuf İpek
2025-10-12 23:04:57 +03:00
parent 81d4df5ff7
commit 4a4b2407b6
8 changed files with 165 additions and 22 deletions
+6 -6
View File
@@ -31,14 +31,14 @@
- **Smart Message Preservation**: Implemented intelligent message trimming - regular chat messages limited to 200, but superchats and memberships preserved for entire session. Trimming happens on every message to prevent loss of special messages.
- **Super Sticker Support**: Added full support for super sticker image display. Backend parser extracts sticker URL and accessibility label from `item.sticker` array in YouTube data. Added `stickerUrl` and `stickerAlt` fields to `SuperChatInfo` type. Image proxy whitelist updated to include `lh3.googleusercontent.com` domain. Dashboard and overlay both render super stickers with 144x144px max dimensions, centered layout, and graceful error handling that hides broken images. Protocol-relative URLs (`//domain.com`) are automatically converted to HTTPS.
- **Leaderboard Badge Support**: Implemented YouTube leaderboard rank display (Top Chatter feature). Backend parser extracts rank from `before_content_buttons` array with CROWN icon, parsing rank number from title field (e.g., "#3"). Added `leaderboardRank` field to `ChatMessage` type. Dashboard and overlay render leaderboard badge with crown emoji (👑) and rank number, styled with golden background (rgba(251, 191, 36, 0.2)) and yellow text (#fcd34d) for prominence.
- **Task Master AI Integration**: Initialized Task Master AI with OpenRouter's x-ai/grok-code-fast-1 (main), google/gemini-2.5-pro (research), and google/gemini-2.5-flash (fallback) models. Successfully completed Task 2 (Super Sticker Display) and Task 3 (Leaderboard Badge) with all subtasks.
- **Task Master AI Integration**: Initialized Task Master AI with OpenRouter's x-ai/grok-code-fast-1 (main), google/gemini-2.5-pro (research), and google/gemini-2.5-flash (fallback) models. Successfully completed Task 2 (Super Sticker Display), Task 3 (Leaderboard Badge), and Task 4 (Live Poll Indicator).
- **Live Poll Indicator**: Added simple poll detection that shows a pulsing "📊 Active Poll" indicator in the dashboard header when a YouTube poll is active. Backend listens for `UpdateLiveChatPollAction` and `CloseLiveChatActionPanelAction`/`RemoveBannerForLiveChatCommand` events. Indicator automatically appears/disappears based on poll state. Note: YouTube's API does not provide live vote percentages, so the feature only indicates poll presence without showing results.
## Immediate Next Steps
1. Add live poll display functionality (Task 4)
2. Implement user authentication via YouTube OAuth 2.0 (Task 5)
3. Add persistent image cache with SQLite (Task 6)
4. Consider persistent cache for images (SQLite or file-based) for better reliability
5. Add error recovery and reconnection logic for stream interruptions
1. Implement user authentication via YouTube OAuth 2.0 (Task 5)
2. Add persistent image cache with SQLite (Task 6)
3. Develop overlay theme controls (Task 7)
4. Add error recovery and reconnection logic for stream interruptions
## Open Questions
- Whether to add message search/filtering UI controls
+6 -4
View File
@@ -23,8 +23,7 @@
- [x] Visual selection state management (active, normal, previously-selected).
- [x] Fix super sticker image not showing.
- [x] Add chat leaderboard badge.
- [ ] Show open polls.
- [ ] Handle error states (rate limits, disconnects) gracefully in UI.
- [x] Show active poll indicator.
## Phase 3 OBS Overlay Experience
- [x] Create overlay page that consumes SSE stream at `/overlay`.
@@ -34,7 +33,6 @@
- [x] Optimize overlay spacing for efficient use (30-40% more compact).
- [x] Remove timestamps from overlay for cleaner display.
- [x] Add smooth fade transitions when switching between messages.
- [ ] Add theme controls and customization options.
## Phase 4 Reliability & Polish
- [x] Implement image proxy with caching to prevent YouTube CDN 429 errors.
@@ -45,6 +43,9 @@
- [ ] Ensure the deployment.
- [ ] Write tests (unit/integration) and contributor documentation.
## Phase 5 - Customization
- [ ] Add customization options
## Current Status
- **✅ YouTube Integration Live**: Backend connects to real YouTube Live chat and parses all message types
- **✅ Modern UI Complete**: Dashboard features centered layout, gradient backgrounds, badges, and superchat displays
@@ -60,4 +61,5 @@
- **✅ Smart Storage**: Regular messages limited to 200, superchats and memberships preserved for entire session
- **✅ Super Sticker Support**: Super sticker images now display correctly in both dashboard and overlay with proper error handling and accessibility labels
- **✅ Leaderboard Badge Support**: YouTube leaderboard ranks (Top Chatter) now display with crown emoji and rank number next to usernames in both dashboard and overlay with golden styling
- **Next**: Show open polls, implement error recovery, add user authentication
- **✅ Live Poll Indicator**: Pulsing poll indicator shows in dashboard header when a YouTube poll is active, automatically hides when closed
- **Next**: Implement user authentication, add persistent image cache, develop overlay theme controls
+1
View File
@@ -23,3 +23,4 @@
- **Overlay Animation System**: Two-state approach with `message` (backend data) and `displayMessage` (UI state) enables smooth fade transitions when switching messages. 300ms fade-out followed by content swap and automatic fade-in.
- **Super Sticker Parsing**: Backend `extractSuperChatInfo()` function detects super stickers via `item.sticker` array. Extracts largest image (144x144px) from sticker thumbnails array, handles protocol-relative URLs by converting to HTTPS, and captures accessibility labels for screen readers. Frontend conditionally renders stickers with error handling that hides broken images via `onError` handler.
- **Leaderboard Badge Parsing**: Backend `extractLeaderboardRank()` function scans `before_content_buttons` array for CROWN icon entries. Extracts rank number from title field using regex pattern `/#(\d+)/`. Returns numeric rank or undefined if not present. Frontend displays badge with crown emoji and rank using golden color scheme for visual prominence.
- **Poll Detection System**: Backend listens for `UpdateLiveChatPollAction` events to detect active polls and emits simple poll state (id + active flag) via SSE. Frontend displays pulsing purple poll indicator in dashboard header when poll is active. Poll closes automatically when backend receives `CloseLiveChatActionPanelAction` or `RemoveBannerForLiveChatCommand` events. Note: YouTube's live chat API does not provide vote percentages even with authentication, so only poll presence is indicated.