Spotify Pocket (Winamp alike)

Spotify minimalist player.

Demo Video:

demo.mp4

This app idea came to me after getting annoyed with the original Spotify App, which is slow and renders too many useless things on the screen. When I was younger I used Winamp, which was a simple app that just shown our songs and played it.

Also I used this app to improve my skills in Rust and React.

Tools:

• Rust (back-end)

  • Tauri 2.0
  • Reqwest
  • Axum
  • Tokio

• React (front-end)

  • TypeScript
  • Spotify API
  • Spotify SDK
  • React Router
  • React Query (TanStack)
  • Zustand

TODOS:

Fixes:

• Fix on song start playing seek counter buggy (on start 0.1 resets to 0.0 for no reason, and on song ending does 1 sec more).
• Fix Login behaviour.
• Fix scroll search tags.
• Fix Playlist sticky header and outside scrolling.
• Fix playlist when return album and tracks instead (ex: best of FKA twigs.).
• Fix on idle app stop working (token expired).
• Fix playlist name scrolling-text.
• Fix volume bubble dynamic left
• Graph page that shows user's top items (Wrapped style).
• Organize Rust functions.
• Fix TypeScript/Rust errors for build.
• Fix App on build (get songs and player not working).
• Make No data found component to show on data null.
• Follow rules for publishing (https://developer.spotify.com/documentation/design#using-our-content).

Design:

• Design SettingsPage
• Design Log out button

Profile Preferences:

• [~] Settings Page (Log out).
• Log out button
• Dark/Light mode
• Custom Themes
• User Options
• Player Opacity inside User Options.
• Background Image inside User Options.

New Features:

• Searched songs check if already liked (https://developer.spotify.com/documentation/web-api/reference/check-users-saved-tracks).
• Playlist songs check if already liked.
• Get user profile info (https://developer.spotify.com/documentation/web-api/reference/get-users-profile).
• Get user top items (https://developer.spotify.com/documentation/web-api/reference/get-users-top-artists-and-tracks).
• Create context menu (right click button).
• Add song to liked/playlist.
• Remove song from liked/playlist.
• Alert Component (like/unlike song).
• Make player custom buttons on hover windows taskbar.
• Search songs.
• Search playlists.
• Search albums.
• Search podcasts.
• Search episodes.
• Filter button (search inside liked songs).
• Play specific searched albums/playlists/podcasts.
• Get recommendations (https://developer.spotify.com/documentation/web-api/reference/get-recommendations).
• Follow Playlist/Artist.

Done

• Spotify Authentication (API).
• Spotify Player (SDK).
• Spotify auto connect to device.
• Spotify Auto refresh token.
• Frontend loading screen (wait for Auth + Connect Device).
• Get Liked Songs (top 50 working).
• List Liked Songs (Test showing top 50 working).
• Play/Pause/Next/Prev buttons.
• Volume slider.
• Song timestamp slider.
• On click set specific song.
• Refactor Spotify Playback SDK to global state (useContext).
• On token expired refresh token automatically.
• Refactor get songs to use React Query.
• Refactor react code (organize in components/containers).
• Refactor Player Controls design.
• Refactor List Songs design.
• On Scroll down request + 50 songs.
• Add repeat button.
• Add shuffle button.
• Make proper Loading component for multiple uses (animation spinning);
• Create navbar
• Refactored SpotifyPlayer & Auth from useContext to Zustand.
• Fix fail to change song 401 on token expired.
• Fix on user not logged, render only login page.
• Design login page.
• New Tab (Playlists) React Router maybe.
• Search User's Playlists.
• Select playlist to play.
• Get songs from playlist (and play song).
• Search songs and play it.
• Background Image.
• check songs that don't get active for some uri reason (childish gambino - me and your mama)