Conversation
UI Enhancements: - Make entire SpotifyWebPlayer header bar clickable when expanded - Previously only the down arrow icon was clickable - Add hover effect (bg-gray-900) for better visual feedback - Improve accessibility with proper ARIA labels and keyboard support - Create symmetrical UX with minimized player (both fully clickable) AI Improvements: - Enhance mood analysis prompt for more cohesive playlist generation - Add explicit constraints for genre coherence and track selection - Emphasize playlist unity over random song matching - Improve visual analysis guidelines (lighting, colors, composition) - Add examples of good playlist cohesion patterns Technical Details: - Removed nested button element in expanded player header - Applied onclick handler directly to header div - Maintained all existing functionality and accessibility
- Moved draggable attribute from track container to drag handle - Added ondragstart and ondragend to handle element only - Enhanced drag image to show entire track row during drag - Changed cursor from cursor-move to cursor-grab/cursor-grabbing - Prevents accidental dragging when clicking other track elements This improves UX by making drag behavior more intentional and preventing conflicts with other click interactions like playing tracks or removing them.
- Created TypeScript scroller utility in src/lib/utils/scroller.ts - 30px edge-detection zones for smooth auto-scrolling - Automatic acceleration based on proximity to edge - Support for both vertical and horizontal scrolling - Updated PlaylistDisplay component: - Wrapped track list in scrollable container (max-h-60vh/70vh responsive) - Integrated makeScroller() with existing drag handlers - Added scroll cleanup on drag end and drop events - Enhanced accessibility with ARIA labels and roles - Features: - Container-level scrolling (not window-level) - Smooth 60fps scrolling with requestAnimationFrame - Auto-stop when cursor moves away from edges - Smart activation only when content overflows - No conflicts with mobile swipe gestures
- Removed scrollable container wrapper (max-h-60vh/70vh) - Updated scroller to target document.documentElement (window) - Simplified component by removing trackListContainer state - Track list now scrolls the entire page when dragging near edges This provides a better UX as the entire window scrolls naturally rather than being constrained to a fixed-height container.
- Added BOTTOM_OFFSET_PX (80px) constant to account for fixed player - Updated scroll zone calculation to subtract offset from window height - Also check for document.documentElement in addition to scrollingElement - Allows downward scrolling to trigger properly above the fixed player This fixes the issue where dragging down wouldn't trigger auto-scroll because the fixed player at the bottom was blocking the drag zone.
- Playlist title: text-2xl (mobile) → text-4xl (desktop) - Track count/duration: text-base (mobile) → text-lg (desktop) - Track name: text-base (mobile) → text-lg (desktop) - Artist name: text-sm (mobile) → text-base (desktop) Improves readability and spacing on smaller screens.
Removed event.preventDefault() call from handleTouchMove to fix console warnings: "Unable to preventDefault inside passive event listener invocation." Modern browsers make touch event listeners passive by default for performance. The CSS touch-pan-y class already restricts touch scrolling to vertical direction, so the preventDefault was redundant. The swipe-to-delete functionality still works correctly without it.
- Playlist title: text-xl (mobile) → text-4xl (desktop) Previously text-2xl was still too large on mobile - Track count/duration: text-sm (mobile) → text-lg (desktop) - Track name: text-sm (mobile) → text-lg (desktop) - Artist name: text-xs (mobile) → text-base (desktop) This provides much more compact text on mobile screens.
- Created CSS marquee animation for track names and artist names - Text scrolls continuously when it overflows the container - Animation pauses on hover for better readability - Duplicates text seamlessly for infinite loop effect - 15 second animation duration for smooth scrolling This ensures long track titles are fully readable instead of being truncated with ellipsis.
- Removed marquee animation from artist names - Artist names now use standard truncate with ellipsis - Marquee effect only applies to track titles (h3 elements) This provides a cleaner look while ensuring track titles are fully readable when they overflow.
- First tap/click selects a track (blue highlight) - Second tap/click on selected track plays it - Selection state shows with bg-blue-100 and border-blue-600 - Prevents click handler when user is swiping (>10px movement) - Added keyboard support (Enter/Space) for accessibility - Changed role from listitem to button with aria-label - Double-click still works for desktop users This provides better mobile UX by giving users visual feedback before committing to playing a track.
- Removed static bg-white class that was preventing highlights - Made all background colors conditional based on state - Added conditional border-black for default state - Fixed class specificity so selected state (bg-blue-100) shows The issue was that bg-white in the base class had higher specificity than the conditional class:bg-blue-100, preventing the blue highlight from appearing on selection.
Added custom CSS classes with @media (max-width: 768px) to ensure proper font sizing on mobile devices: - .playlist-title: 1.125rem (18px) on mobile - .track-title: 0.875rem (14px) on mobile - .track-artist: 0.75rem (12px) on mobile - .track-count: 0.875rem (14px) on mobile This ensures fonts are appropriately sized on mobile regardless of Tailwind's sm: breakpoint behavior (640px), using a more standard mobile breakpoint at 768px.
- Marquee animation now only activates when track is selected - Unselected tracks show truncated text with ellipsis - Added .marquee-active class that applies when selectedTrackIndex matches - Removed default animation from .marquee-content - Non-selected tracks use text-overflow: ellipsis for cleaner appearance This provides better visual feedback - the marquee draws attention to the selected track while keeping other tracks compact.
|
🚀 Preview Deployment: https://sono-lens-ij8371gmn-mario-guillens-projects.vercel.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.