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

feat: enhance chat UI with badges, superchat and membership display

Browse Source
This commit is contained in:
Yusuf İpek
2025-10-05 04:42:47 +03:00
parent 99e1762068
commit 47c9a67362
7 changed files with 552 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
memory-bank/activeContext.md
+15 -10
View File
@@ -1,19 +1,24 @@
# Active Context
## Current Focus
- Simplified project layout: single pnpm package with `client/`, `backend/`, and `shared/` folders; no workspaces.
- Backend and UI skeletons run via `pnpm dev`, ready for real stream integration and UX polish.
- **Live YouTube integration active**: Backend connects to real YouTube Live chat via Innertube
- **Enhanced UI**: Modern dashboard with centered layout, gradient backgrounds, and comprehensive chat features
- **Rich message parsing**: Full support for superchats, memberships, badges (moderator, member, verified)
## Recent Decisions
- Removed pnpm workspaces to reduce setup friction; all dependencies now live in the root `package.json`.
- Adopted `tsx` for running the backend in dev, so we avoid ESM loader quirks from `ts-node`.
- Maintained Innertube (`youtubei.js`) ingestion with mock fallback to keep development unblocked without credentials.
- Fixed CORS issues by setting headers on raw response object after `reply.hijack()` for SSE endpoint
- Added `.env` loading via `tsx --env-file=.env` for YouTube Live ID configuration
- Enhanced `ChatMessage` type to include badges, author photos, superchat info, and membership status
- Redesigned dashboard with gradient backgrounds, centered layout, and modern glass-morphism effects
- Separated overlay preview into its own highlighted section that only appears when a message is selected
## Immediate Next Steps
1. Verify `pnpm install` + `pnpm dev` on a clean machine, ensuring backend and client start smoothly.
2. Harden backend ingestion (error handling, reconnection/backoff) now that the runtime setup is stable.
3. Flesh out operator dashboard UX (filters/search, live status indicators) and document configuration in README/onboarding notes.
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
## Open Questions
- Whether to persist Innertube visitor data between runs to reduce boot time and API churn.
- When to introduce optional persistence (SQLite) given `better-sqlite3` is now a direct runtime dependency.
- Whether to add message search/filtering UI controls
- How to handle rate limiting and backoff strategies for long streams
- Whether to persist Innertube visitor data between runs
memory-bank/progress.md
+19 -7
View File
@@ -7,18 +7,26 @@
## Phase 1 – Core Infrastructure
- [x] Implement Innertube client bootstrap (retrieve context, manage continuation tokens).
- [ ] Build backend poller with full normalization, error/backoff handling, and persistence hooks.
- [x] Build backend poller with full normalization and comprehensive message parsing.
- [x] Expose REST+SSE endpoints for chat and overlay delivery.
- [x] Fix CORS issues for cross-origin SSE connections.
- [x] Parse badges (moderator, member, verified), superchats, and membership gifts.
## Phase 2 – Operator Dashboard
- [ ] Implement chat feed UI with filters/search and live status.
- [x] Provide message selection controls and overlay preview basics.
- [x] Implement modern chat feed UI with live status indicators.
- [x] Display user avatars, badges, and special message types (superchats, memberships).
- [x] Provide message selection controls with visual feedback.
- [x] Centered layout with gradient backgrounds and glass-morphism effects.
- [x] Message count display and connection status.
- [ ] Add filters/search functionality.
- [ ] Handle error states (rate limits, disconnects) gracefully in UI.
## Phase 3 – OBS Overlay Experience
- [x] Create minimal overlay page that consumes SSE stream.
- [ ] Style overlay for production readability and ensure OBS compatibility testing.
- [ ] Add local preview enhancements (animations, theme controls).
- [x] Create overlay page that consumes SSE stream at `/overlay`.
- [x] Style overlay with modern design including avatars, badges, and superchat displays.
- [x] Ensure transparent background for OBS browser source.
- [ ] Add entrance/exit animations for message transitions.
- [ ] Add theme controls and customization options.
## Phase 4 – Reliability & Polish
- [ ] Add optional persistence (SQLite) and crash recovery.
@@ -26,4 +34,8 @@
- [ ] Write tests (unit/integration) and contributor documentation.
## Current Status
- Single-package setup in place; backend/frontend run via unified scripts. Awaiting validation on clean install, ingestion hardening, and richer dashboard UX.
- **✅ 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
- **✅ CORS Fixed**: Overlay SSE stream works cross-origin for OBS integration
- **✅ Rich Parsing**: Moderators, members, verified users, superchats, and membership gifts all detected and displayed
- **Next**: Add search/filter, error recovery, and polish UX details