Skip to content

Roadmap

Jump to bottom
Fred B edited this page Dec 7, 2020 · 30 revisions

Mobile & Touch

  • have the virtual keyboard NOT appear on search page if search results are already in the page
  • Clicking on the header scrolls back to top

About navigation

  • private routes
  • getting onto a new page must systematically scroll the Body component back to top

Header

Home page

  • the user's recent tracks,
  • the user's top tracks,
  • the user's saved tracks

Footer

When a track is clicked and none of the user's devices are active, the spotify api throws an exception with the following message : "status" : 404,↵ "message" : "Player command failed: No active device found"

  • leverage this exception to contextually explain to the user that: - Spotify must be playing music in some other device, using the same account they signed in, into my app - Also explain that Spotify account type must be premium (restricted by Spotify commercial policy and enforced through API response)

    • will display the message to the user at that point, meaning, when any of the remote control button are pressed and an exception is thrown by the API.
    • should this message be restricted once per session only, or everytime this happens ?
    • Must modify code because currently the message is displayed only when PLAY button is pressed (in SpotifyRemoteControl component)
    • Modify code so that the Remote Control Playing Track area appears not only when receving websocket update via the Playback SDK, but also when any track is clicked, IF the above API exception is not caught.

  • Must also warn the potential recruiter/user that the Spotify Web Playback API is in Beta at the moment, and that breaking changes can happen at any time

Search Page

  • User types search terms in the search field
  • Results will be displayed for Albums, Artists and Playlists

Album Results

  • Clicking on an album navigates to the ItemPage component => /album/:id

Artists Results

  • Clicking on an artist navigates to the artist's page on Spotify direclty

Playlists Results

  • Clicking on an playlist navigates to the PlaylistPage ItemPage component => /album/:id

Sidebar

  • ellipsis for playlists names (materialUI )
  • clicking on home icon => navigates to PlaylistPage HomePage component
  • clicking on search icon => navigates to SearchPage
  • clicking on library icon => Library Page
  • clicking on a playlist => navigates to PlaylistPage ItemPage component

ItemPage component

  • Infinite loading of tracks

This component must be composed of :

  • PlaylistBanner ItemBanner component

  • PlaylistToolbar ItemToolbar component

  • TrackList component

  • __If Item on display is a Album __

    - [ ] data specific to album to display :
    - album_type
    - genres -> [].join(",") just like `Artists` component
    - artists
    - label
    - release_date
    - tracks.items

  • needs a new async action to get its data

ItemToolbarcomponent

Play Icon

Clicking this icon starts playing the playlist or album on display :

  • from a randomly selected track if shuffle is actived
  • from first track of list otherwise

Heart Icon toggle

in ItemPage > ItemToolbar

  • __If Item on display is a playlist __, clicking on this toggle follows/unfollows it (according to the Spotify API)

    • is owner -> don't diplay heart

    • if not owner -> isFollower : yes/ no => determine the status of the heart toggle

    • when playlist is followed, it must appear in the list of user's playlist (sidebar & user library)

  • __if Item on display is an album __, clicking on this toggle saves/unsaves it (according to the Spotify API)

    • Note: this saved album will not actually show anywhere in the app, unless a new section of saved albums is available somewhere in the app => the API wrapper method getMySavedAlbums allows to easily obtain this list of albums.

  • animate the heart svg on toggle ? I did come accross the spotify heart animation some months ago, but I could find it again...so sad !!!

in TrackRow

  • click on the heart toggle to place the track in the saved tracks list

TrackList component

  • Have a Selected state for the track actually playing
  • displays the tracks of the playlist or album on display

TrackRow component

From any page that displays tracks, users can :

  • click the track to start playing it
    • loads it in the Track area of the remote control
  • click on the more icon to choose an action

More Icon actions

In order top-bottom:

  • Add to saved tracks
  • Add to playlist -> a playlist selector must allow for this
  • Add to queue
  • create new radio + featured page
    • radio section based on selected track
    • display track title radio was based on
  • Copy track link to clipboard (React provides Synthetic events for this BTW)

PlaylistSelector

  • Display a list of user's owned playlists to chose from, for adding tracks to it
  • Provides the option to create a new playlist to add the tracks to

FeaturedPage

  • provide option to create new playlist from featured tracks. Note : prior to implementation, check on the number of http requests this would potentially launch, ie, does the API require a call for each track, or can several tracks be added though a single API call ?

UserLibraryPage

  • this page displays a list of user's playlists represented by the ItemCover component
  • Clicking on a playlist => navigates to ItemPage component

ItemCover component

  • Each is the typical squared cover presentation like here

About Logging In

  • Once the user is connected, the fact that they are signed in must persist even after a browser tab closed/re-opened
  • Handle Spotify access token expiry => every time a new page is navigated to, token validty is checked, resulting to a redirection to the login page when invalid, providing a friendly "session expired" type of message to the user.

Log Out

  • The user must be able to disconnect
    • redirects to the Log In page upon logging out

Page not found

Loader

  • Use this animation
    • once per session only
  • Use only the logo part of this animation has the loader while components are fetching remote data
Clone this wiki locally