SynQApp / Extension

Your music companion for the web, with a portable mini player and the ability to listen to any music link on your preferred service!
https://www.synqapp.io
Apache License 2.0
24 stars 2 forks source link

Queue controls and minor tweaks #13

Closed tekkeon closed 11 months ago

tekkeon commented 11 months ago

Overview

This PR contains the UI and controller logic for controlling the current music service queue. Specifically displaying the queue of each music service and then when a user clicks on a queue item, automating starting that song for each service.

Spotify

Spotify required the most amount of work in terms of controller implementation:

Get Queue w/Current Track

The mini player queue items have a secondary actions menu popup with the option to view the song on the music platform or generate a SynQ Link. However, we don't have a place for those actions for the currently-playing track. As such, I wanted the currently-playing track to show in the queue - it also gives a clearer indication of the order compared to the current song. YouTube Music and Apple Music both already have this by default, but Spotify and Amazon Music do not, so their getQueue implementations were updated to push the current track into the start of the queue.

Duplicate Track Logic

In order to implement queue track selection, we would either need the index or the ID of the song to play. The index isn't as reliable as the queue sometimes takes a few seconds to update after a new song starts playing, so just basing it on the index could mean clicking a song in the queue plays a different song. The ID is more reliable for playing the right song, but if there are multiple of the same track (and same track ID) in the queue, then we won't know which one was selected by the user. The duplicateTrackIndex represents the nth track of that ID to play. For example, if there were three of the same track in the queue and the user selected the first one, duplicateTrackIndex would be 0. If they selected the second, it would be 1, etc. This solves both of our needs of making sure we select the right track and the right instance of that track.

Mini Player UI

image