mirror of
https://github.com/yusufipk/YTChatHub.git
synced 2026-09-11 10:56:17 +00:00
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:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user