yusufipek/YTChatHub
1
0
Fork 0
mirror of https://github.com/yusufipk/YTChatHub.git synced 2026-09-11 19:06:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add support for super stickers in chat and overlay components, including image display, accessibility labels, and backend parsing enhancements

Browse Source
This commit is contained in:
Yusuf İpek
2025-10-12 21:37:53 +03:00
parent da1499733f
commit 1678117d16
10 changed files with 138 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
memory-bank/activeContext.md
+7 -5
View File
@@ -29,13 +29,15 @@
- **Image Proxy**: Added `/proxy/image` endpoint in backend with in-memory caching (24hr TTL, max 1000 images) to prevent YouTube CDN 429 rate limit errors. All avatars, badges, and emojis now route through proxy with stale-on-error fallback.
- **Message Switching Animation**: Added smooth fade-out/fade-in transitions when switching between selected messages in overlay (300ms duration).
- **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.
- **Task Master AI Integration**: Initialized Task Master AI with OpenRouter's x-ai/grok-code-fast-1 model for task management. Successfully completed Task 2 (Super Sticker Display) with 5 subtasks.
## Immediate Next Steps
1. Test with live YouTube stream to verify badge parsing and superchat detection
2. Add search/filter functionality for chat messages
3. Implement error recovery and reconnection logic for stream interruptions
4. Add keyboard shortcuts for quick message selection
5. Consider persistent cache for images (SQLite or file-based) for better reliability
1. Implement chat leaderboard badge support (Task 3)
2. Add live poll display functionality (Task 4)
3. Implement user authentication via YouTube OAuth 2.0 (Task 5)
4. Consider persistent cache for images (SQLite or file-based) for better reliability
5. Add error recovery and reconnection logic for stream interruptions
## Open Questions
- Whether to add message search/filtering UI controls
memory-bank/progress.md
+4 -3
View File
@@ -21,7 +21,7 @@
- [x] Conditional auto-scrolling for chat panels.
- [x] Timezone-aware timestamp formatting for all messages.
- [x] Visual selection state management (active, normal, previously-selected).
- [ ] Fix super sticker image not showing.
- [x] Fix super sticker image not showing.
- [ ] Add chat leaderboard badge.
- [ ] Show open polls.
- [ ] Handle error states (rate limits, disconnects) gracefully in UI.
@@ -55,7 +55,8 @@
- **✅ Timestamp Resolution Fixed**: Critical bug resolved - timestamps now display correct current time instead of 1970 epoch
- **✅ Timezone Support**: Dashboard timestamps display in user's local timezone with browser detection and GMT+3 fallback
- **✅ Visual Selection States**: Three-tier feedback system (active/normal/previously-selected) for better UX
- **✅ Image Proxy Implemented**: Backend now proxies all YouTube CDN images (avatars, badges, emojis) with 24hr in-memory cache to prevent 429 rate limit errors
- **✅ Image Proxy Implemented**: Backend now proxies all YouTube CDN images (avatars, badges, emojis, super stickers) with 24hr in-memory cache to prevent 429 rate limit errors. Added lh3.googleusercontent.com domain for super stickers.
- **✅ Overlay Animations**: Smooth fade-out/in transitions when switching between messages
- **✅ Smart Storage**: Regular messages limited to 200, superchats and memberships preserved for entire session
- **Next**: Add search/filter, error recovery, and polish UX details
- **✅ Super Sticker Support**: Super sticker images now display correctly in both dashboard and overlay with proper error handling and accessibility labels
- **Next**: Add chat leaderboard badge, show open polls, implement error recovery
memory-bank/systemPatterns.md
+1
View File
@@ -21,3 +21,4 @@
- **Image Proxy Pattern**: Backend `/proxy/image` endpoint caches YouTube CDN images (avatars, badges, emojis) with MD5-hashed keys, 24hr TTL, and 1000-image LRU eviction. Returns stale cache on 429 errors or network failures. Frontend `proxyImageUrl()` helper transparently rewrites YouTube CDN URLs to use proxy.
- **Smart Message Storage**: Intelligent trimming system preserves all superchats and memberships for entire session while limiting regular messages to 200 most recent. Trimming occurs on every message addition to prevent special message loss. Uses order-preserving algorithm that identifies special messages by index and removes only oldest regular messages.
- **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.