Roadmap v2

Migrations

• MUI (Material-UI) v4 to v5 : official migration guide

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
    

Sidebar component

• virtualize the list of options | working example 1: codesanbox | working example 2: repo

TrackList component

• virtualize the list of tracks
• 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
• Take this repo as the starting point (click here to see the Live Demo, then click on the last menu item, and finally click on the Tutorials option to see the desired animated transitions)

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 ?

Spotify Playback State SDK

Should I restore this ?

The reasons I took it out of v1:

• this SDK is still experimental -> 1) it brings a lot javascript warnings and errors 2) will bring unstability and crashes to my app in the short term, resulting in non-stop maintenance until at least it reaches a stable version.
• this SDK is very eager in terms of the extra numbers of HTTP requests, draining battery life in a breeze ! Why ? Although it is using websockets, the data this tunnel brings isn't in a format which is consistent with their Web API. So, to make up for that, I need to call the Web API to get consistent data formats for the playbackState's playing track information, and this, every time the app receives data via this experimental SDK.

In any case, here is the code:

in SpotiftRemoteControl/index.jsx

import { DEVICE_NAME, useSpotifyWebPlaybackSDK } from "libs/spotify";
import { getToken } from "utils/localStorage";
import { fetchCurrentPlaybackState } from "_redux/footer/actions";
...

  useSpotifyWebPlaybackSDK({
    deviceName: DEVICE_NAME,
    token: getToken(),
    onPlayerStateChanged: (playbackState) => {
      //Normally, i would use the values of the `playbackState` object returned here, however, the Spotify Playback SDK is in BETA at this very moment, and the data is not consistent with the data provided through the Spotify Web API.  Therefore, I make here yet another request, just to get consistent data object types
      dispatch(fetchCurrentPlaybackState());
    },
  });

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)

PWA

Offline capabilities

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