Roadmap v2

Footer

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

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)

ItemPage 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

import React, { useState } from "react";
import EditIcon from "@material-ui/icons/Edit";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import ContextualMenu from "components/ContextualMenu";
...

  const menuOptions = [
    {
      icon: EditIcon,
      title: "edit playlist (under construction 👷)",
      fn: () => { },
    },
  ];

  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

... return (
      <MoreHorizIcon className="itemToolbar__more" onClick={handleClick} />
      <ContextualMenu
        menuId="item-toolbar-menu"
        menuOptions={menuOptions}
        anchorEl={anchorEl}
        onClose={handleClose}
      />
)

• __If Item on display is a Album __

  • CRUD operations must be disabled

  • Track reordering must be disabled

  • data specific to album display :

    - album_type
    - genres -> [].join(",") just like `Artists` component
    - artists
    - label
    - release_date
    - tracks.items
    

TrackList component

• virtualized list
• have a Selected state for the track actually playing
• drag and drop to re-order
• multiple row selection for saving as playlist or to add to an existing playlist

More Icon actions

• Add to playlist -> a playlist selector must allow for this

import PlaylistAddIcon from "@material-ui/icons/PlaylistAdd";
...

          {
            icon: PlaylistAddIcon,
            title: "add to playlist... (in construction)",
            fn: () => { },
          },

• Copy track link to clipboard (React provides Synthetic events for this BTW)

import ShareIcon from "@material-ui/icons/Share";
...
          {
            icon: ShareIcon,
            title: "copy link (in construction)",
            fn: () => { },
          },

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 ?

PWA

Offline capabilities

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