Objectives:

• Opening playlists in the viewer (displaying its details from the server onto the header) and switching between them
• Uploading cover art (.png or .jpg) and converting/saving its base64 on the server
• Uploading songs (.mp3, .ogg, .wav, .flac) and converting/saving its base64 on the server

Objectives

Part 1

• Set up general functionality for shuffle and repeat buttons
• Create two useState hooks: songQueueOrdered and songQueueShuffled, both of which are string arrays of songs with each element in the format: "<song artist> - <song title>" Improved this with useReducer in pull request #24
• Work on the "Begin playlist" button in the header which starts playing the playlist's songs, playing them in an order depending on if shuffle mode is enabled or disabled
• Work on playing, pausing, and skipping the current song. Also, volume control and looping

Part 2

• Update the queue as the user uploads, removes, or rearranges a song. This can be accomplished by passing down the artistsText state from App.jsx as a prop into MusicController.jsx. Every time the user uploads, removes, or rearranges a song, the artistsText changes, and so, by putting props.artistsText into a useEffect dependency array, we can update the queues accordingly. However, for playlists that have only one artist, a different approach will be needed (still planning about this)
• Each song in the viewer has a play button, meaning that the app should allow the user to play a song of their choosing anytime they want. There is a function in MusicController.jsx called playNextSongByChoice that I created to get started on this.
• If the user removes a song that is currently playing, the music controller should skip it and play the next song in the queue. This can be checked for in the useEffect queue updater function called by the first task of Part 2.
• The music controller should stop playing music altogether and reset its reducers back to their initial states if the playlist currently playing has been deleted. Instead of making multiple dispatches to reset the reducer states, each reducer should have one more action.type called "reinitialize_state" that resets the reducers back to their initial state.

Part 3

• The ordered song queue should update every time the songs in the viewer body have been rearranged.

Loading screen feature

There are times where loading content from the server can be messy and/or take a while for the user to see. A loading screen would mitigate this issue. Use cases:

• Uploading multiple audio files

Glowing outline for current song

• In the playlist viewer body, A song's outline should have a glowing outline animation depending on whether or not it is the current song in the music controller. The color of the outline should be a bright, neon blue

Minimize side menu

• Users should be allowed to minimize the side menu. The reason this feature could be needed is because as the browser window width decreases, it becomes more difficult to read the playlist's name and other content in the viewer. The app logo should be replaced with a side menu minimize-toggle button.

Home screen

• When the app is first opened or a currently viewed playlist list is deleted, A majority of the screen is either white or dark grey depending on the color theme. Placing a big app logo that was removed from the above task into the blank space would be needed.

Move all Data Fetching from JSON-Server to new database (undecided)

• JSON-Server is only suitable for storing string data. For storing anything larger than that (images, audio, videos, etc.). Will need to find a new database and revisit tasks 2 and 3 of issue #9.

• Have yet to decide which database to use. Potential ones to look into:

  1. LocalForage.js library
  2. Dexie.js/IndexedDB