search

boostup / react-spotify-clone-app

A full-blown application that looks like Spotify, I present to you SpotifLy. It actually allows you to sign in to your account, get access to your own playlists, search the Spotify Artists, Albums, and Playlists. And Spotify premium account users can even use this app as a remote control!
https://jovial-mccarthy-6875cf.netlify.app/
0 stars 1 forks source link

Todo #1

Open boostup opened 3 years ago

boostup commented 3 years ago

Bugs

boostup commented 3 years ago

Quick note taking

General work

Further to the integration of the new SpotifLy backend

Token Refresh

  if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
    headers[
      'Authorization'
    ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
  }
boostup commented 3 years ago

To research

When an item in the list below is checked, i means the research was done, but has not necessarily been integrated yet into code base.

boostup commented 3 years ago

Clipboard

API field selection

//fields for playlist
id,name,description,images,owner(display_name),primary_color,type,tracks(limit,next,offset,total,items(track(id,name,album(album_type,artists),is_local,is_playable,popularity,duration_ms,explicit,artists)))

//@TODO fields for albums

Spotify API scopes

const scopes = [
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-read-playback-state",
  "user-top-read",
  "user-modify-playback-state",
];

Me / Personnalisatin

Music info

getNewReleases( getAlbum( getAlbumTracks( getTrack( getTracks( trackIds: string[], getArtist( getArtistAlbums( getArtistTopTracks( getArtistRelatedArtists( getNewReleases(

Playlist management

Following

isFollowingArtists(
followPlaylist(
unfollowPlaylist(

unfollowArtists(

Devices

getMyDevices():

Playback

getMyCurrentPlaybackState(
getMyCurrentPlayingTrack(
transferMyPlayback(
  deviceIds: string[],
  // for progress bar:
  // - currentplaybackState?.item.duration_ms
  // - currentplaybackState?.progress_ms

  // currentplaybackState?.repeat_state: track, context, off
  // currentplaybackState?.shuffle_state: true, false
  // currentplaybackState?.item.type: "track"
  // currentplaybackState?.currently_playing_type;
  // currentplaybackState?.timestamp;

  console.log("IS PLAYING", isPlaying);
  console.log("VOLUME PERCENT", volume);
  console.log("MUTE STATE", muteButtonState);
  console.log("SHUFFLE", shuffle);
  console.log("REPEAT", repeat);
  console.log("TRACK NAME", currentTrackName);
  console.log("ALBUM IMAGE", albumImage);
  console.log("ALBUM NAME", albumName);
  console.log("ARTISTS", artists);

    // => condition to reach bottom in case I need it: `element.scrollHeight - element.scrollTop === element.clientHeight`

    togglefollowPlaylist,
    isPlaylistFollowedByUser,

  const isFollowed = isPlaylistFollowedByUser({
    playlistId: id,
    userId: user.id,
  });

{/* <FavoriteIcon className="playlistToolbar__favorite" fontSize="large" /> */}

  <p>{/* {id} * {playlist?.owner.id} * {user.id} */}</p>

  import QueuePlayNextIcon from "@material-ui/icons/QueuePlayNext";
  import ExitToAppIcon from '@material-ui/icons/ExitToApp';
  import ShuffleIcon from "@material-ui/icons/Shuffle";
  import RepeatIcon from "@material-ui/icons/Repeat";
  import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";  

  // const userId = user?.id;
  // const isPlaylistOwner = playlist?.owner.id === userId;

      // userId &&
    //   !isPlaylistOwner &&
    //   isPlaylistFollowedByUser({ playlistId: id, userId }, dispatch);

            {/* <p>
            {id} * {playlist?.owner.id} * {userId}
          </p> */}

          //Toolbar

                    // isOwner={isPlaylistOwner}
          // isPlaylistFollower={}
          // toggleFollowPlaylist={}