Music Player Components

​

Overview

​

MusicPlayerScreen

​

Parameters

​

Features

• Dual-page interface: Swipeable horizontal pager with Player and Lyrics pages
• Dynamic background: Blurred album artwork with gradient overlay
• Playback controls: Play/pause, skip, shuffle, and repeat controls
• Progress slider: Seekable progress bar with current/total time display
• Playlist management: Add current track to playlists via menu options
• Favorite toggle: Like/unlike tracks directly from the player
• Lyrics view: Synchronized lyrics display with tap-to-seek functionality

​

State Management

• currentTrack: Currently playing track information
• isPlaying: Playback state
• currentPosition: Playback position in milliseconds
• duration: Track duration in milliseconds
• isShuffleEnabled: Shuffle mode state
• repeatMode: Repeat mode (OFF, ALL, ONE)
• playingSource: Source context (e.g., “Local Music”, playlist name)
• lyrics: Synchronized lyrics data
• currentLyricIndex: Active lyric line index
• isCurrentTrackFavorite: Favorite status

​

Usage Example

@Composable
fun MusicPlayerContainer() {
    var showFullPlayer by remember { mutableStateOf(false) }
    
    if (showFullPlayer) {
        MusicPlayerScreen(
            onCollapse = { showFullPlayer = false }
        )
    }
}

​

Player Page Layout

1. Header: Collapse button, “Playing from” source label, options menu
2. Album art: 75% width, rounded corners with shadow
3. Track info: Title, artist, favorite button
4. Progress bar: Slider with time labels
5. Controls row: Shuffle, previous, play/pause, next, repeat

​

Lyrics Page Layout

• Compact track header with artwork and title
• LyricsScreen component with synchronized lyrics
• Click-to-seek functionality at specific lyric timestamps

​

Menu Options

• Add to Playlist: Opens AddToPlaylistBottomSheet for playlist selection

​

MiniPlayer

​

Parameters

​

Features

• Auto-hide: Only displays when a track is currently loaded
• Compact design: 64dp height with rounded corners
• Progress indicator: 2dp progress bar at bottom edge
• Quick controls: Play/pause and skip next buttons
• Glassy appearance: Semi-transparent background with 90% opacity

​

Layout Structure

1. Album artwork: 48x48dp with 8dp rounded corners
2. Track info: Title (bold, 14sp) and artist (12sp, gray)
3. Play/pause button: Icon toggles based on playback state
4. Skip next button: Advances to next track

​

Progress Bar

• Height: 2dp
• Background: White at 10% opacity
• Active color: Primary theme color
• Width: Calculated as currentPosition / duration

​

Usage Example

@Composable
fun MainScreen() {
    var showFullPlayer by remember { mutableStateOf(false) }
    
    Scaffold(
        bottomBar = {
            Column {
                MiniPlayer(
                    onClick = { showFullPlayer = true }
                )
                NavigationBar { /* ... */ }
            }
        }
    ) { /* content */ }
}

​

Styling

• Container: Color(0xFF1E1E1E).copy(alpha = 0.90f)
• Corner radius: 12dp
• Padding: 8dp horizontal, 4dp vertical outer padding
• Clickable: Entire container expands player on tap

​

PlayerController Integration

​

Core Operations

playerController.togglePlayPause()    // Play/pause current track
playerController.next()                // Skip to next track
playerController.previous()            // Skip to previous track
playerController.seekTo(position)      // Seek to position (ms)
playerController.setShuffle(enabled)   // Toggle shuffle mode
playerController.toggleRepeatMode()    // Cycle repeat modes
playerController.toggleFavorite()      // Like/unlike current track

​

State Collection

val playerState by playerController.playerState.collectAsState()
val track = playerState.currentTrack
val isPlaying = playerState.isPlaying

​

Related Components

• Track List - Track list item rendering
• Dialogs - Playlist and track management dialogs