Spotify sidebar, with all the panels expanded
Status bar playback controls
History panel, demonstrating "infinite scroll"
Likes panel, with refresh button highlighted
Saved Albums panel, with Add to Queue button highlighted
Followed Artists panel
Playlists panel, highlighting the playlist play button
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:
- Go through your windows
- Find Spotify
- Search for the track you want
- Press play
- Go back to VS Code
- 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