Spotify for VS Code

Control playback and browse your library without leaving Code

Comment

Inspiration

Music and code. Name a more iconic combo, we'll wait...

Sometimes when you're wired in and working through some code, you have a specific song in mind to really get your head in the right place. It can be a hassle to:

  1. Go through your windows
  2. Find Spotify
  3. Search for the track you want
  4. Press play
  5. Go back to VS Code
  6. Hope you don't lose your train of thought

What if there was a better way?

What it does

This VS Code extension lets you control Spotify playback and navigate your library without leaving the Code window. Spotify for VS Code adds:

  • Status bar playback controls
  • History Panel
  • List of Liked Tracks Panel
  • Followed Artists Panel
  • Created Playlists Panel
  • Saved Albums Panel

How we built it

This extension is built in TypeScript with the VS Code API and spotify-web-api-node, a lightweight wrapper around the Spotify Web API.

Challenges we ran into

Team Coordination: All three of us live in different time zones on both hemispheres, which is both a blessing and a curse.

Spotify Web API limitations: The Spotify Web API is missing some key features like the ability to access a user's queued tracks, or the ability to play a specific track, album, or playlist (seriously!). It is also currently only available for Spotify Premium subscribers.

VS Code TreeView API: VS Code offers a powerful TreeView API for rapidly implementing sidebar panels. However, all nodes in a TreeView have to be the same type. Making a type that was flexible enough to encompass both albums/artists/playlists and the tracks that belonged to them was our most significant technical challenge.

Learning: All three of us are completely new to TypeScript and the VS Code API, so we jumped right into the deep end with this project.

Accomplishments that we're proud of

VS Code Treeview API A major source of pride was figuring out how to create a single class that could represent what normally would be two separate classes in order to bypass the restriction on the TreeDataProvider API from VS Code which allows only the objects of the same type to be used to create and return 'TreeViews'.

VSCode Documentation VS Code's documentation, like the documentation for many great open source projects, can be lacking in clarity. We are very pleased with how quickly we were able to ingest the documentation and get to coding.

Life Events The MLH Externship Fellowship is a 20 hour a week commitment, done on top of school or work. During this project, our team had a members in finals and one who moved! We all feel pretty great about our time management.

What we learned

Typescript: All three of us were new to Typescript and definitely learned a lot about it's gems and features along the way! The choice to use TypeScript was a conscious one to challenge ourselves and learn as much as possible during this hackathon.

Nullish Coalescing: This was a new concept we learned which is a dope alternative to the logical OR operator which only defaults to the right hand operand when the left hand operand is null or undefined while the logical OR operator would default to the right hand operand when the left hand is any falsy value. Very handy!

Github: Some of our members had less hands on experience using Github than others, and the others graciously and kindly taught best practices for pull requests and code reviews as we went along.

What's next for Spotify for VS Code

  • Public release (pending API key management system)
  • Add searching for tracks
  • Extending the status bar controls with shuffle/repeat options, volume, and the currently playing track
  • Persisting user authorization across sessions
  • Compatibility with Spotify Free users using Spotify's AppleScript and dbus interfaces

Built With

Share this project:

Updates