Skip to content

Roadmap

Jump to bottom
Fred B edited this page Nov 24, 2020 · 30 revisions

Mobile & Touch

Hover states

  • Remove all hover states for playlist and album covers, tracks, etc

PWA

Offline capabilities

  • CRUD operations on playlists which synchronize with the realtime cloud-based Firestore

About navigation

  • route animated transitions ?
  • 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

Volume slider

  • have the volume icon change according to the volume => In fact, when volume is changed from the app, other Spotify client apps reflect the change, but I have decided that the volume of my app should be independent to provide a guaranteed control of volume by the user (to avoid potential loud music playing as spotify defaults to 100% loudness)

Player buttons

Note : remember that currently the Spotify auth uses no scope. They will be needed to use the remote control functionalities I suppose.

Using the spotify API, implement the following functionalities :

  • shuffle
  • previous
  • play
  • next
  • repeat
  • queue button => the API does not allow to retrieve this information, but it is possible to add a track to the queue

Search Page

  • have the virtual keyboard Not appear on search page if search results are already in the 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

  • make sidebar a material ui responsive drawer drawer
  • infinite loading of playlists
  • 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 playlist __,

    • CRUD operations on playlist detailed information. Note: user must be the owner of the playlist ot be able to do so though

  • __If Item on display is a Album __

    • CRUD operations must be disabled
    • Track reordering must be disabled
    • 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
    • drag and drop to re-order
    • multiple row selection for saving as playlist or to add to an existing playlist

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

  • infinite loading for playlists
  • 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