AudiOhm/archives/docs/QUEUE_VIEW_IMPLEMENTATION.md

Queue View Implementation - Spotify Le 2

Overview

Complete Queue View implementation for Spotify Le 2 with real-time playback management, drag-to-reorder, swipe-to-remove, and a neon cyberpunk theme.

Files Created/Modified

1. Enhanced Provider (frontend/lib/presentation/providers/music_provider.dart)

Added:

• QueueViewData class - Data model for queue view with helper methods
• queueProvider - Riverpod provider that exposes queue data to UI

Key Features:

• nextTracks - Get upcoming tracks after current
• previousTracks - Get previously played tracks
• queueCount - Number of tracks in queue excluding current
• hasNextTracks / hasPreviousTracks - Boolean checks

2. Queue Track Tile (frontend/lib/presentation/widgets/player/queue_track_tile.dart)

New File

Features:

• Displays track with album art, title, artist, duration
• Animated playing indicator for current track
• Drag handle for reordering
• Remove button with red accent
• Visual highlighting for currently playing track
• Three-bar equalizer animation for playing state

Components:

• _PlayingAnimation - Animated equalizer bars

3. Queue View Page (frontend/lib/presentation/pages/player/queue_view_page.dart)

New File

Layout:

• Header: Back button, title, queue count, clear button
• Now Playing Section: Large album art, track info, full playback controls
• Queue Section: Reorderable list of upcoming tracks with swipe-to-dismiss

Features:

• Real-time updates with playback state
• Swipe left to remove tracks
• Drag and drop to reorder queue
• Tap track to jump to it
• Clear all upcoming tracks dialog
• Empty state with queue icon
• Full playback controls (play/pause, next, previous)
• Playing indicator with green dot

Visual Elements:

• Gradient backgrounds
• Neon glow effects (cyan, violet)
• Smooth slide transition animation
• Responsive layout

4. Mini Player Enhancement (frontend/lib/presentation/widgets/common/mini_player.dart)

Modified:

• Converted to ConsumerWidget for Riverpod integration
• Connected to playerProvider and queueProvider
• Added real-time album art display
• Added playing indicator (green dot)
• Integrated playback controls (play/pause, next, previous)
• New Queue Button:
  • Queue icon with notification badge
  • Shows count of upcoming tracks
  • Violet border when queue has tracks
  • Opens Queue View with slide animation

Theme & Design

Neon Cyberpunk Colors Used:

• Cyan (#00F0FF) - Primary accents, borders, glows
• Violet (#BF00FF) - Secondary accents, queue badge
• Rose (#FF006E) - Gradients
• Vert (#39FF14) - Playing indicator
• Rouge (#FF2A6D) - Remove button, clear button

Visual Effects:

• Gradient backgrounds (linear gradients)
• Box shadows with color glow
• Border opacity for depth
• Smooth animations (slide, scale, fade)
• Rounded corners (12px-16px radius)

Functionality

Queue Management:

1. View Queue: Tap queue button in mini player
2. Remove Track: Swipe left or tap X button
3. Reorder: Drag and drop tracks
4. Clear Queue: Tap "Clear" button in header
5. Jump to Track: Tap any track in queue

Playback Controls:

• Play/Pause: Toggle button with icon change
• Next/Previous: Skip through queue
• Seek: (Already in provider, can be added to UI)
• Progress: (Already in provider, can be added to UI)

Real-time Updates:

• Queue updates immediately when tracks are added/removed
• Playing indicator syncs with playback state
• Album art displays current track
• Queue count badge updates automatically

Integration Points

Used By:

• MiniPlayer widget - opens queue view
• PlayerProvider - manages queue state
• QueueProvider - exposes queue to UI

Dependencies:

• flutter_riverpod - State management
• just_audio - Audio playback (via playerProvider)
• Track entity - Domain model
• AppColors - Theme constants

Usage Example

// In any widget:
final queueData = ref.watch(queueProvider);

// Access queue properties:
queueData.currentTrack;      // Currently playing
queueData.nextTracks;         // List<Track> of upcoming
queueData.queueCount;         // Number of upcoming tracks
queueData.hasNextTracks;      // bool

// Modify queue:
ref.read(playerProvider.notifier).addToQueue(track);
ref.read(playerProvider.notifier).removeFromQueue(index);
ref.read(playerProvider.notifier).setQueue(tracks);

// Navigate to queue view:
Navigator.push(context, MaterialPageRoute(
  builder: (context) => const QueueViewPage(),
));

Future Enhancements

Potential Additions:

1. Shuffle Queue: Button to randomize queue order
2. Repeat Modes: All, One, Off
3. Add to Queue: From search/library views
4. Queue History: View previously played tracks
5. Save Queue: Create playlist from queue
6. Undo Remove: SnackBar with undo action
7. Queue Presets: Quick load saved queues
8. Smart Queue: AI-based recommendations

Desktop Layout:

• Side panel instead of full page
• Drag from library to queue
• Multiple queue support

Technical Notes

Performance:

• ReorderableListView for efficient reordering
• Provider for reactive updates (only rebuilds when needed)
• Image caching with fallback to icon

Accessibility:

• Semantic labels for controls
• Proper touch target sizes (40px minimum)
• High contrast colors (WCAG compliant)

Responsive:

• Works on mobile and desktop
• Adaptive layout (bottom sheet vs full page)
• Flexible widget sizing

File Structure

frontend/lib/
├── presentation/
│   ├── providers/
│   │   └── music_provider.dart (enhanced)
│   ├── pages/
│   │   └── player/
│   │       └── queue_view_page.dart (new)
│   └── widgets/
│       ├── common/
│       │   └── mini_player.dart (enhanced)
│       └── player/
│           └── queue_track_tile.dart (new)

Testing Recommendations

1. Unit Tests:

   • QueueViewData getters
   • Queue provider state updates
   • Reorder logic

2. Widget Tests:

   • Queue tile rendering
   • Remove button interaction
   • Drag and drop

3. Integration Tests:

   • Add to queue flow
   • Playback with queue
   • Clear queue

Summary

The Queue View is fully functional with:

• Complete queue management (view, remove, reorder, clear)
• Real-time playback integration
• Beautiful neon cyberpunk theme
• Smooth animations and interactions
• Responsive design for mobile/desktop
• Production-ready code quality

All components follow Flutter best practices and integrate seamlessly with the existing music provider architecture.