[Feature Request] useQueue hook

[Saphirah]

What is the need and use case of this feature? Currently there is no way to receive UI Updates when the Queue changes. Therefore it is not possible to create a reliable visualization of the queue without a custom solution.

Describe the ideal solution A track player event like PlaybackQueueChanged would be great. In addition, a hook like useQueue would be a nice addition, that automatically subscribes to the event and returns the current queue.

Describe alternatives you've considered For the time being i created my own solution, where i replaced all queue functions with my own implementation, which then calls an event. This is not ideal though, because now i am unable to use any of the Track Players queue functions without breaking my code.

If i can assist in any way or form, i would be glad to do so. Sadly i have zero experience on the native side of RN.

[lovegaoshi]

this is because there is no other way to change the queue (at least not exposed yet) except u calling various setQueue methods. ie you have complete control of what the queue is, at any single point of time.

what u should do is wrap ur various queue management methods into a hook, and use that hook to update ui.

[Saphirah]

That is what i am doing right now. Still, in practice, one would call TrackPlayer.add() from potentially anywhere in the code. In our current project we have over 43 occurences of said function.

That's why i created my own override for the TrackPlayer.add() function, which basically looks like this:

export async function AddToQueue(tracks: AddTrack[], insertBeforeIndex?: number){
    await TrackPlayer.add(tracks, insertBeforeIndex);
    EventRegister.emit('TrackPlayerQueueChanged', await TrackPlayer.getQueue())
}

But this approach requires a custom implementation for every TrackPlayer Queue function i want to use, while also preventing my coworkers to go by the official documentation. Which makes the usage of the library much more complicated than it has to be.

TrackPlayer is built for queue based music player apps. Every music player app that uses a queue needs some kind of visualization, so this is a common scenario. Wouldn't it make sense to add this?

Before i waste time with a PR, i would like to know if you would even consider adding this, or if this goes against your design philosophy

[lovegaoshi]

again as there is no internal way to manipulate the queue, u always have total control of what the queue is and thus the queue should be a global state, either implemented via zustand or context

then u wrap all queue management u use into a hook, and ur ui will respond to that queue state. this is the more "react" way for the react fanppl

but if u really want to go the listener route thats ok too. there probably is a queue changed listener natively if u wanna diy.

On Tue, Nov 12, 2024, 8:25 AM Philipp Erber @.***> wrote:

That is what i am doing right now. Still, in practice, one would call TrackPlayer.add() from potentially anywhere in the code. In our current project we have over 43 occurences of said function.

That's why i created my own override for the TrackPlayer.add() function, which basically looks like this:

export async function AddToQueue(tracks: AddTrack[], insertBeforeIndex?: number){ await TPlayer.add(tracks, insertBeforeIndex); EventRegister.emit('TrackPlayerQueueChanged', await TPlayer.getQueue()) }

But this approach requires me to create my own implementation for every TrackPlayer Queue function i want to use, while also preventing my coworkers to go by the official documentation. Which makes the usage of the library much more complicated than it has to be.

TrackPlayer is built for queue based music player apps. Every music player app that uses a queue needs some kind of visualization, so this is a common scenario. Wouldn't it make sense to add this?

Before i waste time with a PR, i would like to know, if you would even consider adding this, or if this goes against your design philosophy

— Reply to this email directly, view it on GitHub https://github.com/doublesymmetry/react-native-track-player/issues/2400#issuecomment-2470983284, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZMOVVTXLFR5OJNAT44CVX32AITYDAVCNFSM6AAAAABRUL4TBSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZQHE4DGMRYGQ . You are receiving this because you commented.Message ID: @.*** com>

[Saphirah]

Alright then i am closing this. Thank you for your time 👍🏻