Skip to content

[Bug]: "Play Next" button not playing song immediately #185

Description

@san-rizz-777
Bug_issue_music_app_play_next.mp4

App Name: web (Music Player Frontend)

Describe the bug
The "Play Next" feature was not functioning - when clicking the "Play Next" button in the song menu, the selected song was not playing immediately. Instead, it was only being added to the queue without starting playback. Additionally, no toast notification was appearing, and in some cases, the application showed a "Failed to play next" error.

To Reproduce
Steps to reproduce the behavior:

  1. Go to any page with songs (e.g., home page, album page, artist page)
  2. Click on the three-dot menu (ellipsis icon) on any song
  3. Select "Play next" from the menu
  4. Observe that the song does not start playing immediately
  5. Check that the toast message either doesn't appear or shows "Failed to play next" error

Expected behavior
When clicking "Play Next":

  • The currently playing song should be moved to the front of the queue
  • The selected song should start playing immediately
  • A success toast notification should appear saying "Playing Next!"
  • The player should update to show the new song as the current track

Root Cause
The addToQueueNext function in the Zustand store (zustand/store.js) was only modifying the queue array without:

  1. Updating currentSong to the new song
  2. Setting musicId to the new song's ID
  3. Setting isPlaying: true to trigger playback
  4. Properly handling null/undefined state values (queue, playedSongIds)

Solution Applied
Updated the addToQueueNext function to:

  • Check if a song is currently playing
  • If nothing is playing: set the new song as current and start playback
  • If something is playing: save the current song to the queue and immediately play the new song
  • Added proper error handling and null checks
  • Added validation for song object (must have valid id)

Desktop:

  • OS: Not specified
  • Browser: Chrome

Smartphone:

  • Device: Mobile device (tested with mobile drawer interface)
  • OS: Not specified
  • Browser: Chrome

Additional context

  • The issue affected both mobile (drawer) and desktop (menubar) interfaces
  • A Firebase connection warning was also present but was unrelated to this specific bug
  • The bug was present in both shuffle and normal playback modes
  • The fix maintains proper queue state for both shuffle and non-shuffle modes
  • Added comprehensive error logging for easier future debugging

Related Files Modified:

  • zustand/store.js - Updated addToQueueNext function
  • components/Menu.jsx - Added error handling to handleAddToNext (optional)

Status: Resolved

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions