benwiley4000 / cassette

📼 A flexible media player component library for React that requires no up-front config
https://benwiley4000.github.io/cassette/styleguide
MIT License
185 stars 28 forks source link

Correct way to set pause after a track is finished but before jumping to the next #512

Open tyv opened 1 year ago

tyv commented 1 year ago

hey, thanks for a very cool lib, it saves me a lot of time!

I am trying to build next behavior on top of it where playlist has some special tracks that player should skip (I use onForwardSkip()) by default, and play only if user clicks on one, so playlist, simplified, looks like:

5. - skip
4. - play
3. - play
2. - skip
1. - play

what I am trying to achieve is when we come to the 4th item, I know it is the last that should be played and I want to play it and then stop (so the activeTrackIndex points to last played).

and I am struggle doing it via API as activeTrackIndex updates obviously after track change, onTogglePause(true) I can call only when activeTrackIndex updates. I would love to have some kind of onBeforeTrackChange or suggestion how to achieve the same (yes, I can take track length and call onTogglePause(true) asynchronously, but it's weird, right?).

any suggestions?

benwiley4000 commented 1 year ago

I have to say the scenario you describe seems unusual, but if this is what you want, I think it can be achieved by keeping two different copies of your playlist.

fullPlaylist contains everything. filteredPlaylist is the playlist that doesn't include the tracks to skip. You should create filteredPlaylist by filtering the objects from fullPlaylist.

As for how to use them... You will use filteredPlaylist as your playlist argument to to cassette, so under normal circumstances, the skipping takes care of itself But for your UI for playlist selection, you use your fullPlaylist that you access yourself. If the user does select one of the skipped tracks, you will need to first update the variable containing which of the playlists to pass to cassette. You will then need to change the track after the next update.. there are different ways to achieve this with React.

And when the track is changing again later, you will need to change the playlist back.

I realize what I just described is a bit complicated, and if it works better for you to do the weird asynchronous onTogglePause, maybe you should try that? I am not closed to adding new events in the future, but I don't understand the use case enough to recommend that immediately.