robinnnnn / groove-machine Goto Github PK

A user should be able to navigate to the search page from playlist view

A sidebar that comes out from the left should display the main view to the right

• If playing, clicking somewhere within the track (maybe some icon) should pause the song
• Disc spinning should accelerate on start (rather than starting at max speed)
• Disc spinning should stop (or slow) on pause
• A different color should indicate paused state (red / yellow / orange / black?)

This is why device selection (#4) would be helpful

Would require persisting user info + playlists in a DB

This will make token rotation easier

Use onSubmit

Currently the controller shows up when the user moves their mouse near the bottom of the viewport. The controller itself is also quite broken.

It might be more fun to stick the GUI on the left side, that pushes the UI over to the right as it comes out (like a narrow sidebar). The next / previous tracks can be controlled by "up" and "down" arrows respectively (rather than left / right) to indicate vertical music traversal.

Maybe a standalone button that plays a random song in the playlist? Rather than having to click "shuffle" then "next"

Track progress indicator. Not sure what's the best way to display this if the GUI is vertical. Maybe a bottom-to-top bar that fills up?

Icon / indicator for toggling shuffle state

https://addyosmani.com/blog/react-window/

Support absolute inputs

This would be very difficult since we don't have direct access to live audio data as a stream, but we do have the analysis API. It could also just be generic and not tied to the beat (maybe inherit from genre)

Cool inspiration: https://tympanus.net/Development/AnimatedMeshLines/demo4.html

Add icon to lock sidebar in view

Displaying the full screen loader can be jarring, unless artificially slowed down.

This would also allow for better error handling UX

Should the UI automatically follow the currently playing track? More specifically, if one song ends and the next one begins, should the view scroll accordingly?

This might be annoying if a user is actively searching / scrolling through the UI during a track change.

Not sure how to replicate this, but when it does happen the setInterval network request retrieves the correct playback info; the view just doesn't update from props properly.

Update: can replicate by skipping to the end of a track and seeing the view not update to the next track. Sometimes it does update but it's slow to do so.

Update 2: could not reproduce as of 3/15

The app should support any playlist by ID / link.

The user should be prompted with an input bar upon successful first-time login, and this feature should be accessible at any future point.

Currently, pasting in /playlist/ABC still defaults to loading /playlist/XYZ upon successful OAuth. This is because custom query params are dropped during the OAuth exchange.

Would be neat to have a toggle for dark mode.

Proof of concept:

If a playlist contains many tracks, loading them all in the DOM may be prohibitively expensive.

However, not loading all tracks may throw a wrench in the "shuffle" or "skip to now playing" feature

App fails to route when deployed to prod

Refreshing the page often prevents token refresh as the first event happens after 10 minutes (#20). There are two potential solutions to this:

1. Easy: The refresh call should happen shortly after page load
2. Harder: Keep track of lastTokenIssueTime in localStorage, and refresh the token after a sufficient amount of time has passed since then (rather than sinceLastPageRefresh)

Configure prettier: https://prettier.io/

README should address:

• How to clone, install and run app locally
• Spotify developer setup
• Config / .env file
• Live dev mode vs. build prod + serve mode
• How deployment works
• Where the app is accessible online

Use refresh token to rehydrate access.

Would also be great to use a router to redirect the user from /#{access_token} to /home, with the access token cached in state / localStorage

App should have a fun error state when it fails to fetch a provided playlist link / ID

No idea what this should look like, but Spotify's FS view is a good precedent.

Arbitrary slice point of numVisibleAnimatedItems in <Tracklist /> causes loading to fail is a playlist has too few tracks

Steps to reproduce:

1. Close out of Spotify from various devices
2. Open web app
3. Start playing a track, and try to choose another device

Page title should be based on current route + playlist title; maybe even now playing track?

Sidebar should close entirely

There should be a separate way to search for a playlist within the main view, rather than being redirected to /search

Should be a grid of rounded squares.

Maybe album covers, artist, track title in each square?

in favor of inline search feature @ /playlist

Actual route where people can enter a playlist.

Relates to #9

Should be able to search for specific artists / tracks within a playlist, and the view should respond accordingly

A user should know that they are OAuth'd with Spotify. A logged in state should display:

• name
• profile pic icon?
• maybe a fruit emoji next to the name, where clicking on it rotates it to a different random fruit

The devices list should recognize:

• when a new device connects (or disconnects) - when a new device is selected and managed from another device
  ... and update the list accordingly.

Is there an onDeviceUpdate handler in any of the SDKs? If not, we may have to use polling.

Spotify has a bug where certain tracks in a playlist may have a null value. Example playlist: https://open.spotify.com/user/spotify/playlist/37i9dQZEVXbstzyFsCgtMd?si=jMtOScvkQmKGAPJK28_QuA

Enforce a height of 80px

• The top banner should feature the playlist image, description, # songs, total duration, creation date, etc.
• "Open in Spotify" link

Should have thinner rows

Controls

• spacebar: play / pause
• up / left: previous track
• down / right: next track
• r: play random song
• s: toggle shuffle

Controls UI
There should be some pop-up UI that displays the available keyboard shortcuts to the user

There should be an easy way to arrive at the currently playing track, which will be especially helpful for longer playlists.

• Function to take you to active track in vertically centered position
• Uses a smooth scrolling animation
• Scroll to active track on playlist mount, if applicable
• Cancel animation on manual scroll. Forked the unmaintained scroll-to and created @robinnnnn/scroll-to to address this issue
• Icon / purple dot / indicator that triggers this feature if active track is out of viewport
• Removal / disabling / greying out of icon if active track is within viewport

User should be able to skip to certain parts of a track.

This should be available either in the Track Container or Sidebar

• Clickable icon should open a list of devices
• Potential known bug with Chrome set to current device; needs more investigation

• Failing to play a track should display an error message on the track itself (some combination of red outline / box shadow / red text)?
• Handle unfounded device on initial play. What should the user be prompted to do here? Connect a device?
• In terms of UI, there should be a generic Error Banner component that comes in from the top

Some gif / placeholder should indicate that playlist data is being fetched from the server