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

refactor: extract ChatListPanel component and add conditional auto-scroll behavior

Browse Source
This commit is contained in:
Yusuf İpek
2025-10-05 04:42:47 +03:00
parent aef59fb291
commit 0f01640050
7 changed files with 125 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
memory-bank/activeContext.md
+5 -11
View File
@@ -13,17 +13,11 @@
- 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
- Centered overlay message card content so live chat, superchat, and membership boxes align for OBS
- Reworked dashboard grid so live chat runs full-height on the left and super chat/new member panels stack in a centered right column with tuned spacing and clear separation between the stacked cards
- Moved the connection control into the header (inline, centered between logo/title and status) with a compact input width
- Fixed panel heights to fit within the viewport (no page scroll); grid rows split 1fr/1fr with internal lists scrolling so bottom edges are always visible
- Improved parsing so superchat amounts/colors show reliably; overlay and dashboard both display the amount
- Strengthened superchat amount extraction with nested field handling and regex-based fallback; UI now shows amount + currency on overlay and dashboard
- Overlay membership banner now shows the membership level text
- Membership gifts are recognized and included in the New Members list
- Completely redesigned UI to match provided screenshot: minimal dark theme (#0a0a0a bg), compact tabs with counts, tight spacing throughout
- Added connection prompt screen that shows initially and disappears after successful YouTube Live stream connection
- Reduced all padding and gaps to create a more compact, space-efficient layout
- Fixed CLEAR button to appear in bottom-right corner only when a message is selected
- **UI Layout Fixed**: Adjusted the dashboard grid to eliminate unnecessary space and properly align content. The Super Chat card is now left-aligned for better visual consistency.
- **Currency Parsing**: Improved the backend logic to correctly parse Super Chat amounts and currencies, including for non-standard formats like TRY. The hardcoded 'USD' fallback has been removed.
- **Conditional Auto-Scroll**: Implemented intelligent auto-scrolling that only activates when the user is at the bottom of the chat, preventing interruptions when reading older messages.
- **Overlay Redesign**: The overlay has been completely restyled to match the dashboard's compact, dark theme. It now displays new member announcements.
- **Gifted Memberships**: The 'Memberships & Milestones' panel now correctly displays the user who purchased the gift, not the recipient.
## Immediate Next Steps
1. Test with live YouTube stream to verify badge parsing and superchat detection
memory-bank/progress.md
+5 -2
View File
@@ -18,6 +18,7 @@
- [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.
- [x] Conditional auto-scrolling for chat panels.
- [ ] Add filters/search functionality.
- [ ] Handle error states (rate limits, disconnects) gracefully in UI.
@@ -25,11 +26,11 @@
- [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.
- [x] Display new member announcements on overlay.
- [ ] Add entrance/exit animations for message transitions.
- [ ] Add theme controls and customization options.
## Phase 4 – Reliability & Polish
- [ ] Add optional persistence (SQLite) and crash recovery.
- [ ] Expand logging/metrics for long-stream observability.
- [ ] Write tests (unit/integration) and contributor documentation.
@@ -37,5 +38,7 @@
- **✅ 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
- **✅ Rich Parsing**: Moderators, members, verified users, superchats, and membership gifts all detected and displayed. Currency parsing is now more robust.
- **✅ UI Polished**: The dashboard and overlay layouts have been refined for better spacing and alignment. The overlay now matches the dashboard's aesthetic.
- **✅ Auto-Scroll Implemented**: Chat panels now auto-scroll intelligently.
- **Next**: Add search/filter, error recovery, and polish UX details
memory-bank/projectbrief.md
+3 -3
View File
@@ -16,6 +16,6 @@ Build a desktop-operated, open-source YouTube Live chat client that delivers a f
- Must tolerate YouTube API rate limits and intermittent network issues without crashing.
## Success Criteria
- Operator dashboard stays responsive during long streams (>4 hours) without memory leaks.
- Overlay updates within ~1 second of operator selection.
- Project documentation enables others to reproduce setup from scratch.
- **Responsive Dashboard**: The operator dashboard remains responsive during long streams (>4 hours) without memory leaks.
- **Instant Overlay Updates**: The OBS overlay updates in real-time when a message is selected.
- **Comprehensive Documentation**: The project includes a detailed README and a well-maintained Memory Bank to facilitate easy setup and contribution.