ufosc/Jukebox-Frontend

Jukebox Redux Store

Opened this issue · 2 comments

Info

A "Jukebox" is an object that stores information related to the track queue, the current device, etc. Currently, the jukebox store just stores all available jukeboxes for the user. Ideally, the store should also include the currently selected jukebox, and access to the currently active spotify account. It should also be able to set the active jukebox, and set the active spotify account for that jukebox.

Tasks

Active Jukebox

  • Add currentJukebox to redux slice:
//...
initialState: {
  //...
  currentJukebox: null as IJukebox | null
}
//...
  • Create setCurrentJukeboxReducer in slice reducers
  • Create setCurrentJukebox to jukebox actions. This action should store the currently active jukebox in local storage (look at the users store to see how auth is stored in local storage), you probably only need to store the jukebox id.
  • Create selectCurrentJukebox selector
  • Ensure that the current jukebox is synced when all jukeboxes are fetched.
    • If there is no value in local storage, set current jukebox to the first in the list.
    • If there is a value in local storage, find the jukebox with that id in the list and set it active.
    • If the jukebox is not in the list (ie the user was removed from the club, and from the jukebox), then set current to the first jukebox in the list
    • Every time the current jukebox is changed/set, update the id in local storage
    • The only time currentJukebox is null is when the user is not a part of any clubs that have jukeboxes

For now, the user can have a different "current" jukebox for separate devices.

Jukebox Link

Note: A jukeboxLink is an object that attaches a spotify account to a jukebox, and allows a user to connect one spotify account to multiple jukeboxes (but only one can control playback at a time)

  • Refactor spotifyAuth attribute in the club store to the jukebox store, rename it activeSpotifyAccount
  • Create selector that selects available jukebox links for active jukebox
  • Refactor selector selectClubSpotifyAuth from clubs store to selectActiveSpotifyAccount in the jukebox store
  • Refactor thunk thunkFetchClubSpotifyAuth in clubs store to thunkFetchSpotifyAccount in jukebox store.
    • Side note: the network function currently asks for jukeboxId, but in the clubs thunk it is given the clubId - which means it may or may not work currently depending on if the ids are the same. That was a mistake.
  • Create thunkSetActiveJukeboxLink thunk that takes in a jukebox id and jukebox link object, makes appropriate network calls, returns new spotify account object. Create an action that abstracts this thunk (like setActiveJukeboxLink).

Integration & Spotify Connection

  • In the top bar, instead of listing clubs, list jukeboxes
  • When a user selects a jukebox, set that jukebox to active
    • When active jukebox changes, so should available jukebox links, and active spotify account
    • Note: this will cause issues when the active jukebox is switched, but is also in the middle of playback. We may need to disable selection if the spotify player is playing something

@JonathanHooth There's a lot to this issue, but it should be a bit more straight forward than the tracks store issue. Thought you might prefer this one over that one.

Changed "active" terminology to "current" to align with implementation for clubs and tracks.